@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/ts/components/rankings/rankings.component.ts

@@ -19,9 +19,15 @@ class iamRankings extends HTMLElement {
     ${loadCSS}
     </style>
     <div class="podium">
-      <div><iam-rank>1st</iam-rank><span class="first-position"></span></div>
-      <div><iam-rank>2nd</iam-rank><span class="second-position"></span></div>
-      <div><iam-rank>3rd</iam-rank><span class="third-position"></span></div>
+      <div>
+        <iam-rank class="rank--trophy first-position">1st</iam-rank>
+      </div>
+      <div>
+        <iam-rank class="second-position">2nd</iam-rank>
+      </div>
+      <div>
+        <iam-rank class="third-position">3rd</iam-rank>
+      </div>
     </div>
     <div class="mh-md" part="leaderboard"><slot></slot></div>
     `;
@@ -33,30 +39,37 @@ class iamRankings extends HTMLElement {
   }
 
   connectedCallback(): void {
-
-
     const firstText = this.shadowRoot?.querySelector('.first-position');
     const secondText = this.shadowRoot?.querySelector('.second-position');
     const thirdText = this.shadowRoot?.querySelector('.third-position');
-    const max = this.hasAttribute('data-max') ? this.getAttribute('data-max') : 100;
-
-    firstText?.innerHTML = this.querySelector('tbody tr:nth-child(1) :is(td,th):nth-child(1)')?.textContent;
-    secondText?.innerHTML = this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent;
-    thirdText?.innerHTML = this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent;
 
+    firstText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(1) :is(td,th):nth-child(1)')?.textContent
+    );
+    secondText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent
+    );
+    thirdText?.setAttribute(
+      'data-title',
+      this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent
+    );
 
-    
+    const max = this.hasAttribute('data-max') ? this.getAttribute('data-max') : 100;
     this.querySelectorAll('tbody tr').forEach((element) => {
-
       const value = element.querySelector('td:last-child')?.textContent?.trim();
 
-      if(!element.querySelector(':first-child progress'))
+      if (!element.querySelector(':first-child progress'))
         element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
     });
 
-    trackComponent(this, 'iam-rank', ['select-card']);
-  }
+    if (!this.classList.contains('hide-gold')) {
+      const firstRow = this.querySelector('tbody tr th');
 
+      firstRow?.insertAdjacentHTML('afterbegin', `<iam-rank class="rank--medal first-position">1st</iam-rank>`);
+    }
+  }
 }
 
 export default iamRankings;

package/assets/ts/components/search/search.component.ts

@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie';
 import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
+import advancedSelect from '../../modules/advanced-select';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
@@ -75,6 +76,8 @@ class iamSearch extends HTMLElement {
       displayInputField.setAttribute('list', listID);
     }
 
+    advancedSelect(this, displayInputField, datalist, true);
+
     // Search the endpoint when 3 characters has been added
     if (searchWrapper.hasAttribute('data-url')) {
       displayInputField.addEventListener('input', () => {
@@ -91,6 +94,7 @@ class iamSearch extends HTMLElement {
 
       if (match) {
         inputField.value = match.getAttribute('data-value');
+        displayInputField.value = match.getAttribute('data-value');
       } else if (displayInputField.value.length > 0 && !subMatch) {
         displayInputField.classList.add('is-invalid');
         displayInputField.closest('label').setAttribute('data-error', 'No results returned');
@@ -141,10 +145,8 @@ class iamSearch extends HTMLElement {
                 const actualValue = resolvePath(item, valueSchema, '');
                 const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 
-                console.log(displayValue);
-
                 if (!datalist.querySelector(`option[data-value="${actualValue}"]`))
-                  listString += `<option value="${displayValue}" data-value="${actualValue}"></option>`;
+                  listString += `<option value="${displayValue}" data-value="${actualValue}">${displayValue}</option>`;
               });
             } else if (typeof loopValues == 'object') {
               for (const [key, value] of Object.entries(loopValues)) {
@@ -154,7 +156,7 @@ class iamSearch extends HTMLElement {
                     const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 
                     if (!datalist.querySelector(`option[data-value="${actualValue}"]`))
-                      listString += `<option value="${key}: ${displayValue}" data-value='${actualValue}'></option>`;
+                      listString += `<option value="${key}: ${displayValue}" data-value='${actualValue}'>${key}: ${displayValue}</option>`;
                   });
                 }
               }

package/assets/ts/components/split-button/split-button.component.ts

@@ -0,0 +1,69 @@
+import iamMenu from '../menu/menu.component';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'split-button',
+});
+
+class iamSplitButton 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/split-button.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="split-button">
+      <slot></slot>
+      <div class="dropdown">
+        <button class="btn btn-split" part="dropdown" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions">
+          <i class="fa fa-angle-down fa-light"></i>
+        </button>
+
+        <iam-menu id="actions" style="position-anchor: --anchor-el;" popover>
+          <slot name="menu-item">
+
+          </slot>
+        </iam-menu>
+
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const dropdown = this.shadowRoot.querySelector('.split-menu');
+    const splitBtn = this.shadowRoot.querySelector('.btn-split');
+    const html = document.querySelector('html');
+    const mainButton = this.querySelector('.btn');
+
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
+    splitBtn.className = `${mainButton.className} btn-split`;
+
+    if (mainButton.disabled) {
+      splitBtn.disabled = true;
+    }
+
+    if (mainButton.classList.contains('btn-sm')) {
+      splitBtn.classList.add('btn-sm');
+    }
+  }
+}
+
+export default iamSplitButton;

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

@@ -55,6 +55,20 @@ class iamTableBasic extends HTMLElement {
 
     const savedTableBody = table.querySelector('tbody').cloneNode(true);
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
     moveAttributesToComponents(this);
 
     setupBasicTable(this, table, form, pagination);

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

@@ -49,6 +49,20 @@ class iamTableAjax extends HTMLElement {
 
     const form = findForm(this, table);
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
     setupBasicTable(this, table, form, pagination);
 
     setupAdvancedTable(this, table, form, pagination);

package/assets/ts/components/table-no-submit/table-no-submit.component.ts

@@ -51,6 +51,20 @@ class iamTableNoSubmit extends HTMLElement {
 
     const form = findForm(this, table);
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
     setupBasicTable(this, table, form, pagination);
 
     setupAdvancedTable(this, table);

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

@@ -49,6 +49,20 @@ class iamTableSubmit extends HTMLElement {
     if (params.has('page')) pagination.setAttribute('data-page', params.get('page'));
     if (params.has('show')) pagination.setAttribute('data-show', params.get('show'));
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
     setupBasicTable(this, table, form, pagination);
 
     setupAdvancedTable(this, table, form, pagination);

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

@@ -1,7 +1,6 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
-import {loadYouTubeScripts,createYoutTubeVideo} from '../../modules/videos';
-
+import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
 
 trackComponentRegistered('iam-video-card');
 
@@ -83,7 +82,7 @@ class iamVideoCard extends HTMLElement {
         });
         cardComponent.dispatchEvent(customEvent);
 
-        createYoutTubeVideo(embed,this.getAttribute('[data-youtbue]'));
+        createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));
         dialog.showModal();
       });
 

package/assets/ts/components.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+const components = [
+  'accordion',
+  'header',
+  'table',
+  'tabs',
+  'card',
+  'filter-card',
+  'video-card',
+  'record-card',
+  'filterlist',
+  'applied-filters',
+  'pagination',
+  'notification',
+  'actionbar',
+  'nav',
+  'collapsible-side',
+  'address-lookup',
+  'fileupload',
+  'search',
+  'inline-edit',
+  'multiselect',
+  'multi-step',
+  'slider',
+  'carousel',
+  'marketing',
+  'barchart',
+  'splitbutton',
+];
+
+const prefix = 'iam';
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1,
+};
+const componentExt = '.component.min.js';
+
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+  if (document.getElementsByTagName(`${prefix}-${component}`).length === 0) return;
+
+  const callback = (entries: any) => {
+    entries.forEach((entry: any) => {
+      if (entry.intersectionRatio > 0) {
+        console.log(component);
+
+        import(`./components/${component}/${component}${componentExt}`)
+          .then((module) => {
+            if (!window.customElements.get(`${prefix}-${component}`))
+              window.customElements.define(`${prefix}-${component}`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});

package/assets/ts/modules/advanced-select.ts

@@ -0,0 +1,125 @@
+function advancedSelect(advancedSelect, displayInputField, datalist, isSearch = false): boolean | void {
+  let currentFocus = -1;
+
+  if(!isSearch){
+    displayInputField.addEventListener('focus', function () {
+      displayInputField.setAttribute('placeholder', displayInputField.value);
+      displayInputField.setAttribute('data-value', displayInputField.value);
+      displayInputField.value = '';
+
+      displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
+      displayInputField.setAttribute('list', '');
+
+      datalist.style.display = 'block';
+    });
+  }
+  else {
+    displayInputField.addEventListener('focus', function () {
+
+      displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
+      displayInputField.setAttribute('list', '');
+
+      datalist.style.display = 'block';
+    });
+  }
+
+  displayInputField.addEventListener('blur', function () {
+    if (displayInputField.hasAttribute('data-value')) {
+      displayInputField.value = displayInputField.getAttribute('data-value');
+    }
+
+    setTimeout(() => {
+      datalist.style.display = 'none';
+    }, 500);
+  });
+
+  for (const option of datalist.options) {
+    if (option.innerHTML == '') option.innerHTML = option.value;
+  }
+
+
+  advancedSelect.addEventListener('click', function () {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('datalist option')) {
+      const option = event.target.closest('datalist option');
+ 
+      displayInputField.value = option.value;
+
+      if(typeof window.triggerDynamicEvent == "function")
+        window.triggerDynamicEvent(displayInputField);
+
+      datalist.style.display = 'none';
+
+      for (const optionInner of datalist.options) {
+        optionInner.classList.remove('active')
+      }
+
+      option.classList.add('active');
+    }
+
+  });
+
+
+  displayInputField.addEventListener('input', function () {
+    displayInputField.removeAttribute('data-value');
+    currentFocus = -1;
+    const text = displayInputField.value.toUpperCase();
+    for (const option of datalist.options) {
+      if (option.value.toUpperCase().indexOf(text) > -1) {
+        option.style.display = 'block';
+      } else {
+        option.style.display = 'none';
+      }
+    }
+  });
+
+  displayInputField.addEventListener('keydown', function (e) {
+    if (e.keyCode == 40) {
+      currentFocus++;
+      addActive(datalist.options);
+    } else if (e.keyCode == 38) {
+      currentFocus--;
+      addActive(datalist.options);
+    } else if (e.keyCode == 13) {
+      e.preventDefault();
+      if (currentFocus > -1) {
+        /*and simulate a click on the "active" item:*/
+        if (datalist.options) datalist.options[currentFocus].click();
+      }
+    }
+  });
+
+  function addActive(x): void {
+    if (!x) return false;
+    removeActive(x);
+    if (currentFocus >= x.length) currentFocus = 0;
+    if (currentFocus < 0) currentFocus = x.length - 1;
+    x[currentFocus].classList.add('active');
+  }
+
+  function removeActive(x): void {
+    for (let i = 0; i < x.length; i++) {
+      x[i].classList.remove('active');
+    }
+  }
+
+
+  // Add the empty button
+  displayInputField
+    .closest('label')
+    .insertAdjacentHTML('beforeend', '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>');
+  const closeBtn = advancedSelect.querySelector('.empty');
+
+  closeBtn.addEventListener('click', function (e) {
+    displayInputField.removeAttribute('placeholder');
+    displayInputField.removeAttribute('data-value');
+    displayInputField.value = '';
+    
+    for (const optionInner of datalist.options) {
+      optionInner.classList.remove('active')
+      optionInner.removeAttribute('style');
+    }
+  });
+}
+
+export default advancedSelect;

package/assets/ts/modules/dialogs.ts

@@ -132,80 +132,83 @@ const extendDialogs = (body): void => {
 
     // Popover
     if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
-      event.stopPropagation();
-
       const btn = event.target.closest('.dialog__wrapper > button');
       const parent = btn.parentNode;
-      let dataEvent = 'openPopover';
-      const popover = parent.querySelector(':scope > dialog');
-
-      // close open dialogs
-      if (
-        document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
-        document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover
-      ) {
-        // Check that the ope dialog isn't a parent of the dialog being opened
-        if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
-          document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
-        }
-      }
-
-      // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
-        btnElement.removeAttribute('aria-expanded');
-      });
 
-      if (popover.hasAttribute('open')) {
-        popover.close();
-        dataEvent = 'closePopover';
+      if (parent.querySelector('dialog')) {
+        event.stopPropagation();
 
-        popover.removeAttribute('style');
-        btn.removeAttribute('aria-expanded');
-      } else {
-        popover.show();
-        btn.setAttribute('aria-expanded', true);
+        let dataEvent = 'openPopover';
+        const popover = parent.querySelector(':scope > dialog');
 
-        const position = btn.getBoundingClientRect();
-        let topOffset = position.top;
-        let leftOffset = position.left;
-
-        if (btn.closest('iam-table')) {
-          const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-
-          topOffset -= container.top;
-          leftOffset -= container.left;
+        // close open dialogs
+        if (
+          document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
+          document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover
+        ) {
+          // Check that the ope dialog isn't a parent of the dialog being opened
+          if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
+            document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+          }
         }
 
-        if (popover.classList.contains('dialog--fix')) {
-          popover.setAttribute(
-            'style',
-            `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`
-          );
+        // Remove active class from exiting active buttons
+        Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
+          btnElement.removeAttribute('aria-expanded');
+        });
+
+        if (popover.hasAttribute('open')) {
+          popover.close();
+          dataEvent = 'closePopover';
+
+          popover.removeAttribute('style');
+          btn.removeAttribute('aria-expanded');
+        } else {
+          popover.show();
+          btn.setAttribute('aria-expanded', true);
+
+          const position = btn.getBoundingClientRect();
+          let topOffset = position.top;
+          let leftOffset = position.left;
+
+          if (btn.closest('iam-table')) {
+            const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+
+            topOffset -= container.top;
+            leftOffset -= container.left;
+          }
+
+          if (popover.classList.contains('dialog--fix')) {
+            popover.setAttribute(
+              'style',
+              `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`
+            );
+          }
         }
-      }
 
-      // When the dialog is fixed it could dip under the viewport
-      // Lets check the dimensions and transform it to appear above
-      let boundingRec = popover.getBoundingClientRect();
-      const popoverBottom = boundingRec.bottom - window.scrollY;
-      const windowPos = window.innerHeight - window.scrollY;
-      if (popoverBottom > windowPos) {
-        const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
-        popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
+        // When the dialog is fixed it could dip under the viewport
+        // Lets check the dimensions and transform it to appear above
+        let boundingRec = popover.getBoundingClientRect();
+        const popoverBottom = boundingRec.bottom - window.scrollY;
+        const windowPos = window.innerHeight - window.scrollY;
+        if (popoverBottom > windowPos) {
+          const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
+          popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
 
-        // Check that the dialog doesn't go over the top of the page
-        boundingRec = popover.getBoundingClientRect();
-        const popoverTop = boundingRec.top - window.scrollY;
+          // Check that the dialog doesn't go over the top of the page
+          boundingRec = popover.getBoundingClientRect();
+          const popoverTop = boundingRec.top - window.scrollY;
 
-        if (popoverTop < 100) popover.removeAttribute('style');
-      }
+          if (popoverTop < 100) popover.removeAttribute('style');
+        }
 
-      window.dataLayer = window.dataLayer || [];
+        window.dataLayer = window.dataLayer || [];
 
-      window.dataLayer.push({
-        event: dataEvent,
-        id: btn.textContent,
-      });
+        window.dataLayer.push({
+          event: dataEvent,
+          id: btn.textContent,
+        });
+      }
     }
 
     // Close popovers when clicked away

package/assets/ts/modules/dynamicEvents.ts

@@ -1,4 +1,14 @@
 // Create the event listeners
+window.triggerDynamicEvent = (element, event = "change"): void => {
+  console.log('event');
+
+  if(element.hasAttribute('data-change-events') && event == "change")
+    splitEvents(element, element.getAttribute('data-change-events'));
+  
+  if(element.hasAttribute('data-click-events') && event == "click")
+    splitEvents(element, element.getAttribute('data-click-events'));
+}
+
 const createDynamicEvents = (): void => {
   // Change event
   document.addEventListener('change', (event) => {
@@ -46,7 +56,8 @@ const checkConditions = (element, event): void | boolean => {
 
     if (document.querySelector(`${event['in-list']} option[value="${element.value}"]`)) {
       runEvent(match, event, 'if');
-    } else runEvent(match, event, 'else');
+    } 
+    else runEvent(match, event, 'else');
 
     return false;
   } else if ('event' in event) {