@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/internal/mixins/ActiveMixin.js

@@ -0,0 +1,26 @@
+import { property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  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 ActiveMixin = (superClass) => {
+  class UUIActiveMixinClass extends superClass {
+    constructor() {
+      super(...arguments);
+      this.active = false;
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], UUIActiveMixinClass.prototype, "active");
+  return UUIActiveMixinClass;
+};
+export {
+  ActiveMixin
+};
+//# sourceMappingURL=ActiveMixin.js.map

package/dist/internal/mixins/ActiveMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveMixin.js","sources":["../../../src/internal/mixins/ActiveMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUIActiveMixinInterface {\n  /**\n   * Set this boolean to true for then the related composition is sorted.\n   * @type {boolean}\n   * @attr\n   * @prop\n   */\n  active: boolean;\n}\n\n/**\n * This mixin provides functionality to other components to be active using a common `active` property.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const ActiveMixin = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  class UUIActiveMixinClass extends superClass {\n    /**\n     * Set this boolean to true for then the related composition is sorted.\n     * @type {boolean}\n     * @attr\n     */\n    @property({ type: Boolean, reflect: true })\n    public active = false;\n  }\n\n  return UUIActiveMixinClass as unknown as Constructor<UUIActiveMixinInterface> &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBO,MAAM,cAAc,CACzB,eACG;AAAA,EACH,MAAM,4BAA4B,WAAW;AAAA,IAA7C,cAAA;AAAA,YAAA,GAAA,SAAA;AAOE,WAAO,SAAS;AAAA,IAAA;AAAA,EAAA;AAAT,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAAA,GANtC,oBAOG,WAAA,QAAA;AAGT,SAAO;AAET;"}

