@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/internal/mixins/FormControlMixin.js

@@ -1,342 +1,279 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-import { property } from "lit/decorators.js";
 import { UUIFormControlEvent } from "../events/UUIFormControlEvent.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = __getOwnPropDesc(target, key);
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const WeightedErrorFlagTypes = [
-  "customError",
-  "valueMissing",
-  "badInput",
-  "typeMismatch",
-  "patternMismatch",
-  "rangeOverflow",
-  "rangeUnderflow",
-  "stepMismatch",
-  "tooLong",
-  "tooShort"
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import "lit";
+import { property } from "lit/decorators.js";
+//#region src/internal/mixins/FormControlMixin.ts
+var WeightedErrorFlagTypes = [
+	"customError",
+	"valueMissing",
+	"badInput",
+	"typeMismatch",
+	"patternMismatch",
+	"rangeOverflow",
+	"rangeUnderflow",
+	"stepMismatch",
+	"tooLong",
+	"tooShort"
 ];
-const UUIFormControlMixin = (superClass, defaultValue) => {
-  var _validity, _value, _valueOnFocus, _form, _validators, _formCtrlElements, _UUIFormControlMixinClass_instances, removeFormListeners_fn, _runValidatorsCallback, dispatchValidationState_fn, _onFormSubmit;
-  const _UUIFormControlMixinClass = class _UUIFormControlMixinClass extends superClass {
-    constructor(...args) {
-      super(...args);
-      __privateAdd(this, _UUIFormControlMixinClass_instances);
-      __privateAdd(this, _validity);
-      __privateAdd(this, _value);
-      __privateAdd(this, _valueOnFocus);
-      __privateAdd(this, _form);
-      __privateAdd(this, _validators);
-      __privateAdd(this, _formCtrlElements);
-      __privateAdd(this, _runValidatorsCallback);
-      __privateAdd(this, _onFormSubmit);
-      __privateSet(this, _validity, {});
-      this._pristine = true;
-      __privateSet(this, _value, defaultValue);
-      __privateSet(this, _valueOnFocus, void 0);
-      __privateSet(this, _form, null);
-      __privateSet(this, _validators, []);
-      __privateSet(this, _formCtrlElements, []);
-      __privateSet(this, _runValidatorsCallback, () => this._runValidators());
-      __privateSet(this, _onFormSubmit, () => {
-        this.pristine = false;
-      });
-      this._internals = this.attachInternals();
-      this.addEventListener("focus", () => {
-        __privateSet(this, _valueOnFocus, this.value);
-      });
-      this.addEventListener("blur", () => {
-        if (__privateGet(this, _valueOnFocus) !== this.value) {
-          this.checkValidity();
-        }
-        __privateSet(this, _valueOnFocus, void 0);
-      });
-    }
-    // Do not 'reflect' as the attribute is used as fallback.
-    set value(newValue) {
-      const oldValue = __privateGet(this, _value);
-      __privateSet(this, _value, newValue);
-      if ("ElementInternals" in window && "setFormValue" in window.ElementInternals.prototype) {
-        this._internals.setFormValue(__privateGet(this, _value) ?? null);
-      }
-      this.requestUpdate("value", oldValue);
-    }
-    get value() {
-      return __privateGet(this, _value);
-    }
-    set pristine(value) {
-      if (this._pristine !== value) {
-        this._pristine = value;
-      }
-    }
-    get pristine() {
-      return this._pristine;
-    }
-    /**
-     * Determine wether this FormControl has a value.
-     * @method hasValue
-     * @returns {boolean}
-     */
-    hasValue() {
-      return this.value !== this.getDefaultValue();
-    }
-    /**
-     * Focus first element that is invalid.
-     * @method focusFirstInvalidElement
-     * @returns {HTMLElement | undefined}
-     */
-    focusFirstInvalidElement() {
-      const firstInvalid = __privateGet(this, _formCtrlElements).find(
-        (el) => el.validity.valid === false
-      );
-      if (firstInvalid) {
-        if ("focusFirstInvalidElement" in firstInvalid) {
-          firstInvalid.focusFirstInvalidElement();
-        } else {
-          firstInvalid.focus();
-        }
-      } else {
-        this.focus();
-      }
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      __privateMethod(this, _UUIFormControlMixinClass_instances, removeFormListeners_fn).call(this);
-    }
-    /**
-     * Add validation, to validate this Form Control.
-     * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.
-     * @example
-     * this.addValidator(
-     *  'tooLong',
-     *  () => 'This input contains too many characters',
-     *  () => this._value.length > 10
-     * );
-     * @function addValidator
-     * @param {FlagTypes} flagKey the type of validation.
-     * @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.
-     * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.
-     * @returns {UUIFormControlValidatorConfig} - The added validator configuration.
-     */
-    addValidator(flagKey, getMessageMethod, checkMethod) {
-      const validator = {
-        flagKey,
-        getMessageMethod,
-        checkMethod,
-        weight: WeightedErrorFlagTypes.indexOf(flagKey)
-      };
-      __privateGet(this, _validators).push(validator);
-      __privateGet(this, _validators).sort((a, b) => a.weight - b.weight);
-      return validator;
-    }
-    removeValidator(validator) {
-      const index = __privateGet(this, _validators).indexOf(validator);
-      if (index !== -1) {
-        __privateGet(this, _validators).splice(index, 1);
-      }
-    }
-    /**
-     * @method addFormControlElement
-     * @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.
-     * @param element {NativeFormControlElement} - element to validate and include as part of this form association.
-     */
-    addFormControlElement(element) {
-      if (!element) {
-        throw new Error("Element is null or undefined");
-      }
-      if (!element.validity) {
-        throw new Error("Element is not a Form Control");
-      }
-      if (__privateGet(this, _formCtrlElements).includes(element)) return;
-      __privateGet(this, _formCtrlElements).push(element);
-      element.addEventListener(
-        UUIFormControlEvent.INVALID,
-        __privateGet(this, _runValidatorsCallback)
-      );
-      element.addEventListener(
-        UUIFormControlEvent.VALID,
-        __privateGet(this, _runValidatorsCallback)
-      );
-      if (this._pristine === false) {
-        element.checkValidity();
-        this._runValidators();
-      }
-    }
-    /**
-     * @function removeFormControlElement
-     * @param {NativeFormControlElement} element - element to remove as part of this form controls associated controls.
-     * @returns {void}
-     */
-    removeFormControlElement(element) {
-      const index = __privateGet(this, _formCtrlElements).indexOf(element);
-      if (index !== -1) {
-        __privateGet(this, _formCtrlElements).splice(index, 1);
-        element.removeEventListener(
-          UUIFormControlEvent.INVALID,
-          __privateGet(this, _runValidatorsCallback)
-        );
-        element.removeEventListener(
-          UUIFormControlEvent.VALID,
-          __privateGet(this, _runValidatorsCallback)
-        );
-        if (this._pristine === false) {
-          this._runValidators();
-        }
-      }
-    }
-    /**
-     * @method setCustomValidity
-     * @description Set custom validity state, set to empty string to remove the custom message.
-     * @param message {string} - The message to be shown
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}
-     */
-    setCustomValidity(message) {
-      if (this._customValidityObject) {
-        this.removeValidator(this._customValidityObject);
-      }
-      if (message != null && message !== "") {
-        this._customValidityObject = this.addValidator(
-          "customError",
-          () => message,
-          () => true
-        );
-      }
-      this._runValidators();
-    }
-    /**
-     * @protected
-     * @function _runValidators
-     * @description Run all validators and set the validityState of this form control.
-     * Run this method when you want to re-run all validators.
-     * This can be relevant if you have a validators that is using values that is not triggering the Lit Updated Callback.
-     * Such are mainly properties that are not declared as a Lit state and or Lit property.
-     */
-    _runValidators() {
-      __privateSet(this, _validity, {});
-      let message = void 0;
-      let innerFormControlEl = void 0;
-      __privateGet(this, _validators).some((validator) => {
-        if (validator.checkMethod()) {
-          __privateGet(this, _validity)[validator.flagKey] = true;
-          message = validator.getMessageMethod();
-          return true;
-        }
-        return false;
-      });
-      if (!message) {
-        __privateGet(this, _formCtrlElements).some((formCtrlEl) => {
-          let key;
-          for (key in formCtrlEl.validity) {
-            if (key !== "valid" && formCtrlEl.validity[key]) {
-              __privateGet(this, _validity)[key] = true;
-              message = formCtrlEl.validationMessage;
-              innerFormControlEl ??= formCtrlEl;
-              return true;
-            }
-          }
-          return false;
-        });
-      }
-      const hasError = Object.values(__privateGet(this, _validity)).includes(true);
-      __privateGet(this, _validity).valid = !hasError;
-      this._internals.setValidity(
-        __privateGet(this, _validity),
-        message,
-        innerFormControlEl ?? this.getFormElement() ?? void 0
-      );
-      __privateMethod(this, _UUIFormControlMixinClass_instances, dispatchValidationState_fn).call(this);
-    }
-    updated(changedProperties) {
-      super.updated(changedProperties);
-      this._runValidators();
-    }
-    formAssociatedCallback() {
-      __privateMethod(this, _UUIFormControlMixinClass_instances, removeFormListeners_fn).call(this);
-      __privateSet(this, _form, this._internals.form);
-      if (__privateGet(this, _form)) {
-        if (__privateGet(this, _form).hasAttribute("submit-invalid")) {
-          this.pristine = false;
-        }
-        __privateGet(this, _form).addEventListener("submit", __privateGet(this, _onFormSubmit));
-      }
-    }
-    formResetCallback() {
-      this.pristine = true;
-      this.value = this.getInitialValue() ?? this.getDefaultValue();
-    }
-    getDefaultValue() {
-      return defaultValue;
-    }
-    getInitialValue() {
-      return this.getAttribute("value");
-    }
-    checkValidity() {
-      this.pristine = false;
-      this._runValidators();
-      for (const key in __privateGet(this, _formCtrlElements)) {
-        if (__privateGet(this, _formCtrlElements)[key].checkValidity() === false) {
-          return false;
-        }
-      }
-      return this._internals?.checkValidity();
-    }
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
-    get validity() {
-      return __privateGet(this, _validity);
-    }
-    get validationMessage() {
-      return this._internals?.validationMessage;
-    }
-  };
-  _validity = new WeakMap();
-  _value = new WeakMap();
-  _valueOnFocus = new WeakMap();
-  _form = new WeakMap();
-  _validators = new WeakMap();
-  _formCtrlElements = new WeakMap();
-  _UUIFormControlMixinClass_instances = new WeakSet();
-  removeFormListeners_fn = function() {
-    if (__privateGet(this, _form)) {
-      __privateGet(this, _form).removeEventListener("submit", __privateGet(this, _onFormSubmit));
-    }
-  };
-  _runValidatorsCallback = new WeakMap();
-  dispatchValidationState_fn = function() {
-    if (this._pristine === true) return;
-    if (__privateGet(this, _validity).valid) {
-      this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));
-    } else {
-      this.dispatchEvent(
-        new UUIFormControlEvent(UUIFormControlEvent.INVALID)
-      );
-    }
-  };
-  _onFormSubmit = new WeakMap();
-  _UUIFormControlMixinClass.formAssociated = true;
-  let UUIFormControlMixinClass = _UUIFormControlMixinClass;
-  __decorateClass([
-    property()
-  ], UUIFormControlMixinClass.prototype, "value");
-  __decorateClass([
-    property({ type: Boolean, reflect: true })
-  ], UUIFormControlMixinClass.prototype, "pristine");
-  return UUIFormControlMixinClass;
-};
-export {
-  UUIFormControlMixin
+/**
+* The mixin allows a custom element to participate in HTML forms.
+*
+* @param {Object} superClass - superclass to be extended.
+* @mixin
+*/
+var UUIFormControlBaseMixin = (superClass, defaultValue) => {
+	class UUIFormControlBaseMixinClass extends superClass {
+		static {
+			this.formAssociated = true;
+		}
+		/**
+		* Value of this form control.
+		* If you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.
+		* @type {string}
+		* @attr value
+		* @default ''
+		*/
+		set value(newValue) {
+			const oldValue = this.#value;
+			this.#value = newValue;
+			if ("ElementInternals" in window && "setFormValue" in window.ElementInternals.prototype) this._internals.setFormValue(this.#value ?? null);
+			this.requestUpdate("value", oldValue);
+		}
+		get value() {
+			return this.#value;
+		}
+		#validity;
+		/**
+		* Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.
+		* @type {boolean}
+		* @attr
+		* @default
+		*/
+		set pristine(value) {
+			if (this._pristine !== value) this._pristine = value;
+		}
+		get pristine() {
+			return this._pristine;
+		}
+		#value;
+		#valueOnFocus;
+		#hadFocus;
+		#form;
+		#validators;
+		#formCtrlElements;
+		constructor(...args) {
+			super(...args);
+			this.#validity = {};
+			this._pristine = true;
+			this.#value = defaultValue;
+			this.#valueOnFocus = void 0;
+			this.#hadFocus = false;
+			this.#form = null;
+			this.#validators = [];
+			this.#formCtrlElements = [];
+			this.#runValidatorsCallback = () => this._runValidators();
+			this.#onFormSubmit = () => {
+				this.pristine = false;
+			};
+			this._internals = this.attachInternals();
+			this.addEventListener("focus", () => {
+				this.#valueOnFocus = this.value;
+				this.#hadFocus = false;
+			});
+			this.addEventListener("blur", () => {
+				if (this.pristine) {
+					this.#hadFocus = true;
+					if (this.#valueOnFocus !== this.value) this.checkValidity();
+				}
+				this.#valueOnFocus = void 0;
+			});
+		}
+		/**
+		* Determine wether this FormControl has a value.
+		* @method hasValue
+		* @returns {boolean}
+		*/
+		hasValue() {
+			return this.value !== this.getDefaultValue();
+		}
+		/**
+		* Focus first element that is invalid.
+		* @method focusFirstInvalidElement
+		* @returns {HTMLElement | undefined}
+		*/
+		focusFirstInvalidElement() {
+			const firstInvalid = this.#formCtrlElements.find((el) => el.validity.valid === false);
+			if (firstInvalid) if ("focusFirstInvalidElement" in firstInvalid) firstInvalid.focusFirstInvalidElement();
+			else firstInvalid.focus();
+			else this.focus();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.#removeFormListeners();
+		}
+		#removeFormListeners() {
+			if (this.#form) this.#form.removeEventListener("submit", this.#onFormSubmit);
+		}
+		/**
+		* Add validation, to validate this Form Control.
+		* See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.
+		* @example
+		* this.addValidator(
+		*  'tooLong',
+		*  () => 'This input contains too many characters',
+		*  () => this._value.length > 10
+		* );
+		* @function addValidator
+		* @param {FlagTypes} flagKey the type of validation.
+		* @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.
+		* @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.
+		* @returns {UUIFormControlValidatorConfig} - The added validator configuration.
+		*/
+		addValidator(flagKey, getMessageMethod, checkMethod) {
+			const validator = {
+				flagKey,
+				getMessageMethod,
+				checkMethod,
+				weight: WeightedErrorFlagTypes.indexOf(flagKey)
+			};
+			this.#validators.push(validator);
+			this.#validators.sort((a, b) => a.weight - b.weight);
+			return validator;
+		}
+		removeValidator(validator) {
+			const index = this.#validators.indexOf(validator);
+			if (index !== -1) this.#validators.splice(index, 1);
+		}
+		#runValidatorsCallback;
+		/**
+		* @method addFormControlElement
+		* @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.
+		* @param element {NativeFormControlElement} - element to validate and include as part of this form association.
+		*/
+		addFormControlElement(element) {
+			if (!element) throw new Error("Element is null or undefined");
+			if (!element.validity) throw new Error("Element is not a Form Control");
+			if (this.#formCtrlElements.includes(element)) return;
+			this.#formCtrlElements.push(element);
+			element.addEventListener(UUIFormControlEvent.INVALID, this.#runValidatorsCallback);
+			element.addEventListener(UUIFormControlEvent.VALID, this.#runValidatorsCallback);
+			if (this._pristine === false) {
+				element.checkValidity();
+				this._runValidators();
+			}
+		}
+		/**
+		* @function removeFormControlElement
+		* @param {NativeFormControlElement} element - element to remove as part of this form controls associated controls.
+		* @returns {void}
+		*/
+		removeFormControlElement(element) {
+			const index = this.#formCtrlElements.indexOf(element);
+			if (index !== -1) {
+				this.#formCtrlElements.splice(index, 1);
+				element.removeEventListener(UUIFormControlEvent.INVALID, this.#runValidatorsCallback);
+				element.removeEventListener(UUIFormControlEvent.VALID, this.#runValidatorsCallback);
+				if (this._pristine === false) this._runValidators();
+			}
+		}
+		/**
+		* @method setCustomValidity
+		* @description Set custom validity state, set to empty string to remove the custom message.
+		* @param message {string} - The message to be shown
+		* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}
+		*/
+		setCustomValidity(message) {
+			if (this._customValidityObject) this.removeValidator(this._customValidityObject);
+			if (message != null && message !== "") this._customValidityObject = this.addValidator("customError", () => message, () => true);
+			this._runValidators();
+		}
+		/**
+		* @protected
+		* @function _runValidators
+		* @description Run all validators and set the validityState of this form control.
+		* Run this method when you want to re-run all validators.
+		* This can be relevant if you have a validators that is using values that is not triggering the Lit Updated Callback.
+		* Such are mainly properties that are not declared as a Lit state and or Lit property.
+		*/
+		_runValidators() {
+			this.#validity = {};
+			let message = void 0;
+			let innerFormControlEl = void 0;
+			this.#validators.some((validator) => {
+				if (validator.checkMethod()) {
+					this.#validity[validator.flagKey] = true;
+					message = validator.getMessageMethod();
+					return true;
+				}
+				return false;
+			});
+			if (!message) this.#formCtrlElements.some((formCtrlEl) => {
+				let key;
+				for (key in formCtrlEl.validity) if (key !== "valid" && formCtrlEl.validity[key]) {
+					this.#validity[key] = true;
+					message = formCtrlEl.validationMessage;
+					innerFormControlEl ??= formCtrlEl;
+					return true;
+				}
+				return false;
+			});
+			const hasError = Object.values(this.#validity).includes(true);
+			this.#validity.valid = !hasError;
+			this._internals.setValidity(this.#validity, message, innerFormControlEl ?? this.getFormElement() ?? void 0);
+			this.#dispatchValidationState();
+		}
+		#dispatchValidationState() {
+			if (this._pristine === true) return;
+			if (this.#validity.valid) this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));
+			else this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.INVALID));
+		}
+		updated(changedProperties) {
+			super.updated(changedProperties);
+			if (this.pristine && this.#hadFocus && changedProperties.has("value")) this.checkValidity();
+			else this._runValidators();
+		}
+		#onFormSubmit;
+		formAssociatedCallback() {
+			this.#removeFormListeners();
+			this.#form = this._internals.form;
+			if (this.#form) {
+				if (this.#form.hasAttribute("submit-invalid")) this.pristine = false;
+				this.#form.addEventListener("submit", this.#onFormSubmit);
+			}
+		}
+		formResetCallback() {
+			this.pristine = true;
+			this.#hadFocus = false;
+			this.value = this.getInitialValue() ?? this.getDefaultValue();
+			this.#valueOnFocus = void 0;
+		}
+		getDefaultValue() {
+			return defaultValue;
+		}
+		getInitialValue() {
+			return this.getAttribute("value");
+		}
+		checkValidity() {
+			this.pristine = false;
+			this._runValidators();
+			for (const key in this.#formCtrlElements) if (this.#formCtrlElements[key].checkValidity() === false) return false;
+			return this._internals?.checkValidity();
+		}
+		get validity() {
+			return this.#validity;
+		}
+		get validationMessage() {
+			return this._internals?.validationMessage;
+		}
+	}
+	__decorate([property()], UUIFormControlBaseMixinClass.prototype, "value", null);
+	__decorate([property({
+		type: Boolean,
+		reflect: true
+	})], UUIFormControlBaseMixinClass.prototype, "pristine", null);
+	return UUIFormControlBaseMixinClass;
 };
-//# sourceMappingURL=FormControlMixin.js.map
+//#endregion
+export { UUIFormControlBaseMixin };
+
+//# sourceMappingURL=FormControlMixin.js.map