@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -106,8 +106,10 @@ class iamActionbar extends HTMLElement {
         <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
           <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="" part="search-input">
-          <button class="empty btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
+          <span class="input__wrapper mt-0">
+            <input type="text" id="search" name="search" required="" part="search-input">
+            <button class="clear-search btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
+          </span>
         </div>
 
       </div>
@@ -282,7 +284,7 @@ class iamActionbar extends HTMLElement {
       }
     });
 
-    const clearBtn = searchBar.querySelector('.empty');
+    const clearBtn = searchBar.querySelector('.clear-search');
     const searchInput = searchBar.querySelector('#search');
 
     clearBtn.addEventListener('click', function (e) {

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -46,15 +46,17 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-1"><span class="title text-lowercase"></span>
           <span>
-          <input type="text" name="postcode" class="${this.hasAttribute('data-input-class') ? this.getAttribute('data-input-class') : ''}" list="address-lookup__addressess" autocomplete="one-time-code" aria-autocomplete="none" placeholder="${this?.hasAttribute('data-placeholder') ? this?.getAttribute('data-placeholder') : 'Postcode'}" value="${this.hasAttribute('data-postcode-value') ? this.getAttribute('data-postcode-value') : ''}" part="input" />
+          <span class="input__wrapper">
+            <input type="text" name="postcode" class="${this.hasAttribute('data-input-class') ? this.getAttribute('data-input-class') : ''}" list="address-lookup__addressess" autocomplete="one-time-code" aria-autocomplete="none" placeholder="${this?.hasAttribute('data-placeholder') ? this?.getAttribute('data-placeholder') : 'Postcode'}" value="${this.hasAttribute('data-postcode-value') ? this.getAttribute('data-postcode-value') : ''}" part="input" />
+          </span>
           <button id="postcode__submit" class="suffix fa-regular fa-search" part="suffix"></button>
           </span>
         </label>
           <span class="invalid-feedback mb-2" id="invalid-feedback-address-lookup">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
 
-          <div class="datalist__wrapper ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
+          <div class="datalist__wrapper dropdown ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
             <slot name="beforeList"></slot>
-            <slot name="preloadedList"></slot>
+            
             <datalist id="address-lookup__addressess" class=""></datalist>
             <div id="paginationWrapper"></div>
             <slot name="afterList"></slot>
@@ -89,13 +91,15 @@ class iamAddressLookup extends HTMLElement {
   }
 
   async connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
     const manualWrapper = this.shadowRoot.querySelector('.manual-address');
     const preFilledWrapper = this.shadowRoot.querySelector('.pre-filled');
-    const list = this.querySelector('datalist[slot="preloadedList"]')
-      ? this.querySelector('datalist[slot="preloadedList"]')
-      : this.shadowRoot.querySelector('.datalist__wrapper datalist');
+    const list = this.shadowRoot.querySelector('datalist');
     const listWrapper = this.shadowRoot.querySelector('.datalist__wrapper');
     const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
     const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
@@ -121,6 +125,14 @@ class iamAddressLookup extends HTMLElement {
       titleElement.innerHTML = title;
     });
 
+
+    // preload datalis
+
+    if(this.querySelector('datalist')){
+      list.innerHTML = this.querySelector('datalist').innerHTML;
+    }
+
+
     // #region functions
     function checkFilled(component): void {
       const preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');

package/assets/ts/components/advanced-select/advanced-select.component.ts

@@ -16,34 +16,26 @@ class iamAdvancedSelect extends HTMLElement {
     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/advanced-select.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
-    input {
-      background: red;
-    }
-    input:not(.is-invalid):not(:invalid) {
-      background: none!important;
-    }
-    .optional-text {
-      display: none;
-    } 
-    .js-hide {
-      display: none !important;
-    }
+    ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <slot></slot>
+    <span class="wrapper"><span class="input__wrapper"><slot></slot></span><span class="suffix fa-regular fa-chevron-down"></span></span>
+    <slot name="datalist"></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
     // Clone original input field, re-name and use for display purposes
     const inputField = this.querySelector('input') as HTMLInputElement | null;
     if (!inputField) return;
@@ -55,6 +47,9 @@ class iamAdvancedSelect extends HTMLElement {
     inputField.removeAttribute('data-change-events');
     displayInputField.removeAttribute('id');
 
+    if(this.querySelector('label'))
+      this.classList.add('has-label');
+
     let datalist = this.querySelector('datalist') as HTMLDataListElement | null;
 
     inputField.after(displayInputField);

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

@@ -0,0 +1,66 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'button',
+});
+
+class iamButton 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/button.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const button = this.querySelector('button');
+    let originalHTML = '';
+    
+    if(!button)
+      return false;
+
+    button?.addEventListener('click', (event) => {
+
+      if(this.hasAttribute('data-copy-text')){
+        navigator.clipboard.writeText(this.getAttribute('data-copy-text'));
+
+        originalHTML = button.innerHTML;
+        button.innerHTML = originalHTML.toLowerCase().includes('copy') ? originalHTML.replace('Copy','Copied').replace('copy','copied') : 'Copied';
+        button.classList.add('pressed');
+        button.classList.add('active');
+        button.blur();
+
+        setTimeout(() => {
+          button.innerHTML = originalHTML;
+          originalHTML = '';
+          button.classList.remove('pressed');
+          button.classList.remove('active');
+        }, 1500);
+      }
+    });
+    
+  }
+}
+
+export default iamButton;

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

