@iamproperty/components 7.7.1--beta21 → 7.7.1--beta23

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

@@ -126,18 +126,40 @@
 
   /* #region Support card component */
   :is(a, button, label):has(.card, iam-card) {
+
+
     border: none;
     background: none;
     padding: 0;
     display: flex;
     margin-bottom: 1.5rem;
     text-decoration: none;
+    border-radius: var(--card-border-radius) !important;
 
-    &:not(:focus){
+    &:not(:hover, :focus, .hover, :active, .active) {
 
       outline: none !important;
     }
 
+    &: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;
+    }
+
+
+    &:is(:active, .active){
+      --card-icon-bg: var(--colour-primary-theme);
+      --card-icon-colour: #ffffff;
+    }
+
     &:before {
       display: none;
     }
@@ -155,5 +177,13 @@
     }
   }
 
+  iam-carousel.carousel--article-cards :is(a, button, label):is(:hover,.hover,:focus) iam-card,
+  :is(a, button, label):is(:hover,.hover,:focus) iam-card.card--article,
+  iam-card.article-card:has([slot="link"]:hover),
+  iam-carousel.carousel--article-cards iam-card:has([slot="link"]:hover){
+    --card-head-overlay: linear-gradient(357.98deg, #1EBEE6 1.36%, rgba(17, 106, 128, 0) 97.97%);
+  }
+
+
   /* #endregion */
 }

package/assets/sass/foundations/colours.scss

@@ -94,6 +94,13 @@
     }
   }
 
+  .reset-colours {
+    > * {
+      color-scheme: light;
+      --colour-body: #595959;
+      
+    }
+  }
 
   @media (forced-colors: active) {
     :root {

package/assets/sass/foundations/reboot.scss

@@ -245,4 +245,16 @@ $columns: 12;
 
 #app {
   display: contents;
-}
+}
+
+
+/* #region Nav tweaks for standalone pages */
+
+nav:has(iam-std-nav-standalone) {
+  min-height: 8rem!important;
+}
+nav:has(iam-std-nav-standalone) iam-nav{
+  top: 2rem!important;
+}
+
+/* #endregion */

package/assets/sass/foundations/root.scss

@@ -120,6 +120,9 @@
     --chart-colour-warning: #ffd280 !important;
 
     /* #endregion */
+
+    --hover-outline-colour: var(--colour, var(--colour-primary));
+
     /* #region Type vars */
     --font-body: 'Qanelas', arial, sans-serif;
     --font-heading: 'Qanelas', arial, sans-serif;
@@ -159,16 +162,30 @@
     --index-menu: 200;
     --index-overlay: 1000;
     /* #endregion */
-    /* #region Cards variables */
+    /* #region card component */
+    --card-fs: 1.125rem; /* 18/16 */
+    --card-lh: 1.5rem;
+    // right arrow
+    --card-icon-right: 1rem;
+    --card-icon-bg: var(--colour-warning);
+    --card-icon-colour: var(--colour-primary-theme);
+    --card-head-top-padding: 2rem;
+    --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-right-padding: 3.5rem; /* 16+16+24 */
     --card-bottom-padding: 2rem;
+    --card-right-padding: 1rem;
     --card-left-padding: 1rem;
     --card-border-radius: 0.5rem;
     --card-box-shadow: 2px 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
+
+
+    /* #endregion */
     --nav-height: 6rem; /* 96 */
     --code-color: #d63384;
-    /* #endregion */ 
     /* #region Default borders */
     --border-width: 1px;
     --border-style: solid;

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

@@ -51,7 +51,7 @@ class iamCard extends HTMLElement {
     }
 
     // Add class that shows the right arrow icon
-    if (!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]')) {
+    if (!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]') && !cardComponent.classList.contains('card--article') && !cardComponent.closest('.carousel--article-cards')) {
       cardComponent.classList.add('show-icon');
     }
 

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

