@iamproperty/components 7.7.1--beta19 → 7.7.1--beta21

package/assets/ts/components/content/content.component.ts

@@ -27,7 +27,7 @@ class iamContent extends HTMLElement {
 
     if(this.hasAttribute('data-title-tag')){
 
-      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')}">${title}</${this.getAttribute('data-title-tag')}>`;
+      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')} iam-content--title">${title}</${this.getAttribute('data-title-tag')}>`;
     }
 
     return '';
@@ -83,7 +83,7 @@ class iamContent extends HTMLElement {
     const addTitle = this.addTitle;
 
     const registerComponents = (contentComponent): void => {
-      const components = ['carousel', 'card', 'marketing', 'notification'];
+      const components = ['skeleton','bone','carousel', 'card', 'marketing', 'notification'];
 
       const assetLocation = document.body.hasAttribute('data-assets-location')
         ? document.body.getAttribute('data-assets-location')
@@ -123,23 +123,31 @@ class iamContent extends HTMLElement {
           if(Array.isArray(response))
             response = response[0];
 
-          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
+          const renderedContent = response.content.rendered.replaceAll(/<p>\[(.*)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+
+
           
+          component.parentElement?.querySelector('.iam-content--title')?.remove();
+          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
+
+
 
           if(transform){
           
-            component.innerHTML = `<${transform} ${elementAttributes}>${response.content.rendered}</${transform}>`;  
+            component.innerHTML = `<${transform} ${elementAttributes}>${renderedContent}</${transform}>`;  
             component.removeAttribute('class');
           }
           else {
             
-            component.innerHTML = `${response.content.rendered}`;
-            console.log(response.content);
+            component.innerHTML = `${renderedContent}`;
           }
             
           fixContent(component);
           registerComponents(component);
           transformButtons(component);
+
+          const changeEvent = new CustomEvent('loaded', { detail: {triggered: true} });
+          component?.dispatchEvent(changeEvent);
         }
       };
 

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

@@ -138,6 +138,61 @@ class iamForm extends HTMLElement {
     });
   }
 
+  getCheckboxLimit = (element):number => {
+
+    const limit = parseInt(element.getAttribute('data-checkbox-limit') || '10', 10);
+
+    return !isNaN(limit) && limit > 0 ? limit : 10;
+  }
+
+  limitCheckboxes = (event?:Event):void => {
+
+    
+
+    const target = event?.target instanceof HTMLInputElement ? event.target : null;
+    const changedCheckbox = target?.matches('input[type="checkbox"]') ? target : null;
+    const checkboxLimitGroup = changedCheckbox?.closest('[data-checkbox-limit]');
+    const checkboxLimitGroups = checkboxLimitGroup
+      ? [checkboxLimitGroup]
+      : [
+          ...(this.hasAttribute('data-checkbox-limit') ? [this] : []),
+          ...Array.from(this.querySelectorAll('[data-checkbox-limit]')),
+        ];
+
+    checkboxLimitGroups.forEach((group) => {
+      
+      const limit = this.getCheckboxLimit(group);
+      const checked = Array.from(group.querySelectorAll('input[type="checkbox"]:checked'));
+      const notChecked = Array.from(group.querySelectorAll('input[type="checkbox"]:not(:checked)'));
+
+      notChecked.forEach((checkbox) => {
+
+        checkbox.setAttribute('disabled','disabled');
+      });
+      
+      if(checked.length < limit){
+        notChecked.forEach((checkbox) => {
+
+          checkbox.removeAttribute('disabled');
+        });
+      }
+
+      if(checked.length <= limit)
+        return;
+      
+      
+      if(changedCheckbox?.checked && group.contains(changedCheckbox)) {
+        changedCheckbox.checked = false;
+        return;
+      }
+
+      checked.slice(limit).forEach((checkbox) => {
+
+        checkbox.checked = false;
+      });
+    });
+  }
+
   connectedCallback(): void {
 
     const form = this.querySelector('form');
@@ -181,9 +236,10 @@ class iamForm extends HTMLElement {
     this.readonlyIf();
     this.writeIf();
     this.emptyIf();
+    this.limitCheckboxes();
     
 
-    form.addEventListener('change', () => {
+    form.addEventListener('change', (event) => {
 
       this.showIf();
       this.hideIf();
@@ -193,6 +249,7 @@ class iamForm extends HTMLElement {
       this.readonlyIf();
       this.writeIf();
       this.emptyIf();
+      this.limitCheckboxes(event);
 
       Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
 

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

@@ -37,6 +37,9 @@ class iamSearch extends HTMLElement {
     // Make the datalist a dropdown
     this.classList.add('dropdown__wrapper');
 
+    if(this.querySelector('input.input--sm'))
+      this.classList.add('hasInputSm');
+
     
     if(this.querySelector('label'))
       this.classList.add('has-label');
@@ -79,7 +82,7 @@ class iamSearch extends HTMLElement {
     advancedSelect(this, displayInputField, datalist, false);
 
 
-    function checkMatch(): void {
+    const checkMatch = (): void => {
       const match = datalist.querySelector(`option[value="${displayInputField.value}" i]`);
       const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
@@ -105,6 +108,9 @@ class iamSearch extends HTMLElement {
     
     const search = async (searchterm): any => {
       
+      if(!this.getAttribute('data-url'))
+        return false;
+
       let ajaxURL = this.getAttribute('data-url');
       ajaxURL += `${encodeURI(searchterm)}`;
 

package/assets/ts/components/skeleton/skeleton.component.ts

@@ -0,0 +1,46 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-skeleton');
+
+class iamSkeleton 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/skeleton.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = /* HTML */`
+      <style>
+      ${loadCSS}
+      </style>
+      <slot></slot>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    
+    if(this.querySelector('.card'))
+      this.classList.add('hasCard');
+
+    if(this.querySelector('.btn'))
+      this.classList.add('hasBtn');
+
+    if(this.querySelector('.tag'))
+      this.classList.add('hasTag');
+
+    if(this.querySelector('.badge'))
+      this.classList.add('hasBadge');
+
+    if(this.querySelector('.spinner'))
+      this.classList.add('hasSpinner');
+  }
+}
+
+export default iamSkeleton;

package/assets/ts/modules/tabs.ts

@@ -45,7 +45,15 @@ export const createTabsLinks = function (tabsElement: Element): void {
         button.setAttribute('aria-pressed', true);
       }
       button.innerHTML = `${summary.innerText}`;
-      button.classList.add('link');
+      
+      if(tabsElement.classList.contains('tabs--toggle-tags')){
+        
+        button.classList.add('tag');
+        button.classList.add('tag--toggle');
+      }
+      else
+        button.classList.add('link');
+
       button.setAttribute('data-index', tabindex);
       button.setAttribute('part', 'tab-link');
 
@@ -64,7 +72,7 @@ export const createTabsLinks = function (tabsElement: Element): void {
       button = element;
     }
 
-    button.classList.add('link');
+    
     tabLinks.appendChild(button);
 
     tabDropdown.appendChild(dropdownOpt);