@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

package/assets/ts/components/filter-card/filter-card.component.ts

@@ -1,106 +1,106 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import { cardHTML, setupCard } from '../../modules/card.module';
-
-trackComponentRegistered('iam-filter-card');
-
-class iamFilerCard 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/filter-card.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    
-    ${loadCSS}
-    </style>
-    ${cardHTML}
-    `;
-
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  async connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const cardComponent = this;
-
-    setupCard(cardComponent);
-
-    // Dispatch events of selecting checkboxes
-    const checkbox = cardComponent.parentElement.querySelector('input[type="checkbox"]');
-    if (checkbox) {
-      checkbox.addEventListener('change', () => {
-        if (checkbox.checked) {
-          const customEvent = new CustomEvent('select-card', {
-            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
-          });
-          cardComponent.dispatchEvent(customEvent);
-          cardComponent.classList.add('active');
-        } else {
-          const customEvent = new CustomEvent('unselect-card', {
-            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
-          });
-          cardComponent.dispatchEvent(customEvent);
-          cardComponent.classList.remove('active');
-        }
-      });
-    }
-
-    if (cardComponent.parentElement.matches('button')) {
-      const button = cardComponent.parentElement;
-
-      button.addEventListener('click', () => {
-        if (!cardComponent.classList.contains('active')) {
-          const customEvent = new CustomEvent('select-card', {
-            detail: { 'button name': button.getAttribute('name') },
-          });
-          cardComponent.dispatchEvent(customEvent);
-          cardComponent.classList.add('active');
-        } else {
-          const customEvent = new CustomEvent('unselect-card', {
-            detail: { 'button name': button.getAttribute('name') },
-          });
-          cardComponent.dispatchEvent(customEvent);
-          cardComponent.classList.remove('active');
-        }
-      });
-    }
-
-    trackComponent(cardComponent, 'iam-filter-card', ['select-card', 'unselect-card']);
-  }
-
-  static get observedAttributes(): any {
-    return ['data-total'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-
-    
-
-    switch (attrName) {
-      case 'data-total': {
-        if (oldVal != newVal) {
-           
-          const cardBody = this.shadowRoot.querySelector('.card__body');
-
-          if(!cardBody?.querySelector('.card__total'))
-            cardBody.insertAdjacentHTML('beforeend',`<div class="card__total">${newVal}</div>`);
-          else {
-            cardBody?.querySelector('.card__total')?.innerHTML = newVal;
-          }
-
-
-        }
-        break;
-      }
-    }
-  }
-}
-
-export default iamFilerCard;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
+
+trackComponentRegistered('iam-filter-card');
+
+class iamFilerCard 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/filter-card.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    ${cardHTML}
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  async connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const cardComponent = this;
+
+    setupCard(cardComponent);
+
+    // Dispatch events of selecting checkboxes
+    const checkbox = cardComponent.parentElement.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.addEventListener('change', () => {
+        if (checkbox.checked) {
+          const customEvent = new CustomEvent('select-card', {
+            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
+          });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.add('active');
+        } else {
+          const customEvent = new CustomEvent('unselect-card', {
+            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
+          });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.remove('active');
+        }
+      });
+    }
+
+    if (cardComponent.parentElement.matches('button')) {
+      const button = cardComponent.parentElement;
+
+      button.addEventListener('click', () => {
+        if (!cardComponent.classList.contains('active')) {
+          const customEvent = new CustomEvent('select-card', {
+            detail: { 'button name': button.getAttribute('name') },
+          });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.add('active');
+        } else {
+          const customEvent = new CustomEvent('unselect-card', {
+            detail: { 'button name': button.getAttribute('name') },
+          });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.remove('active');
+        }
+      });
+    }
+
+    trackComponent(cardComponent, 'iam-filter-card', ['select-card', 'unselect-card']);
+  }
+
+  static get observedAttributes(): any {
+    return ['data-total'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+
+    
+
+    switch (attrName) {
+      case 'data-total': {
+        if (oldVal != newVal) {
+           
+          const cardBody = this.shadowRoot.querySelector('.card__body');
+
+          if(!cardBody?.querySelector('.card__total'))
+            cardBody.insertAdjacentHTML('beforeend',`<div class="card__total">${newVal}</div>`);
+          else {
+            cardBody?.querySelector('.card__total')?.innerHTML = newVal;
+          }
+
+
+        }
+        break;
+      }
+    }
+  }
+}
+
+export default iamFilerCard;

package/assets/ts/components/form/form.component.ts

@@ -1,102 +1,102 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import { searchAjax, filterList, setTag } from '../../modules/dropdown';
-
-trackComponentRegistered('iam-tag');
-
-class iamTag extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <div class="wrapper">
-      <slot></slot>
-    </div>
-    `;
-
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  isFormValid(form):boolean {
-
-    if (form.querySelector(':invalid'))
-      return false;
-
-    if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
-      return false;
-
-    if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
-      return false;
-
-    return true;
-  };
-
-  connectedCallback(): void {
-
-    const form = this.querySelector('form');
-
-    if(!form)
-      return false;
-
-    form.setAttribute('novalidate','true');
-
-    // Form validation
-    form.addEventListener('submit', (e) => {
-
-      form.classList.add('was-validated');
-
-      if (!this.isFormValid(form)) {
-
-      console.log('hey2');
-
-        e.preventDefault();
-        form?.querySelector('input:invalid')?.scrollIntoView();
-      }
-    });
-
-
-    // conditional reveal required fields
-    Array.from(form.querySelectorAll('.conditional [required]')).forEach((input) => {
-
-      input.setAttribute('data-conditional-required','true');
-      input.removeAttribute('required');
-    });
-
-    // conditional reveal required fields (for fields inside of components like the address lookup)
-    Array.from(form.querySelectorAll('.conditional [data-required]')).forEach((input) => {
-
-      input.setAttribute('data-conditional-data-required','true');
-      input.removeAttribute('data-required');
-    });
-
-    form.addEventListener('change', () => {
-
-
-      Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
-
-        input.removeAttribute('required');
-        input.removeAttribute('data-required');
-      });
-
-
-      Array.from(form.querySelectorAll('.conditional [data-conditional-required]')).forEach((input) => {
-
-        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
-
-        if(conditionalStyles.getPropertyValue("display") == 'block')
-          input.setAttribute('required', 'required');
-      });
-
-      Array.from(form.querySelectorAll('.conditional [data-conditional-data-required]')).forEach((input) => {
-
-        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
-
-        if(conditionalStyles.getPropertyValue("display") == 'block')
-          input.setAttribute('data-required', 'true');
-      });
-    });
-  }
-}
-
-export default iamTag;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { searchAjax, filterList, setTag } from '../../modules/dropdown';
+
+trackComponentRegistered('iam-tag');
+
+class iamTag extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  isFormValid(form):boolean {
+
+    if (form.querySelector(':invalid'))
+      return false;
+
+    if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+      return false;
+
+    if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+      return false;
+
+    return true;
+  };
+
+  connectedCallback(): void {
+
+    const form = this.querySelector('form');
+
+    if(!form)
+      return false;
+
+    form.setAttribute('novalidate','true');
+
+    // Form validation
+    form.addEventListener('submit', (e) => {
+
+      form.classList.add('was-validated');
+
+      if (!this.isFormValid(form)) {
+
+      console.log('hey2');
+
+        e.preventDefault();
+        form?.querySelector('input:invalid')?.scrollIntoView();
+      }
+    });
+
+
+    // conditional reveal required fields
+    Array.from(form.querySelectorAll('.conditional [required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-required','true');
+      input.removeAttribute('required');
+    });
+
+    // conditional reveal required fields (for fields inside of components like the address lookup)
+    Array.from(form.querySelectorAll('.conditional [data-required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-data-required','true');
+      input.removeAttribute('data-required');
+    });
+
+    form.addEventListener('change', () => {
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
+
+        input.removeAttribute('required');
+        input.removeAttribute('data-required');
+      });
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('required', 'required');
+      });
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-data-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('data-required', 'true');
+      });
+    });
+  }
+}
+
+export default iamTag;

