@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/components/marketing/marketing.component.ts

@@ -3,18 +3,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Marketing"
+  event: 'customElementRegistered',
+  element: 'Marketing',
 });
 
 class iamMarketing extends HTMLElement {
-
-  constructor(){
+  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`;
+    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/marketing.css";`;
 
     const template = document.createElement('template');
@@ -33,17 +36,15 @@ class iamMarketing extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     this.classList.add('invert-colours');
 
-    if(this.hasAttribute('data-img')){
-      this.shadowRoot.querySelector('.marketing').insertAdjacentHTML(
-        'afterbegin',
-        `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`,
-      );
+    if (this.hasAttribute('data-img')) {
+      this.shadowRoot
+        .querySelector('.marketing')
+        .insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
     }
   }
 }
 
-export default iamMarketing;
+export default iamMarketing;

package/assets/ts/components/multi-step/multi-step.component.ts

@@ -1,17 +1,18 @@
 // @ts-nocheck
-import {trackComponent, trackComponentRegistered} from "../_global";
+import { trackComponent, trackComponentRegistered } from '../_global';
 
-trackComponentRegistered("iam-multi-step");
+trackComponentRegistered('iam-multi-step');
 
 class iamMultiStep extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/multi-step.component.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -25,238 +26,195 @@ class iamMultiStep extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  
-	connectedCallback() {
-
+  connectedCallback() {
     const MultiStepComponent = this;
     const steps = this.shadowRoot.querySelector('.steps');
     const form = this.querySelector('form');
-    
-    let fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
 
-    fieldsets.forEach((fieldset,index) => {
+    const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
 
-      steps.insertAdjacentHTML('beforeend',`<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
+    fieldsets.forEach((fieldset, index) => {
+      steps.insertAdjacentHTML(
+        'beforeend',
+        `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? 'active' : ''}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`
+      );
 
-      if(index === 0)
-        fieldset.classList.add('active');
+      if (index === 0) fieldset.classList.add('active');
 
-      const btnWrapper = document.createElement("div");
+      const btnWrapper = document.createElement('div');
       btnWrapper.classList.add('btn--wrapper');
       fieldset.appendChild(btnWrapper);
-      
-      if(index != 0)
-        btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
-  
-      if(index != fieldsets.length - 1)
-        btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-  
+
+      if (index != 0)
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index - 1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
+
+      if (index != fieldsets.length - 1)
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index + 1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
+
       // Last fieldset
-      if(index == fieldsets.length - 1){
-        if(form && form.querySelector(':scope > button[type="submit"]')){
-  
-          let existingButton = form.querySelector(':scope > button[type="submit"]');
-          existingButton.classList.add('mb-0')
-  
-          btnWrapper.insertAdjacentElement('beforeend',existingButton);
-        }
-        else
+      if (index == fieldsets.length - 1) {
+        if (form && form.querySelector(':scope > button[type="submit"]')) {
+          const existingButton = form.querySelector(':scope > button[type="submit"]');
+          existingButton.classList.add('mb-0');
+
+          btnWrapper.insertAdjacentElement('beforeend', existingButton);
+        } else
           btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
-      }  
+      }
     });
-  
-    
 
     // Open the fieldset with an error inside
-    let validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
+    const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
     for (let i = 0; i < validatedFieldsets.length; i++) {
+      const fieldset = validatedFieldsets[i];
+      const fieldsetID = fieldset.getAttribute('data-title');
 
-      let fieldset = validatedFieldsets[i];
-      let fieldsetID = fieldset.getAttribute('data-title');
-      
-      if(fieldset.querySelector('.is-invalid')){
-
+      if (fieldset.querySelector('.is-invalid')) {
         Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
           element.classList.add('active');
         });
 
         break;
-      }
-      else {
-
+      } else {
         Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
           element.classList.add('valid');
         });
       }
     }
 
     // Prevent the bubble messages
-    MultiStepComponent.addEventListener('invalid', (function () {
-      return function (e) {
-        e.preventDefault();
-      };
-    })(), true);
-
-
-
-
-    function validateFieldset(button){
-
-      const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`) ? MultiStepComponent.querySelector(`fieldset.active`) : MultiStepComponent.querySelector(`fieldset[data-title]`);
+    MultiStepComponent.addEventListener(
+      'invalid',
+      (function () {
+        return function (e) {
+          e.preventDefault();
+        };
+      })(),
+      true
+    );
+
+    function validateFieldset(button) {
+      const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
+        ? MultiStepComponent.querySelector(`fieldset.active`)
+        : MultiStepComponent.querySelector(`fieldset[data-title]`);
       const currentFieldsetID = currentFieldset.getAttribute('data-title');
       let isFieldsetValid = true;
-  
+
       currentFieldset.classList.add('was-validated');
-  
+
       Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
-  
-        if (!input.checkValidity())
-          isFieldsetValid = false;
+        if (!input.checkValidity()) isFieldsetValid = false;
       });
-  
-      // If valid mode to next field set
-      if(!isFieldsetValid){
-  
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-  
-          element.classList.remove('valid');
-        });
 
-        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-  
-          element.classList.remove('valid');
-        });
+      // If valid mode to next field set
+      if (!isFieldsetValid) {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element, index) => {
+            element.classList.remove('valid');
+          }
+        );
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element, index) => {
+            element.classList.remove('valid');
+          }
+        );
+      } else {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element, index) => {
+            element.classList.add('valid');
+          }
+        );
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element, index) => {
+            element.classList.add('valid');
+          }
+        );
       }
