@iamproperty/components 3.9.0-beta-1 → 4.1.0-beta

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -0,0 +1,134 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "collapsible side menu"
+});
+
+class iamCollapsibleSideMenu extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/collapsible-side.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="container">
+
+      <div class="side-menu">
+        <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm">Open or close Collapsible menu</button>
+        <div class="side-menu-content closed">
+          <slot name="menu"></slot>
+        </div>
+      </div>
+
+      <div class="main-content">
+        <slot></slot>
+      </div>
+
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const sideMenu = this.shadowRoot.querySelector('.side-menu');
+    const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
+    const mainContent = this.shadowRoot.querySelector('.main-content')
+    const button = this.shadowRoot.querySelector('.side-menu > .btn');
+
+    // Load external CSS if needed
+    if(this.hasAttribute('data-css'))
+      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+
+    // Set sde nav title
+    if(!this.hasAttribute('data-title'))
+      this.setAttribute('data-title','configuration')
+
+    sideMenuContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    mainContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    
+
+    if(this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')){
+      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
+      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
+    }
+      
+    // Open the menu
+    button.addEventListener('click', (event) => {
+
+
+      if(!sideMenu.classList.contains('open')){
+
+        sideMenuContent.classList.remove('closed');
+
+
+        setTimeout(function(){ 
+          sideMenu.classList.add('open'); 
+        }, 100);
+
+
+      }
+      else {
+          
+        sideMenu.classList.remove('open');
+        setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      
+        // While the menu is closing dont allow the hover to re-open it until its fully closed.
+        sideMenu.classList.add('pe-none');
+        setTimeout(function(){ sideMenu.classList.remove('pe-none')}, 1000);
+      }
+    });
+
+    // Mimic hover event on desktop so that we can control when classes are set and which order
+    sideMenu.addEventListener('mouseenter', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+
+        sideMenu.classList.add('hover');
+        
+      }
+    });
+
+    sideMenu.addEventListener('mousemove', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+      }
+    });
+
+    sideMenu.addEventListener('mouseleave', (event) => {
+
+      if(window.innerWidth > 992){
+
+        sideMenu.classList.remove('hover');
+
+        if(!sideMenu.classList.contains('open'))
+          setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      }
+    });
+
+
+
+  }
+
+}
+
+export default iamCollapsibleSideMenu;

package/assets/ts/components/table/table.component.ts

@@ -65,6 +65,10 @@ class iamTable extends HTMLElement {
     classList = classList.replace('table--loading','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
+    // set actionbar class if needed
+    if(this.querySelector('.actionbar__sticky'))
+      this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
+
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');

package/assets/ts/modules/applied-filters.ts

@@ -96,7 +96,8 @@ function createAppliedFilters(container,filters) {
   Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
     addFilterButton(filters, input)
   });
-  
+
+
   container.addEventListener('change', function(event){
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
@@ -104,9 +105,8 @@ function createAppliedFilters(container,filters) {
       let input = event.target.closest('input[data-filter-text]');
 
       addFilterButton (filters, input);
-    };
-    
-  }, false);
+    }
+  });
 
   filters.addEventListener('click', function(event){
 
@@ -136,7 +136,8 @@ function createAppliedFilters(container,filters) {
             input.checked = false;
 
             var event = new Event('force');
-            input.closest('form').dispatchEvent(event);
+            if(!container.hasAttribute('data-nosubmit'))
+              input.closest('form').dispatchEvent(event);
           }
         }
       }

package/assets/ts/modules/dialogs.ts

@@ -36,6 +36,23 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
+      let firstWidth = dialog.offsetWidth;
+      dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+
+      // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
+      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+        
+        const id = element.getAttribute('data-duplicate');
+        const originalInput = document.getElementById(id);
+
+        if(element.checked != originalInput.checked){
+
+          element.checked = originalInput.checked;
+          let changeEvent = new Event('change');
+          element.dispatchEvent(changeEvent);
+        }
+      });
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "openModal",

package/assets/ts/modules/helpers.ts

@@ -17,23 +17,6 @@ export const addBodyClasses = (body) => {
     body.classList.add("ie");
   }
 
-  let nav = document.querySelector('nav');
-  if(nav) {
-    let navHeight = nav.offsetHeight;
-    document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-
-    function outputsize() {
-
-      navHeight = nav.offsetHeight;
-      document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-    }
-    
-    new ResizeObserver(outputsize).observe(nav);
-  }
-  else {
-    document.querySelector('body').style.setProperty("--nav-height", `0px`);
-  }
-
   return null
 }
 

package/assets/ts/modules/table.ts

@@ -140,7 +140,35 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   var timer;
 
   // Check what conditions are set on the table to see what the form actions are
-  let formSubmit = function(paginate = false){
+  let formSubmit = function(event, paginate = false){
+
+    if(form.classList.contains('processing'))
+      return false;
+
+
+    // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
+    if(event.type == "submit"){
+      form.classList.add('processing');
+      Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+
+        const id = element.getAttribute('data-duplicate');
+        const input = document.getElementById(id);
+        const card = document.querySelector(`[for="${id}"] iam-card`);
+
+
+        if(input.checked != element.checked){
+            
+          if(card){
+            let clickEvent = new Event('click');
+            card.dispatchEvent(clickEvent);
+          }
+          else {
+            input.checked = element.checked;
+          }
+        }
+      });
+      form.classList.remove('processing');
+    }
 
     if(form.hasAttribute('data-ajax')){
 
@@ -179,7 +207,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
 
       timer = setTimeout(function(){
-        formSubmit();
+        formSubmit(event);
       }, 500);
     };
   });
@@ -193,12 +221,12 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')){ // Allow for input fields to filter the current results without a new ajax call
@@ -209,21 +237,21 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')){
         
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -249,12 +277,53 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')){
       
-      form.reset();
+      form.classList.add('processing');
+      // Make sure any applied filters have been removed
+      Array.from(form.querySelectorAll('.applied-filters')).forEach((filters,index) => {
+        filters.innerHTML = "";
+      });
+
+      // Make sure cards are unlicked
+      let frm_elements = form.elements;
+
+      for (let i = 0; i < frm_elements.length; i++)
+      {
+          let field_type = frm_elements[i].type.toLowerCase() ? frm_elements[i].type.toLowerCase() : "text";
+          switch (field_type)
+          {
+          case "text":
+          case "password":
+          case "textarea":
+              frm_elements[i].value = "";
+              break;
+          case "radio":
+          case "checkbox":
+              if (frm_elements[i].checked)
+              {
+                  frm_elements[i].checked = false;
+              }
+              break;
+          case "select-one":
+          case "select-multi":
+              frm_elements[i].selectedIndex = -1;
+              break;
+          case "hidden":
+          default:
+              break;
+          }
+      }
+
+      Array.from(form.querySelectorAll('label iam-card')).forEach((card,index) => {
+        let clickEvent = new Event('click');
+        card.dispatchEvent(clickEvent);
+      });
+
+      form.classList.remove('processing');
 
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -265,17 +334,17 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if(!form.hasAttribute('data-submit'))
       event.preventDefault();
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('force', (event) => {
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('paginate', (event) => {
 
-    formSubmit(true);
+    formSubmit(event,true);
   });