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

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

@@ -109,7 +109,7 @@
   }
 
   @media screen and (min-width: 36em) {
-    margin: 0 0 0 3rem;
+    margin: 0 0 0 2rem;
     width: auto;
     padding-right: 1.875rem; /* 24 + 6 */
     text-indent: 0;
@@ -122,7 +122,7 @@
   @media screen and (min-width: 62em) {
     width: fit-content;
     height: auto;
-    margin: 0 0 0 3rem;
+    margin: 0 0 0 2rem;
     padding: 0 !important;
     text-indent: 0;
     padding-right: 0 !important;
@@ -549,6 +549,7 @@
 
     z-index: 1;
     top: 0;
+    height: 100vh;
   }
 
   :host(.open-secondary) .has-secondary .menu__secondary {
@@ -556,7 +557,7 @@
     z-index: 2;
   }
 }
-/* #endregion */
+/* #endregion */ 
 
 /* #region Menus */
 ::slotted(.nav--menu) {
@@ -617,7 +618,7 @@
 
   @media screen and (min-width: 62em) {
     height: calc(100vh - var(--nav-height));
-    top: calc(var(--nav-height) + 4px);
+    top: var(--nav-height);
   }
 }
 

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

@@ -810,6 +810,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       display: inline-block;
       margin-left: 1.5rem;
       margin-bottom: 0!important;
+      font-size: 1rem;
 
       &:after {
         display: none;
@@ -832,6 +833,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
       .lead {
         --colour-heading: var(--colour-body);
+        color: var(--colour-body);
         font-size: 0.87rem !important;
         line-height: 1.5rem !important;
         margin: 0;
@@ -841,7 +843,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
         width: 0;
       }
 
-      .section + .section {
+      .section:has(a:not([href=null])) + .section {
         border-top: 1px solid var(--colour-border);
         display: block;
         padding-top: 0.5rem;

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/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/std-nav/std-nav.component.ts

@@ -51,8 +51,6 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-
-
   transformToSecondary = (data):void => {
 
     this.innerHTML = populateNav(data);

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);
+  });
+}