@iamproperty/components 7.6.3--beta3 → 7.6.3

package/assets/ts/components/modal/modal.component.ts

@@ -24,14 +24,11 @@ class iamModal extends HTMLElement {
     <dialog>
       ${closeButtonHtml}
       <div class="scroll">
-        <i class="fa-light fa-circle" aria-hidden="true">
-          <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>
-        </i>
         <slot></slot>
-        <div class="btn-group">
-          <button class="btn btn-secondary" data-cancel>Cancel</button>
+        <div class="btn__group">
+          <button class="btn btn-secondary" data-cancel>${this.hasAttribute('data-cancel-text') ? this.getAttribute('data-cancel-text') : 'Cancel'}</button>
           <slot name="agreed-button">
-            <button class="btn btn-primary" data-agreed>${this.hasAttribute('data-agreed-text') ? this.getAttribute('data-agreed-text') : 'Ok'}</button>
+            <button class="btn btn-primary" data-agreed>${this.hasAttribute('data-agreed-text') ? this.getAttribute('data-agreed-text') : 'Submit'}</button>
           </slot>
         </div>
       </div>
@@ -49,10 +46,18 @@ class iamModal extends HTMLElement {
     const dialog = this.shadowRoot?.querySelector('dialog');
     const closeButton = this.shadowRoot?.querySelector('[data-close]');
     const cancelButton = this.shadowRoot?.querySelector('[data-cancel]');
-    const agreedButton = this.shadowRoot?.querySelector('[data-agreed]');
-    const slottedAgreedButton = this.querySelector('button[slot="agreed-button"]');
+    const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : this.shadowRoot?.querySelector('[data-agreed]');
     const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';
 
+    const agreed = () => {
+      const agreedEvent = new CustomEvent('agreed', {
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(agreedEvent);
+
+      closeModal(id, this);
+    }
 
     document.addEventListener('click', (e) => {
       
@@ -60,6 +65,13 @@ class iamModal extends HTMLElement {
         openModal(id, this);
       }
     });
+
+    document.addEventListener('click', (e) => {
+      
+      if(e.target.matches(`[command="close"][commandfor="${id}"]`)){
+        closeModal(id, this);
+      }
+    });
     
     // Disable the original event 
     originalDialog?.addEventListener('command', (e) => {
@@ -71,6 +83,8 @@ class iamModal extends HTMLElement {
 
     originalDialog?.addEventListener('command', (e) => {
 
+      e.preventDefault();
+
       if (event.command == "close") {
         closeModal(id, this);
       }
@@ -78,13 +92,17 @@ class iamModal extends HTMLElement {
 
     originalDialog?.addEventListener('close', (e) => {
 
+      e.preventDefault();
+
       closeModal(id, this);
     });
 
     // Move the submit button so that the slot functionality works
-    Array.from(originalDialog?.querySelectorAll('[slot]')).forEach((element) => {
-      this.moveBefore(element, originalDialog);
-    });
+    if(originalDialog) {
+      Array.from(originalDialog?.querySelectorAll('[slot]')).forEach((element) => {
+        this.moveBefore(element, originalDialog);
+      });      
+    }
 
     closeButton?.addEventListener('click', () => {
       closeModal(id, this);
@@ -96,30 +114,39 @@ class iamModal extends HTMLElement {
 
     agreedButton?.addEventListener('click', () => {
 
-      const agreedEvent = new CustomEvent('agreed', {
-        detail: { modalId: id },
-      });
-
-      this.dispatchEvent(agreedEvent);
-
-      closeModal(id, this);
+      agreed();
     });
     
-    slottedAgreedButton?.addEventListener('click', () => {
 
-      const agreedEvent = new CustomEvent('agreed', {
-        detail: { modalId: id },
-      });
+    this.addEventListener('close-modal', () => {
+      closeModal(id, this);
+    });
 
-      this.dispatchEvent(agreedEvent);
+    // Hijack the default form submission 
+    originalDialog?.addEventListener('submit', (e) => {
 
-      closeModal(id, this);
+      if(e.submitter && e.submitter.hasAttribute('formmethod') && e.submitter.getAttribute('formmethod') =="dialog"){
+        
+        closeModal(id, this);
+      }
+      else {
+        agreed();
+      }
     });
 
-    this.addEventListener('close-modal', () => {
-      closeModal(id, this);
+    Array.from(this.querySelectorAll('button[type="submit"]')).forEach((button)=> {
+
+      button.addEventListener('click', (e) => {
+
+        if(!button.closest('form') && !button.hasAttribute('formmethod')){
+          
+          agreed();
+        }
+      });
     });
 
+
+    // Add click event on backdrop
     this.addEventListener('click', (event) => {
 
       // Small fix to make sure the dialog isn't a dialog inside of a dialog.
@@ -141,6 +168,16 @@ class iamModal extends HTMLElement {
         }
       }
     });
+
+
+    if (modalType == 'transactional'){
+      this.shadowRoot?.querySelector('.scroll')?.insertAdjacentHTML('afterbegin',
+        `<i class="fa-light fa-circle" aria-hidden="true">
+          <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>
+        </i>`
+      );
+    }
+            
   }
 }
 

package/assets/ts/components/rating/rating.component.ts

@@ -0,0 +1,86 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-rating');
+
+class iamRating extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/rating.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <input name="rating-component" type="range" />
+    </div>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const wrapper = this.shadowRoot?.querySelector('.wrapper');
+    const rating = this.shadowRoot?.querySelector('input');
+    const input = this.querySelector('input[type="number"],input[type="range"],select');
+
+    if(!input)
+      return false;
+
+    wrapper?.classList.add('show');
+    input?.classList.add('visually-hidden');
+    input?.setAttribute('tabindex',"-1");
+
+    rating?.setAttribute('min', input?.hasAttribute('min') ? input?.getAttribute('min') : '0');
+    rating?.setAttribute('max', input?.hasAttribute('max') ? input?.getAttribute('max') : '5');
+    rating?.setAttribute('step', input?.hasAttribute('step') ? input?.getAttribute('step') : '1');
+
+    if(input?.hasAttribute('disabled')){
+      rating?.setAttribute('disabled', 'disabled');
+    }
+    
+    rating.value = input.value ? input.value : rating?.getAttribute('min');
+
+    rating?.addEventListener('input', () => {
+
+      input.value = rating.value;
+
+      const changeEvent = new Event('change');
+      input.dispatchEvent(changeEvent);
+      const inputEvent = new Event('input');
+      input.dispatchEvent(inputEvent);
+    });
+
+    input?.addEventListener('input', () => {
+
+      rating.value = input.value;
+    });
+
+    /* Watch for any changes to the inputs attributes */
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if(mutation.type == "attributes"){
+          rating?.setAttribute(mutation.attributeName, input?.getAttribute(mutation.attributeName));
+        }
+      });
+    });
+
+    observer.observe(input, {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    });
+
+
+  }
+}
+
+export default iamRating;