@iamproperty/components 7.4.0 → 7.5.1--beta1

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

@@ -1,4 +1,5 @@
 import { uniqueID } from '../../modules/helpers';
+import iamMenu from '../menu/menu.component';
 
 // Data layer Web component created
 declare global {
@@ -41,6 +42,9 @@ class iamActionbar extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
+    
+      if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
     const loadCSS = `@import "${assetLocation}/css/components/actionbar.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
@@ -55,6 +59,7 @@ class iamActionbar extends HTMLElement {
     
       <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
+        <slot name="filters"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
@@ -102,6 +107,7 @@ class iamActionbar extends HTMLElement {
           <label for="search" class="visually-hidden">Input field label</label>
           <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
           <input type="text" id="search" name="search" required="" part="search-input">
+          <button class="empty btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
         </div>
 
       </div>
@@ -125,16 +131,6 @@ class iamActionbar extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
-    if (!window.customElements.get(`iam-menu`)) {
-      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
-        .then((module) => {
-          window.customElements.define(`iam-menu`, module.default);
-        })
-        .catch((err) => {
-          console.log(err.message);
-        });
-    }
-
     const dialog = this.querySelector('.dialog__wrapper dialog');
 
     // Transform dialog into a menu custom element
@@ -269,14 +265,37 @@ class iamActionbar extends HTMLElement {
       });
       this.dispatchEvent(changeEvent);
     });
+
+    console.log(searchBar);
+
     searchBar.addEventListener('click', (event) => {
+
+      console.log(event);
+
+      console.log(event.target.closest('button.suffix'));
+
       if (event && event.target instanceof HTMLElement && event.target.closest('button.suffix')) {
+
+        
+
         const submitEvent = new CustomEvent('search-submit', {
           detail: { search: searchBar.querySelector('input').value },
         });
+
+console.log(this)
+
         this.dispatchEvent(submitEvent);
       }
     });
+
+    const clearBtn = searchBar.querySelector('.empty');
+    const searchInput = searchBar.querySelector('#search');
+
+    clearBtn.addEventListener('click', function (e) {
+      searchInput.removeAttribute('placeholder');
+      searchInput.removeAttribute('data-value');
+      searchInput.value = '';
+    });
     // #endregion
 
     // #region Reponsive safe area

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

@@ -20,18 +20,14 @@ class iamAddressLookup 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/address-lookup.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
@@ -40,25 +36,25 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
-          <span class="suffix fa-regular fa-search"></span>
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" part="input" />
+          <span class="suffix fa-regular fa-search" part="suffix"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
         </label>
 
         </div>
-        <button class="btn btn-tertiary switch-to-manual-btn" type="button">Or enter address manually</button>
+        <button class="btn btn-tertiary switch-to-manual-btn" type="button" part="button">Or enter address manually</button>
       </div>
       <datalist id="address-lookup__addressess"></datalist>
 
       <div class="manual-address pb-2 js-hide">
-        <slot></slot>
-        <button class="btn btn-tertiary switch-to-lookup-btn" type="button">Use postcode lookup</button>
+        <slot part="contents"></slot>
+        <button class="btn btn-tertiary switch-to-lookup-btn" type="button" part="button">Use postcode lookup</button>
         <slot name="after"></slot>
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button" part="edit-button"><i class="fa-regular fa-pen-to-square"></i> <span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -15,18 +15,15 @@ class iamAppliedFilters 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/applied-filters.css";`;
 
     const classList = this.classList.toString();
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
+    
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
     </style>
     <div class="applied-filters ${classList}"></div>
     <slot></slot>