package/dist/internal/mixins/FormControlMixin.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+type HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;
+type NativeFormControlElement = HTMLInputElement;
+type FlagTypes = 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'valid';
+interface UUIFormControlValidatorConfig {
+    flagKey: FlagTypes;
+    getMessageMethod: () => string;
+    checkMethod: () => boolean;
+    weight: number;
+}
+export interface UUIFormControlMixinInterface<ValueType> extends LitElement {
+    addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => void;
+    removeValidator: (obj: UUIFormControlValidatorConfig) => void;
+    focusFirstInvalidElement(): void;
+    get value(): ValueType;
+    set value(newValue: ValueType);
+    hasValue(): boolean;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    setCustomValidity(error?: string): void;
+    pristine: boolean;
+}
+export declare abstract class UUIFormControlMixinElement<ValueType> extends LitElement implements UUIFormControlMixinInterface<ValueType> {
+    protected _internals: ElementInternals;
+    protected _runValidators(): void;
+    addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => void;
+    removeValidator: (obj: UUIFormControlValidatorConfig) => void;
+    protected addFormControlElement(element: NativeFormControlElement): void;
+    protected abstract getFormElement(): HTMLElement | undefined | null;
+    focusFirstInvalidElement(): void;
+    get value(): ValueType;
+    set value(newValue: ValueType);
+    hasValue(): boolean;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    setCustomValidity(error: string): void;
+    pristine: boolean;
+}
+/**
+ * The mixin allows a custom element to participate in HTML forms.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export declare const UUIFormControlMixin: <ValueType = FormDataEntryValue | FormData, T extends HTMLElementConstructor<LitElement> = typeof LitElement, DefaultValueType = undefined>(superClass: T, defaultValue?: DefaultValueType) => HTMLElementConstructor<UUIFormControlMixinElement<ValueType | DefaultValueType>> & T;
+export {};

package/dist/internal/mixins/FormControlMixin.js

@@ -0,0 +1,342 @@
+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"
+];
+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
+};
+//# sourceMappingURL=FormControlMixin.js.map

package/dist/internal/mixins/FormControlMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlMixin.js","sources":["../../../src/internal/mixins/FormControlMixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUIFormControlEvent } from '../events/index.js';\n\ntype HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;\n\ntype NativeFormControlElement = HTMLInputElement; // Eventually use a specific interface or list multiple options like appending these types: ... | HTMLTextAreaElement | HTMLSelectElement\n\n/* FlagTypes type options originate from:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n * */\ntype FlagTypes =\n  | 'badInput'\n  | 'customError'\n  | 'patternMismatch'\n  | 'rangeOverflow'\n  | 'rangeUnderflow'\n  | 'stepMismatch'\n  | 'tooLong'\n  | 'tooShort'\n  | 'typeMismatch'\n  | 'valueMissing'\n  | 'valid';\n\nconst WeightedErrorFlagTypes = [\n  'customError',\n  'valueMissing',\n  'badInput',\n  'typeMismatch',\n  'patternMismatch',\n  'rangeOverflow',\n  'rangeUnderflow',\n  'stepMismatch',\n  'tooLong',\n  'tooShort',\n];\n\n// Acceptable as an internal interface/type, BUT if exposed externally this should be turned into a public class in a separate file.\ninterface UUIFormControlValidatorConfig {\n  flagKey: FlagTypes;\n  getMessageMethod: () => string;\n  checkMethod: () => boolean;\n  weight: number;\n}\n\nexport interface UUIFormControlMixinInterface<ValueType> extends LitElement {\n  addValidator: (\n    flagKey: FlagTypes,\n    getMessageMethod: () => string,\n    checkMethod: () => boolean,\n  ) => void;\n  removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n  //static formAssociated: boolean;\n  //protected getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n  focusFirstInvalidElement(): void;\n  get value(): ValueType;\n  set value(newValue: ValueType);\n  hasValue(): boolean;\n  formResetCallback(): void;\n  checkValidity(): boolean;\n  get validationMessage(): string;\n  get validity(): ValidityState;\n  setCustomValidity(error?: string): void;\n  pristine: boolean;\n}\n\nexport declare abstract class UUIFormControlMixinElement<ValueType>\n  extends LitElement\n  implements UUIFormControlMixinInterface<ValueType>\n{\n  protected _internals: ElementInternals;\n  protected _runValidators(): void;\n  addValidator: (\n    flagKey: FlagTypes,\n    getMessageMethod: () => string,\n    checkMethod: () => boolean,\n  ) => void;\n  removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n  protected addFormControlElement(element: NativeFormControlElement): void;\n\n  //static formAssociated: boolean;\n  protected abstract getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n  focusFirstInvalidElement(): void;\n  get value(): ValueType;\n  set value(newValue: ValueType);\n  hasValue(): boolean;\n  formResetCallback(): void;\n  checkValidity(): boolean;\n  get validationMessage(): string;\n  get validity(): ValidityState;\n  public setCustomValidity(error: string): void;\n  pristine: boolean;\n}\n\n/**\n * The mixin allows a custom element to participate in HTML forms.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const UUIFormControlMixin = <\n  ValueType = FormDataEntryValue | FormData,\n  T extends HTMLElementConstructor<LitElement> = typeof LitElement,\n  DefaultValueType = undefined,\n>(\n  superClass: T,\n  defaultValue?: DefaultValueType,\n) => {\n  abstract class UUIFormControlMixinClass extends superClass {\n    /**\n     * This is a static class field indicating that the element is can be used inside a native form and participate in its events.\n     * It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\n     * Read more about form controls here https://web.dev/more-capable-form-controls/\n     * @type {boolean}\n     */\n    static readonly formAssociated = true;\n\n    /**\n     * Value of this form control.\n     * 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.\n     * @type {string}\n     * @attr value\n     * @default ''\n     */\n    @property() // Do not 'reflect' as the attribute is used as fallback.\n    set value(newValue: ValueType | DefaultValueType) {\n      const oldValue = this.#value;\n      this.#value = newValue;\n      if (\n        'ElementInternals' in window &&\n        'setFormValue' in window.ElementInternals.prototype\n      ) {\n        this._internals.setFormValue((this.#value as any) ?? null);\n      }\n      this.requestUpdate('value', oldValue);\n    }\n    get value(): ValueType | DefaultValueType {\n      return this.#value;\n    }\n\n    // Validation\n    #validity: any = {};\n\n    /**\n     * 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.\n     * @type {boolean}\n     * @attr\n     * @default\n     */\n    @property({ type: Boolean, reflect: true })\n    public set pristine(value: boolean) {\n      if (this._pristine !== value) {\n        this._pristine = value;\n      }\n    }\n    public get pristine(): boolean {\n      return this._pristine;\n    }\n    private _pristine: boolean = true;\n\n    #value: ValueType | DefaultValueType =\n      defaultValue as unknown as DefaultValueType;\n    #valueOnFocus: ValueType | DefaultValueType =\n      undefined as unknown as DefaultValueType;\n    protected _internals: ElementInternals;\n    #form: HTMLFormElement | null = null;\n    readonly #validators: UUIFormControlValidatorConfig[] = [];\n    readonly #formCtrlElements: NativeFormControlElement[] = [];\n\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n\n      this.addEventListener('focus', () => {\n        this.#valueOnFocus = this.value;\n      });\n      this.addEventListener('blur', () => {\n        if (this.#valueOnFocus !== this.value) {\n          this.checkValidity();\n        }\n        this.#valueOnFocus = undefined as unknown as\n          | ValueType\n          | DefaultValueType;\n      });\n    }\n\n    /**\n     * Determine wether this FormControl has a value.\n     * @method hasValue\n     * @returns {boolean}\n     */\n    public hasValue(): boolean {\n      return this.value !== this.getDefaultValue();\n    }\n\n    /**\n     * Get internal form element.\n     * This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.\n     * @abstract\n     * @method getFormElement\n     * @returns {HTMLElement | undefined}\n     */\n    protected abstract getFormElement(): HTMLElement | undefined;\n\n    /**\n     * Focus first element that is invalid.\n     * @method focusFirstInvalidElement\n     * @returns {HTMLElement | undefined}\n     */\n    focusFirstInvalidElement() {\n      const firstInvalid = this.#formCtrlElements.find(\n        el => el.validity.valid === false,\n      );\n      if (firstInvalid) {\n        if ('focusFirstInvalidElement' in firstInvalid) {\n          (firstInvalid as any).focusFirstInvalidElement();\n        } else {\n          firstInvalid.focus();\n        }\n      } else {\n        this.focus();\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.#removeFormListeners();\n    }\n    #removeFormListeners() {\n      if (this.#form) {\n        this.#form.removeEventListener('submit', this.#onFormSubmit);\n      }\n    }\n\n    /**\n     * Add validation, to validate this Form Control.\n     * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.\n     * @example\n     * this.addValidator(\n     *  'tooLong',\n     *  () => 'This input contains too many characters',\n     *  () => this._value.length > 10\n     * );\n     * @function addValidator\n     * @param {FlagTypes} flagKey the type of validation.\n     * @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.\n     * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.\n     * @returns {UUIFormControlValidatorConfig} - The added validator configuration.\n     */\n    addValidator(\n      flagKey: FlagTypes,\n      getMessageMethod: () => string,\n      checkMethod: () => boolean,\n    ): UUIFormControlValidatorConfig {\n      const validator = {\n        flagKey: flagKey,\n        getMessageMethod: getMessageMethod,\n        checkMethod: checkMethod,\n        weight: WeightedErrorFlagTypes.indexOf(flagKey),\n      } satisfies UUIFormControlValidatorConfig;\n      this.#validators.push(validator);\n      // Sort validators based on the WeightedErrorFlagTypes order. [NL]\n      this.#validators.sort((a, b) => a.weight - b.weight);\n      return validator;\n    }\n\n    protected removeValidator(validator: UUIFormControlValidatorConfig) {\n      const index = this.#validators.indexOf(validator);\n      if (index !== -1) {\n        this.#validators.splice(index, 1);\n      }\n    }\n\n    readonly #runValidatorsCallback = () => this._runValidators();\n\n    /**\n     * @method addFormControlElement\n     * @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.\n     * @param element {NativeFormControlElement} - element to validate and include as part of this form association.\n     */\n    protected addFormControlElement(element: NativeFormControlElement) {\n      if (!element) {\n        throw new Error('Element is null or undefined');\n      }\n      if (!element.validity) {\n        throw new Error('Element is not a Form Control');\n      }\n      if (this.#formCtrlElements.includes(element)) return;\n      this.#formCtrlElements.push(element);\n      element.addEventListener(\n        UUIFormControlEvent.INVALID,\n        this.#runValidatorsCallback,\n      );\n      element.addEventListener(\n        UUIFormControlEvent.VALID,\n        this.#runValidatorsCallback,\n      );\n      // If we are in validationMode/'touched'/not-pristine then we need to validate this newly added control. [NL]\n      if (this._pristine === false) {\n        element.checkValidity();\n        // I think we could just execute validators for the new control, but now lets just run al of it again. [NL]\n        this._runValidators();\n      }\n    }\n\n    /**\n     * @function removeFormControlElement\n     * @param {NativeFormControlElement} element - element to remove as part of this form controls associated controls.\n     * @returns {void}\n     */\n    protected removeFormControlElement(element: NativeFormControlElement) {\n      const index = this.#formCtrlElements.indexOf(element);\n      if (index !== -1) {\n        this.#formCtrlElements.splice(index, 1);\n        element.removeEventListener(\n          UUIFormControlEvent.INVALID,\n          this.#runValidatorsCallback,\n        );\n        element.removeEventListener(\n          UUIFormControlEvent.VALID,\n          this.#runValidatorsCallback,\n        );\n        if (this._pristine === false) {\n          this._runValidators();\n        }\n      }\n    }\n\n    private _customValidityObject?: UUIFormControlValidatorConfig;\n\n    /**\n     * @method setCustomValidity\n     * @description Set custom validity state, set to empty string to remove the custom message.\n     * @param message {string} - The message to be shown\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}\n     */\n    protected setCustomValidity(message: string | null) {\n      if (this._customValidityObject) {\n        this.removeValidator(this._customValidityObject);\n      }\n\n      if (message != null && message !== '') {\n        this._customValidityObject = this.addValidator(\n          'customError',\n          (): string => message,\n          () => true,\n        );\n      }\n\n      this._runValidators();\n    }\n\n    /**\n     * @protected\n     * @function _runValidators\n     * @description Run all validators and set the validityState of this form control.\n     * Run this method when you want to re-run all validators.\n     * This can be relevant if you have a validators that is using values that is not triggering the Lit Updated Callback.\n     * Such are mainly properties that are not declared as a Lit state and or Lit property.\n     */\n    protected _runValidators() {\n      this.#validity = {};\n      let message: string | undefined = undefined;\n      let innerFormControlEl: NativeFormControlElement | undefined = undefined;\n\n      // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL]\n      this.#validators.some(validator => {\n        if (validator.checkMethod()) {\n          this.#validity[validator.flagKey] = true;\n          message = validator.getMessageMethod();\n          return true;\n        }\n        return false;\n      });\n\n      if (!message) {\n        // Loop through inner native form controls to adapt their validityState. [NL]\n        this.#formCtrlElements.some(formCtrlEl => {\n          let key: keyof ValidityState;\n          for (key in formCtrlEl.validity) {\n            if (key !== 'valid' && formCtrlEl.validity[key]) {\n              this.#validity[key] = true;\n              message = formCtrlEl.validationMessage;\n              innerFormControlEl ??= formCtrlEl;\n              return true;\n            }\n          }\n          return false;\n        });\n      }\n\n      const hasError = Object.values(this.#validity).includes(true);\n\n      // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid\n      this.#validity.valid = !hasError;\n\n      // Transfer the new validityState to the ElementInternals. [NL]\n      this._internals.setValidity(\n        this.#validity,\n        message,\n        innerFormControlEl ?? this.getFormElement() ?? undefined,\n      );\n\n      this.#dispatchValidationState();\n    }\n\n    #dispatchValidationState() {\n      // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL]\n      if (this._pristine === true) return;\n      if (this.#validity.valid) {\n        this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));\n      } else {\n        this.dispatchEvent(\n          new UUIFormControlEvent(UUIFormControlEvent.INVALID),\n        );\n      }\n    }\n\n    updated(changedProperties: Map<string | number | symbol, unknown>) {\n      super.updated(changedProperties);\n      this._runValidators();\n    }\n\n    readonly #onFormSubmit = () => {\n      this.pristine = false;\n    };\n\n    public formAssociatedCallback() {\n      this.#removeFormListeners();\n      this.#form = this._internals.form;\n      if (this.#form) {\n        // This relies on the form begin a 'uui-form':\n        if (this.#form.hasAttribute('submit-invalid')) {\n          this.pristine = false;\n        }\n        this.#form.addEventListener('submit', this.#onFormSubmit);\n      }\n    }\n    public formResetCallback() {\n      this.pristine = true;\n      this.value = this.getInitialValue() ?? this.getDefaultValue();\n    }\n\n    protected getDefaultValue(): DefaultValueType {\n      return defaultValue as DefaultValueType;\n    }\n    protected getInitialValue(): ValueType | DefaultValueType {\n      return this.getAttribute('value') as ValueType | DefaultValueType;\n    }\n\n    public checkValidity() {\n      this.pristine = false;\n      this._runValidators();\n\n      for (const key in this.#formCtrlElements) {\n        if (this.#formCtrlElements[key].checkValidity() === false) {\n          return false;\n        }\n      }\n\n      return this._internals?.checkValidity();\n    }\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity\n    public get validity(): ValidityState {\n      return this.#validity;\n    }\n\n    get validationMessage() {\n      return this._internals?.validationMessage;\n    }\n  }\n  return UUIFormControlMixinClass as unknown as HTMLElementConstructor<\n    UUIFormControlMixinElement<ValueType | DefaultValueType>\n  > &\n    T;\n};\n"],"names":[],"mappings":"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"}