@@ -1,4 +1,3 @@
-import { generateThumbnailList, generatePipsHTML, carousel, updateCarousel } from '../../modules/carousel';
 import { trackComponent, trackComponentRegistered } from '../_global';
 
 trackComponentRegistered('iam-carousel');
@@ -20,86 +19,218 @@ class iamCarousel extends HTMLElement {
         ${loadCSS}
         ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
       </style>
-      <div class="carousel" part="carousel">
-        <div class="carousel__wrapper">
-          <div class="carousel__inner">
-            <div class="carousel__content" part="content">
-              <slot></slot>
-            </div>
-          </div>
+      <div class="carousel-wrapper">
+        <div class="carousel" part="carousel">
+          <slot></slot>
         </div>
-        <div class="carousel__btns" part="btns">
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
-            Prev
-          </button>
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
+        <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 class="carousel__controls" part="controls"></div>
-
-        <div class="carousel__progress" part="progress">
-          <input type="range" min="0" max="100" value="1" step="1" />
+        <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));
   }
 
-  connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const carouselComponent = this;
-    //const carouselElement = this.shadowRoot.querySelector('.carousel');
-    //const row = this.shadowRoot.querySelector('.row');
+  generateThumbnailList = (carouselComponent): any => {
+    const thumbnailImages = [];
 
-    let thumbnailImages = [];
+    Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
+      if (slide.hasAttribute('data-thumbnail')) {
+        thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+      }
+    });
 
-    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+    return thumbnailImages;
+  };
+
+  generatePipsHTML = (carouselComponent, thumbnailImages): string => {
+    const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
+
+    let pips = '';
+    for (let i = 1; i <= itemCount; i++) {
+      let pipContent = null;
+      let pipClass = '';
+
+      if (thumbnailImages.length && thumbnailImages[i - 1]) {
+        pipClass = 'has-thumbnail';
+        pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+      } else {
+        pipContent = `Slide ${i}`;
+      }
+
+      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;
+    }
+
+    return pips;
+  };
+
+  progressPercent = (value, total):string => {
+
+    return ((value) / (total)) * 100 + '%'
+  }
 
