@iamproperty/components 7.8.2--beta3 → 7.8.2--beta4

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

@@ -1,5 +1,4 @@
 @use '../_func' as *;
-@use '../elements/buttons' as *;
 
 *,
 *::before,
@@ -10,9 +9,3 @@
 :host {
   display: contents;
 }
-
-::slotted(iam-marketing:first-child:last-child) {
-  margin-bottom: 0;
-  min-height: 100%;
-  min-width: 100%;
-}

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

@@ -120,9 +120,10 @@
   }
 
   @media screen and (min-width: 62em) {
+    min-width: 3rem;
     width: fit-content;
     height: auto;
-    margin: 0 0 0 2rem;
+    margin: 0 0 0 1.5rem;
     padding: 0 !important;
     text-indent: 0;
     padding-right: 0 !important;

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

@@ -1,5 +1,7 @@
-
-@use 'advanced-select.component';
+@use '../_func' as *;
+@use '../elements/forms';
+@use '../elements/dropdown';
+@use '../elements/prefix';
 
 @layer components {
 
@@ -18,7 +20,87 @@
     }
   }
 
+  :host {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  .wrapper {
+    display: flex;
+    width: 100%;
+    position: relative;
+
+    .input__wrapper {
+      flex-grow: 1;
+      position: relative;
+      margin-top: 0!important;
+    }
+
+    .suffix {
+      flex-grow: 0;
+    }
+  }
+
+  ::slotted(input){
+    
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+    margin-top: 0!important;
+  }
+
+  ::slotted(label){
+    
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+    margin-top: 0!important;
+  }
+
+  ::slotted(button){
+    margin-top: 0!important;
+  }
+
+  /* #region Clear seach button */
+
+  .clear-search {
+    display: var(--error-hide, block);
+    position: absolute;
+    top: 50%;
+    transform: translate(0,-50%);
+    right: 0.5rem;
+    margin: 0;
+    aspect-ratio: 1 / 1;
+    display: none;
+
+    &:not(:hover, :focus) {
+      border-color: transparent!important;
+      background-color: transparent!important;
+    }
+  }
+
+  :host(.has-value) .clear-search {
+    display: block!important;
+  }
+
+  /* #endregion */
+
+  /* #region datalist */
+  
+  
+  slot[name="datalist"] {
+    display: block;
+    position: relative;
+  }
+
+  :host(:is(.js-show-datalist,.js-force-show-datalist)) ::slotted(datalist) {
+    display: block;
+  }
+
+  ::slotted(datalist:focus-within) {
+    display: block;
+  }
+  /* #endregion */
 
+  /* #region Stylised search */
   :host(.search--stylised) ::slotted(input) {
     
     outline: 1px solid var(--colour-border)!important;
@@ -38,18 +120,18 @@
     outline: 1px solid var(--colour-info)!important;
   }
 
-  :host(.search--stylised) ::slotted(button) {
+  :host(.search--stylised) .suffix {
     
-
+    cursor: pointer;
     background: transparent!important;
     border-color: transparent!important;
-    color: var(--colour-heading)!important;
+    color: var(--colour-primary-theme)!important;
     position: absolute!important;
     top: 0;
     left: 0;
   }
 
-  :host(.hasInputSm) ::slotted(button) {
+  :host(.hasInputSm) .suffix {
 
     min-width: 2.5rem!important;
   }
@@ -60,5 +142,5 @@
     outline: none !important;
     border: none !important;
   }
-
+  /* #endregion */
 }

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

@@ -23,5 +23,9 @@
     }
   }
 
+  hr {
+    width: 100%;
+  }
+
   
 }

package/assets/sass/elements/dropdown.css

@@ -95,6 +95,7 @@
     top: 100%;
     left: 0;
 
