@iamproperty/components 5.5.0 → 5.5.1-beta-2

package/assets/ts/components/chart/chart.component.ts

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import {setupChart,setEventObservers,setEventHandlers} from "../../modules/chart";
+
+class iamChart 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/charts.css";`;
+    const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
+    const chartType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'column';
+    const availableTypes = this.hasAttribute('data-types') ? this.getAttribute('data-types').split(',') : [];
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="chart__outer">
+      <div class="chart__key"></div>
+
+      <div class="chart__options">
+        <span>Chart Type</span>
+      </div>
+
+      <div class="chart__wrapper">
+        <div class="chart__yaxis"></div>
+        <div class="chart">
+        <div class="chart__lines"></div>
+        <div class="chart__guidelines"></div>
+        </div>
+      </div>
+    </div>`;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const element = this;
+    const orginalTable =  this.querySelector('table');
+    const newTable = orginalTable.cloneNode(true);
+    const chart = this.shadowRoot.querySelector('.chart');
+    const chartOuter = this.shadowRoot.querySelector('.chart__outer');
+    
+
+    chart.appendChild(newTable);
+
+    if(!this.classList.contains('chart--no-animate'))
+      chartOuter.classList.add('chart--animate');
+
+    setupChart(this,chartOuter,newTable);
+    setEventObservers(this,chartOuter);
+    
+    
+    const options = {
+      rootMargin: '50px',
+      threshold: 0.1
+    }
+
+    let callback = (entries:any) => {
+
+      entries.forEach((entry:any) => {
+        
+        if(entry.intersectionRatio > 0){
+
+
+          chartOuter.classList.add('animating');
+          chartOuter.classList.add('inview');
+          intObserver.unobserve(entry.target);
+
+          let rowCount = entry.target.querySelectorAll('tbody tr').length;
+          let animationTime = 2000 + (rowCount*100);
+          
+
+          setTimeout(function() {
+            chartOuter.classList.remove('animating');
+          }, animationTime);
+
+        }
+      });
+    };
+  
+    const intObserver = new IntersectionObserver(callback, options);
+    intObserver.observe(element);
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    
+
+  }
+}
+
+export default iamChart;

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -32,7 +32,7 @@ class iamFileupload extends HTMLElement {
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"></div>
+      <div class="files"><slot name="files"></slot></div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

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

@@ -122,10 +122,10 @@ class iamTable extends HTMLElement {
     tableModule.createSearchDataList(this.table, this.form);
 
     if(!this.form.querySelector('[data-pagination]')){
-      this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
+      this.form.insertAdjacentHTML('beforeend',`<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`);
     }
     if(!this.form.querySelector('[data-show]')){
-      this.form.innerHTML += `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
+      this.form.insertAdjacentHTML('beforeend',`<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`);
     }
 
     // Event listeners

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

@@ -2,7 +2,7 @@
 function createAppliedFilters(container,filters) {
 
 
-  function addFilterButton (filters, input){
+  function addFilterButton (filters, input,notSet=true){
 
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
@@ -24,6 +24,11 @@ function createAppliedFilters(container,filters) {
     
     filter.setAttribute('type','button')
     filter.classList.add('filter');
+    filter.classList.add('tag');
+
+    if(notSet)
+      filter.classList.add('tag--not-set');
+
     filter.setAttribute('data-name',inputName);
 
     filter.innerHTML = filterText.replace('$value', input.value);
@@ -55,6 +60,11 @@ function createAppliedFilters(container,filters) {
           let childFilter = document.createElement('button');
           childFilter.setAttribute('type','button')
           childFilter.classList.add('filter');
+          childFilter.classList.add('tag');
+          
+          if(notSet)
+            filter.classList.add('tag--not-set');
+          
           childFilter.setAttribute('data-name',name);
           childFilter.innerHTML = filterText.replace('$value', element.value);
           filters.appendChild(childFilter);
@@ -63,9 +73,11 @@ function createAppliedFilters(container,filters) {
           allValuesSet = false;
       });
 
+      
       if(filters.querySelector(`[data-name="${inputName}"]`))
         filters.querySelector(`[data-name="${inputName}"]`).remove();
 
+
       if(allValuesSet){
 
         let newFilterText = parent.getAttribute('data-filter-text');
@@ -83,6 +95,11 @@ function createAppliedFilters(container,filters) {
         let parentFilter = document.createElement('button');
         parentFilter.setAttribute('type','button')
         parentFilter.classList.add('filter');
+        parentFilter.classList.add('tag');
+            
+        if(notSet)
+          filter.classList.add('tag--not-set');
+
         parentFilter.setAttribute('data-name',inputName);
         parentFilter.innerHTML = newFilterText;
         filters.appendChild(parentFilter);
@@ -94,17 +111,48 @@ function createAppliedFilters(container,filters) {
   }
 
   // check for inputs on load
-  Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
-    addFilterButton(filters, input)
+  Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+
+    addFilterButton(filters, input, false)
+  });
+
+  let dialog = container.closest('dialog')
+  
+  if(dialog){
+    
+    let observer = new MutationObserver(function(event)  {
+      if (event[0].attributeName == 'open') {
+        Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+
+          addFilterButton(filters, input, false)
+        });
+      }
+    });
+
+    observer.observe(dialog, { attributes: true });
+  }
+
+
+  
+
+  container.addEventListener('tags-set', function(event){
+
+    filters.innerHTML = '';
+    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+
+      addFilterButton(filters, input, false)
+    });  
   });
 
 
   // check for change in displayed inputs
-  Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {
+  Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
 
     input.addEventListener('change', function(event){
 
-      addFilterButton(filters, input);
+      if(!container.hasAttribute('data-keep-same'))
+        addFilterButton(filters, input);
+
       event.stopPropagation(); // Don't allow the below event handler to trigger
     });
   });
@@ -114,7 +162,8 @@ function createAppliedFilters(container,filters) {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
       let input = event.target.closest('input[data-filter-text]');
-      addFilterButton(filters, input);
+      if(!container.hasAttribute('data-keep-same'))
+        addFilterButton(filters, input);
     }
   });
 
@@ -140,8 +189,13 @@ function createAppliedFilters(container,filters) {
           let input = inputs[i];
 
 
-          if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')
+          if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox'){
             input.value = "";
+            
+            var event = new Event('force');
+            if(!container.hasAttribute('data-nosubmit'))
+              input.closest('form').dispatchEvent(event);
+          }
           else {
             input.checked = false;