@umbraco-cms/backoffice 14.2.0 → 14.3.0

package/dist-cms/packages/core/validation/controllers/{bind-validation-message-to-form-control.controller.js → bind-server-validation-to-form-control.controller.js}

@@ -1,9 +1,13 @@
 import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
-import { jsonStringComparison } from '../../../../libs/observable-api/index.js';
+import { defaultMemoization } from '../../../../libs/observable-api/index.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 const ctrlSymbol = Symbol();
 const observeSymbol = Symbol();
-export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
+/**
+ * Binds server validation to a form control.
+ * This controller will add a custom error to the form control if the validation context has any messages for the specified data path.
+ */
+export class UmbBindServerValidationToFormControl extends UmbControllerBase {
     #context;
     #control;
     #controlValidator;
@@ -17,7 +21,7 @@ export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
         }
         else {
             // If not valid lets see if we should remove server validation [NL]
-            if (!jsonStringComparison(this.#value, value)) {
+            if (!defaultMemoization(this.#value, value)) {
                 this.#value = value;
                 // Only remove server validations from validation context [NL]
                 this.#messages.forEach((message) => {
@@ -47,7 +51,7 @@ export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
     }
     #setup() {
         if (!this.#controlValidator) {
-            this.#controlValidator = this.#control.addValidator('customError', () => this.#messages.map((x) => x.message).join(', '), () => !this.#isValid);
+            this.#controlValidator = this.#control.addValidator('customError', () => this.#messages.map((x) => x.body).join(', '), () => !this.#isValid);
             //this.#control.addEventListener('change', this.#onControlChange);
             // Legacy event, used by some controls:
             //this.#control.addEventListener('property-value-change', this.#onControlChange);

package/dist-cms/packages/core/validation/controllers/form-control-validator.controller.d.ts

@@ -2,6 +2,10 @@ import type { UmbValidator } from '../interfaces/index.js';
 import type { UmbFormControlMixinInterface } from '../mixins/form-control.mixin.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+/**
+ * Bind a Form Controls validation state to the validation context.
+ * This validator will validate the form control and add messages to the validation context if the form control is invalid.
+ */
 export declare class UmbFormControlValidator extends UmbControllerBase implements UmbValidator {
     #private;
     constructor(host: UmbControllerHost, formControl: UmbFormControlMixinInterface<unknown>, dataPath?: string);

package/dist-cms/packages/core/validation/controllers/form-control-validator.controller.js

@@ -2,6 +2,10 @@ import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
 import { UmbValidationInvalidEvent } from '../events/validation-invalid.event.js';
 import { UmbValidationValidEvent } from '../events/validation-valid.event.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+/**
+ * Bind a Form Controls validation state to the validation context.
+ * This validator will validate the form control and add messages to the validation context if the form control is invalid.
+ */
 export class UmbFormControlValidator extends UmbControllerBase {
     // The path to the data that this validator is validating.
     #dataPath;

package/dist-cms/packages/core/validation/controllers/index.d.ts

@@ -1,3 +1,4 @@
-export * from './bind-validation-message-to-form-control.controller.js';
-export * from './observe-validation-state.controller.js';
+export * from './bind-server-validation-to-form-control.controller.js';
 export * from './form-control-validator.controller.js';
+export * from './observe-validation-state.controller.js';
+export * from './validation.controller.js';

package/dist-cms/packages/core/validation/controllers/index.js

@@ -1,3 +1,4 @@
-export * from './bind-validation-message-to-form-control.controller.js';
-export * from './observe-validation-state.controller.js';
+export * from './bind-server-validation-to-form-control.controller.js';
 export * from './form-control-validator.controller.js';
+export * from './observe-validation-state.controller.js';
+export * from './validation.controller.js';

package/dist-cms/packages/core/validation/controllers/observe-validation-state.controller.d.ts

@@ -1,5 +1,5 @@
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbObserveValidationStateController extends UmbControllerBase {
-    constructor(host: UmbControllerHost, dataPath: string | undefined, callback: (messages: boolean) => void);
+    constructor(host: UmbControllerHost, dataPath: string | undefined, callback: (messages: boolean) => void, controllerAlias?: string);
 }

package/dist-cms/packages/core/validation/controllers/observe-validation-state.controller.js

@@ -1,10 +1,9 @@
 import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-const CtrlSymbol = Symbol();
 const ObserveSymbol = Symbol();
 export class UmbObserveValidationStateController extends UmbControllerBase {
-    constructor(host, dataPath, callback) {
-        super(host, CtrlSymbol);
+    constructor(host, dataPath, callback, controllerAlias) {
+        super(host, controllerAlias ?? 'observeValidationState_' + dataPath);
         if (dataPath) {
             this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => {
                 this.observe(context.messages.hasMessagesOfPathAndDescendant(dataPath), callback, ObserveSymbol);

package/dist-cms/packages/core/validation/controllers/validation.controller.d.ts

@@ -0,0 +1,84 @@
+import type { UmbValidator } from '../interfaces/validator.interface.js';
+import type { UmbValidationMessageTranslator } from '../translators/index.js';
+import { UmbValidationMessagesManager } from '../context/validation-messages.manager.js';
+import { type UmbClassInterface, UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+/**
+ * Validation Context is the core of Validation.
+ * It hosts Validators that has to validate for the context to be valid.
+ * It can also be used as a Validator as part of a parent Validation Context.
+ */
+export declare class UmbValidationController extends UmbControllerBase implements UmbValidator {
+    #private;
+    translationDataOf(path: string): any;
+    setTranslationData(data: any): void;
+    getTranslationData(): any;
+    readonly messages: UmbValidationMessagesManager;
+    constructor(host: UmbControllerHost);
+    /**
+     * Add a path translator to this validation context.
+     * @param translator
+     */
+    addTranslator(translator: UmbValidationMessageTranslator): Promise<void>;
+    /**
+     * Remove a path translator from this validation context.
+     * @param translator
+     */
+    removeTranslator(translator: UmbValidationMessageTranslator): Promise<void>;
+    /**
+     * Provide this validation context to a specific controller host.
+     * This can be used to Host a validation context in a Workspace, but provide it on a certain scope, like a specific Workspace View.
+     * @param controllerHost {UmbClassInterface}
+     */
+    provideAt(controllerHost: UmbClassInterface): void;
+    /**
+     * Define a specific data path for this validation context.
+     * This will turn this validation context into a sub-context of the parent validation context.
+     * This means that a two-way binding for messages will be established between the parent and the sub-context.
+     * And it will inherit the Translation Data from its parent.
+     *
+     * messages and data will be localizes accordingly to the given data path.
+     * @param dataPath {string} - The data path to bind this validation context to.
+     * @example
+     * ```ts
+     * const validationContext = new UmbValidationContext(this);
+     * validationContext.setDataPath("$.values[?(@.alias='my-property')].value");
+     * ```
+     *
+     * A message with the path: '$.values[?(@.alias='my-property')].value.innerProperty', will for above example become '$.innerProperty' for the local Validation Context.
+     */
+    setDataPath(dataPath: string): void;
+    /**
+     * Get if this context is valid.
+     * Notice this does not verify the validity.
+     * @returns {boolean}
+     */
+    get isValid(): boolean;
+    /**
+     * Add a validator to this context.
+     * This validator will have to be valid for the context to be valid.
+     * If the context is in validation mode, the validator will be validated immediately.
+     * @param validator { UmbValidator } - The validator to add to this context.
+     */
+    addValidator(validator: UmbValidator): void;
+    /**
+     * Remove a validator from this context.
+     * @param validator {UmbValidator} - The validator to remove from this context.
+     */
+    removeValidator(validator: UmbValidator): void;
+    /**
+     * Validate this context, all the validators of this context will be validated.
+     * Notice its a recursive check meaning sub validation contexts also validates their validators.
+     * @returns succeed {Promise<boolean>} - Returns a promise that resolves to true if the validator succeeded, this depends on the validators and wether forceSucceed is set.
+     */
+    validate(): Promise<void>;
+    /**
+     * Focus the first invalid element that this context can find.
+     */
+    focusFirstInvalidElement(): void;
+    /**
+     * Reset the validation state of this context.
+     */
+    reset(): void;
+    destroy(): void;
+}

package/dist-cms/packages/core/validation/controllers/validation.controller.js

@@ -0,0 +1,252 @@
+import { GetValueByJsonPath } from '../utils/json-path.function.js';
+import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
+import { UmbValidationMessagesManager } from '../context/validation-messages.manager.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbObjectState } from '../../../../libs/observable-api/index.js';
+/**
+ * Helper method to replace the start of a string with another string.
+ * @param path {string}
+ * @param startFrom {string}
+ * @param startTo {string}
+ * @returns {string}
+ */
+function ReplaceStartOfString(path, startFrom, startTo) {
+    if (path.startsWith(startFrom + '.')) {
+        return startTo + path.slice(startFrom.length);
+    }
+    return path;
+}
+/**
+ * Validation Context is the core of Validation.
+ * It hosts Validators that has to validate for the context to be valid.
+ * It can also be used as a Validator as part of a parent Validation Context.
+ */
+export class UmbValidationController extends UmbControllerBase {
+    // The current provider controller, that is providing this context:
+    #providerCtrl;
+    // Local version of the data send to the server, only use-case is for translation.
+    #translationData;
+    translationDataOf(path) {
+        return this.#translationData.asObservablePart((data) => GetValueByJsonPath(data, path));
+    }
+    setTranslationData(data) {
+        this.#translationData.setValue(data);
+    }
+    getTranslationData() {
+        return this.#translationData.getValue();
+    }
+    #validators;
+    #validationMode;
+    #isValid;
+    #parent;
+    #parentMessages;
+    #localMessages;
+    #baseDataPath;
+    constructor(host) {
+        // This is overridden to avoid setting a controllerAlias, this might make sense, but currently i want to leave it out. [NL]
+        super(host);
+        // Local version of the data send to the server, only use-case is for translation.
+        this.#translationData = new UmbObjectState(undefined);
+        this.#validators = [];
+        this.#validationMode = false;
+        this.#isValid = false;
+        this.messages = new UmbValidationMessagesManager();
+    }
+    /**
+     * Add a path translator to this validation context.
+     * @param translator
+     */
+    async addTranslator(translator) {
+        this.messages.addTranslator(translator);
+    }
+    /**
+     * Remove a path translator from this validation context.
+     * @param translator
+     */
+    async removeTranslator(translator) {
+        this.messages.removeTranslator(translator);
+    }
+    /**
+     * Provide this validation context to a specific controller host.
+     * This can be used to Host a validation context in a Workspace, but provide it on a certain scope, like a specific Workspace View.
+     * @param controllerHost {UmbClassInterface}
+     */
+    provideAt(controllerHost) {
+        this.#providerCtrl?.destroy();
+        this.#providerCtrl = controllerHost.provideContext(UMB_VALIDATION_CONTEXT, this);
+    }
+    /**
+     * Define a specific data path for this validation context.
+     * This will turn this validation context into a sub-context of the parent validation context.
+     * This means that a two-way binding for messages will be established between the parent and the sub-context.
+     * And it will inherit the Translation Data from its parent.
+     *
+     * messages and data will be localizes accordingly to the given data path.
+     * @param dataPath {string} - The data path to bind this validation context to.
+     * @example
+     * ```ts
+     * const validationContext = new UmbValidationContext(this);
+     * validationContext.setDataPath("$.values[?(@.alias='my-property')].value");
+     * ```
+     *
+     * A message with the path: '$.values[?(@.alias='my-property')].value.innerProperty', will for above example become '$.innerProperty' for the local Validation Context.
+     */
+    setDataPath(dataPath) {
+        if (this.#baseDataPath) {
+            if (this.#baseDataPath === dataPath)
+                return;
+            console.log(this.#baseDataPath, dataPath);
+            // Just fire an error, as I haven't made the right clean up jet. Or haven't thought about what should happen if it changes while already setup.
+            // cause maybe all the messages should be removed as we are not interested in the old once any more. But then on the other side, some might be relevant as this is the same entity that changed its paths?
+            throw new Error('Data path is already set, we do not support changing the context data-path as of now.');
+        }
+        if (!dataPath)
+            return;
+        this.#baseDataPath = dataPath;
+        this.consumeContext(UMB_VALIDATION_CONTEXT, (parent) => {
+            if (this.#parent) {
+                this.#parent.removeValidator(this);
+            }
+            this.#parent = parent;
+            parent.addValidator(this);
+            this.messages.clear();
+            this.observe(parent.translationDataOf(dataPath), (data) => {
+                this.setTranslationData(data);
+            });
+            this.observe(parent.messages.messagesOfPathAndDescendant(dataPath), (msgs) => {
+                //this.messages.appendMessages(msgs);
+                if (this.#parentMessages) {
+                    // Remove the local messages that does not exist in the parent anymore:
+                    const toRemove = this.#parentMessages.filter((msg) => !msgs.find((m) => m.key === msg.key));
+                    toRemove.forEach((msg) => {
+                        this.messages.removeMessageByKey(msg.key);
+                    });
+                }
+                this.#parentMessages = msgs;
+                msgs.forEach((msg) => {
+                    const path = ReplaceStartOfString(msg.path, this.#baseDataPath, '$');
+                    // Notice, the local message uses the same key. [NL]
+                    this.messages.addMessage(msg.type, path, msg.body, msg.key);
+                });
+            }, 'observeParentMessages');
+            this.observe(this.messages.messages, (msgs) => {
+                if (!this.#parent)
+                    return;
+                //this.messages.appendMessages(msgs);
+                if (this.#localMessages) {
+                    // Remove the parent messages that does not exist locally anymore:
+                    const toRemove = this.#localMessages.filter((msg) => !msgs.find((m) => m.key === msg.key));
+                    toRemove.forEach((msg) => {
+                        this.#parent.messages.removeMessageByKey(msg.key);
+                    });
+                }
+                this.#localMessages = msgs;
+                msgs.forEach((msg) => {
+                    // replace this.#baseDataPath (if it starts with it) with $ in the path, so it becomes relative to the parent context
+                    const path = ReplaceStartOfString(msg.path, '$', this.#baseDataPath);
+                    // Notice, the parent message uses the same key. [NL]
+                    this.#parent.messages.addMessage(msg.type, path, msg.body, msg.key);
+                });
+            }, 'observeLocalMessages');
+        }).skipHost();
+        // Notice skipHost ^^, this is because we do not want it to consume it self, as this would be a match for this consumption, instead we will look at the parent and above. [NL]
+    }
+    /**
+     * Get if this context is valid.
+     * Notice this does not verify the validity.
+     * @returns {boolean}
+     */
+    get isValid() {
+        return this.#isValid;
+    }
+    /**
+     * Add a validator to this context.
+     * This validator will have to be valid for the context to be valid.
+     * If the context is in validation mode, the validator will be validated immediately.
+     * @param validator { UmbValidator } - The validator to add to this context.
+     */
+    addValidator(validator) {
+        if (this.#validators.includes(validator))
+            return;
+        this.#validators.push(validator);
+        //validator.addEventListener('change', this.#onValidatorChange);
+        if (this.#validationMode) {
+            this.validate();
+        }
+    }
+    /**
+     * Remove a validator from this context.
+     * @param validator {UmbValidator} - The validator to remove from this context.
+     */
+    removeValidator(validator) {
+        const index = this.#validators.indexOf(validator);
+        if (index !== -1) {
+            // Remove the validator:
+            this.#validators.splice(index, 1);
+            // If we are in validation mode then we should re-validate to focus next invalid element:
+            if (this.#validationMode) {
+                this.validate();
+            }
+        }
+    }
+    /**
+     * Validate this context, all the validators of this context will be validated.
+     * Notice its a recursive check meaning sub validation contexts also validates their validators.
+     * @returns succeed {Promise<boolean>} - Returns a promise that resolves to true if the validator succeeded, this depends on the validators and wether forceSucceed is set.
+     */
+    async validate() {
+        // TODO: clear server messages here?, well maybe only if we know we will get new server messages? Do the server messages hook into the system like another validator?
+        this.#validationMode = true;
+        const resultsStatus = await Promise.all(this.#validators.map((v) => v.validate())).then(() => Promise.resolve(true), () => Promise.resolve(false));
+        if (!this.messages) {
+            // This Context has been destroyed while is was validating, so we should not continue.
+            return;
+        }
+        // If we have any messages then we are not valid, otherwise lets check the validation results: [NL]
+        // This enables us to keep client validations though UI is not present anymore — because the client validations got defined as messages. [NL]
+        const isValid = this.messages.getHasAnyMessages() ? false : resultsStatus;
+        this.#isValid = isValid;
+        if (isValid === false) {
+            // Focus first invalid element:
+            this.focusFirstInvalidElement();
+            return Promise.reject();
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Focus the first invalid element that this context can find.
+     */
+    focusFirstInvalidElement() {
+        const firstInvalid = this.#validators.find((v) => !v.isValid);
+        if (firstInvalid) {
+            firstInvalid.focusFirstInvalidElement();
+        }
+    }
+    /**
+     * Reset the validation state of this context.
+     */
+    reset() {
+        this.#validationMode = false;
+        this.#validators.forEach((v) => v.reset());
+    }
+    #destroyValidators() {
+        if (this.#validators === undefined || this.#validators.length === 0)
+            return;
+        this.#validators.forEach((validator) => {
+            validator.destroy();
+            //validator.removeEventListener('change', this.#runValidate);
+        });
+        this.#validators = [];
+    }
+    destroy() {
+        this.#providerCtrl = undefined;
+        if (this.#parent) {
+            this.#parent.removeValidator(this);
+        }
+        this.#parent = undefined;
+        this.#destroyValidators();
+        this.messages?.destroy();
+        this.messages = undefined;
+        super.destroy();
+    }
+}

package/dist-cms/packages/core/validation/directives/bind-to-validation.lit-directive.d.ts

@@ -0,0 +1,34 @@
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { AsyncDirective, type ElementPart } from '../../../../external/lit/index.js';
+/**
+ * The `bind to validation` directive connects the Form Control Element to closets Validation Context.
+ */
+declare class UmbBindToValidationDirective extends AsyncDirective {
+    #private;
+    render(host: UmbControllerHost, dataPath?: string, value?: unknown): symbol;
+    update(part: ElementPart, args: Parameters<typeof this.render>): symbol;
+    disconnected(): void;
+}
+/**
+ * @description
+ * A Lit directive, which binds the validation state of the element to the Validation Context.
+ *
+ * The minimal binding can be established by just providing a host element:
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this)}>`;
+ * ```
+ * But can be extended with a dataPath, which is the path to the data holding the value. (if no server validation in this context, then this can be fictive and is then just used internal for remembering the validation state despite the element begin removed from the DOM.)
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline')}>`;
+ * ```
+ *
+ * Additional the value can be provided, which is then used to remove a server validation state, if the value is changed.
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline', this.headlineValue)}>`;
+ * ```
+ */
+export declare const umbBindToValidation: (host: UmbControllerHost, dataPath?: string | undefined, value?: unknown) => import("lit-html/directive.js").DirectiveResult<typeof UmbBindToValidationDirective>;
+export {};

package/dist-cms/packages/core/validation/directives/bind-to-validation.lit-directive.js

@@ -0,0 +1,69 @@
+import { AsyncDirective, directive, nothing } from '../../../../external/lit/index.js';
+import { UmbBindServerValidationToFormControl, UmbFormControlValidator } from '../index.js';
+/**
+ * The `bind to validation` directive connects the Form Control Element to closets Validation Context.
+ */
+class UmbBindToValidationDirective extends AsyncDirective {
+    #host;
+    #dataPath;
+    #el;
+    #validator;
+    #msgBinder;
+    // For Directives their arguments have to be defined on the Render method, despite them, not being used by the render method. In this case they are used by the update method.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(host, dataPath, value) {
+        return nothing;
+    }
+    update(part, args) {
+        if (!part.element)
+            return nothing;
+        if (this.#el !== part.element || this.#host !== args[0] || this.#dataPath !== args[1]) {
+            this.#host = args[0];
+            this.#dataPath = args[1];
+            this.#el = part.element;
+            if (!this.#msgBinder && this.#dataPath) {
+                this.#msgBinder = new UmbBindServerValidationToFormControl(this.#host, this.#el, this.#dataPath);
+            }
+            this.#validator = new UmbFormControlValidator(this.#host, this.#el, this.#dataPath);
+        }
+        // If we have a msgBinder, then lets update the value no matter the other conditions.
+        if (this.#msgBinder) {
+            this.#msgBinder.value = args[2];
+        }
+        return nothing;
+    }
+    disconnected() {
+        if (this.#validator) {
+            this.#validator?.destroy();
+            this.#validator = undefined;
+        }
+        if (this.#msgBinder) {
+            this.#msgBinder.destroy();
+            this.#msgBinder = undefined;
+        }
+        this.#el = undefined;
+    }
+}
+/**
+ * @description
+ * A Lit directive, which binds the validation state of the element to the Validation Context.
+ *
+ * The minimal binding can be established by just providing a host element:
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this)}>`;
+ * ```
+ * But can be extended with a dataPath, which is the path to the data holding the value. (if no server validation in this context, then this can be fictive and is then just used internal for remembering the validation state despite the element begin removed from the DOM.)
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline')}>`;
+ * ```
+ *
+ * Additional the value can be provided, which is then used to remove a server validation state, if the value is changed.
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline', this.headlineValue)}>`;
+ * ```
+ */
+export const umbBindToValidation = directive(UmbBindToValidationDirective);
+//export type { UmbFocusDirective };

package/dist-cms/packages/core/validation/index.d.ts

@@ -1,5 +1,8 @@
+export * from './components/form-validation-message.element.js';
+export * from './const.js';
 export * from './context/index.js';
 export * from './controllers/index.js';
+export * from './directives/bind-to-validation.lit-directive.js';
 export * from './events/index.js';
 export * from './interfaces/index.js';
 export * from './mixins/index.js';

package/dist-cms/packages/core/validation/index.js

@@ -1,5 +1,8 @@
+export * from './components/form-validation-message.element.js';
+export * from './const.js';
 export * from './context/index.js';
 export * from './controllers/index.js';
+export * from './directives/bind-to-validation.lit-directive.js';
 export * from './events/index.js';
 export * from './interfaces/index.js';
 export * from './mixins/index.js';

package/dist-cms/packages/core/validation/mixins/form-control.mixin.d.ts

@@ -1,11 +1,12 @@
 import { type LitElement } from '../../../../external/lit/index.js';
 import type { HTMLElementConstructor } from '../../../../libs/extension-api/index.js';
 type UmbNativeFormControlElement = Pick<HTMLObjectElement, 'validity' | 'checkValidity' | 'validationMessage' | 'setCustomValidity'> & HTMLElement;
-type FlagTypes = 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'badInput' | 'valid';
+type FlagTypes = 'customError' | 'badInput' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'valid';
 export interface UmbFormControlValidatorConfig {
     flagKey: FlagTypes;
     getMessageMethod: () => string;
     checkMethod: () => boolean;
+    weight: number;
 }
 export interface UmbFormControlMixinInterface<ValueType> extends HTMLElement {
     addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => UmbFormControlValidatorConfig;
@@ -27,6 +28,7 @@ export declare abstract class UmbFormControlMixinElement<ValueType> extends LitE
     addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => UmbFormControlValidatorConfig;
     removeValidator: (obj: UmbFormControlValidatorConfig) => void;
     protected addFormControlElement(element: UmbNativeFormControlElement): void;
+    protected removeFormControlElement(element: UmbNativeFormControlElement): void;
     protected getFormElement(): HTMLElement | undefined | null;
     focusFirstInvalidElement(): void;
     get value(): ValueType;
@@ -40,10 +42,11 @@ export declare abstract class UmbFormControlMixinElement<ValueType> extends LitE
     pristine: boolean;
 }
 /**
+ * @mixin
  * The mixin allows a custom element to participate in HTML forms.
  * @param {object} superClass - superclass to be extended.
- * @param defaultValue
- * @mixin
+ * @param {object} defaultValue - Default value for the form control.
+ * @returns {Function} - The mixin class.
  */
 export declare function UmbFormControlMixin<ValueType = FormData | FormDataEntryValue, T extends HTMLElementConstructor<LitElement> = HTMLElementConstructor<LitElement>, DefaultValueType = undefined>(superClass: T, defaultValue?: DefaultValueType): HTMLElementConstructor<UmbFormControlMixinElement<ValueType | DefaultValueType>> & T;
 export {};