@iamproperty/components 7.6.4--beta8 → 7.7.1--beta1

package/assets/sass/templates/auth.scss

@@ -14,16 +14,16 @@
 
   .template--auth {
     --padding-top: 1.5rem;
-    --brand-size: #{rem(36)};
+    --brand-size: 2.25rem;
 
     display: flex;
     flex-wrap: wrap;
-    max-width: rem(1280);
+    max-width: 80rem;
     margin-inline: auto;
 
     @media screen and (min-width: 62em) {
       --padding-top: 2.5rem;
-      --brand-size: #{rem(64)};
+      --brand-size: 4rem;
     }
 
     main {
@@ -67,7 +67,7 @@
         margin-inline: calc(var(--container-padding-x) * -1);
         min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
         margin-bottom: 2.5rem;
-        max-height: rem(400);
+        max-height: 25rem; /* 400 */
         clip-path: ellipse(70% 80% at 50% 20%);
         rotate: -5deg;
 
@@ -93,10 +93,10 @@
       }
 
       img {
-        margin-inline: rem(-24);
+        margin-inline: -1.5rem;
         min-width: calc(100% + 1.5rem + 1.5rem);
-        margin-top: rem(-12);
-        max-height: rem(424);
+        margin-top: -0.75rem;
+        max-height: 26.5rem;
         object-fit: cover;
         object-position: 50% 50%;
         rotate: 5deg;

package/assets/sass/templates/form.scss

@@ -13,21 +13,21 @@
   }
 
   .template--form {
-    --input-max-width: #{rem(450)};
-    --select-max-width: #{rem(500)};
+    --input-max-width: 28.125rem;
+    --select-max-width: 31.25rem
 
     .container {
 
-      max-width: #{rem(1280)} !important;
+      max-width: 80rem !important;
     }
 
     @supports selector(:has(*)) {
       label:has(> :is(.suffix, .prefix)) {
-        --input-max-width: #{rem(500)};
+        --input-max-width: 31.25rem
         max-width: var(--input-max-width);
       }
       div:has(> :is(.suffix, .prefix)) {
-        --input-max-width: #{rem(500)};
+        --input-max-width: 31.25rem
         max-width: var(--input-max-width);
       }
     }
@@ -64,9 +64,9 @@
 
     @media screen and (min-width: 62em) {
       .form-panel {
-        max-width: rem(924); // Guess
+        max-width: 57.75rem; /* 924 */  // Guess
         border-radius: 0.5rem;
-        padding-inline: rem(94);
+        padding-inline: 5.875rem;
         padding-block: 2.5rem;
         margin-bottom: 2rem;
       }
@@ -80,7 +80,7 @@
     @media screen and (min-width: 62em) {
       .container--form {
         padding-inline: 0;
-        max-width: rem(924) !important;
+        max-width: 57.75rem !important;
       }
 
       .form-panel .btn__group {

package/assets/sass/utilities/border.scss

@@ -59,23 +59,11 @@
     --border-width: 5px;
   }
 
-  .border-opacity-10 {
-    --border-opacity: 0.1;
-  }
-
-  .border-opacity-25 {
-    --border-opacity: 0.25;
-  }
-
-  .border-opacity-50 {
-    --border-opacity: 0.5;
-  }
-
-  .border-opacity-75 {
-    --border-opacity: 0.75;
-  }
-
-  .border-opacity-100 {
-    --border-opacity: 1;
+  .border-gradient {
+    
+    
+    background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
+    //border-radius: 50em;
+    border: var(--border-width) solid transparent;
   }
 }

package/assets/sass/utilities/font-awesome-iso-fallbacks.scss

@@ -35,4 +35,10 @@
   .fa-edit {
     --iso: '\270e';
   }
+  .fa-envelope {
+    --iso: '\2709';
+  }
+  .fa-calendar {
+    --iso: '\2636';
+  }
 }

package/assets/sass/utilities/position.scss

@@ -1,4 +1,26 @@
 @layer utilities {
+
+
+  .position-static {
+    position: static !important;
+  }
+
+  .position-relative {
+    position: relative !important;
+  }
+
+  .position-absolute {
+    position: absolute !important;
+  }
+
+  .position-fixed {
+    position: fixed !important;
+  }
+
+  .position-sticky {
+    position: sticky !important;
+  }
+
   $breakpoints: (
     sm: 36em,
     md: 62em,
@@ -25,66 +47,6 @@
       .position-#{$breakpoint}-sticky {
         position: sticky !important;
       }
-
-      .top-#{$breakpoint}-0 {
-        top: 0 !important;
-      }
-
-      .top-#{$breakpoint}-50 {
-        top: 50% !important;
-      }
-
-      .top-#{$breakpoint}-100 {
-        top: 100% !important;
-      }
-
-      .bottom-#{$breakpoint}-0 {
-        bottom: 0 !important;
-      }
-
-      .bottom-#{$breakpoint}-50 {
-        bottom: 50% !important;
-      }
-
-      .bottom-#{$breakpoint}-100 {
-        bottom: 100% !important;
-      }
-
-      .start-#{$breakpoint}-0 {
-        left: 0 !important;
-      }
-
-      .start-#{$breakpoint}-50 {
-        left: 50% !important;
-      }
-
-      .start-#{$breakpoint}-100 {
-        left: 100% !important;
-      }
-
-      .end-#{$breakpoint}-0 {
-        right: 0 !important;
-      }
-
-      .end-#{$breakpoint}-50 {
-        right: 50% !important;
-      }
-
-      .end-#{$breakpoint}-100 {
-        right: 100% !important;
-      }
-
-      .translate-#{$breakpoint}-middle {
-        transform: translate(-50%, -50%) !important;
-      }
-
-      .translate-#{$breakpoint}-middle-x {
-        transform: translateX(-50%) !important;
-      }
-
-      .translate-#{$breakpoint}-middle-y {
-        transform: translateY(-50%) !important;
-      }
     }
   }
 }