package/dist/internal/mixins/FormControlWithBasicsMixin.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+import { type UUIFormControlMixinElement } from './FormControlMixin.js';
+type HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;
+/**
+ * @internal
+ */
+export interface UUIFormControlWithBasicsMixinElement<ValueType> extends UUIFormControlMixinElement<ValueType> {
+    name: string;
+    required: boolean;
+    requiredMessage: string;
+    error: boolean;
+    errorMessage: string;
+    /**
+     * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.
+     */
+    submit(): void;
+}
+/**
+ * The mixin allows a custom element to participate in HTML forms.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ * @internal
+ */
+export declare const UUIFormControlWithBasicsMixin: <ValueType = FormDataEntryValue | FormData, T extends HTMLElementConstructor<LitElement> = typeof LitElement, DefaultValueType = undefined>(superClass: T, defaultValue?: DefaultValueType) => HTMLElementConstructor<UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>> & T;
+export {};

package/dist/internal/mixins/FormControlWithBasicsMixin.js

@@ -0,0 +1,62 @@
+import { UUIFormControlMixin } from "./FormControlMixin.js";
+import { property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  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 UUIFormControlWithBasicsMixin = (superClass, defaultValue) => {
+  class UUIFormControlWithBasicsMixinClass extends UUIFormControlMixin(
+    superClass,
+    defaultValue
+  ) {
+    constructor(...args) {
+      super(...args);
+      this.name = "";
+      this.required = false;
+      this.requiredMessage = "This field is required";
+      this.error = false;
+      this.errorMessage = "This field is invalid";
+      this.addValidator(
+        "valueMissing",
+        () => this.requiredMessage,
+        () => this.hasAttribute("required") && this.hasValue() === false
+      );
+      this.addValidator(
+        "customError",
+        () => this.errorMessage,
+        () => this.error
+      );
+    }
+    /**
+     * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.
+     */
+    submit() {
+      this._internals.form?.requestSubmit();
+    }
+  }
+  __decorateClass([
+    property({ type: String })
+  ], UUIFormControlWithBasicsMixinClass.prototype, "name");
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], UUIFormControlWithBasicsMixinClass.prototype, "required");
+  __decorateClass([
+    property({ type: String, attribute: "required-message" })
+  ], UUIFormControlWithBasicsMixinClass.prototype, "requiredMessage");
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], UUIFormControlWithBasicsMixinClass.prototype, "error");
+  __decorateClass([
+    property({ type: String, attribute: "error-message" })
+  ], UUIFormControlWithBasicsMixinClass.prototype, "errorMessage");
+  return UUIFormControlWithBasicsMixinClass;
+};
+export {
+  UUIFormControlWithBasicsMixin
+};
+//# sourceMappingURL=FormControlWithBasicsMixin.js.map

