@iamproperty/components 5.6.1-beta2 → 5.6.1-beta21

package/assets/sass/elements/progress.scss

@@ -18,12 +18,10 @@ progress {
   border: none;
 }
 
-progress:before {
-  content: attr(value)'%';
+label[data-percent]:has(progress):before {
+  content: attr(data-percent)'%';
   vertical-align: 0;
   line-height: 1;
-  
-  /*Position text over the progress bar */
   position:absolute;
   top: auto;
   left:auto;
@@ -33,6 +31,10 @@ progress:before {
   font-weight: bold;
 }
 
+progress[data-progress]:before {
+  content: attr(data-progress)'%';
+}
+
 progress::-webkit-progress-bar {
   background-color: var(--colour-light);
   border-radius: rem(5);
@@ -42,30 +44,170 @@ progress::-webkit-progress-value {
   border-radius: rem(5);
 }
 
+// #region inline progress
+:is(label, .label):has(.progress--inline){ 
+
+  font-size: 1rem;
+  color: var(--colour-body);
+  
+  &:before {
+    bottom: -0.25em;
+  }
 
+  progress.progress--inline {
 
+    width: 100%;
 
-progress::-moz-progress-bar {
-  /* style rules */
+  }
 }
 
+// #endregion
 
-// #region inline progress
+// #region Circular
+label:has(.progress--circular){
 
-:is(label, .label):has(.progress--inline){ 
+  --max-width: #{rem(200)};
+  --pt: #{rem(90)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(20)};
+  --value-fs: #{rem(48)};
+  --value-pb: #{rem(32)};
+  --label-fs: #{rem(18)};
 
-  font-size: 1rem;
-color: var(--colour-body);
-  
-  
-  progress.progress--inline {
+  position: relative;
+  z-index: 1;
+  max-width: var(--max-width);
+  margin-bottom: 2rem;
 
-    width: 100%;
+  padding-right: 0;
+  aspect-ratio: 1/1;
+  height: auto;
+  width: 100%;
+  text-align: center;
+  padding-top: min(calc(var(--pt-percent) + var(--value-pb)), calc(var(--pt) + var(--value-pb)));
+  padding-inline: var(--value-pb);
+
+  display: inline-block;
+  font-size: var(--label-fs);
+  line-height: 1;
+}
+
+label:has(.progress--circular.progress--md){
+  --max-width: #{rem(170)};
+  --pt: #{rem(76.5)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(20)};
+  --value-pb: #{rem(24)};
+}
+
+label:has(.progress--circular.progress--sm){
+  --max-width: #{rem(120)};
+  --pt: #{rem(54)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(16)};
+  --value-fs: #{rem(24)};
+
+  --value-pb: #{rem(16)};
+  --label-fs: #{rem(12)};
+}
+
+// Responsive-ish settings
+*:has(> label > .progress--circular){
   
-    &:before {
-      bottom: -0.25em;
-    }
+  container-type: inline-size;
+}
+
+@container (width <= 10.625rem) {
+
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
+    --max-width: #{rem(170)};
+    --pt: #{rem(76.5)};
+    --pt-percent: 45%;
+    --bar-width: #{rem(20)};
+    --value-pb: #{rem(24)};
+  }
+}
+
+@container (width <= 7.5rem) {
+
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
+  --max-width: #{rem(120)};
+  --pt: #{rem(54)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(16)};
+  --value-fs: #{rem(24)};
+
+  --value-pb: #{rem(16)};
+  --label-fs: #{rem(12)};
   }
 }
 
+
+
+
+label:has(.progress--circular) + label:has(.progress--circular) {
+  margin-left: 2rem;
+}
+
+// Needed to allow it to be animated
+@property --progress {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.progress--circular {
+
+  --progress-shown: var(--progress, 0%);
+  position: absolute;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  margin: 0;
+  background: red;
+  background: conic-gradient(var(--colour, var(--colour-info)) var(--progress-shown), var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown)));
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  box-shadow: #{rem(3)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 20%);
+  transition: --progress 1s;
+}
+
+.progress--circular::-webkit-progress-bar,
+.progress--circular::-webkit-progress-value {
+  opacity: 0;
+}
+
+
+.progress--circular::-moz-progress-bar {
+  opacity: 0;
+}
+
+label[data-percent]:has(.progress--circular):before {
+
+  top: var(--pt-percent);
+  left:50%;
+  right:auto;
+  bottom: auto;
+  color: var(--colour-heading);
+  transform: translate(-50%,-50%);
+  font-size: var(--value-fs);
+  line-height: 1;
+  z-index: 2;
+  text-indent: 0;
+}
+
+label:has(.progress--circular):after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  aspect-ratio: 1/1;
+  width: calc(100% - var(--bar-width) - var(--bar-width));
+  background-color: var(--colour-canvas);
+  border-radius: 50%;
+}
+
 // #endregion

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

@@ -57,19 +57,19 @@ class iamActionbar extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
-      <div class="actionbar">
+      <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="overflow">
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
               </dialog>
             </div>
-            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="">Search</button>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
           </div>
         </div>
       </div>
@@ -79,7 +79,7 @@ class iamActionbar extends HTMLElement {
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="selected-overflow">
                 <slot name="selected-overflow"></slot>
               </dialog>
             </div>
@@ -89,10 +89,10 @@ class iamActionbar extends HTMLElement {
       <div class="actionbar--search">
         <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
 
-        <div class="search-wrapper">
+        <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
-          <button class="suffix"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="">
+          <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">
         </div>
 
       </div>

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

@@ -41,17 +41,18 @@ class iamAddressLookup extends HTMLElement {
         </label>
 
         </div>
-        <button class="btn btn-tertiary switch-to-manual-btn">Or enter address manually</button>
+        <button class="btn btn-tertiary switch-to-manual-btn" type="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">Use postcode lookup</button>
+        <button class="btn btn-tertiary switch-to-lookup-btn" type="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"><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"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;
@@ -60,6 +61,7 @@ class iamAddressLookup extends HTMLElement {
 
 	async connectedCallback() {
 
+    const component = this;
     const wrapper = this.shadowRoot.querySelector('.wrapper');
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
@@ -202,14 +204,19 @@ class iamAddressLookup extends HTMLElement {
           Object.keys(values).forEach((key, index) => {
 
             let value = values[key];
-            if(this.querySelector(`[data-name="${key}"]`))
+            if(this.querySelector(`[data-name="${key}"]`) && value != '')
               this.querySelector(`[data-name="${key}"]`).value = value;
-            else if(this.querySelector(`[name="${key}"]`))
+            else if(this.querySelector(`[data-name-alt="${key}"]`) && value != '')
+              this.querySelector(`[data-name-alt="${key}"]`).value = value;
+            else if(this.querySelector(`[name="${key}"]`) && value != '')
               this.querySelector(`[name="${key}"]`).value = value;
+            
+            if(this.querySelector(`[data-name-2="${key}"]`))
+              this.querySelector(`[data-name-2="${key}"]`).value += ' '+value;
           });
 
           // Focus on first input
-          this.querySelector('[data-name="address_1"]').focus();
+          this.querySelector('[name]').focus();
 
           Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
             input.setAttribute('required','true');
@@ -268,17 +275,24 @@ class iamAddressLookup extends HTMLElement {
             else {
               let values = JSON.stringify(address);
 
-              let itemString = '';
+              if(component.hasAttribute('data-display-text')){
 
-              for (const [key, value] of Object.entries(address)) {
-
-                if(key == "address_number_name")
-                  itemString += `${value} `;
-                else if(key != "postcode" && key != "address_title")
-                  itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
+              }
+              else {
+
+                let itemString = '';
+                for (const [key, value] of Object.entries(address)) {
+
+                  if(key == "address_number_name")
+                    itemString += `${value} `;
+                  else if(key != "postcode" && key != "address_title")
+                    itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                }
+                
+                listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
               }
               
-              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
             }
 
 

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

@@ -33,21 +33,7 @@ class iamCard extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" part="card">
-      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-      <div class="card__body">
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
-      ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
-        <slot></slot>
-      ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
-      </div>
-      ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
-      <slot name="checkbox"></slot>
-      <div class="card__footer">
-        <slot name="footer"></slot>
-        <slot name="btns"></slot>
-        ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
-      </div>
+      ${this.createCardConent()}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -57,14 +43,41 @@ class iamCard extends HTMLElement {
       document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
   }
 
-	connectedCallback() {
+  const createCardConent () {
+
+    return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
+    <div class="card__body" part="body">
+    ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
+    ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
+    ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
+      <slot></slot>
+    ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
+    </div>
+    ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
+    <slot name="checkbox"></slot>
+    <div class="card__footer" part="footer">
+      <slot name="footer"></slot>
+      <slot name="btns"></slot>
+      ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
+    </div>`;
+  }
 
+	connectedCallback() {
     this.classList.add('loaded');
-    
+
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label, router-link')
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
+    const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
+
+    /* 
+      If the parentNode is actually just a div, 
+      we don't want to look for anything or add events 
+    */
+    if (!parentNode) {
+      return false;
+    }
 
     if(parentNode)
       parentNode.setAttribute('tabindex','-1');
@@ -177,10 +190,11 @@ class iamCard extends HTMLElement {
           window.location = addLocation;
       });
     }
+
   }
 
   static get observedAttributes() {
-    return ["data-total","class"];
+    return ["data-total","class","data-image"];
   }
   
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -191,12 +205,26 @@ class iamCard extends HTMLElement {
         break;
       }
       case "class": {
-        let classList = this.classList.toString();
-            
-        if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
-          classList += ' card--has-icon';
 
-        this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
+        if(oldVal != newVal){
+          let classList = this.classList.toString();
+              
+          if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+            classList += ' card--has-icon';
+
+          this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
+
+          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+        }
+
+        break;
+      }
+      case "data-image": {
+
+        if(oldVal != newVal){
+
+          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+        }
         break;
       }
     }

package/assets/ts/components/carousel/carousel.component.ts

@@ -32,12 +32,12 @@ class iamCarousel extends HTMLElement {
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>
@@ -49,6 +49,8 @@ class iamCarousel extends HTMLElement {
     
     const carouselElement = this.shadowRoot.querySelector('.carousel');
     const row = this.querySelector('.row');
+    const thumbnailImages = JSON.parse(this.dataset.thumbnails);
+
     const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
 
     let itemCount = this.querySelectorAll(':scope > .row > .col').length
@@ -61,10 +63,24 @@ class iamCarousel extends HTMLElement {
     if(this.classList.contains('hide-controls'))
       carouselElement.classList.add('hide-controls');
 
+    if (thumbnailImages?.length) {
+      carouselControls.classList.add('thumbnails');
+    }
+
     // populate the pips
     let pips = "";
     for (let i = 1; i <= itemCount; i++) {
-      pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current":""}>Slide ${i}</button>`;
+      let pipContent = null;
+      let pipClass = '';
+
+      if (thumbnailImages.length) {
+        pipClass = 'has-thumbnail';
+        pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
+      } else {
+        pipContent = `Slide ${i}`;
+      }
+
+      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
     }
     carouselControls.innerHTML = pips;
 

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -26,14 +26,14 @@ class iamCollapsibleSideMenu extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">
 
-        <div class="side-menu">
-          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse">Open or close Collapsible menu</button>
-          <div class="side-menu-content closed">
+        <div class="side-menu" part="side-menu">
+          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
         </div>
 
-        <div class="main-content">
+        <div class="main-content" part="main-content">
           <slot></slot>
         </div>
 
@@ -67,7 +67,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     }
     
 
-    if(this.hasAttribute('open')){
+    if(this.hasAttribute('open') && window.innerWidth > 992){
       sideMenu.classList.add('open'); 
       button.setAttribute('aria-expanded', true);
     }

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -26,13 +26,15 @@ class iamFileupload extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="file-upload">
-      <span class="file-upload__title">Upload file</span>
+      <span class="file-upload__title" part="title">Upload file</span>
       <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"><slot name="files"></slot></div>
+      <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -51,6 +53,30 @@ class iamFileupload extends HTMLElement {
 
     fileupload(this,wrapper);
   }
+
+  
+  static get observedAttributes() {
+    return ["data-filename"];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+
+    switch (attrName) {
+      case "data-filename": {
+        if(oldVal != newVal){
+
+          const filesWrapper = this.shadowRoot.querySelector('.files');
+          
+          filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
+
+        }
+        break;
+      }
+    }
+  }
+
+
+  
 }
 
 export default iamFileupload;

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -40,9 +40,9 @@ class iamFilterlist extends HTMLElement {
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
     `;

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -26,10 +26,10 @@ class iamInlineEdit extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     
     <slot></slot>
-    <div class="btns">
-      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+    <div class="btns" part="btns">
+      <button class="btn btn-action" id="save" part="save-btn"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel" part="cancel-btn">Cancel</button>
     </div>
-    <div class="status pe-none">
+    <div class="status pe-none" part="status">
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -29,9 +29,9 @@ class iamMultiselect extends HTMLElement {
     <div class="wrapper">
       
       <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required />
+      <input name="search" id="search" autocomplete="off" required part="search-input"/>
       <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown">
+      <div class="admin-panel dropdown" part="dropdown">
         <slot></slot>
       </div>
       <button id="clear"><span class="visually-hidden">Clear</span></button>
@@ -142,8 +142,9 @@ class iamMultiselect extends HTMLElement {
 
         let checkbox = label.querySelector('input');
         let searchValue = checkbox.value;
+        let labelText = label.textContent;
         
-        if(searchValue.toLowerCase().includes(search.value.toLowerCase())){
+        if(searchValue.toLowerCase().includes(search.value.toLowerCase()) || labelText.toLowerCase().includes(search.value.toLowerCase())){
           label.removeAttribute('slot')
         }
         else {

package/assets/ts/components/notification/notification.component.ts

@@ -41,7 +41,7 @@ class iamNotification extends HTMLElement {
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
       <div class="notification__inner"><div class="notification__text"><slot></slot></div>${ buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : '' }</div>
-      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>` : ''}
+      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>` : ''}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));