@iamproperty/components 7.7.1--beta18 → 7.7.1--beta20

package/assets/sass/components/skeleton.component.scss

@@ -0,0 +1,104 @@
+@layer components {
+  
+  ::slotted(.heading) {
+    
+    --bone-height: var(--h2-fs);
+  }
+
+  /* #region Cards */
+  :host(.hasCard) {
+    display: flex;
+    column-gap: 1rem;
+    flex-direction: column;
+  }
+
+  @container (min-width: 36em) {
+    :host(.hasCard) {
+
+      flex-direction: row;
+    }
+  }
+
+  ::slotted(.card) {
+
+    background-color: var(--colour-light)!important;
+    height: unset!important;
+    min-height: unset!important;
+    aspect-ratio: 1.2/1;
+    border: 1px solid var(--colour-border);
+    display: flex!important;
+    padding: 1rem 0.75rem;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    &:before {
+      
+      margin-bottom: 0.75rem;
+    }
+    &:before,
+    &:after {
+      content: "";
+      display: block;
+      background-color: #D9D9D9; /* TODO: needs to be a variable */
+      display: block;
+      width: auto;
+      height: var(--bone-height);
+      border-radius: 0.5rem;
+    }
+  }
+  /* #endregion */
+
+  /* search */
+  ::slotted(.search) {
+
+    background-color: var(--colour-white)!important;
+    height: 3rem!important;
+    min-height: 3rem!important;
+    border: 1px solid var(--colour-border)!important;
+    border-radius: 1.5rem!important;
+  }
+
+  /* buttons */
+  ::slotted(.btn) {
+    min-width: 19rem!important; /* 304px*/
+    width: 19rem!important; /* 304px*/
+    //min-height: calc(var(--btn-line-height) + var(--btn-padding-block) + var(--btn-padding-block))!important;
+  }
+
+  ::slotted(:is(.btn,.badge,.tag):empty):before { 
+    content: "\00a0"; 
+    margin: 0;
+  }
+
+  :host(:is(.hasBtn, .hasBadge, .hasTag)) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  ::slotted(:is(.badge,.tag)) {
+    min-width: 5rem!important; /* 80px */
+    width: 5rem!important; /* 80px */
+  }
+
+  ::slotted(.link) {
+    
+    min-width: 8rem!important; /* 128px */
+    width: 8rem!important; /* 128px */
+  }
+  ::slotted(.link):after {
+
+    margin-top: 0.25rem;
+  }
+
+  /* spinner */
+  :host(.hasSpinner) ::slotted(*) {
+
+    width: var(--spinner-size)!important;
+    margin-inline: auto!important;
+  }
+
+  ::slotted(.spinner){
+    
+    background-color: transparent!important;
+  }
+}

package/assets/sass/components/skeleton.global.scss

@@ -0,0 +1,27 @@
+@layer components {
+  
+  iam-skeleton {
+    --bone-height: 0.8125rem; /* 13px */;
+    --colour-heading: #D9D9D9;
+    --colour-underline: #D9D9D9;
+    container-type: inline-size;
+  }
+
+  iam-bone {
+    background-color: #D9D9D9; /* TODO: needs to be a variable */
+    border: unset;
+    display: block;
+    width: 100%;
+    min-height: var(--bone-height);
+    pointer-events: none!important;
+    margin-bottom: 1rem;
+
+    &:not(.btn,.badge,.tag){
+        
+      height: var(--bone-height);
+      border-radius: 0.5rem;
+    }
+  }
+
+  
+}

package/assets/sass/elements/spinner.css

@@ -0,0 +1,29 @@
+
+
+.spinner {
+
+  font-size: var(--spinner-size);
+
+  display: block;
+  margin-inline: auto;
+  position: relative;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  color: var(--colour-heading);
+
+  &:before {
+    font-family: var(--fa-family-classic);
+    content: '\f3f4';
+    position: absolute;
+    font-weight: 900;
+    color: var(--colour-heading);
+    animation: spin 1.5s infinite steps(10);
+    font-size: 1em;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 1;
+
+    font-weight: normal;
+  }
+}

package/assets/sass/foundations/reboot.scss

@@ -21,6 +21,7 @@
     scroll-padding-top: 6.25rem; /* 100 */
 
     scrollbar-gutter: stable;
+    container-type: inline-size;
 
     @media screen and (min-width: 36em) {
       --root-fs-px: 768;

package/assets/sass/foundations/root.scss

@@ -236,22 +236,24 @@
     --max-height-lg: 37.5rem; /* 600px */
 
 
+    /* #region Dropdown */
     --dropdown-bg: var(--colour-canvas-2);
     --dropdown-margin-block: 0.25rem;
     --dropdown-padding: 0.5rem;
     --dropdown-border-radius: 0.5rem;
     --dropdown-box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-
     --option-border-radius: 0.25rem;
-
---option-color: var(--colour-primary);
-    
+    --option-color: var(--colour-primary);
     --option-bg-hover: var(--colour-light);
     --option-padding: 0.5rem;
     --option-color-hover: #595959; /* Magic number */
     --option-bg-active: hsl(from var(--colour-info) h s l / 10%);
-    
     --option-border-left-active: 4px solid var(--colour-info);
+    /* #endregion */
+
+    /* #region Spinner */
+    --spinner-size: 7rem; /* 112px */
+    /* #endregion */
 
     /*  Add in media query based updates to the global vars like updating the heading 1 font size */
     @media screen and (min-width: 36em) {

package/assets/ts/components/bone/bone.component.ts

@@ -0,0 +1,25 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-bone');
+
+class iamBone 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));
+  }
+
+  connectedCallback(): void {
+    console.log('bone');
+  }
+}
+
+
+export default iamBone;