package/dist/internal/mixins/FormControlWithBasicsMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlWithBasicsMixin.js","sources":["../../../src/internal/mixins/FormControlWithBasicsMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport {\n  UUIFormControlMixin,\n  type UUIFormControlMixinElement,\n} from './FormControlMixin.js';\nimport { property } from 'lit/decorators.js';\n\ntype HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;\n\n/**\n * @internal\n */\nexport interface UUIFormControlWithBasicsMixinElement<\n  ValueType,\n> extends UUIFormControlMixinElement<ValueType> {\n  name: string;\n  required: boolean;\n  requiredMessage: string;\n  error: boolean;\n  errorMessage: string;\n  /**\n   * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.\n   */\n  submit(): void;\n}\n/**\n * The mixin allows a custom element to participate in HTML forms.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n * @internal\n */\nexport const UUIFormControlWithBasicsMixin = <\n  ValueType = FormDataEntryValue | FormData,\n  T extends HTMLElementConstructor<LitElement> = typeof LitElement,\n  DefaultValueType = undefined,\n>(\n  superClass: T,\n  defaultValue?: DefaultValueType,\n) => {\n  /**\n   * @internal\n   */\n  abstract class UUIFormControlWithBasicsMixinClass\n    extends UUIFormControlMixin<ValueType, T, DefaultValueType>(\n      superClass,\n      defaultValue,\n    )\n    implements\n      UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>\n  {\n    /**\n     * This is a name property of the component.\n     * @type {string}\n     * @attr\n     * @default ''\n     */\n    @property({ type: String })\n    name = '';\n\n    /**\n     * Apply validation rule for requiring a value of this form control.\n     * @attr\n     * @default false\n     */\n    @property({ type: Boolean, reflect: true })\n    required = false;\n\n    /**\n     * Required validation message.\n     * @attr\n     */\n    @property({ type: String, attribute: 'required-message' })\n    requiredMessage = 'This field is required';\n\n    /**\n     * Apply custom error on this input.\n     * @attr\n     */\n    @property({ type: Boolean, reflect: true })\n    error = false;\n\n    /**\n     * Custom error message.\n     * @attr\n     */\n    @property({ type: String, attribute: 'error-message' })\n    errorMessage = 'This field is invalid';\n\n    constructor(...args: unknown[]) {\n      super(...args);\n\n      this.addValidator(\n        'valueMissing',\n        () => this.requiredMessage,\n        () => this.hasAttribute('required') && this.hasValue() === false,\n      );\n      this.addValidator(\n        'customError',\n        () => this.errorMessage,\n        () => this.error,\n      );\n    }\n\n    /**\n     * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.\n     */\n    submit() {\n      this._internals.form?.requestSubmit();\n    }\n  }\n\n  return UUIFormControlWithBasicsMixinClass as unknown as HTMLElementConstructor<\n    UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>\n  > &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAgCO,MAAM,gCAAgC,CAK3C,YACA,iBACG;AAAA,EAIH,MAAe,2CACL;AAAA,IACN;AAAA,IACA;AAAA,EAAA,EAIJ;AAAA,IAuCE,eAAe,MAAiB;AAC9B,YAAM,GAAG,IAAI;AAhCf,WAAA,OAAO;AAQP,WAAA,WAAW;AAOX,WAAA,kBAAkB;AAOlB,WAAA,QAAQ;AAOR,WAAA,eAAe;AAKb,WAAK;AAAA,QACH;AAAA,QACA,MAAM,KAAK;AAAA,QACX,MAAM,KAAK,aAAa,UAAU,KAAK,KAAK,eAAe;AAAA,MAAA;AAE7D,WAAK;AAAA,QACH;AAAA,QACA,MAAM,KAAK;AAAA,QACX,MAAM,KAAK;AAAA,MAAA;AAAA,IAEf;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,WAAK,WAAW,MAAM,cAAA;AAAA,IACxB;AAAA,EAAA;AAnDA,kBAAA;AAAA,IADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,EAAA,GAdb,mCAeb,WAAA,MAAA;AAQA,kBAAA;AAAA,IADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAAA,GAtB7B,mCAuBb,WAAA,UAAA;AAOA,kBAAA;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,EAAA,GA7B5C,mCA8Bb,WAAA,iBAAA;AAOA,kBAAA;AAAA,IADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAAA,GApC7B,mCAqCb,WAAA,OAAA;AAOA,kBAAA;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,EAAA,GA3CzC,mCA4Cb,WAAA,cAAA;AAyBF,SAAO;AAIT;"}

package/dist/internal/mixins/LabelMixin.d.ts

@@ -0,0 +1,21 @@
+import type { LitElement, TemplateResult } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class UUILabelMixinInterface {
+    /**
+     * Label to be used for aria-label and potentially as visual label for some components
+     * @type {string}
+     * @prop
+     * @attr
+     */
+    label: string;
+    protected renderLabel(): TemplateResult;
+}
+/**
+ * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.
+ *
+ * @param {string} labelSlotName - Name that will be assigned for the label slot
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export declare const LabelMixin: <T extends Constructor<LitElement>>(labelSlotName: string | null, superClass: T) => Constructor<UUILabelMixinInterface> & T;
+export {};

package/dist/internal/mixins/LabelMixin.js

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  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 LabelMixin = (labelSlotName, superClass) => {
+  class UUILabelMixinClass extends superClass {
+    constructor() {
+      super(...arguments);
+      this._labelSlotHasContent = false;
+    }
+    firstUpdated(_changedProperties) {
+      super.firstUpdated(_changedProperties);
+      if (!this.label) {
+        console.warn(this.tagName + " needs a `label`", this);
+      }
+    }
+    labelSlotChanged(e) {
+      this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    }
+    /**
+     * Call in the mixed element to render the label template. It contains a slot. This is optional.
+     * @method renderLabel
+     * @returns {TemplateResult}
+     */
+    renderLabel() {
+      return html`
+        ${this._labelSlotHasContent === false ? html`<span class="label">${this.label}</span>` : ""}
+        <slot
+          class="label"
+          style=${this._labelSlotHasContent ? "" : "display: none"}
+          name=${labelSlotName || ""}
+          @slotchange=${this.labelSlotChanged}></slot>
+      `;
+    }
+  }
+  __decorateClass([
+    property({ type: String })
+  ], UUILabelMixinClass.prototype, "label");
+  __decorateClass([
+    state()
+  ], UUILabelMixinClass.prototype, "_labelSlotHasContent");
+  return UUILabelMixinClass;
+};
+export {
+  LabelMixin
+};
+//# sourceMappingURL=LabelMixin.js.map