-    if (carouselComponent.querySelector('[data-thumbnail]')) {
-      thumbnailImages = generateThumbnailList(carouselComponent);
-      carouselComponent.classList.add('thumbnails');
+  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;
+    
+    const progressPercent = this.progressPercent;
+
+    let stepperInterval,
+      stepperEvent = 'mouseup',
+      stepperStart = 'mousedown';
+
+    if ('ontouchstart' in document.documentElement) {
+      stepperEvent = 'touchend';
+      stepperStart = 'touchstart';
     }
 
-    // populate the pips
-    carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);
-
-    Array.from(
-      carouselComponent.querySelectorAll(
-        ':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img'
-      )
-    ).forEach((image) => {
-      image.style.inset = '0 0.5rem 0 0.5rem';
-      image.style.position = 'absolute';
-      image.style.width = 'calc(100% - 1rem)';
-      image.style.height = '100%';
-      image.style['object-fit'] = 'cover';
-
-      image.closest('div').classList.add('image__wrapper');
+    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 () {
+          
+        carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
+      }, 10);
+    });
+
+    carouselProgress.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
     });
 
-    carousel(carouselComponent);
+    carouselProgress.addEventListener('change', () => {
 
-    const observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (mutationRecord) {
-        const targetElement = mutationRecord.target as HTMLElement;
+      clearInterval(stepperInterval);
+      carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * (carouselProgress.value-1));
 
-        updateCarousel(targetElement);
+      carouselElement.scrollTo({
+        top: 0,
+        left: scrollTo,
+        behavior: 'smooth',
       });
     });
 
-    observer.observe(carouselComponent, {
-      attributes: false,
-      childList: true,
-      subtree: true,
+
+    // SM Progress bar
+
+    const smStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
+    const smItemCount = Math.floor(itemCount / smStep) * smStep;
+
+    carouselProgressSM.setAttribute('max', smItemCount);
+    carouselProgressSM.setAttribute('step', smStep);
+
+    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+    
+    carouselProgressSM.addEventListener(stepperStart, () => {
+      clearInterval(stepperInterval);
+      stepperInterval = setInterval(function () {
+        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+      });
     });
 
+    carouselProgressSM.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
+    });
+
+    carouselProgressSM.addEventListener('change', () => {
+
+      clearInterval(stepperInterval);
+
+      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,
+        behavior: 'smooth',
+      });
+    });
+
+    // MD Progress bar
+
+    const mdStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
+    const mdItemCount = Math.floor(itemCount / mdStep) * mdStep;
+
+    carouselProgressMD.setAttribute('max', mdItemCount);
+    carouselProgressMD.setAttribute('step', mdStep);
+
+    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+    
+    carouselProgressMD.addEventListener(stepperStart, () => {
+      clearInterval(stepperInterval);
+      stepperInterval = setInterval(function () {
+        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+      });
+    });
+
+    carouselProgressMD.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
+    });
+
+    carouselProgressMD.addEventListener('change', () => {
+
+      clearInterval(stepperInterval);
+
+      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,
+        behavior: 'smooth',
+      });
+    });
+
+
+    // Thumbnails
+    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+
+    if (carouselElement.querySelector('[data-thumbnail]')) {
+      const thumbnailImages = this.generateThumbnailList(carouselElement);
+      carouselElement.classList.add('thumbnails');
+      carouselControls.innerHTML = this.generatePipsHTML(carouselElement, thumbnailImages);
+    }
+
+    carouselControls.addEventListener('click', (event) => {
+
+      carouselControls?.querySelector('[aria-current]')?.removeAttribute('aria-current');
+      if(event.target.closest('button[data-slide]')){
+
+
+        event.target.closest('button[data-slide]').setAttribute('aria-current','true');
+
+        const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * event.target.closest('button[data-slide]').getAttribute('data-slide'));
+
+        carouselElement.scrollTo({
+          top: 0,
+          left: scrollTo,
+          behavior: 'smooth',
+        });
+      }
+
+    });
 
-    trackComponent(carouselComponent, 'iam-carousel', [
-      'pip-clicked',
-      'next-clicked',
-      'prev-clicked',
-      'slider-changed',
-    ]);
   }
 }
 

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

