@iamproperty/components 7.6.4--beta8 → 7.7.0

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/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));

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,52 @@ 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">
+      <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>
       <picture>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
       </picture>
       <div class="container">
+        <slot name="before"></slot>
         <slot></slot>
+        <slot name="badge"></slot>
+        <slot name="panel" class="admin-panel"></slot>
       </div>
     </div>
     `;
@@ -41,6 +77,9 @@ 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');
   }
 }
 

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">

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}

package/assets/ts/modules/helper.test.ts

@@ -0,0 +1,143 @@
+import {describe, it, expect} from './test.ts';
+import { isValidPostcode } from './helpers.ts';
+
+describe("MathUtils Tests", function () {
+  it('should pass', function() {
+    expect(1 === 1);
+  });
+
+});
+
+
+describe('The postcode helper function', () => {
+  
+  // #region valid pattern variations
+  it('should return true when testing the postcode "ne33hd"', () => {
+    
+    expect(isValidPostcode("ne33hd"));
+  });
+  it('should return true when testing the postcode "ne3 3hd"', () => {
+    
+    expect(isValidPostcode("ne3 3hd"));
+  });
+  it('should return true when testing the postcode "NE3 3HD"', () => {
+    
+    expect(isValidPostcode("NE3 3HD"));
+  });
+  it('should return true when testing the postcode "NE33HD"', () => {
+    
+    expect(isValidPostcode("NE33HD"));
+  });
+  
+  it('should return true when testing the postcode " NE33HD"', () => {
+    
+    expect(isValidPostcode(" NE33HD"));
+  });
+  
+  it('should return true when testing the postcode " NE33HD "', () => {
+    
+    expect(isValidPostcode(" NE33HD "));
+  });
+  // #endregion
+  
+  // #region Valid postcodes
+  
+  it('should return true when testing the postcode "NE3 5DP"', () => {
+    
+    expect(isValidPostcode("NE3 5DP"));
+  });
+
+  it('should return true when testing the postcode "CW11 1SX"', () => {
+    
+    expect(isValidPostcode("CW11 1SX"));
+  });
+
+  
+  it('should return true when testing the postcode "NE21 6RB"', () => {
+    
+    expect(isValidPostcode("NE21 6RB"));
+  });
+
+  
+  it('should return true when testing the postcode "SW1A 1AA"', () => {
+    
+    expect(isValidPostcode("SW1A 1AA"));
+  });
+
+  
+  it('should return true when testing the postcode "M1 1AE"', () => {
+    
+    expect(isValidPostcode("M1 1AE"));
+  });
+
+  // #endregion
+
+  // incorrect pattern
+  it('should return false when testing the postcode "NE3"', () => {
+    
+    expect(!isValidPostcode("NE3"));
+  });
+
+  // #region Invalid postcodes correct pattern
+
+  it('should return true when testing the postcode "Q1A 4BT"', () => {
+    
+    expect(isValidPostcode("Q1A 4BT"));
+  });
+
+  it('should return true when testing the postcode "AB0 7RE"', () => {
+    
+    expect(isValidPostcode("AB0 7RE"));
+  });
+
+  it('should return true when testing the postcode "LN0A 4JP"', () => {
+    
+    expect(isValidPostcode("LN0A 4JP"));
+  });
+
+  it('should return true when testing the postcode "WS0 9ND"', () => {
+    
+    expect(isValidPostcode("WS0 9ND"));
+  });
+
+  it('should return true when testing the postcode "X8 2HR"', () => {
+    
+    expect(isValidPostcode("X8 2HR"));
+  });
+
+  // #endregion
+
+  // #region Invalid postcodes incorrect pattern
+
+  it('should return false when testing the postcode "ZZ2 TYD"', () => {
+    
+    expect(!isValidPostcode("ZZ2 TYD"));
+  });
+
+
+  it('should return false when testing the postcode "ABC EFG"', () => {
+    
+    expect(!isValidPostcode("ABC EFG"));
+  });
+
+
+  it('should return false when testing the postcode "1234 567"', () => {
+    
+    expect(!isValidPostcode("1234 567"));
+  });
+
+
+  it('should return false when testing the postcode "23A PP2"', () => {
+    
+    expect(!isValidPostcode("23A PP2"));
+  });
+
+
+  it('should return false when testing the postcode "NE3 H23"', () => {
+    
+    expect(!isValidPostcode("NE3 H23"));
+  });
+  // #endregion
+
+
+});

package/assets/ts/modules/test.ts

@@ -0,0 +1,22 @@
+
+export const describe = (desc, fn):void => {
+
+  console.log(desc);
+  fn();
+}
+
+export const it = (desc, fn):void => {
+  try {
+    fn();
+    console.log(`\x1b[32m ${desc} \x1b[0m`)
+  } catch (error) {
+    console.log(`\x1b[31m ${desc} \x1b[0m`)
+    console.error(error);
+  }
+}
+
+export const expect = (isTrue):void => {
+  if (!isTrue) {
+    throw new Error();
+  }
+}