package/assets/sass/utilities/shadow.scss

@@ -0,0 +1,7 @@
+// #region no shadow
+@layer utilities {
+  .shadow-none {
+    box-shadow: none!important;
+  }
+}
+// #endregion

package/assets/sass/utilities/wider-colours.scss

@@ -3,8 +3,6 @@
     .wider-colour-#{$i} {
       --colour: var(--wider-colour-#{$i} );
       --wider-colour: var(--wider-colour-#{$i} );
-      --wider-colour-hover: var(--wider-colour-#{$i}-hover);
-      --wider-colour-active: var(--wider-colour-#{$i}-active);
       color: #262626 !important;
     }
   }

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

@@ -54,7 +54,7 @@ class iamActionbar extends HTMLElement {
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
       <div class="actionbar" part="actionbar">

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

@@ -31,7 +31,7 @@ class iamAddressLookup extends HTMLElement {
     ${loadCSS}
 
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <div class="wrapper">
 
       <div class="matched d-none">

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

@@ -37,7 +37,7 @@ class iamAdvancedSelect extends HTMLElement {
       display: none !important;
     }
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <slot></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -45,12 +45,15 @@ class iamAdvancedSelect extends HTMLElement {
 
   connectedCallback(): void {
     // Clone original input field, re-name and use for display purposes
-    const inputField = this.querySelector('input');
-    const displayInputField = inputField.cloneNode();
+    const inputField = this.querySelector('input') as HTMLInputElement | null;
+    if (!inputField) return;
+
+    const displayInputField = inputField.cloneNode() as HTMLInputElement;
     displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);
     inputField.removeAttribute('data-change-events');
     displayInputField.removeAttribute('id');
-    let datalist = this.querySelector('datalist');
+
+    let datalist = this.querySelector('datalist') as HTMLDataListElement | null;
 
     inputField.after(displayInputField);
 
@@ -68,8 +71,25 @@ class iamAdvancedSelect extends HTMLElement {
     }
 
     advancedSelect(this, displayInputField, datalist);
+
+    // Apply initial value passed to the component host
+    const initialValue = this.getAttribute('value') || '';
+    if (!initialValue) return;
+
+    inputField.value = initialValue;
+    inputField.setAttribute('value', initialValue);
+
+    displayInputField.value = '';
+    displayInputField.setAttribute('placeholder', initialValue);
+    displayInputField.setAttribute('data-value', initialValue);
+
+    if (datalist) {
+      Array.from(datalist.querySelectorAll('option')).forEach((option) => {
+        const isMatch = option.getAttribute('value') === initialValue;
+        option.classList.toggle('active', isMatch);
+      });
+    }
   }
 }
 
-
 export default iamAdvancedSelect;

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -21,7 +21,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     <style class="styles">
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
       <div class="container" part="container">
 
         <div class="side-menu" part="side-menu">

package/assets/ts/components/header/header.component.ts

@@ -17,16 +17,57 @@ class iamHeader extends HTMLElement {
     const loadCSS = `@import "${assetLocation}/css/components/header.css";`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
+    template.innerHTML = /*HTML*/`
     <style>
     ${loadCSS}
     </style>
     <div class="header-banner">
-      <picture>
-        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
-      </picture>
+      <div class="gradient-overflow">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.72 776.73" class="gradient-background">
+          <defs>
+            <style>
+              .cls-1 {
+                fill: url(#linear-gradient-2);
+                opacity: .15;
+              }
+
+              .cls-2 {
+                fill: url(#linear-gradient-3);
+                opacity: .2;
+              }
+
+              .cls-3 {
+                fill: url(#linear-gradient);
+                opacity: .1;
+              }
+            </style>
+            <linearGradient id="linear-gradient" x1="113.75" y1="113.75" x2="662.98" y2="662.98" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stop-color="#54ffff" stop-opacity="0"/>
+              <stop offset="1" stop-color="#54ffff"/>
+            </linearGradient>
+            <linearGradient id="linear-gradient-2" x1="610.21" y1="166.51" x2="166.51" y2="610.21" xlink:href="#linear-gradient"/>
+            <linearGradient id="linear-gradient-3" x1="388.36" y1="177.95" x2="388.36" y2="598.78" xlink:href="#linear-gradient"/>
+          </defs>
+          <g id="Layer_1-2" data-name="Layer 1">
+            <g>
+              <path class="cls-3" d="M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23"/>
+              <path class="cls-1" d="M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36"/>
+              <path class="cls-2" d="M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0"/>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div class="picture-overflow">
+        <picture>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+        </picture>
+      </div>
       <div class="container">
+        <slot name="before"></slot>
         <slot></slot>
+        <slot name="badge"></slot>
+        <slot name="panel" class="admin-panel"></slot>
+        <slot name="toolbox" class="admin-panel"></slot>
       </div>
     </div>
     `;
@@ -41,6 +82,15 @@ class iamHeader extends HTMLElement {
 
     if (this.hasAttribute('image')) source.setAttribute('src', this.getAttribute('image'));
     else picture.remove();
+
+    if(this.querySelector('[slot="panel"]'))
+      this.classList.add('has-panel');
+
+    if(this.querySelector('[slot="toolbox"]'))
+      this.classList.add('has-toolbox');
+
+    if(this.querySelector('.breadcrumbs:first-child'))
+      this.classList.add('has-breadcrumbs');
   }
 }
 

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -21,7 +21,7 @@ class iamInlineEdit extends HTMLElement {
     
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     
     <slot></slot>
     <div class="btns" part="btns">

package/assets/ts/components/input/input.component.ts

@@ -17,7 +17,7 @@ class iamInput extends HTMLElement {
     <style>
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="wrapper" part="wrapper">
       <span part="prefix"><slot name="prefix"></slot></span>
       <slot part="input-wrapper"></slot>

package/assets/ts/components/input-range/input-range.component.ts

@@ -17,7 +17,7 @@ class iamDaterange extends HTMLElement {
     <style>
       ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="wrapper" part="wrapper">
       <slot></slot>
     </div>

package/assets/ts/components/marketing/marketing.component.ts

@@ -21,7 +21,7 @@ class iamMarketing extends HTMLElement {
     ${loadCSS}
     
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <div class="marketing">
       
       <slot></slot>

package/assets/ts/components/modal/modal.component.ts

@@ -20,7 +20,7 @@ class iamModal extends HTMLElement {
     
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <dialog>
       ${closeButtonHtml}
       <div class="scroll">
@@ -170,7 +170,7 @@ class iamModal extends HTMLElement {
     });
 
 
-    if (modalType == 'transactional'){
+    if (modalType == 'transactional' || modalType == 'acknowledgement' ){
       this.shadowRoot?.querySelector('.scroll')?.insertAdjacentHTML('afterbegin',
         `<i class="fa-light fa-circle" aria-hidden="true">
           <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>

package/assets/ts/components/multi-step-modal/multi-step-modal.component.ts

@@ -17,7 +17,7 @@ class iamMultiStepModal extends HTMLElement {
     <style>
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <dialog>
       <button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>
       <div class="steps" parts="steps">

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

@@ -25,7 +25,7 @@ class iamNav extends HTMLElement {
     </style>
     <style class="doc-styles">
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="container">
       <slot name="logo"></slot>
       <div class="buttons-holder"></div>

package/assets/ts/components/pagination/pagination.component.ts

@@ -15,7 +15,7 @@ class iamPagination extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="pagination d-none">
   
       <div class="minimal" part="minimal">

package/assets/ts/components/password/password.component.ts

@@ -20,7 +20,7 @@ class iamPassword extends HTMLElement {
       <style>
       ${loadCSS}
       </style>
-      <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+      <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
       <div class="wrapper">
         <slot></slot>
         <button type="button" class="suffix fa-solid fa-eye-slash" data-alt-class="suffix fa-solid fa-eye" aria-hidden="true"><span class="visually-hidden">Show password</span></button>

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

@@ -34,7 +34,7 @@ class iamSearch extends HTMLElement {
       display: none !important;
     }
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <slot></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

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

@@ -15,15 +15,11 @@ class iamSplitButton 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/split-button.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>

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

@@ -1,6 +1,6 @@
 import iamAddressLookup from '../address-lookup/address-lookup.component';
 
-const countries = [
+export const countries = [
   {
     "id": "urn:als:country:AF",
     "country_name": "Afghanistan"
@@ -999,7 +999,7 @@ const countries = [
   }
 ];
 
-const counties = [
+export const counties = [
     {
         "id": "urn:als:county:ekHuOPAhk",
         "county": "Monmouthshire"
@@ -1500,7 +1500,43 @@ const counties = [
         "id": "urn:als:county:rYAgcPlXZ",
         "county": "Middlesex"
     }
-]
+];
+
+export const regions = [
+  {
+    "id": "urn:als:region:qo7jMNaA4",
+    "region": "England"
+  },
+  {
+    "id": "urn:als:region:JPBkFjL6I",
+    "region": "Scotland"
+  },
+  {
+    "id": "urn:als:region:3lqe2D3qO",
+    "region": "Wales"
+  },
+  {
+    "id": "urn:als:region:Tm5pOBfK9",
+    "region": "Northern Ireland"
+  },
+  {
+    "id": "urn:als:region:ZwIRAnNJo",
+    "region": "Channel Islands"
+  },
+  {
+    "id": "urn:als:region:8CIOi1khw",
+    "region": "Jersey"
+  },
+  {
+    "id": "urn:als:region:qHdx7tNtL",
+    "region": "Guernsey"
+  },
+  {
+    "id": "urn:als:region:DH6LU70lY",
+    "region": "Isle of Man"
+  }
+];
+
 
 let countriesString = '';
 
@@ -1508,6 +1544,12 @@ countries.forEach((country) => {
   countriesString += `<option value="${country['id']}" data-value="${country['country_name']}">${country['country_name']}</option>`;
 });
 
+let regionsString = '';
+
+regions.forEach((region) => {
+  regionsString += `<option value="${region['id']}" data-value="${region['region']}">${region['region']}</option>`;
+});
+
 let countiesString = '';
 
 counties.forEach((county) => {
@@ -1611,14 +1653,7 @@ class iamSTDAddressLookup extends HTMLElement {
     <label>Country${this.hasAttribute('data-show-required') && this.hasAttribute('data-country-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
       <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[region]` : 'region' }" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
         <option value=""></option>
-        <option value="urn:als:region:qo7jMNaA4" data-value="England">England</option>
-        <option value="urn:als:region:JPBkFjL6I" data-value="Scotland">Scotland</option>
-        <option value="urn:als:region:3lqe2D3qO" data-value="Wales">Wales</option>
-        <option value="urn:als:region:Tm5pOBfK9" data-value="Northern Ireland">Northern Ireland</option>
-        <option value="urn:als:region:ZwIRAnNJo" data-value="Channel Islands">Channel Islands</option>
-        <option value="urn:als:region:8CIOi1khw" data-value="Jersey">Jersey</option>
-        <option value="urn:als:region:qHdx7tNtL" data-value="Guernsey">Guernsey</option>
-        <option value="urn:als:region:DH6LU70lY" data-value="Isle of Man">Isle of Man</option>
+        ${regionsString}
       </select>
     </label>
 
@@ -1659,7 +1694,6 @@ class iamSTDAddressLookup extends HTMLElement {
       <label>Country <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][country_code]` : 'overseas[country_code]' }" data-overseas-required>
         <option value=""></option>
         ${countriesString}
-        <option value="urn:als:country:ndjIqa72" data-value="Poland">Poland</option>
       </select></label>
     </fieldset>
 

package/assets/ts/components/tabs/tabs.component.ts

@@ -26,7 +26,7 @@ class iamTabs extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="tabs" part="tabs">
       <div class="tabs__dropdown" part="tab-dropdown"></div>
 

package/assets/ts/components/video-modal/video-modal.component.ts

@@ -22,7 +22,7 @@ class iamVideoCard extends HTMLElement {
     ${loadCSS}
     </style>
 
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
 
     <dialog>
       ${closeButtonHtml}