Merge remote-tracking branch 'origin/dev' into feature/package-barrels

Author: iOvergaard

.gitignore

@@ -37,4 +37,4 @@ out-css
 *.tgz
 
 # old source
-/src/**/*
+/src

package.json

@@ -30,6 +30,8 @@
     "storybook:analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
+    "test:coverage": "web-test-runner --node-resolve --coverage",
+    "test:coverage-for": "node ./scripts/test-coverage-package.js",
     "dev": "npm run clean && npm run storybook",
     "build": "lerna run --scope @umbraco-ui/uui-css build && lerna run build",
     "build:prod": "npm run clean && npm run build && npm run test",

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -0,0 +1,234 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+// TODO: make t possible to define FormDataEntryValue type.
+export declare abstract class FormControlMixinInterface {
+  formAssociated: boolean;
+  get value(): FormDataEntryValue;
+  set value(newValue: FormDataEntryValue);
+  name: string;
+  formResetCallback(): void;
+  checkValidity: Function;
+  protected _value: FormDataEntryValue;
+  protected _internals: any;
+  protected abstract getFormElement(): HTMLElement | undefined;
+}
+
+type FlagTypes =
+  | 'valueMissing'
+  | 'typeMismatch'
+  | 'patternMismatch'
+  | 'tooLong'
+  | 'tooShort'
+  | 'rangeUnderflow'
+  | 'stepMismatch'
+  | 'badInput'
+  | 'customError';
+interface Validator {
+  flagKey: FlagTypes;
+  getMessage: () => String;
+  checkMethod: () => boolean;
+}
+
+/**
+ * The mixin allows a custom element to participate in HTML forms.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export const FormControlMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) => {
+  abstract class FormControlMixinClass extends superClass {
+    /**
+     * This is a static class field indicating that the element is can be used inside a native form and participate in its events.
+     * It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.
+     * Read more about form controls here https://web.dev/more-capable-form-controls/
+     * @type {boolean}
+     */
+    static readonly formAssociated = true;
+
+    /**
+     * This is a name property of the component.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    @property({ type: String })
+    name = '';
+
+    /**
+     * Value of this form control.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    @property() // Do not 'reflect' as the attribute is used as fallback.
+    get value() {
+      return this._value;
+    }
+    set value(newValue) {
+      const oldValue = this._value;
+      this._value = newValue;
+      if (
+        'ElementInternals' in window &&
+        //@ts-ignore
+        'setFormValue' in window.ElementInternals.prototype
+      ) {
+        this._internals.setFormValue(this._value);
+      }
+      this.requestUpdate('value', oldValue);
+    }
+
+    // Validation
+    private _validityState: any = {};
+
+    /**
+     * Apply validation rule for requiring a value of this form control.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    @property({ type: Boolean, reflect: true })
+    required = false;
+
+    /**
+     * Required validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    @property({ type: String, attribute: 'required-message' })
+    requiredMessage = 'This field is required';
+
+    /**
+     * Apply custom error on this input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    @property({ type: Boolean, reflect: true })
+    error = false;
+
+    /**
+     * Custom error message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    @property({ type: String, attribute: 'error-message' })
+    errorMessage = 'This field is invalid';
+
+    private _value: FormDataEntryValue = '';
+    private _internals: any;
+    private _form: HTMLFormElement | null = null;
+    private _validators: Validator[] = [];
+
+    constructor(...args: any[]) {
+      super(...args);
+      this._internals = (this as any).attachInternals();
+
+      this.addValidator(
+        'valueMissing',
+        () => this.requiredMessage,
+        () => this.hasAttribute('required') && this.hasValue() === false
+      );
+      this.addValidator(
+        'customError',
+        () => this.errorMessage,
+        () => this.error
+      );
+    }
+
+    public hasValue(): boolean {
+      return this.value !== '';
+    }
+
+    protected abstract getFormElement(): HTMLElement | undefined;
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      this._removeFormListeners();
+      // TODO: try using formAssociatedCallback
+      this._form = this._internals.form;
+      if (this._form) {
+        if (this._form.hasAttribute('hide-validation')) {
+          this.setAttribute('hide-validation', '');
+        }
+        this._form.addEventListener('submit', this._onFormSubmit);
+        this._form.addEventListener('reset', this._onFormReset);
+      }
+    }
+    disconnectedCallback(): void {
+      super.disconnectedCallback();
+      this._removeFormListeners();
+    }
+    private _removeFormListeners() {
+      if (this._form) {
+        this._form.removeEventListener('submit', this._onFormSubmit);
+        this._form.removeEventListener('reset', this._onFormReset);
+      }
+    }
+
+    protected addValidator(
+      flagKey: FlagTypes,
+      getMessageMethod: () => String,
+      checkMethod: () => boolean
+    ) {
+      this._validators.push({
+        flagKey: flagKey,
+        getMessage: getMessageMethod,
+        checkMethod: checkMethod,
+      });
+    }
+
+    private _runValidators() {
+      this._validators.forEach(validator => {
+        if (validator.checkMethod()) {
+          this._validityState[validator.flagKey] = true;
+          this._internals.setValidity(
+            this._validityState,
+            validator.getMessage(),
+            this.getFormElement()
+          );
+        } else {
+          this._validityState[validator.flagKey] = false;
+        }
+      });
+
+      const hasError = Object.values(this._validityState).includes(true);
+
+      if (hasError === false) {
+        this._internals.setValidity({});
+      }
+    }
+
+    updated(changedProperties: Map<string | number | symbol, unknown>) {
+      super.updated(changedProperties);
+      this._runValidators();
+    }
+
+    private _onFormSubmit = () => {
+      if (this._form && this._form.checkValidity() === false) {
+        this.removeAttribute('hide-validation');
+      } else {
+        this.setAttribute('hide-validation', '');
+      }
+    };
+    private _onFormReset = () => {
+      this.setAttribute('hide-validation', '');
+    };
+
+    public formResetCallback() {
+      this.value = this.getAttribute('value') || '';
+    }
+
+    public checkValidity() {
+      return this._internals?.checkValidity();
+    }
+  }
+  return FormControlMixinClass as unknown as Constructor<FormControlMixinInterface> &
+    T;
+};

packages/uui-base/lib/mixins/index.ts

@@ -2,3 +2,4 @@ export * from './ActiveMixin';
 export * from './LabelMixin';
 export * from './SelectableMixin';
 export * from './SelectOnlyMixin';
+export * from './FormControlMixin';