package/dist/internal/mixins/LabelMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelMixin.js","sources":["../../../src/internal/mixins/LabelMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUILabelMixinInterface {\n  /**\n   * Label to be used for aria-label and potentially as visual label for some components\n   * @type {string}\n   * @prop\n   * @attr\n   */\n  label: string;\n  protected renderLabel(): TemplateResult;\n}\n\n/**\n * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.\n *\n * @param {string} labelSlotName - Name that will be assigned for the label slot\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const LabelMixin = <T extends Constructor<LitElement>>(\n  labelSlotName: string | null,\n  superClass: T,\n) => {\n  /**\n   * Label mixin class containing the label functionality.\n   */\n  class UUILabelMixinClass extends superClass {\n    /**\n     * Label to be used for aria-label and potentially as visual label for some components\n     * @type {string}\n     * @attr\n     */\n    @property({ type: String })\n    public label!: string;\n\n    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {\n      super.firstUpdated(_changedProperties);\n      if (!this.label) {\n        console.warn(this.tagName + ' needs a `label`', this);\n      }\n    }\n\n    @state()\n    private _labelSlotHasContent = false;\n\n    private labelSlotChanged(e: Event): void {\n      this._labelSlotHasContent =\n        (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >\n        0;\n    }\n\n    /**\n     * Call in the mixed element to render the label template. It contains a slot. This is optional.\n     * @method renderLabel\n     * @returns {TemplateResult}\n     */\n    protected renderLabel() {\n      return html`\n        ${this._labelSlotHasContent === false\n          ? html`<span class=\"label\">${this.label}</span>`\n          : ''}\n        <slot\n          class=\"label\"\n          style=${this._labelSlotHasContent ? '' : 'display: none'}\n          name=${labelSlotName || ''}\n          @slotchange=${this.labelSlotChanged}></slot>\n      `;\n    }\n  }\n  return UUILabelMixinClass as unknown as Constructor<UUILabelMixinInterface> &\n    T;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwBO,MAAM,aAAa,CACxB,eACA,eACG;AAAA,EAIH,MAAM,2BAA2B,WAAW;AAAA,IAA5C,cAAA;AAAA,YAAA,GAAA,SAAA;AAiBE,WAAQ,uBAAuB;AAAA,IAAA;AAAA,IAR/B,aAAa,oBAA4D;AACvE,YAAM,aAAa,kBAAkB;AACrC,UAAI,CAAC,KAAK,OAAO;AACf,gBAAQ,KAAK,KAAK,UAAU,oBAAoB,IAAI;AAAA,MACtD;AAAA,IACF;AAAA,IAKQ,iBAAiB,GAAgB;AACvC,WAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAC/D;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOU,cAAc;AACtB,aAAO;AAAA,UACH,KAAK,yBAAyB,QAC5B,2BAA2B,KAAK,KAAK,YACrC,EAAE;AAAA;AAAA;AAAA,kBAGI,KAAK,uBAAuB,KAAK,eAAe;AAAA,iBACjD,iBAAiB,EAAE;AAAA,wBACZ,KAAK,gBAAgB;AAAA;AAAA,IAEzC;AAAA,EAAA;AAlCO,kBAAA;AAAA,IADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,EAAA,GANtB,mBAOG,WAAA,OAAA;AAUC,kBAAA;AAAA,IADP,MAAA;AAAA,EAAM,GAhBH,mBAiBI,WAAA,sBAAA;AA0BV,SAAO;AAET;"}