+    &:has(> .js-hide):not(:has(> *:not(.js-hide))):before,
     &:empty:before {
       content: "No results found"; /* TODO Allow for text to be overwritten */
       background-color: white;
@@ -143,6 +144,7 @@
     white-space: normal;
     text-overflow: ellipsis;
     overflow: clip;
+    outline: none;
 
     &:not(:last-child){
       margin: 0 0 0.25rem 0 !important;

package/assets/sass/elements/forms.scss

@@ -821,31 +821,4 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
   }
   /* #endregion */
-
-  /* #region Clear seach button */
-
-  .clear-search {
-    display: var(--error-hide, block);
-    position: absolute;
-    top: 50%;
-    transform: translate(0,-50%);
-    right: 0.5rem;
-    margin: 0;
-    aspect-ratio: 1 / 1;
-
-    &:not(:hover, :focus) {
-      border-color: transparent!important;
-      background-color: transparent!important;
-    }
-  }
-      
-  .input__wrapper:has(input[disabled],input.empty) .clear-search {
-
-    display: none;
-  }
-
-  .input__wrapper:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .clear-search {
-    display: none;
-  }
-  /* #endregion */
 }

package/assets/sass/elements/links--global.scss

@@ -136,6 +136,29 @@
     text-decoration: none;
     border-radius: var(--card-border-radius) !important;
 
+
+    $theme-colors: (
+      'primary': var(--colour-primary),
+      'secondary': var(--colour-secondary),
+      'info': var(--colour-info),
+      'warning': var(--colour-warning),
+      'success': var(--colour-success),
+      'complete': var(--colour-complete),
+      'danger': var(--colour-danger),
+      'dark': var(--colour-dark),
+      'light': var(--colour-light),
+    );
+
+    @each $color, $value in $theme-colors {
+      
+      &:has(.colour-#{$color}){
+
+        --hover-outline-colour: var(--colour-#{$color}) !important;
+        --card-icon-bg: var(--colour-warning)!important;
+        --card-icon-colour: var(--colour-primary-theme)!important;
+      }
+    }
+
     &:not(:hover, :focus, .hover, :active, .active) {
 
       outline: none !important;
@@ -148,16 +171,31 @@
       outline: 2px solid var(--hover-outline-colour);
     }
 
+    &:is(:focus) {
+      
+      --card-icon-bg: var(--colour-primary-theme);
+      --card-icon-colour: #ffffff;
+      outline: 2px solid var(--hover-outline-colour);
+    }
+
     &:is(:hover, :focus, .hover) {
       
       --card-icon-bg: var(--colour-primary-theme);
       --card-icon-colour: #ffffff;
+      
+      outline: 2px solid var(--hover-outline-colour);
+    }
+
+    &:has(.card--article):is(:hover, :focus, .hover){
+
+      outline: none !important;
     }
 
 
     &:is(:active, .active){
-      --card-icon-bg: var(--colour-primary-theme);
-      --card-icon-colour: #ffffff;
+      //--card-icon-bg: var(--colour-primary-theme);
+      //--card-icon-colour: #ffffff;
+      --card-icon-right: var(--card-icon-right-overide, 0.5rem);
     }
 
     &:before {

package/assets/sass/foundations/root.scss

@@ -173,7 +173,6 @@
     --card-head-bottom-padding: 2rem;
     --card-body-top-padding: 2rem;
     --card-body-bottom-padding: 2rem;
-    --card-footer-bottom-padding: 1.5rem;
     --card-head-height: 6rem;
     --card-top-padding: 2rem;
     --card-bottom-padding: 2rem;

package/assets/sass/utilities/js-display.css

@@ -3,11 +3,10 @@
     .js-show {
       display: none !important;
     }
-  }
-
-  @media (scripting: none) {
+      
     .js-hide {
       display: none !important;
     }
   }
+
 }

package/assets/ts/components/card/card.component.ts

@@ -1,17 +1,24 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
+import { trackComponent } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
 import iamMenu from '../menu/menu.component';
 
-trackComponentRegistered('iam-card');
+type CardSelectionDetail = {
+  'Card value': string;
+  'input name': string | null;
+};
+
+type CardButtonDetail = {
+  Title: string | null;
+};
+
+const getAssetLocation = (): string => document.body.getAttribute('data-assets-location') || '/assets';
 
 class iamCard extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    const shadowRoot = this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
+    const assetLocation = getAssetLocation();
     const loadCSS = `@import "${assetLocation}/css/components/card.component.css";`;
 
     const template = document.createElement('template');