package/assets/ts/components/carousel/carousel.component.ts

@@ -5,37 +5,6 @@ trackComponentRegistered('iam-carousel');
 class iamCarousel 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/carousel.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = /* HTML */ `
-      <style>
-        ${loadCSS}
-        ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-      </style>
-      <div class="carousel-wrapper">
-        <div class="carousel" part="carousel">
-          <slot></slot>
-        </div>
-        <div class="carousel__controls"></div>
-        <div id="carousel__progress" class="carousel__progress">
-          <input type="range" min="0" max="100" value="0" step="1" />
-        </div>
-        <div id="carousel__progress-sm" class="carousel__progress">
-          <input type="range" min="0" max="100" value="0" step="1" />
-        </div>
-        <div id="carousel__progress-md" class="carousel__progress">
-          <input type="range" min="0" max="100" value="0" step="1" />
-        </div>
-      </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   generateThumbnailList = (carouselComponent): any => {
@@ -78,12 +47,27 @@ class iamCarousel extends HTMLElement {
 
   connectedCallback(): void {
     
-    const carouselElement = this.shadowRoot?.querySelector('.carousel');
-    const carouselProgress = this.shadowRoot.querySelector('#carousel__progress [type="range"]');
-    const carouselProgressSM = this.shadowRoot.querySelector('#carousel__progress-sm [type="range"]');
-    const carouselProgressMD = this.shadowRoot.querySelector('#carousel__progress-md [type="range"]');
-    const itemCount = this.querySelectorAll(':scope > *').length;
-    
+    this.insertAdjacentHTML('beforeend',`
+      <div class="carousel__controls">
+        <div class="carousel__pips"></div>
+        <div class="carousel__progress carousel__progress-xs">
+          <input type="range" min="0" max="100" value="0" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-sm">
+          <input type="range" min="0" max="100" value="0" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-md">
+          <input type="range" min="0" max="100" value="0" step="1" />
+        </div>
+      </div>
+    `)
+ 
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const carouselElement = this;
+    const carouselProgress = this.querySelector('.carousel__progress-xs [type="range"]');
+    const carouselProgressSM = this.querySelector('.carousel__progress-sm [type="range"]');
+    const carouselProgressMD = this.querySelector('.carousel__progress-md [type="range"]');
+    const itemCount = this.querySelectorAll(':scope > *:not(.carousel__controls)').length;
     const progressPercent = this.progressPercent;
 
     let stepperInterval,
@@ -95,13 +79,10 @@ class iamCarousel extends HTMLElement {
       stepperStart = 'touchstart';
     }
 
-    carouselElement?.innerHTML = this.innerHTML;
-    carouselElement?.setAttribute('data-smcols',this.getAttribute('data-smcols'));
-    carouselElement?.setAttribute('data-mdcols',this.getAttribute('data-mdcols'));
-    
+
     carouselProgress.setAttribute('max', itemCount);
     carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
-    
+   
     carouselProgress.addEventListener(stepperStart, () => {
       clearInterval(stepperInterval);
       stepperInterval = setInterval(function () {
@@ -126,10 +107,9 @@ class iamCarousel extends HTMLElement {
         behavior: 'smooth',
       });
     });
-
-
+    
+  
     // SM Progress bar
-
     const smStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
     const smItemCount = Math.floor(itemCount / smStep) * smStep;
 
@@ -156,8 +136,6 @@ class iamCarousel extends HTMLElement {
       carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
       const scrollTo = Math.floor((carouselElement.scrollWidth / smItemCount) * carouselProgressSM.value);
 
-      console.log(carouselProgressSM.value);
-
       carouselElement.scrollTo({
         top: 0,
         left: scrollTo,
@@ -193,8 +171,6 @@ class iamCarousel extends HTMLElement {
       carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
       const scrollTo = Math.floor((carouselElement.scrollWidth / mdItemCount) * carouselProgressMD.value);
 
-      console.log(carouselProgressMD.value);
-
       carouselElement.scrollTo({
         top: 0,
         left: scrollTo,
@@ -204,17 +180,17 @@ class iamCarousel extends HTMLElement {
 
 
     // Thumbnails
-    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+    const carouselPips = this.querySelector('.carousel__pips');
 
     if (carouselElement.querySelector('[data-thumbnail]')) {
       const thumbnailImages = this.generateThumbnailList(carouselElement);
       carouselElement.classList.add('thumbnails');
-      carouselControls.innerHTML = this.generatePipsHTML(carouselElement, thumbnailImages);
+      carouselPips.innerHTML = this.generatePipsHTML(carouselElement, thumbnailImages);
     }
 
-    carouselControls.addEventListener('click', (event) => {
+    carouselPips.addEventListener('click', (event) => {
 
-      carouselControls?.querySelector('[aria-current]')?.removeAttribute('aria-current');
+      carouselPips?.querySelector('[aria-current]')?.removeAttribute('aria-current');
       if(event.target.closest('button[data-slide]')){
 
 

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

@@ -1,3 +1,6 @@
+
+import { transformButtons } from '../../modules/content';
+
 class iamContent extends HTMLElement {
   constructor() {
     super();
@@ -136,6 +139,7 @@ class iamContent extends HTMLElement {
             
           fixContent(component);
           registerComponents(component);
+          transformButtons(component);
         }
       };
 

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/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/content.ts

@@ -0,0 +1,17 @@
+export const transformButtons = (component):void => {
+
+  Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
+
+    const fragment = document.createDocumentFragment();
+
+    Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+
+      const link = element.querySelector('a');
+      link.setAttribute('class',element.getAttribute('class'));
+
+      fragment.appendChild(link);
+    });
+
+    buttons.parentNode.replaceChild(fragment, buttons);
+  });
+}