@@ -15,20 +15,39 @@ class iamContent extends HTMLElement {
 
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="content__container">
-      <slot></slot>
-    </div>
+    <slot></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
+  addTitle = (title) => {
+
+    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 '';
+  }
+
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const component = this;
     const url = this.getAttribute('data-url');
 
+    const transform = this.getAttribute('data-transform');
+
+    let elementAttributes = '';
+
+
+    for (const attr of this.attributes) {
+      elementAttributes += `${attr.name}="${attr.value}" `;
+    }
+
+    const addTitle = this.addTitle;
+
     const registerComponents = (contentComponent): void => {
-      const components = ['card', 'marketing', 'notification'];
+      const components = ['carousel', 'card', 'marketing', 'notification'];
 
       const assetLocation = document.body.hasAttribute('data-assets-location')
         ? document.body.getAttribute('data-assets-location')
@@ -64,7 +83,16 @@ class iamContent extends HTMLElement {
       newXHRRequest.onload = function (): void {
         if (this.status === 200) {
           const response = JSON.parse(this.responseText);
-          component.innerHTML = `${response.content.rendered}`;
+
+          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
+          
+          if(transform){
+          
+            component.innerHTML = `<${transform} ${elementAttributes}>${response.content.rendered}</${transform}>`;  
+            component.removeAttribute('class');
+          }
+          else
+            component.innerHTML = `${response.content.rendered}`;
 
           registerComponents(component);
         }

package/assets/ts/components/menu/menu.component.ts

@@ -21,6 +21,10 @@ class iamMenu extends HTMLElement {
   }
 
   connectedCallback(): void {
+
+    this.classList.add('dropdown');
+
+    
     const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
     const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
 

package/assets/ts/components/nav/nav.component.ts

@@ -177,16 +177,10 @@ class iamNav extends HTMLElement {
     });
 
     // Has secondary link
-    if (this.querySelector('a[slot="secondary"]')) {
+    if (this.querySelector('[slot="secondary"]')) {
       menu.classList.add('has-secondary');
     }
 
-    // Create a scroll width variable to help with the sizing of the menu with in the CSS
-    document.documentElement.style.setProperty(
-      '--scrollbar-width',
-      window.innerWidth - document.documentElement.offsetWidth + 'px'
-    );
-
     // Open and close the menu
     menuButton.addEventListener(
       'click',
@@ -279,9 +273,13 @@ class iamNav extends HTMLElement {
           if (this.querySelectorAll(':scope > details[open]').length) {
             backdrop.classList.add('show');
             iamNav.classList.add('open');
+
+            if(this.querySelectorAll(':scope > details[open][slot="secondary"]').length)
+              iamNav.classList.add('open-secondary');
           } else {
             backdrop.classList.remove('show');
             iamNav.classList.remove('open');
+            iamNav.classList.remove('open-secondary');
           }
 
           event.preventDefault();

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

@@ -18,29 +18,29 @@ class iamSearch extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
+    const loadCSS = `@import "${assetLocation}/css/components/search.component.css";`;
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    input {
-      background: red;
-    }
-    input:not(.is-invalid):not(:invalid) {
-      background: none!important;
-    }
-    .optional-text {
-      display: none;
-    } 
-    .js-hide {
-      display: none !important;
-    }
+    ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <slot></slot>
+    <span class="wrapper"><span class="input__wrapper"><slot></slot></span><span class="suffix fa-regular fa-search"></span></span>
+    <slot name="datalist"></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   async connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
+    
+    if(this.querySelector('label'))
+      this.classList.add('has-label');
+
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const searchWrapper = this;
     const inputField = this.querySelector('input');
@@ -123,6 +123,7 @@ class iamSearch extends HTMLElement {
           signal: signal,
           method: 'get',
           credentials: 'same-origin',
+          mode: 'no-cors',
           headers: new Headers({
             'Content-Type': 'application/json',
             Accept: 'application/json',

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

@@ -25,7 +25,7 @@ class iamSplitButton extends HTMLElement {
     </style>
     <div class="split-button">
       <slot></slot>
-      <div class="dropdown">
+      <div class="menu__wrapper">
         <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>

package/assets/ts/components/std-address-lookup/std-address-lookup.component.ts

@@ -1537,7 +1537,6 @@ export const regions = [
   }
 ];
 
-
 let countriesString = '';
 
 countries.forEach((country) => {