fix: form participation fixes (#411)

package.json

@@ -59,9 +59,9 @@
     "@floating-ui/dom": "^0.5.4",
     "@fontsource/rubik": "^4.5.9",
     "@lit-labs/react": "^1.1.0",
-    "@open-wc/form-control": "^0.4.1",
-    "@open-wc/form-helpers": "^0.1.2",
-    "element-internals-polyfill": "^1.1.15",
+    "@open-wc/form-control": "^0.5.1",
+    "@open-wc/form-helpers": "^0.2.1",
+    "element-internals-polyfill": "^1.2.3",
     "lit": "^2.2.3"
   },
   "engines": {

src/components/drawer/bl-drawer.test.ts

@@ -75,13 +75,14 @@ describe('bl-drawer',() => {
     });
 
     it('should render the caption, embedUrl if provided', async ()=>{
-      const el = await fixture<typeOfBlDrawer>(html`<bl-drawer caption="My Caption" embed-url="some-url" open><div>example content</div></bl-drawer>`);
+      const embedUrl = '/?test=1';
+      const el = await fixture<typeOfBlDrawer>(html`<bl-drawer caption="My Caption" embed-url="${embedUrl}" open><div>example content</div></bl-drawer>`);
 
       const caption = el.shadowRoot?.querySelector('#drawer-caption') as HTMLElement;
       const iframeEl = el.shadowRoot?.querySelector('iframe') as HTMLElement;
 
       expect(iframeEl).to.exist;
-      expect(iframeEl.attributes.getNamedItem('src')?.value).to.contain("some-url");
+      expect(iframeEl.attributes.getNamedItem('src')?.value).to.contain(embedUrl);
 
       expect(caption).to.exist;
       expect(caption.innerText).to.equal('My Caption');
@@ -129,7 +130,6 @@ describe('bl-drawer',() => {
       setTimeout(async () => {
         const openEvent = await oneEvent(el,'bl-drawer-open');
         expect(openEvent).to.exist;
-        expect(openEvent.detail.isOpen).to.equal(true);
       });
     });
     it('should fire bl-drawer-close when dialog closes',async ()=>{
@@ -141,7 +141,6 @@ describe('bl-drawer',() => {
         closeBtn?.click();
         const openEvent = await oneEvent(el,'bl-drawer-close');
         expect(openEvent).to.exist;
-        expect(openEvent.detail.isOpen).to.equal(false);
       });
     });
   })

src/components/textarea/bl-textarea.test.ts

@@ -202,7 +202,7 @@ describe('bl-textarea', () => {
 
       const ev = await oneEvent(el, 'bl-invalid');
       expect(ev).to.exist;
-      expect(ev.detail['rangeOverflow']).to.equal(true);
+      expect(ev.detail['tooLong']).to.equal(true);
     });
   });
   describe('form integration', () => {

src/components/textarea/bl-textarea.ts

@@ -196,7 +196,7 @@ export default class BlTextarea extends FormControlMixin(LitElement) {
   @state() private dirty = false;
 
   render(): TemplateResult {
-    const maxLengthInvalid = this.internals.validity.rangeOverflow;
+    const maxLengthInvalid = this.internals.validity.tooLong;
     const invalidMessage = !this.checkValidity()
       ? html`<p class="invalid-text">${this.validationMessage}</p>`
       : ``;

src/utilities/form-control.ts

@@ -1,4 +1,4 @@
-import {maxLengthValidator, requiredValidator} from "@open-wc/form-control";
+import { maxLengthValidator } from "@open-wc/form-control";
 
 
 const validityStates: Array<keyof ValidityState> = [
@@ -25,15 +25,14 @@ export const innerInputValidators = validityStates.map(key => ({
 export const textareaLengthValidator = {
   ...maxLengthValidator,
   isValid(instance: HTMLElement & { validationTarget: HTMLTextAreaElement }) {
-    if(instance.validationTarget && instance.attributes.getNamedItem('maxLength')){
-      return (Number(instance.attributes.getNamedItem('maxlength')?.value) >= instance.validationTarget.value.length);
+    if(instance.validationTarget && instance.getAttribute('maxlength')){
+      return (Number(instance.getAttribute('maxlength')) >= instance.validationTarget.value.length);
     }
     return true;
   }
 };
 
 export const textAreaValidators = [
-    ...innerInputValidators,
-  textareaLengthValidator,
-  requiredValidator
+  ...innerInputValidators,
+  textareaLengthValidator
 ]