@@ -83,7 +83,7 @@ class iamContent extends HTMLElement {
     const addTitle = this.addTitle;
 
     const registerComponents = (contentComponent): void => {
-      const components = ['skeleton','bone','carousel', 'card', 'marketing', 'notification'];
+      const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
 
       const assetLocation = document.body.hasAttribute('data-assets-location')
         ? document.body.getAttribute('data-assets-location')
@@ -146,6 +146,12 @@ class iamContent extends HTMLElement {
           registerComponents(component);
           transformButtons(component);
 
+          Array.from(document.querySelectorAll('[data-variable]')).forEach((element) => {
+
+            if(document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`))
+              element.innerHTML = document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`)?.getAttribute('data-variable-value');
+          });
+
           const changeEvent = new CustomEvent('loaded', { detail: {triggered: true} });
           component?.dispatchEvent(changeEvent);
         }

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

@@ -21,6 +21,7 @@ class iamModal extends HTMLElement {
     ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
+
     <dialog>
       ${closeButtonHtml}
       <div class="scroll">

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

@@ -85,6 +85,7 @@ class iamNav extends HTMLElement {
           break;
       }
 
+      
       // Create menu button
       if (
         element.classList.contains('nav--menu') &&

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

@@ -79,6 +79,10 @@ class iamSearch extends HTMLElement {
       displayInputField.setAttribute('list', listID);
     }
 
+    displayInputField.addEventListener('change', function (e) {
+      inputField.value = displayInputField.value;
+    });
+
     advancedSelect(this, displayInputField, datalist, false);
 
 
@@ -88,7 +92,6 @@ class iamSearch extends HTMLElement {
 
       if (match) {
         inputField.value = match.getAttribute('data-actual-value');
-        console.log(inputField)
         displayInputField.value = match.getAttribute('data-actual-value');
 
         displayInputField.classList.remove('is-invalid');
@@ -97,7 +100,9 @@ class iamSearch extends HTMLElement {
       else if (displayInputField.value.length >= minLength && !subMatch) {
         displayInputField.classList.add('is-invalid');
         displayInputField.closest('label').setAttribute('data-error', 'No results returned');
-        datalist.innerHTML = '';
+
+        if(searchWrapper.hasAttribute('data-url'))
+          datalist.innerHTML = '';
       } 
       else {
         displayInputField.classList.remove('is-invalid');
@@ -207,7 +212,9 @@ class iamSearch extends HTMLElement {
 
     this.addEventListener('close-button-pressed', function (event) {
 
-      datalist.innerHTML = '';
+      if(searchWrapper.hasAttribute('data-url')) {
+        datalist.innerHTML = '';
+      }
       inputField?.value = '';
 
       searchWrapper.classList.remove('was-validated');

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

@@ -65,6 +65,7 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
+  
   async connectedCallback(): void {
     
     const component = this;
@@ -81,6 +82,7 @@ class iamSTDNav extends HTMLElement {
     }
 
 
+
     const data = await loadNavData(Cookies).then(
       (data) => {
 
@@ -102,14 +104,31 @@ class iamSTDNav extends HTMLElement {
       }
     );
 
+    
     const userData = await loadUserData(Cookies).then(
       (data) => {
 
         setEnabledLinks(component,data);
+
+        
+        Array.from(document.querySelectorAll('[data-variable]')).forEach((element) => {
+
+          if(data.attributes[element.getAttribute('data-variable')])
+            element.innerHTML = data.attributes[element.getAttribute('data-variable')];
+        });
+
+        Array.from(document.querySelectorAll('[data-save-variable]')).forEach((element) => {
+
+          //console.log(element);
+          if(data.attributes[element.getAttribute('data-save-variable')])
+            element.setAttribute('data-variable-value', data.attributes[element.getAttribute('data-save-variable')]);
+        });
+
         return true;
       }
     );
 
+
   }
 
 }

package/assets/ts/components/std-nav-standalone/std-nav-standalone.component.ts

@@ -76,6 +76,15 @@ class iamSTDNavStandalone extends HTMLElement {
       (data) => {
 
         setEnabledLinks(component,data);
+
+        Array.from(document.querySelectorAll('[data-user-data]')).forEach((element) => {
+
+          const dataVar = element.getAttribute('data-user-data');
+
+          if(data.attributes[dataVar])
+            element.innerHTML = data.attributes[dataVar];
+        });
+
         return true;
       }
     );

package/assets/ts/modules/advanced-select.ts

@@ -125,14 +125,14 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   });
 
   advancedSelect.addEventListener('keydown', function (e) {
-
+    
     if (e.keyCode == 40) {
       currentFocus++;
       addActive(datalist.options);
     } else if (e.keyCode == 38) {
       currentFocus--;
       addActive(datalist.options);
-    } else if (e.keyCode == 13) {
+    } else if (e.keyCode == 13 && !e.target.closest('form')) {
       e.preventDefault();
       if (currentFocus > -1) {
         /*and simulate a click on the "active" item:*/

package/assets/ts/modules/modal.ts

@@ -1,6 +1,6 @@
 export const openModal = (modal): void => {
 
-  const dialog = modal.shadowRoot?.querySelector('dialog');
+  const dialog = modal.closest('dialog') || modal.shadowRoot?.querySelector('dialog');
   const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.showModal();
@@ -23,7 +23,7 @@ export const openModal = (modal): void => {
 
 export const closeModal = (modal): void => {
 
-  const dialog = modal.shadowRoot?.querySelector('dialog');
+  const dialog = modal.closest('dialog') || modal.shadowRoot?.querySelector('dialog');
   const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.close();

package/assets/ts/modules/nav.ts

@@ -50,8 +50,8 @@ export const populateSections = (data):void => {
   data.forEach((section) => {
 
     html += `<span class="section section--${section.layout}">
-      ${section.title ? `<span class="lead text-heading section-title" data-product="${section.id}" data-title>${section.title}</span>` : ''}
-      ${section.description ? `<span class="lead section-desc" data-product="${section.id}">! ${section.description}</span>` : ''}
+      ${section.title ? `<span class="lead section-title" data-product="${section.id}" data-title>${section.title}:</span>` : ''}
+      ${section.description ? `<span class="lead section-desc" data-product="${section.id}"><i class="fa-solid fa-sparkles colour-warning"></i> ${section.description}</span>` : ''}
       ${populateLinks(section.links)}
     </span>`;
   });