-      else {
-  
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-  
-          element.classList.add('valid');
-        });
 
-        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-  
-          element.classList.add('valid');
-        });
-      }
-  
       // Allow the previous button to navigate
-      if(isFieldsetValid || !button.hasAttribute('data-next')){
-  
-        const fieldset = MultiStepComponent.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
-        const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-  
+      if (isFieldsetValid || !button.hasAttribute('data-next')) {
+        const fieldset = MultiStepComponent.querySelector(
+          `fieldset[data-title="${button.getAttribute('data-title')}"]`
+        );
+        const step = MultiStepComponent.shadowRoot.querySelector(
+          `.steps button[data-title="${button.getAttribute('data-title')}"]`
+        );
+
         Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button, index) => {
           button.classList.remove('active');
         });
         Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button, index) => {
           button.classList.remove('active');
         });
-  
+
         step.classList.add('active');
         fieldset.classList.add('active');
       }
-  
-  
-      let fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
-      let validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
-  
+
+      const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
+      const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
+
       // update the progress bar
-      MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount/(fieldsetCount - 1) * 100)}%`);
+      MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);
     }
-  
+
     // remove error messages from server
     MultiStepComponent.addEventListener('keydown', (event) => {
-      if (event && event.target instanceof HTMLElement && event.target.closest('button')){
-  
+      if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
         const button = event.target.closest('button');
-  
-        if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
-          
+
+        if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {
           event.preventDefault();
           validateFieldset(button);
         }
-  
       }
-  
-      if (event && event.target instanceof HTMLElement && event.target.closest('input')){
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
         const input = event.target.closest('input');
-  
+
         input.classList.remove('is-invalid');
-  
-        if(event.keyCode == 13){
-          
+
+        if (event.keyCode == 13) {
           event.preventDefault();
         }
       }
     });
-  
-  
+
     MultiStepComponent.addEventListener('click', (event) => {
-      if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
-        
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
         const form = event.target.closest('form');
         form.classList.add('was-validated');
       }
-      return null
+      return null;
     });
 
-
     MultiStepComponent.shadowRoot.addEventListener('click', (event) => {
-      if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
-  
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
         const button = event.target.closest('button[data-title]');
 
         validateFieldset(button);
-      };
-      return null
+      }
+      return null;
     });
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    trackComponent(MultiStepComponent,"iam-multi-step",[]);
+    trackComponent(MultiStepComponent, 'iam-multi-step', []);
   }
 
   static get observedAttributes() {
-    return ["data-image"];
+    return ['data-image'];
   }
-  
+
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
-      case "data-total": {
-        if(this.shadowRoot.querySelector('.card__total'))
+      case 'data-total': {
+        if (this.shadowRoot.querySelector('.card__total'))
           this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
     }
-
   }
 }
 
-export default iamMultiStep;
+export default iamMultiStep;

package/assets/ts/components/multiselect/README.md

@@ -28,8 +28,8 @@ import('../node_modules/@iamproperty/components/assets/js/components/fileupload/
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-min | Int | - | Set's the minimum amout of tags needed for the input field to validate |
-| data-min | Int | - | Set's the maximum amout of tags allowed to be added |
-| data-is-required | flag | - | Makes it so at least one tag must be added for the it to be valid and allow the outer form to be sumitted |
+| Option           | Type | Default Value | Description                                                                                               |
+| ---------------- | ---- | ------------- | --------------------------------------------------------------------------------------------------------- |
+| data-min         | Int  | -             | Set's the minimum amout of tags needed for the input field to validate                                    |
+| data-min         | Int  | -             | Set's the maximum amout of tags allowed to be added                                                       |
+| data-is-required | flag | -             | Makes it so at least one tag must be added for the it to be valid and allow the outer form to be sumitted |