@@ -26,52 +33,51 @@ class iamCard extends HTMLElement {
     <slot name="primary-action"></slot>
     `;
 
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const cardComponent = this;
-    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+  connectedCallback(): void {
+    const shadowRoot = this.shadowRoot;
+    const cardBody = shadowRoot?.querySelector<HTMLDivElement>('.card__body');
 
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
+    if (!shadowRoot) return;
 
     if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
 
-    setupCard(cardComponent);
+    setupCard(this);
 
     // Add Illustration HTML
-    if (cardComponent.hasAttribute('data-illustration')) {
-      cardBody.insertAdjacentHTML(
+    if (this.hasAttribute('data-illustration')) {
+      cardBody?.insertAdjacentHTML(
         'afterbegin',
         `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`
       );
     }
 
     // Add class that shows the right arrow icon
-    if (!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]') && !cardComponent.classList.contains('card--article') && !cardComponent.closest('.carousel--article-cards')) {
-      cardComponent.classList.add('show-icon');
+    if (!this.querySelector('[slot="btns"]') && !this.querySelector('[slot="secondary"]') && !this.classList.contains('card--article') && !this.closest('.carousel--article-cards')) {
+      this.classList.add('show-icon');
     }
 
     // Secondary buttons and actions
 
     // Add the dialog wrapper HTML
-    if (cardComponent.querySelector('[slot="btns"]')) {
-      cardComponent.shadowRoot.innerHTML += `<div class="menu__wrapper">
+    if (this.querySelector('[slot="btns"]')) {
+      const menuTemplate = document.createElement('template');
+      menuTemplate.innerHTML = `<div class="menu__wrapper">
       <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
       <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
         <slot name="btns"></slot>
       </iam-menu>
     </div>`;
+      shadowRoot.appendChild(menuTemplate.content.cloneNode(true));
 
       // safari and firefox anchor fix for cards
-      if (!CSS.supports('top', 'anchor(top)')) {
-        const actionButton = this.shadowRoot?.querySelector('[popovertarget="actions"]');
-        const actionPopover = this.shadowRoot?.querySelector('[popover]');
+      if (typeof CSS === 'undefined' || !CSS.supports('top', 'anchor(top)')) {
+        const actionButton = shadowRoot.querySelector<HTMLButtonElement>('[popovertarget="actions"]');
+        const actionPopover = shadowRoot.querySelector<HTMLElement>('[popover]');
 
-        actionButton?.addEventListener('click', (event) => {
+        actionButton?.addEventListener('click', () => {
           this.style.setProperty('overflow', 'visible');
           this.style.setProperty('z-index', '999999');
 
@@ -79,85 +85,84 @@ class iamCard extends HTMLElement {
           const top = viewportOffset.top;
           const left = viewportOffset.left;
 
-          actionPopover.style.setProperty('display', 'block');
-          actionPopover.style.setProperty('top', top + 'px');
-          actionPopover.style.setProperty('left', left - 100 + 'px');
+          actionPopover?.style.setProperty('display', 'block');
+          actionPopover?.style.setProperty('top', top + 'px');
+          actionPopover?.style.setProperty('left', left - 100 + 'px');
         });
 
-        document.addEventListener('scroll', (event) => {
-          actionPopover.style.setProperty('display', 'none');
+        document.addEventListener('scroll', () => {
+          actionPopover?.style.setProperty('display', 'none');
         });
       }
     }
 
     // Make sure slotted buttons and links have correct button classes
-    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
+    this.querySelectorAll<HTMLElement>('[slot="btns"]').forEach((button) => {
       button.classList.add('btn');
       button.classList.add('btn-action');
     });
 
     // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button
-    if (cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')) {
-      const element = cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]');
+    const preventHoverElement = this.querySelector<HTMLElement>('[slot="checkbox"],[slot="secondary"]');
 
-      element.addEventListener('mouseenter', () => {
-        cardComponent.classList.add('prevent-hover');
+    if (preventHoverElement) {
+      preventHoverElement.addEventListener('mouseenter', () => {
+        this.classList.add('prevent-hover');
       });
 
-      element.addEventListener('mouseleave', () => {
-        cardComponent.classList.remove('prevent-hover');
+      preventHoverElement.addEventListener('mouseleave', () => {
+        this.classList.remove('prevent-hover');
       });
     }
 
-    if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {
-      const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');
+    const menuWrapper = shadowRoot.querySelector<HTMLElement>('.menu__wrapper');
 
-      element.addEventListener('mouseenter', () => {
-        cardComponent.classList.add('prevent-hover');
+    if (menuWrapper) {
+      menuWrapper.addEventListener('mouseenter', () => {
+        this.classList.add('prevent-hover');
       });
 
-      element.addEventListener('mouseleave', () => {
-        cardComponent.classList.remove('prevent-hover');
+      menuWrapper.addEventListener('mouseleave', () => {
+        this.classList.remove('prevent-hover');
       });
     }
 
     // Dispatch events of selecting checkboxes
-    const checkbox = cardComponent.querySelector('input[type="checkbox"]');
+    const checkbox = this.querySelector<HTMLInputElement>('input[type="checkbox"]');
     if (checkbox) {
       checkbox.addEventListener('change', () => {
         if (checkbox.checked) {
-          const customEvent = new CustomEvent('select-card', {
+          const customEvent = new CustomEvent<CardSelectionDetail>('select-card', {
             detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
           });
-          cardComponent.dispatchEvent(customEvent);
+          this.dispatchEvent(customEvent);
         } else {
-          const customEvent = new CustomEvent('unselect-card', {
+          const customEvent = new CustomEvent<CardSelectionDetail>('unselect-card', {
             detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
           });
-          cardComponent.dispatchEvent(customEvent);
+          this.dispatchEvent(customEvent);
         }
       });
     }
 
     // Dispatch events of click onto secondary buttons
-    const secondaryBtn = cardComponent.querySelector('[slot="secondary"]');
+    const secondaryBtn = this.querySelector<HTMLElement>('[slot="secondary"]');
     if (secondaryBtn) {
       secondaryBtn.addEventListener('click', () => {
-        const customEvent = new CustomEvent('secondary-button-clicked', {
+        const customEvent = new CustomEvent<CardButtonDetail>('secondary-button-clicked', {
           detail: { Title: secondaryBtn.getAttribute('title') },
         });
-        cardComponent.dispatchEvent(customEvent);
+        this.dispatchEvent(customEvent);
       });
     }
 
     // Dispatch events of click onto action buttons
-    const actionBtns = cardComponent.querySelectorAll('[slot="btns"]');
-    Array.from(actionBtns).forEach((button) => {
+    this.querySelectorAll<HTMLElement>('[slot="btns"]').forEach((button) => {
       button.addEventListener('click', () => {
-        const customEvent = new CustomEvent('action-button-clicked', {
+        const customEvent = new CustomEvent<CardButtonDetail>('action-button-clicked', {
           detail: { Title: button.getAttribute('title') },
         });
-        cardComponent.dispatchEvent(customEvent);
+        this.dispatchEvent(customEvent);
       });
     });
 
@@ -165,7 +170,7 @@ class iamCard extends HTMLElement {
     if(this.querySelector('[slot="link"]'))
       this.classList.add('hasLink');
 
-    trackComponent(cardComponent, 'iam-card', [
+    trackComponent(this, 'iam-card', [
       'select-card',
       'unselect-card',
       'secondary-button-clicked',
@@ -173,22 +178,27 @@ class iamCard extends HTMLElement {
     ]);
   }
 
-  static get observedAttributes(): any {
+  static get observedAttributes(): string[] {
     return ['data-image'];
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal): void {
+  attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void {
+    const shadowRoot = this.shadowRoot;
+
+    if (!shadowRoot) return;
+
     switch (attrName) {
       case 'data-total': {
-        if (this.shadowRoot.querySelector('.card__total'))
-          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        const cardTotal = shadowRoot.querySelector<HTMLDivElement>('.card__total');
+
+        if (cardTotal) cardTotal.innerHTML = newVal || '';
         break;
       }
       case 'data-image': {
         if (oldVal != newVal) {
-          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+          const cardHeadImg = shadowRoot.querySelector<HTMLImageElement>('.card__head img');
 
-          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal || '');
         }
         break;
       }