@iamproperty/components 7.5.1--beta9 → 7.5.1--beta11

package/assets/sass/elements/links.scss

@@ -72,6 +72,12 @@ $darkMode: 'true' !default;
       }
     }
 
+    &:not(.text-decoration-none).text-underline-plain {
+      &:after {
+        background: currentColor;
+      }
+    }
+
     [class*='fa-'] {
       margin-left: 0;
       margin-right: 0.5rem;
@@ -94,7 +100,7 @@ $darkMode: 'true' !default;
   }
 
   @include inline-text() {
-    a:not(.btn) {
+    a:not(.btn):not(.link) {
       min-height: none;
       display: inline;
       margin: 0;

package/assets/sass/elements/popover.scss

@@ -71,7 +71,8 @@ $darkMode: 'true' !default;
 
       //right: auto;
       margin: 0 0 0 #{rem(4)};
-      padding: rem(16);
+      //padding: rem(16);
+      padding: rem(24);
 
       &::backdrop {
         display: none;
@@ -94,7 +95,6 @@ $darkMode: 'true' !default;
       min-width: rem(320);
       border-radius: rem(16);
       width: rem(320);
-      padding: rem(24);
 
       @include media-breakpoint-up(sm, $mobileOnly) {
         width: rem(335);
@@ -256,3 +256,4 @@ $darkMode: 'true' !default;
   }
   // #endregion
 }
+

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -34,14 +34,18 @@ class iamDarkMode extends HTMLElement {
 
     const storedTheme = localStorage.getItem('user-theme');
 
+    console.log(storedTheme);
+
     // Work from local storage first then look at the media preferences
     label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
     if (storedTheme == 'dark-theme') {
       label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
       label?.classList.add('dark-theme');
+      document.documentElement.className = 'dark-theme';
     } else if (storedTheme == 'light-theme') {
       label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
       label?.classList.remove('dark-theme');
+      document.documentElement.className = 'light-theme';
     }
 
     const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -51,8 +55,6 @@ class iamDarkMode extends HTMLElement {
     }
 
     this.addEventListener('click', (event) => {
-      console.log(label?.querySelector('input:checked'));
-
       if (label?.querySelector('input:checked')) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
         localStorage.setItem('user-theme', 'dark-theme');
@@ -70,6 +72,7 @@ class iamDarkMode extends HTMLElement {
       if (matches) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
         label?.classList.add('dark-theme');
+        document.documentElement.className = 'dark-theme';
       }
     });
 
@@ -77,6 +80,7 @@ class iamDarkMode extends HTMLElement {
       if (matches) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
         label?.classList.remove('dark-theme');
+        document.documentElement.className = 'light-theme';
       }
     });
   }

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

@@ -20,7 +20,7 @@ class iamInput extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="wrapper" part="wrapper">
       <span part="prefix"><slot name="prefix"></slot></span>
-      <slot></slot>
+      <slot part="input-wrapper"></slot>
       <slot part="suffix"><slot name="suffix"></slot></slot>
     </div>
     `;
@@ -64,6 +64,61 @@ class iamInput extends HTMLElement {
     }
     setIcon(inputType);
 
+
+    const setCurrencyRules = () => {
+      
+      input.setAttribute('type','text');
+      input?.setAttribute('data-value',input.value);
+      input.value = new Intl.NumberFormat("en-GB", { 
+        style: "currency", 
+        currency: "GBP",
+        minimumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        maximumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer
+      }).format(input.value).replace("£", "");
+    }
+
+
+    // Currency type
+    if(component?.hasAttribute('data-currency')) {
+
+      // Pre set the icons
+      switch (component?.hasAttribute('data-currency')) {
+        case "dollar":
+          component.setAttribute('data-prefix-icon','dollar-sign') ;
+          break;
+        case "euro":
+          component.setAttribute('data-prefix-icon','euro-sign') ;
+          break;
+        default:
+          component.setAttribute('data-prefix-icon','sterling-sign') ;
+          break;
+      }
+
+      setCurrencyRules();
+
+
+      input?.addEventListener('focus',(event) => {
+
+        input.setAttribute('type', 'number')
+
+        input.value = input.getAttribute('data-value');
+        input.setAttribute('value', input.getAttribute('data-value'));
+      });
+
+      input?.addEventListener('input',(event) => {
+
+        input?.setAttribute('data-value',input.value);
+      });
+
+      input?.addEventListener('blur',(event) => {
+
+        setCurrencyRules();
+      });
+    }
+
+
+
     // Colour input field
     if(input?.matches('[type="color"]')){
       this.insertAdjacentHTML('beforeend', `<output></output>`);
@@ -161,7 +216,60 @@ class iamInput extends HTMLElement {
         input.showPicker();
     });
     
+    // Duplicate input watches
+    if(component.hasAttribute('data-duplicate')){
+
+      const id = component.getAttribute('data-duplicate');
+      const watchedInputs = document.querySelectorAll(`[name="${id}"], [id="${id}"]`);
+
+      input.addEventListener('change', (event) => {
+        
+        if(input.closest('iam-modal'))
+          return false;
+
+        if(input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+          watchedInput.checked = event.target.checked;
+
+          if(!event.detail && !event.detail?.triggered){
+            const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+            watchedInput?.dispatchEvent(changeEvent);
+          }
+        }
+      });
+
+      Array.from(watchedInputs).forEach((watchedInput) => {
+
+        watchedInput?.addEventListener('change', (event) => {
+
+          // If both the duplicate input and the watched input are checkboxes
+          if(input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+            input.checked = event.target.checked;
+
+            if(!event.detail && !event.detail?.triggered){
+              const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+              input?.dispatchEvent(changeEvent);
+            }
+          }
 
+          // if input is not a checkbox BUT the watched input is
+          // Then we need to create the input's value
+          if(!input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+            
+            let computedValue = '';
+            Array.from(document.querySelectorAll(`[name="${id}"]:checked`)).forEach((loopInput) => {
+
+              computedValue += (computedValue == '' ? '' : ',') + loopInput.value;
+            });
+            input.value = computedValue;
+
+            if(!event.detail && !event.detail?.triggered){
+              const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+              input?.dispatchEvent(changeEvent);
+            }
+          }
+        });
+      });
+    }
   }
 }
 

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

@@ -40,6 +40,7 @@ class iamMenu extends HTMLElement {
     // Set the needed CSS styles to connect the ID attribute to the anchor name
     if (menuID && menuButton) {
       this.setAttribute('role', 'menu');
+      this.setAttribute('popover', 'auto');
       this.style['position-anchor'] = `--${menuID}`;
 
       menuButton?.setAttribute('aria-haspopup', 'true');

package/assets/ts/components/popover/popover.component.ts

@@ -0,0 +1,50 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+
+trackComponentRegistered('iam-popover');
+
+class iamPopover 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/popover.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div>
+    <slot></slot>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const id = this.getAttribute('id');
+    const button = document.querySelector(`[popovertarget="${id}"]`);
+    
+    this.setAttribute('popover','auto');
+
+
+    button?.addEventListener('click',() => {
+
+      if(this.matches(':popover-open')){
+        button.removeAttribute('aria-pressed');
+      }
+      else {
+        
+        button.setAttribute('aria-pressed','true');
+      }
+    });
+  }
+}
+
+export default iamPopover;

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

@@ -1554,7 +1554,7 @@ class iamSTDAddressLookup extends HTMLElement {
     data-url="/standardaddress.json?search_query=" 
     data-postcode="true" 
     data-min-chars="5" 
-    data-title="Find an address by postcode" 
+    ${this.hasAttribute('data-title') ? `data-title='${this.getAttribute('data-title')}'` : `data-title='Find an address by postcode'`}
     data-placeholder="UK, Isle of Man, & Channel Islands " 
     ${this.hasAttribute('data-manual') ? 'data-manual' : ''} 
     ${this.hasAttribute('data-allow-manual') ? 'data-allow-manual' : ''} 

package/assets/ts/components/table-basic/table-basic.component.ts

@@ -48,7 +48,7 @@ class iamTableBasic extends HTMLElement {
     setupBasicTable(this, table, form, pagination);
 
     paginateTable(this, table, form, pagination, () => {
-      paginateRows(component);
+      paginateRows(this);
     });
   }
 }

package/assets/ts/components/tooltip/tooltip.component.ts

@@ -0,0 +1,98 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+
+trackComponentRegistered('iam-tooltip');
+
+class iamTooltip 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/popover.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <slot></slot>
+    <div class="tooltip__anchor">
+    </div>
+    <div class="tooltip__content" id="tooltip"></div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+
+    const contentWrapper = this.shadowRoot?.querySelector('.tooltip__content');
+    const anchor = this.shadowRoot?.querySelector('.tooltip__anchor');
+
+    if(this.hasAttribute('data-heading'))
+      contentWrapper?.innerHTML += `<strong>${this.getAttribute('data-heading')}</strong>`;
+
+    contentWrapper?.innerHTML += this.getAttribute('title');
+
+
+    this.removeAttribute('title');
+
+    contentWrapper?.setAttribute('popover', 'auto');
+
+    this?.addEventListener('mouseenter', (event) => {
+      
+        contentWrapper.showPopover();
+    });
+    this?.addEventListener('mouseleave', (event) => {
+
+      if(!contentWrapper?.classList.contains('show-popover'))
+        contentWrapper.hidePopover();
+    });
+
+
+    // Check if th component sets the tooltip open by default
+    if(this.classList.contains('show-popover')){
+      contentWrapper?.classList.add('show-popover');
+      
+      contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+      contentWrapper.showPopover();
+    }
+
+    this?.addEventListener('click', (event) => {
+      
+      contentWrapper?.classList.toggle('show-popover');
+
+      if(contentWrapper?.classList.contains('show-popover')){
+        
+        contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+        contentWrapper.showPopover();
+      }
+      else {
+        
+        contentWrapper?.setAttribute('popover', 'auto');
+        contentWrapper.hidePopover();
+      }
+    });
+
+    // Used for documentation
+    this?.parentNode?.addEventListener('update', (event) => {
+      contentWrapper?.setAttribute('popover', 'auto');
+      contentWrapper.hidePopover();
+
+      setTimeout(() => {
+          
+        contentWrapper?.classList.add('show-popover');
+        
+        contentWrapper?.setAttribute('popover', 'manual'); // Switch popover type first before showing popover
+        contentWrapper.showPopover();
+
+      }, 100);
+    });
+  }
+}
+
+export default iamTooltip;

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

@@ -24,7 +24,12 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
   });
 
+  displayInputField.addEventListener('keyup', function () {
     
+    if(displayInputField.value != ""){
+      displayInputField.setAttribute('data-value', displayInputField.value);
+    }
+  });
 
   displayInputField.addEventListener('blur', function () {
     if (displayInputField.hasAttribute('data-value')) {
@@ -113,6 +118,9 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
 
   const emptyField = () => {
+
+    displayInputField.removeAttribute('placeholder');
+
     if(displayInputField.hasAttribute('data-original-placeholder'))
       displayInputField.setAttribute('placeholder', displayInputField.getAttribute('data-original-placeholder'));
     

package/assets/ts/modules/applied-filters.ts

@@ -127,6 +127,10 @@ function createAppliedFilters(container, filters): void {
 
 
   const filterClicked = (filter) => {
+
+    if(!filter?.hasAttribute('data-name'))
+      return false;
+
     const names = filter.getAttribute('data-name').split(',');
 
     for (let t = 0; t < names.length; t++) {
@@ -172,6 +176,9 @@ function createAppliedFilters(container, filters): void {
 
         filterClicked(filter);
 
+        const clickedEvent = new CustomEvent('filter-clicked',{'detail':filterName });
+        container.dispatchEvent(clickedEvent);
+
         // If you clicked on the filter on the parent component we want to tell the child component which filter to copy
         if(container.querySelector('dialog iam-applied-filters')) {
           const event = new CustomEvent('filter',{'detail':filterName });
@@ -196,10 +203,14 @@ function createAppliedFilters(container, filters): void {
   });
 
   if(dialog){
+    const primaryButton = container.querySelector('.btn-primary') ? container.querySelector('.btn-primary') : container.shadowRoot.querySelector('.btn-primary');
     // Force the filters inside of the dialog to effect the filters above
-    container.querySelector('.btn-primary')?.addEventListener('click', (e) => {
+    primaryButton?.addEventListener('click', (e) => {
 
       const event = new CustomEvent('update');
+      const submitEvent = new CustomEvent('submit');
+
+      container.dispatchEvent(submitEvent);
       
       if(container.parentElement.closest('iam-applied-filters'))
         container.parentElement.closest('iam-applied-filters').dispatchEvent(event);