feat(ui-library): mixin file added

packages/ui-library/src/components/checkbox/index.ts

@@ -65,22 +65,6 @@ export class BlrCheckbox extends LitElement {
   @state() protected currentCheckedState: boolean | undefined = this.checked;
   @state() protected currentIndeterminateState: boolean | undefined = this.indeterminate;
 
-  // TESTING BEGIN
-  // Identify the element as a form-associated custom element
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  constructor() {
-    super();
-    // Get access to the internal form control APIs
-    this._internals = this.attachInternals();
-  }
-
-  public checkValidity() {
-    return this._internals.checkValidity;
-  }
-  // TESTING END
-
   protected updated(changedProperties: Map<string, boolean>) {
     if (changedProperties.has('checked')) {
       this.currentCheckedState = this.checked || false;

packages/ui-library/src/components/form-example-with-slot/index.ts

@@ -6,8 +6,9 @@ import { property } from 'lit/decorators.js';
 export class BlrFormExampleWithSlot extends LitElement {
   @property() theme: ThemeType = 'Light';
   @property() firstInputValue: string = '';
+  @property() firstTextInputHasError: boolean = false;
   @property() secondInputValue: string = '';
-  @property({ reflect: true }) checkBoxChecked: boolean = false;
+  @property() checkBoxChecked: boolean = false;
 
   protected render() {
     return html`
@@ -29,6 +30,7 @@ export class BlrFormExampleWithSlot extends LitElement {
           showinputicon="true"
           @blrTextValueChange="${this.handleFirstInputChange}"
           required="true"
+          errorMessage="input field required"
         ></blr-text-input>
         <blr-text-input
           size="md"
@@ -55,14 +57,13 @@ export class BlrFormExampleWithSlot extends LitElement {
           indeterminatedicon="blrMinus"
           haslabel="true"
           label="I accept the terms and conditions."
-          hintmessage="This is a small hint message"
-          hinticon="blrInfo"
           erroricon=""
           arialabel="check Input"
           checkinputid="checkInputId"
           name="checkInput"
           @blrCheckedChange=${this.handleCheckInput}
-          ?checked=${this.checkBoxChecked}
+          errorMessage="must be checked"
+          required="true"
         ></blr-checkbox>
       </blr-form>
     `;
@@ -73,55 +74,47 @@ export class BlrFormExampleWithSlot extends LitElement {
     const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];
     assignedNodes.forEach((node: any) => {
       if (node.name === 'firstInput') {
-        if (node.hasAttribute('required') && node.value === '') {
+        const shadowFirstInputElement = node.shadowRoot?.querySelector('input[name="firstInput"]');
+        if (!shadowFirstInputElement.checkValidity()) {
           node._onPropChanged({
             detail: {
               hasError: true,
               errorMessage: 'This is a required field',
             },
           });
         } else {
-          this.firstInputValue = node.value;
+          node._onPropChanged({
+            detail: {
+              hasError: false,
+              errorMessage: '',
+            },
+          });
         }
       }
 
       if (node.name === 'secondInput') {
-        if (node.hasAttribute('required') && node.value === '') {
+        const shadowSecondInputElement = node.shadowRoot?.querySelector('input[name="secondInput"]');
+        if (!shadowSecondInputElement.checkValidity()) {
           node._onPropChanged({
             detail: {
               hasError: true,
-              errorMessage: 'This is a second required field',
+              errorMessage: 'This is a required field',
             },
           });
         } else {
-          this.secondInputValue = node.value;
+          node._onPropChanged({
+            detail: {
+              hasError: false,
+              errorMessage: '',
+            },
+          });
         }
       }
 
       if (node.name === 'checkInput' && !node.hasAttribute('checked')) {
-        node._onPropChanged({
-          detail: {
-            hasError: true,
-            errorMessage: 'Error: Unchecked',
-          },
-        });
+        console.error('checkbox has error');
       }
     });
-
-    // just to simulate the value change. Remove later
-    setTimeout(() => {
-      this.dispatchEvent(
-        new CustomEvent('propChanged', {
-          detail: { hasError: false, errorMessage: '' },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }, 3000);
-
-    console.log(
-      `The submitted value are firstName: ${this.firstInputValue} lastName: ${this.secondInputValue} and TOA checked is ${this.checkBoxChecked}`
-    );
   }
 
   private handleFirstInputChange(evt: any) {

packages/ui-library/src/components/form-example-without-slot/index.ts

@@ -114,7 +114,6 @@ export class BlrFormExampleWithoutSlot extends LitElement {
           .hasError=${this.checkInputHasError}
           errorMessage="must be checked"
           required="true"
-          .checked=${this.checkBoxChecked}
         ></blr-checkbox>
         <blr-text-button
           theme="Light"

packages/ui-library/src/components/radio/index.ts

@@ -35,22 +35,6 @@ export class BlrRadio extends LitElement {
 
   @property() theme: ThemeType = 'Light';
 
-  // TESTING BEGIN
-  // Identify the element as a form-associated custom element
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  constructor() {
-    super();
-    // Get access to the internal form control APIs
-    this._internals = this.attachInternals();
-  }
-
-  public checkValidity() {
-    return this._internals.checkValidity;
-  }
-  // TESTING END
-
   protected render() {
     if (this.size) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, radioLight] : [formDark, radioDark];

packages/ui-library/src/components/select/index.ts

@@ -51,22 +51,6 @@ export class BlrSelect extends LitElement {
 
   @state() protected isFocused = false;
 
-  // TESTING BEGIN
-  // Identify the element as a form-associated custom element
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  constructor() {
-    super();
-    // Get access to the internal form control APIs
-    this._internals = this.attachInternals();
-  }
-
-  public checkValidity() {
-    return this._internals.checkValidity;
-  }
-  // TESTING END
-
   protected _optionElements: Element[] | undefined;
 
   protected handleFocus = () => {

packages/ui-library/src/components/text-input/index.ts

@@ -14,6 +14,7 @@ import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { TAG_NAME } from './renderFunction';
+import { TestingMixin } from '../../mixin/testing';
 import {
   BlrBlurEvent,
   BlrFocusEvent,
@@ -38,7 +39,7 @@ export type BlrTextInputEventHandlers = {
  * @fires blrTextValueChange TextInput value changed
  * @fires blrSelect Text in TextInput got selected
  */
-export class BlrTextInput extends LitElement {
+export class BlrTextInput extends TestingMixin(LitElement) {
   static styles = [styleCustom];
 
   @property() textInputId!: string;
@@ -69,22 +70,6 @@ export class BlrTextInput extends LitElement {
   @state() protected currentType: InputTypes = this.type;
   @state() protected isFocused = false;
 
-  // TESTING BEGIN
-  // Identify the element as a form-associated custom element
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  constructor() {
-    super();
-    // Get access to the internal form control APIs
-    this._internals = this.attachInternals();
-  }
-
-  public checkValidity() {
-    return this._internals.checkValidity;
-  }
-  // TESTING END
-
   protected togglePassword = () => {
     this.currentType = this.currentType === 'password' ? 'text' : 'password';
   };

packages/ui-library/src/mixin/testing.ts

@@ -0,0 +1,19 @@
+export const TestingMixin = (superClass) =>
+  class extends superClass {
+    constructor() {
+      super();
+      console.log(`mixin was created`);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      addEventListener('propChanged', this._onPropChanged);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      removeEventListener('propChanged', this._onPropChanged);
+    }
+    _onPropChanged = (event: any) => {
+      this.hasError = event.detail.hasError;
+      this.errorMessage = event.detail.errorMessage;
+    };
+  };