@iamproperty/components 7.3.0 → 7.5.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>
     `;
@@ -36,12 +42,21 @@ class iamRankings extends HTMLElement {
     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();
 
@@ -49,7 +64,11 @@ class iamRankings extends HTMLElement {
         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>`);
+    }
   }
 }
 

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,67 @@
+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/word-count/word-count.component.ts

@@ -0,0 +1,91 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-word-count');
+
+class iamCard 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/word-count.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const input = this.querySelector('input,textarea,select');
+    let span = this.querySelector('[data-count]');
+
+    if (!span) {
+      span = document.createElement('span');
+      this.append(span);
+    }
+
+    console.log(input.value.split(' ').length);
+
+    if (this.hasAttribute('data-character')) span.setAttribute('data-count', input.value ? input.value.length : '0');
+    else span.setAttribute('data-count', input.value ? input.value.split(' ').length : '0');
+
+    const maxlength = this.getAttribute('data-max');
+    this.style.setProperty('--maxlength', maxlength);
+    span.setAttribute('data-max', this.getAttribute('data-max'));
+
+    input.addEventListener('input', (event) => {
+      if (this.hasAttribute('data-max') && span && this.hasAttribute('data-character')) {
+        input?.setAttribute('maxlength', this.getAttribute('data-max'));
+        span.setAttribute('data-count', input?.value.length);
+      } else if (this.hasAttribute('data-max') && span) {
+        if (input?.value.split(' ').length >= this.getAttribute('data-max')) {
+          event?.preventDefault();
+          input?.setAttribute('maxlength', input?.value.length);
+        } else {
+          input?.removeAttribute('maxlength');
+        }
+
+        span.setAttribute('data-count', input?.value.split(' ').length);
+        span.setAttribute('data-max', this.getAttribute('data-max'));
+      }
+    });
+
+    /*
+
+    // maxlength counter init
+    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
+      const wrapper = input.parentElement;
+      setMaxlengthVars(input, wrapper);
+    });
+
+
+
+const wrapper = input.parentElement;
+  const maxlength = input.getAttribute('maxlength');
+
+  wrapper.style.setProperty('--maxlength', maxlength);
+
+  let span = input.nextElementSibling;
+
+  if (!span || (span && span.classList.contains('invalid-feedback'))) {
+    span = document.createElement('span');
+    wrapper.insertBefore(span, input.nextSibling);
+  }
+ v
+  span.setAttribute('data-count', input.value.length);
+
+
+*/
+  }
+}
+
+export default iamCard;

package/assets/ts/components.ts

@@ -0,0 +1,64 @@
+// @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',
+  'word-count',
+];
+
+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,120 @@
+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/data-layer.md

@@ -13,28 +13,24 @@ The `createDataLayer()` function should be called in the JavaScript code of the
 ## Events Tracked
 
 1.  **"Pageview" Event**
-
     - Description: This event is automatically pushed to the `window.dataLayer` array during the function's execution, representing the initial pageview with the current document title.
     - Event Data:
       - `event`: "Pageview"
       - `pageTitle`: The title of the current document.
 
 2.  **"closeDetails" Event**
-
     - Description: This event is triggered when a click occurs on an element with the attribute `[open] summary`, indicating that a summary element with the `[open]` attribute is being closed.
     - Event Data:
       - `event`: "closeDetails"
       - `detailsTitle`: The text content of the `summary` element associated with the clicked element. If the `summary` element doesn't have any text content, an empty string is used.
 
 3.  **"openDetails" Event**
-
     - Description: This event is triggered when a click occurs on a `summary` element (not associated with `[open]` attribute), indicating that a summary element is being opened.
     - Event Data:
       - `event`: "openDetails"
       - `detailsTitle`: The text content of the clicked `summary` element. If the `summary` element doesn't have any text content, an empty string is used.
 
 4.  **"linkClicked" Event**
-
     - Description: This event is triggered when a click occurs on an `a` (anchor) element.
     - Event Data:
       - `event`: "linkClicked"
@@ -43,7 +39,6 @@ The `createDataLayer()` function should be called in the JavaScript code of the
       - `href`: The value of the `href` attribute of the `a` element. If the `a` element doesn't have an `href` attribute, an empty string is used.
 
 5.  **"buttonClicked" Event**
-
     - Description: This event is triggered when a click occurs on a `button` element.
     - Event Data:
       - `event`: "buttonClicked"