igniteui-webcomponents 6.1.1 → 6.2.0

package/components/common/mixins/forms/associated.js

@@ -5,9 +5,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
+import { addInternalsController } from '../../controllers/internals.js';
 import { addSafeEventListener, isFunction, isString } from '../../util.js';
+import { InternalInvalidEvent, InternalResetEvent, } from './types.js';
+const INVALID_STATE = 'ig-invalid';
+const eventOptions = {
+    bubbles: false,
+    composed: false,
+};
+function emitFormInvalidEvent(host) {
+    host.dispatchEvent(new CustomEvent(InternalInvalidEvent, eventOptions));
+}
+function emitFormResetEvent(host) {
+    host.dispatchEvent(new CustomEvent(InternalResetEvent, eventOptions));
+}
 function BaseFormAssociated(base) {
     class BaseFormAssociatedElement extends base {
+        get _hasUserInteraction() {
+            return this._touched || this._isFormSubmit;
+        }
+        get _shouldApplyStyles() {
+            if (this._isExternalInvalid) {
+                return true;
+            }
+            return (this._invalid && this._hasUserInteraction && !this._isInternalValidation);
+        }
         get __validators() {
             return [];
         }
@@ -19,11 +41,11 @@ function BaseFormAssociated(base) {
             return this._disabled;
         }
         set invalid(value) {
-            this._invalid = value;
-            this.toggleAttribute('invalid', Boolean(this._invalid));
+            this._isExternalInvalid = value;
+            this._setInvalidStyles();
         }
         get invalid() {
-            return this._invalid;
+            return this._isExternalInvalid || this._shouldApplyStyles;
         }
         get form() {
             return this.__internals.form;
@@ -39,54 +61,60 @@ function BaseFormAssociated(base) {
         }
         constructor(...args) {
             super(args);
+            this.__internals = addInternalsController(this);
+            this._isFormSubmit = false;
+            this._isInternalValidation = false;
+            this._touched = false;
+            this._isExternalInvalid = false;
             this._disabled = false;
             this._invalid = false;
-            this._dirty = false;
             this._pristine = true;
-            this.__internals = this.attachInternals();
             addSafeEventListener(this, 'invalid', this._handleInvalid);
         }
         connectedCallback() {
             super.connectedCallback();
-            this._dirty = false;
-            this._updateValidity();
+            this._pristine = true;
+            this._touched = false;
+            this._validate();
         }
-        _handleInvalid(event) {
+        async _handleInvalid(event) {
             event.preventDefault();
-            this.invalid = true;
-        }
-        _setInvalidState() {
-            if (this._dirty || !this._pristine) {
-                this.invalid = !this.checkValidity();
+            this._invalid = true;
+            if (this._isInternalValidation) {
+                this._isInternalValidation = false;
             }
+            else {
+                this._isFormSubmit = true;
+                emitFormInvalidEvent(this);
+            }
+            this._setInvalidStyles();
+            this.requestUpdate();
+            if (this._isFormSubmit) {
+                await this.updateComplete;
+                this._isFormSubmit = false;
+            }
+        }
+        _setInvalidStyles() {
+            this.__internals.setState(INVALID_STATE, this._shouldApplyStyles);
         }
         __runValidators() {
             const 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;
                 }
             }
+            this._invalid = validationFailed;
             return { validity, message };
         }
-        _setDefaultValue(current) {
-            this._formValue.defaultValue = current;
-        }
-        _restoreDefaultValue() {
-            this._formValue.setValueAndFormState(this._formValue.defaultValue);
-            this._updateValidity();
-            this.requestUpdate();
-        }
-        _validate(message) {
-            this._updateValidity(message);
-            this._setInvalidState();
-        }
-        _updateValidity(error) {
+        _validate(userMessage) {
             let { validity, message } = this.__runValidators();
             const hasCustomError = this.validity.customError;
             if (validity.valueMissing) {
@@ -95,22 +123,43 @@ function BaseFormAssociated(base) {
                     customError: hasCustomError,
                 };
             }
-            if (hasCustomError && error === undefined) {
+            if (hasCustomError && userMessage === undefined) {
                 validity.customError = true;
                 message = this.validationMessage;
             }
-            else if (hasCustomError && error === '') {
+            else if (hasCustomError && userMessage === '') {
                 validity.customError = false;
             }
-            else if (error && error !== '') {
+            else if (userMessage && userMessage !== '') {
                 validity.customError = true;
-                message = error;
+                message = userMessage;
             }
             this.__internals.setValidity(validity, message);
+            this._isInternalValidation = true;
+            this._invalid = !this.__internals.checkValidity();
+        }
+        _handleBlur() {
+            this._setTouchedState();
+            this._validate();
+        }
+        _setTouchedState() {
+            if (!this._touched) {
+                this._touched = true;
+            }
+        }
+        _setDefaultValue(current) {
+            this._formValue.defaultValue = current;
+        }
+        _restoreDefaultValue() {
+            const value = this._formValue.value;
+            this._formValue.setValueAndFormState(this._formValue.defaultValue);
+            this.requestUpdate('value', value);
         }
         _setFormValue(value, state) {
             this._pristine = false;
             this.__internals.setFormValue(value, state);
+            this._validate();
+            this._setInvalidStyles();
         }
         formAssociatedCallback(_form) { }
         formDisabledCallback(state) {
@@ -120,22 +169,28 @@ function BaseFormAssociated(base) {
         formResetCallback() {
             this._restoreDefaultValue();
             this._pristine = true;
-            this._dirty = false;
-            this.invalid = false;
+            this._touched = false;
+            this._invalid = false;
+            this._setInvalidStyles();
+            emitFormResetEvent(this);
         }
         formStateRestoreCallback(_state, _mode) { }
         reportValidity() {
             const state = this.__internals.reportValidity();
-            this.invalid = !state;
+            this._invalid = !state;
             return state;
         }
         checkValidity() {
+            this._isInternalValidation = true;
             const state = this.__internals.checkValidity();
-            this.invalid = !state;
+            this._invalid = !state;
             return state;
         }
         setCustomValidity(message) {
-            this._updateValidity(message);
+            this._validate(message);
+            this._isInternalValidation = message === '';
+            this._setInvalidStyles();
+            this.requestUpdate();
         }
     }
     BaseFormAssociatedElement.formAssociated = true;
@@ -146,7 +201,7 @@ function BaseFormAssociated(base) {
         property({ type: Boolean, reflect: true })
     ], BaseFormAssociatedElement.prototype, "disabled", null);
     __decorate([
-        property({ type: Boolean, reflect: true })
+        property({ type: Boolean })
     ], BaseFormAssociatedElement.prototype, "invalid", null);
     return BaseFormAssociatedElement;
 }

package/components/common/mixins/forms/associated.js.map

@@ -1 +1 @@
-{"version":3,"file":"associated.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/associated.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addSafeEventListener, isFunction, isString } from '../../util.js';\nimport type { Validator } from '../../validators.js';\nimport type { Constructor } from '../constructor.js';\nimport type { FormValue } from './form-value.js';\nimport type {\n  FormAssociatedCheckboxElementInterface,\n  FormAssociatedElementInterface,\n  FormRestoreMode,\n  FormValueType,\n} from './types.js';\n\nfunction BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {\n  class BaseFormAssociatedElement extends base {\n    public static readonly formAssociated = true;\n\n    private __internals: ElementInternals;\n    protected _formValue!: FormValue<unknown>;\n\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n    protected _pristine = true;\n\n    protected get __validators(): Validator[] {\n      return [];\n    }\n\n    /**\n     * The name attribute of the control.\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, reflect: true })\n    public set disabled(value: boolean) {\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\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     * @attr\n     * @default false\n     */\n    @property({ type: Boolean, reflect: true })\n    public set invalid(value: boolean) {\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n    }\n\n    public get invalid(): boolean {\n      return this._invalid;\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\n    constructor(...args: any[]) {\n      super(args);\n      this.__internals = this.attachInternals();\n\n      addSafeEventListener(this, 'invalid', this._handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this._updateValidity();\n    }\n\n    private _handleInvalid(event: Event) {\n      event.preventDefault();\n      this.invalid = true;\n    }\n\n    private _setInvalidState(): void {\n      if (this._dirty || !this._pristine) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    private __runValidators() {\n      const 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      }\n\n      return { validity, message };\n    }\n\n    protected _setDefaultValue(current: string | null): void {\n      this._formValue.defaultValue = current;\n    }\n\n    protected _restoreDefaultValue(): void {\n      this._formValue.setValueAndFormState(this._formValue.defaultValue);\n      this._updateValidity();\n      this.requestUpdate();\n    }\n\n    protected _validate(message?: string): void {\n      this._updateValidity(message);\n      this._setInvalidState();\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected _updateValidity(error?: string) {\n      let { validity, message } = this.__runValidators();\n      const hasCustomError = this.validity.customError;\n\n      // valueMissing has precedence over the other validators aside from customError\n      if (validity.valueMissing) {\n        validity = {\n          valueMissing: true,\n          customError: hasCustomError,\n        };\n      }\n\n      if (hasCustomError && error === 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 && error === '') {\n        // setCustomValidity with an empty message.\n        validity.customError = false;\n      } else if (error && error !== '') {\n        // setCustomValidity with a message.\n        validity.customError = true;\n        message = error;\n      }\n\n      this.__internals.setValidity(validity, message);\n    }\n\n    protected _setFormValue(value: FormValueType, state?: FormValueType): void {\n      this._pristine = false;\n      this.__internals.setFormValue(value, state);\n    }\n\n    protected formAssociatedCallback(_form: HTMLFormElement): void {}\n\n    protected formDisabledCallback(state: boolean): void {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    protected formResetCallback(): void {\n      this._restoreDefaultValue();\n      this._pristine = true;\n      this._dirty = false;\n      this.invalid = false;\n    }\n\n    /* c8 ignore next 4 */\n    protected formStateRestoreCallback(\n      _state: FormValueType,\n      _mode: FormRestoreMode\n    ): void {}\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\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 invalid. */\n    public checkValidity() {\n      const state = this.__internals.checkValidity();\n      this.invalid = !state;\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) {\n      this._updateValidity(message);\n    }\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() {\n      return this._formValue.defaultValue;\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    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"]}
+{"version":3,"file":"associated.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/associated.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '../../controllers/internals.js';\nimport { addSafeEventListener, isFunction, isString } from '../../util.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    private readonly __internals = addInternalsController(this);\n    protected readonly _formValue!: FormValue<unknown>;\n\n    private _isFormSubmit = false;\n    private _isInternalValidation = false;\n    private _touched = false;\n    private _isExternalInvalid = false;\n\n    private get _hasUserInteraction(): boolean {\n      return this._touched || this._isFormSubmit;\n    }\n\n    private get _shouldApplyStyles(): boolean {\n      if (this._isExternalInvalid) {\n        return true;\n      }\n\n      return (\n        this._invalid && this._hasUserInteraction && !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 attribute of the control.\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, reflect: true })\n    public set disabled(value: boolean) {\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\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     * @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._isExternalInvalid || 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\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      this._pristine = true;\n      this._touched = false;\n      this._validate();\n    }\n\n    //#endregion\n\n    //#region Form value and validation states\n\n    private async _handleInvalid(event: Event): Promise<void> {\n      event.preventDefault();\n      this._invalid = true;\n\n      if (this._isInternalValidation) {\n        this._isInternalValidation = false;\n      } else {\n        this._isFormSubmit = true;\n        emitFormInvalidEvent(this);\n      }\n\n      this._setInvalidStyles();\n      this.requestUpdate();\n\n      if (this._isFormSubmit) {\n        await this.updateComplete;\n        this._isFormSubmit = false;\n      }\n    }\n\n    private _setInvalidStyles(): void {\n      this.__internals.setState(INVALID_STATE, this._shouldApplyStyles);\n    }\n\n    private __runValidators() {\n      const validity: ValidityStateFlags = {};\n      let message = '';\n      let validationFailed = false;\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          validationFailed = true;\n          message = isFunction(validator.message)\n            ? validator.message(this)\n            : validator.message;\n        }\n      }\n\n      this._invalid = validationFailed;\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      let { validity, message } = this.__runValidators();\n      const hasCustomError = this.validity.customError;\n\n      // valueMissing has precedence over the other validators aside from customError\n      if (validity.valueMissing) {\n        validity = {\n          valueMissing: true,\n          customError: hasCustomError,\n        };\n      }\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    }\n\n    protected _handleBlur(): void {\n      this._setTouchedState();\n      this._validate();\n    }\n\n    protected _setTouchedState(): void {\n      if (!this._touched) {\n        this._touched = true;\n      }\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      this._setInvalidStyles();\n    }\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.requestUpdate();\n    }\n\n    protected formResetCallback(): void {\n      this._restoreDefaultValue();\n      this._pristine = true;\n      this._touched = false;\n      this._invalid = 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 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 invalid. */\n    public checkValidity(): boolean {\n      this._isInternalValidation = true;\n      const state = this.__internals.checkValidity();\n      this._invalid = !state;\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._isInternalValidation = message === '';\n      this._setInvalidStyles();\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    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    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/mixins/forms/form-transformers.d.ts

@@ -0,0 +1,21 @@
+import type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';
+import type { FormValueType, IgcFormControl } from './types.js';
+export type FormValueTransformers<T> = {
+    setValue: (value: T) => T;
+    getValue: (value: T) => T;
+    setDefaultValue: (value: T) => T;
+    getDefaultValue: (value: T) => T;
+    setFormValue: (value: T, host: IgcFormControl) => FormValueType;
+};
+export type FormValueConfig<T> = {
+    initialValue: T;
+    initialDefaultValue?: T;
+    transformers?: Partial<FormValueTransformers<T>>;
+};
+export declare const FormValueDefaultTransformers: FormValueTransformers<string>;
+export declare const FormValueBooleanTransformers: Partial<FormValueTransformers<boolean>>;
+export declare const FormValueNumberTransformers: Partial<FormValueTransformers<number>>;
+export declare const FormValueDateTimeTransformers: Partial<FormValueTransformers<Date | null>>;
+export declare const FormValueDateRangeTransformers: Partial<FormValueTransformers<DateRangeValue | null>>;
+export declare const FormValueFileListTransformers: FormValueTransformers<FileList | null>;
+export declare const FormValueSelectTransformers: Partial<FormValueTransformers<string | undefined>>;

package/components/common/mixins/forms/form-transformers.js

@@ -0,0 +1,64 @@
+import { convertToDate, convertToDateRange, getDateFormValue, } from '../../../calendar/helpers.js';
+import { asNumber } from '../../util.js';
+export const FormValueDefaultTransformers = {
+    setValue: (value) => value || '',
+    getValue: (value) => value,
+    setDefaultValue: (value) => value || '',
+    getDefaultValue: (value) => value,
+    setFormValue: (value, _) => value || null,
+};
+export const FormValueBooleanTransformers = {
+    setValue: Boolean,
+    setDefaultValue: Boolean,
+    setFormValue: (checked, host) => checked && 'value' in host ? host.value || 'on' : null,
+};
+export const FormValueNumberTransformers = {
+    setValue: asNumber,
+    setDefaultValue: asNumber,
+    setFormValue: (value) => value.toString(),
+};
+export const FormValueDateTimeTransformers = {
+    setValue: convertToDate,
+    setDefaultValue: convertToDate,
+    setFormValue: getDateFormValue,
+};
+export const FormValueDateRangeTransformers = {
+    setValue: convertToDateRange,
+    setDefaultValue: convertToDateRange,
+    setFormValue: (value, host) => {
+        if (!host.name) {
+            return null;
+        }
+        const start = value?.start?.toISOString();
+        const end = value?.end?.toISOString();
+        const formData = new FormData();
+        if (start) {
+            formData.append(`${host.name}-start`, start);
+        }
+        if (end) {
+            formData.append(`${host.name}-end`, end);
+        }
+        return formData;
+    },
+};
+export const FormValueFileListTransformers = {
+    setValue: (value) => value || null,
+    getValue: (value) => value,
+    setDefaultValue: (value) => value || null,
+    getDefaultValue: (value) => value,
+    setFormValue: (files, host) => {
+        if (!(host.name && files)) {
+            return null;
+        }
+        const formData = new FormData();
+        for (const file of files) {
+            formData.append(host.name, file);
+        }
+        return formData;
+    },
+};
+export const FormValueSelectTransformers = {
+    setValue: (value) => value || undefined,
+    setDefaultValue: (value) => value || undefined,
+};
+//# sourceMappingURL=form-transformers.js.map

package/components/common/mixins/forms/form-transformers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-transformers.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/form-transformers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAmBzC,MAAM,CAAC,MAAM,4BAA4B,GAAkC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IAC1B,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE;IACvC,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,IAAI;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAErC;IACF,QAAQ,EAAE,OAAO;IACjB,eAAe,EAAE,OAAO;IACxB,YAAY,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAC9B,OAAO,IAAI,OAAO,IAAI,IAAI,CAAC,CAAC,CAAE,IAAI,CAAC,KAAgB,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;CACrE,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAEpC;IACF,QAAQ,EAAE,QAAQ;IAClB,eAAe,EAAE,QAAQ;IACzB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAEtC;IACF,QAAQ,EAAE,aAAa;IACvB,eAAe,EAAE,aAAa;IAC9B,YAAY,EAAE,gBAAgB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAEvC;IACF,QAAQ,EAAE,kBAAkB;IAC5B,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;QAC1C,MAAM,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;QAEtC,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAEhC,IAAI,KAAK,EAAE,CAAC;YACV,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,GAAG,EAAE,CAAC;YACR,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,MAAM,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GACxC;IACE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,IAAI;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IAC1B,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,IAAI;IACzC,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAChC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,2BAA2B,GAEpC;IACF,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,SAAS;IACvC,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,SAAS;CAC/C,CAAC","sourcesContent":["import {\n  convertToDate,\n  convertToDateRange,\n  getDateFormValue,\n} from '../../../calendar/helpers.js';\nimport type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';\nimport { asNumber } from '../../util.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\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/components/common/mixins/forms/form-value.d.ts

@@ -1,40 +1,13 @@
-import type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';
-import type { FormValueType, IgcFormControl } from './types.js';
-type FormValueTransformers<T> = {
-    setValue: (value: T) => T;
-    getValue: (value: T) => T;
-    setDefaultValue: (value: T) => T;
-    getDefaultValue: (value: T) => T;
-    setFormValue: (value: T, host: IgcFormControl) => FormValueType;
-};
-type FormValueConfig<T> = {
-    initialValue: T;
-    initialDefaultValue?: T;
-    transformers?: Partial<FormValueTransformers<T>>;
-};
-export declare const defaultBooleanTransformers: Partial<FormValueTransformers<boolean>>;
-export declare const defaultNumberTransformers: Partial<FormValueTransformers<number>>;
-export declare const defaultDateTimeTransformers: Partial<FormValueTransformers<Date | null>>;
-export declare const defaultFileListTransformer: Partial<FormValueTransformers<FileList | null>>;
-/**
- * Converts a DateDateRangeValue object to FormData with
- * start and end Date values as ISO 8601 strings.
- * The keys are prefixed with the host name
- * and suffixed with 'start' or 'end' accordingly.
- * In case the host does not have a name, it does not participate in form submission.
- *
- * If the date values are null or undefined, the form data values
- * are empty strings ''.
- */
-export declare function getDateRangeFormValue(value: DateRangeValue | null, host: IgcFormControl): FormValueType;
-export declare const defaultDateRangeTransformers: Partial<FormValueTransformers<DateRangeValue | null>>;
+import type { LitElement } from 'lit';
+import { type FormValueConfig } from './form-transformers.js';
+import type { IgcFormControl } from './types.js';
 export declare class FormValue<T> {
     private static readonly setFormValueKey;
-    private _host;
+    private readonly _host;
+    private readonly _transformers;
+    private readonly _setFormValue;
     private _value;
     private _defaultValue;
-    private _transformers;
-    private _setFormValue;
     constructor(host: IgcFormControl, config: FormValueConfig<T>);
     setValueAndFormState(value: T): void;
     set defaultValue(value: T);
@@ -42,6 +15,4 @@ export declare class FormValue<T> {
     set value(value: T);
     get value(): T;
 }
-export declare function createFormValueState<T>(host: IgcFormControl, config: FormValueConfig<T>): FormValue<T>;
-export type FormValueOf<T> = ReturnType<typeof createFormValueState<T>>;
-export {};
+export declare function createFormValueState<T>(host: LitElement, config: FormValueConfig<T>): FormValue<T>;

package/components/common/mixins/forms/form-value.js

@@ -1,66 +1,4 @@
-import { convertToDate, convertToDateRange, getDateFormValue, } from '../../../calendar/helpers.js';
-import { asNumber } from '../../util.js';
-const defaultTransformers = {
-    setValue: (value) => value || '',
-    getValue: (value) => value,
-    setDefaultValue: (value) => value || '',
-    getDefaultValue: (value) => value,
-    setFormValue: (value, _) => value || null,
-};
-export const defaultBooleanTransformers = {
-    setValue: Boolean,
-    setDefaultValue: Boolean,
-    setFormValue: (checked, host) => {
-        return checked && 'value' in host ? host.value || 'on' : null;
-    },
-};
-export const defaultNumberTransformers = {
-    setValue: asNumber,
-    setDefaultValue: asNumber,
-    setFormValue: (value) => value.toString(),
-};
-export const defaultDateTimeTransformers = {
-    setValue: convertToDate,
-    setDefaultValue: convertToDate,
-    setFormValue: getDateFormValue,
-};
-export const defaultFileListTransformer = {
-    setValue: (value) => value || null,
-    getValue: (value) => value,
-    setDefaultValue: (value) => value || null,
-    getDefaultValue: (value) => value,
-    setFormValue: (files, host) => {
-        if (!host.name || !files) {
-            return null;
-        }
-        const data = new FormData();
-        for (const file of Array.from(files)) {
-            data.append(host.name, file);
-        }
-        return data;
-    },
-};
-export function getDateRangeFormValue(value, host) {
-    if (!host.name) {
-        return null;
-    }
-    const start = value?.start?.toISOString();
-    const end = value?.end?.toISOString();
-    const fd = new FormData();
-    const prefix = `${host.name}-`;
-    if (start) {
-        fd.append(`${prefix}start`, start);
-    }
-    if (end) {
-        fd.append(`${prefix}end`, end);
-    }
-    return fd;
-}
-export const defaultDateRangeTransformers = {
-    setValue: convertToDateRange,
-    setDefaultValue: convertToDateRange,
-    setFormValue: getDateRangeFormValue,
-};
+import { FormValueDefaultTransformers, } from './form-transformers.js';
 export class FormValue {
     constructor(host, config) {
         this._host = host;
@@ -68,7 +6,7 @@ export class FormValue {
         this._defaultValue = config.initialDefaultValue ?? this._value;
         this._setFormValue = host[FormValue.setFormValueKey];
         this._transformers = {
-            ...defaultTransformers,
+            ...FormValueDefaultTransformers,
             ...config.transformers,
         };
     }

package/components/common/mixins/forms/form-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-value.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/form-value.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  convertToDate,\n  convertToDateRange,\n  getDateFormValue,\n} from '../../../calendar/helpers.js';\nimport type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';\nimport { asNumber } from '../../util.js';\nimport type { FormValueType, IgcFormControl } from './types.js';\n\ntype 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\ntype FormValueConfig<T> = {\n  initialValue: T;\n  initialDefaultValue?: T;\n  transformers?: Partial<FormValueTransformers<T>>;\n};\n\nconst defaultTransformers: FormValueTransformers<string> = {\n  setValue: (value) => value || '',\n  getValue: (value) => value,\n  setDefaultValue: (value) => value || '',\n  getDefaultValue: (value) => value,\n  setFormValue: (value, _: IgcFormControl) => value || null,\n};\n\nexport const defaultBooleanTransformers: Partial<\n  FormValueTransformers<boolean>\n> = {\n  setValue: Boolean,\n  setDefaultValue: Boolean,\n  setFormValue: (checked, host) => {\n    return checked && 'value' in host ? (host.value as string) || 'on' : null;\n  },\n};\n\nexport const defaultNumberTransformers: Partial<FormValueTransformers<number>> =\n  {\n    setValue: asNumber,\n    setDefaultValue: asNumber,\n    setFormValue: (value) => value.toString(),\n  };\n\nexport const defaultDateTimeTransformers: Partial<\n  FormValueTransformers<Date | null>\n> = {\n  setValue: convertToDate,\n  setDefaultValue: convertToDate,\n  setFormValue: getDateFormValue,\n};\n\nexport const defaultFileListTransformer: Partial<\n  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: FileList | null, host: IgcFormControl) => {\n    if (!host.name || !files) {\n      return null;\n    }\n\n    const data = new FormData();\n\n    for (const file of Array.from(files)) {\n      data.append(host.name, file);\n    }\n\n    return data;\n  },\n};\n\n/**\n * Converts a DateDateRangeValue object to FormData with\n * start and end Date values as ISO 8601 strings.\n * The keys are prefixed with the host name\n * and suffixed with 'start' or 'end' accordingly.\n * In case the host does not have a name, it does not participate in form submission.\n *\n * If the date values are null or undefined, the form data values\n * are empty strings ''.\n */\nexport function getDateRangeFormValue(\n  value: DateRangeValue | null,\n  host: IgcFormControl\n): FormValueType {\n  if (!host.name) {\n    return null;\n  }\n\n  const start = value?.start?.toISOString();\n  const end = value?.end?.toISOString();\n\n  const fd = new FormData();\n  const prefix = `${host.name}-`;\n\n  if (start) {\n    fd.append(`${prefix}start`, start);\n  }\n  if (end) {\n    fd.append(`${prefix}end`, end);\n  }\n\n  return fd;\n}\n\nexport const defaultDateRangeTransformers: Partial<\n  FormValueTransformers<DateRangeValue | null>\n> = {\n  setValue: convertToDateRange,\n  setDefaultValue: convertToDateRange,\n  setFormValue: getDateRangeFormValue,\n};\n\n/* blazorSuppress */\nexport class FormValue<T> {\n  private static readonly setFormValueKey = '_setFormValue' as const;\n\n  private _host: IgcFormControl;\n  private _value: T;\n  private _defaultValue: T;\n  private _transformers: FormValueTransformers<T>;\n  private _setFormValue: IgcFormControl[typeof FormValue.setFormValueKey];\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      ...defaultTransformers,\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: IgcFormControl,\n  config: FormValueConfig<T>\n): FormValue<T> {\n  return new FormValue(host, config);\n}\n\nexport type FormValueOf<T> = ReturnType<typeof createFormValueState<T>>;\n"]}
+{"version":3,"file":"form-value.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/form-value.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,4BAA4B,GAE7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,OAAO,SAAS;IAUpB,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;;AA3CuB,yBAAe,GAAG,eAAwB,CAAC;AA8CrE,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/mixins/forms/types.d.ts

@@ -5,9 +5,8 @@ export type FormValueType = string | File | FormData | null;
 export type IgcFormControl = LitElement & (FormAssociatedElementInterface | FormAssociatedCheckboxElementInterface);
 declare class BaseFormAssociatedElement {
     static readonly formAssociated: boolean;
-    private __internals;
-    protected _formValue: unknown;
-    protected _dirty: boolean;
+    private readonly __internals;
+    protected readonly _formValue: unknown;
     protected _pristine: boolean;
     protected _disabled: boolean;
     protected _invalid: boolean;
@@ -43,6 +42,20 @@ declare class BaseFormAssociatedElement {
      * that is a candidate for constraint validation.
      */
     get willValidate(): boolean;
+    /**
+     * Sets the **touched** state of the component and invokes {@link BaseFormAssociatedElement._validate | `_validate()`} method.
+     *
+     * As the naming of the method suggests, this should be invoked either on **blur** or **focusout**, depending
+     * on the DOM structure and how focus state is managed by the component.
+     */
+    protected _handleBlur(): void;
+    /**
+     * Sets the **touched** state of the component and **DOES NOT** invoke {@link BaseFormAssociatedElement._validate | `_validate()`} method.
+     *
+     * This should be called whenever a user interaction triggers a response, usually an event, from the component in
+     * regards to its value.
+     */
+    protected _setTouchedState(): void;
     /**
      * Sets the default value of the component.
      * Called in `attributeChangedCallback`(i.e. when the `value` attribute of the control is set).
@@ -53,15 +66,9 @@ declare class BaseFormAssociatedElement {
      */
     protected _restoreDefaultValue(): void;
     /**
-     * Executes the {@link BaseFormAssociatedElement._updateValidity | `_updateValidity()`} hook and then applies
-     * the {@link BaseFormAssociatedElement.invalid | `invalid`} attribute on the control and the associated styles
-     * if the element has completed the first update cycle or it has been interacted with by the user.
+     * Executes the component validators and updates the internal validity state.
      */
     protected _validate(message?: string): void;
-    /**
-     * Executes the component's validators and updates the internal validity state.
-     */
-    protected _updateValidity(message?: string): void;
     /**
      * Sets the component's submission value and state.
      */
@@ -125,4 +132,6 @@ export declare class FormRequiredInterface {
     set required(value: boolean);
     get required(): boolean;
 }
+export declare const InternalInvalidEvent = "igc-form-internal-invalid";
+export declare const InternalResetEvent = "igc-form-internal-reset";
 export {};

package/components/common/mixins/forms/types.js

@@ -1,2 +1,3 @@
-export {};
+export const InternalInvalidEvent = 'igc-form-internal-invalid';
+export const InternalResetEvent = 'igc-form-internal-reset';
 //# sourceMappingURL=types.js.map