package/assets/ts/components/header/header.component.ts

@@ -1,97 +1,97 @@
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'header',
-});
-
-class iamHeader 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/header.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = /*HTML*/`
-    <style>
-    ${loadCSS}
-    </style>
-    <div class="header-banner">
-      <div class="gradient-overflow">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.72 776.73" class="gradient-background">
-          <defs>
-            <style>
-              .cls-1 {
-                fill: url(#linear-gradient-2);
-                opacity: .15;
-              }
-
-              .cls-2 {
-                fill: url(#linear-gradient-3);
-                opacity: .2;
-              }
-
-              .cls-3 {
-                fill: url(#linear-gradient);
-                opacity: .1;
-              }
-            </style>
-            <linearGradient id="linear-gradient" x1="113.75" y1="113.75" x2="662.98" y2="662.98" gradientUnits="userSpaceOnUse">
-              <stop offset="0" stop-color="#54ffff" stop-opacity="0"/>
-              <stop offset="1" stop-color="#54ffff"/>
-            </linearGradient>
-            <linearGradient id="linear-gradient-2" x1="610.21" y1="166.51" x2="166.51" y2="610.21" xlink:href="#linear-gradient"/>
-            <linearGradient id="linear-gradient-3" x1="388.36" y1="177.95" x2="388.36" y2="598.78" xlink:href="#linear-gradient"/>
-          </defs>
-          <g id="Layer_1-2" data-name="Layer 1">
-            <g>
-              <path class="cls-3" d="M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23"/>
-              <path class="cls-1" d="M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36"/>
-              <path class="cls-2" d="M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0"/>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div class="picture-overflow">
-        <picture>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
-        </picture>
-      </div>
-      <div class="container">
-        <slot name="before"></slot>
-        <slot></slot>
-        <slot name="badge"></slot>
-        <slot name="panel" class="admin-panel"></slot>
-        <slot name="toolbox" class="admin-panel"></slot>
-      </div>
-    </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    this.classList.add('bg-primary');
-
-    const picture = this.shadowRoot.querySelector('picture');
-    const source = this.shadowRoot.querySelector('picture img');
-
-    if (this.hasAttribute('image')) source.setAttribute('src', this.getAttribute('image'));
-    else picture.remove();
-
-    if(this.querySelector('[slot="panel"]'))
-      this.classList.add('has-panel');
-
-    if(this.querySelector('[slot="toolbox"]'))
-      this.classList.add('has-toolbox');
-
-    if(this.querySelector('.breadcrumbs:first-child'))
-      this.classList.add('has-breadcrumbs');
-  }
-}
-
-export default iamHeader;
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'header',
+});
+
+class iamHeader 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/header.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = /*HTML*/`
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="header-banner">
+      <div class="gradient-overflow">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.72 776.73" class="gradient-background">
+          <defs>
+            <style>
+              .cls-1 {
+                fill: url(#linear-gradient-2);
+                opacity: .15;
+              }
+
+              .cls-2 {
+                fill: url(#linear-gradient-3);
+                opacity: .2;
+              }
+
+              .cls-3 {
+                fill: url(#linear-gradient);
+                opacity: .1;
+              }
+            </style>
+            <linearGradient id="linear-gradient" x1="113.75" y1="113.75" x2="662.98" y2="662.98" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stop-color="#54ffff" stop-opacity="0"/>
+              <stop offset="1" stop-color="#54ffff"/>
+            </linearGradient>
+            <linearGradient id="linear-gradient-2" x1="610.21" y1="166.51" x2="166.51" y2="610.21" xlink:href="#linear-gradient"/>
+            <linearGradient id="linear-gradient-3" x1="388.36" y1="177.95" x2="388.36" y2="598.78" xlink:href="#linear-gradient"/>
+          </defs>
+          <g id="Layer_1-2" data-name="Layer 1">
+            <g>
+              <path class="cls-3" d="M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23"/>
+              <path class="cls-1" d="M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36"/>
+              <path class="cls-2" d="M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0"/>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div class="picture-overflow">
+        <picture>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+        </picture>
+      </div>
+      <div class="container">
+        <slot name="before"></slot>
+        <slot></slot>
+        <slot name="badge"></slot>
+        <slot name="panel" class="admin-panel"></slot>
+        <slot name="toolbox" class="admin-panel"></slot>
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    this.classList.add('bg-primary');
+
+    const picture = this.shadowRoot.querySelector('picture');
+    const source = this.shadowRoot.querySelector('picture img');
+
+    if (this.hasAttribute('image')) source.setAttribute('src', this.getAttribute('image'));
+    else picture.remove();
+
+    if(this.querySelector('[slot="panel"]'))
+      this.classList.add('has-panel');
+
+    if(this.querySelector('[slot="toolbox"]'))
+      this.classList.add('has-toolbox');
+
+    if(this.querySelector('.breadcrumbs:first-child'))
+      this.classList.add('has-breadcrumbs');
+  }
+}
+
+export default iamHeader;