@iamproperty/components 5.5.1-beta-4 → 5.6.0

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

@@ -170,3 +170,13 @@ button[slot="selected-overflow"] {
 }
 }
 // #endregion
+
+// Select all done with vue
+
+
+iam-actionbar:has(.selectall input:checked) {
+  --selectall-opacity: 1;
+  --selectall-pe: all;
+  --selectall-actionbar-opactiy: 0;
+  --selectall-action-pe: none;
+}

package/assets/sass/components/actionbar.scss

@@ -13,10 +13,13 @@
 
 // #region View states (Default, search, selected)
 .views,
-.selectall {
+.selectall,
+slot[name="selectall"] {
+  display: block;
   position: absolute!important;
   top: 50%;
   left: rem(24);
+  margin-left: 0;
   
   @include media-breakpoint-up(sm) {
     left: rem(32);
@@ -30,7 +33,8 @@
   }
 }
 
-.selectall {
+.selectall,
+slot[name="selectall"] {
   
   width: rem(40);
   overflow: hidden;
@@ -113,12 +117,25 @@
 }
 
 // Show selected bar
+.actionbar {
+
+  opacity: var(--selectall-actionbar-opacity,1);
+  pointer-events: var(--selectall-actionbar-pe,all);
+}
+
+.actionbar--selected {
+
+  opacity: var(--selectall-opacity,0);
+  pointer-events: var(--selectall-pe,none);
+}
+
 .selectall:has(input:checked) ~ .actionbar,
 .selectall:has(input:indeterminate) ~ .actionbar {
   
   opacity: 0;
   pointer-events: none;
 }
+
 .selectall:has(input:checked) ~ .actionbar--selected,
 .selectall:has(input:indeterminate) ~ .actionbar--selected {
   
@@ -140,7 +157,7 @@
 // #endregion
 
 // #region Slotted elements
-::slotted(*:not([slot="overflow"])){
+::slotted(.btn){
   margin-top: 0!important;
   margin-bottom: 0!important;
   margin-left: rem(16)!important;
@@ -167,6 +184,7 @@
   color: #9D9D9D!important;
   width: 1px;
   display: none;
+  margin-left: 1rem !important;
   
   @include container-up(md) {
 

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

@@ -11,6 +11,7 @@ iam-card {
     display: block;
   }
 
+
   > div:has([type="checkbox"]) {
     display: contents;
 
@@ -27,6 +28,30 @@ iam-card {
     }
   }
 
+  &:has([type="checkbox"]:checked) {
+    --hover-outline-colour: var(--colour-info);
+    --outline-colour: var(--colour-info);
+  }
+
+  &:has([type="checkbox"] + label:hover) {
+    //pointer-events: none;
+
+    --hover-outline-colour: transparent;
+    --hover-icon-bg: var(--colour-warning);
+    --hover-icon-colour: var(--colour-primary-theme);
+    --card-icon-right-overide:1rem;
+  }
+
+  &:has([type="checkbox"]:active) {
+    //pointer-events: none;
+
+    --hover-outline-colour: transparent;
+    --hover-icon-bg: var(--colour-warning);
+    --hover-icon-colour: var(--colour-primary-theme);
+    --card-icon-right-overide:1rem;
+  }
+
+
   &.card--has-icon:not(.card--filter):not(.card--secondary) i {
     position: absolute;
     top: calc(50% - 0.5rem - 2px);
@@ -34,7 +59,11 @@ iam-card {
   }
 
   .badge {
-    margin-bottom: 0.25rem!important;
+    
+    i {
+      position: static!important;
+      margin-right:  0.25rem;
+    }
   }
 }
 

package/assets/sass/components/card.scss

@@ -18,7 +18,7 @@
   overflow: hidden;
   z-index: 0;
   background: var(--colour-canvas-2);
-  outline: 2px solid var(--colour-canvas-2);
+  outline: 2px solid var(--outline-colour,--colour-canvas-2);
   outline-offset: -2px;
 
   > *:not(.btn-compact) {
@@ -81,32 +81,25 @@
   }
 
   &:is(:hover,:focus,.hover) {
-    --card-icon-right: 0.5rem;
-    outline: 2px solid var(--colour, var(--colour-primary));
+    --hover-outline-colour-default: var(--colour, var(--colour-primary));
+    outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
     outline-offset: -2px;
   }
   
   // Update arrow cololur
-  &:not([class*="colour-"]):is(:hover,:focus,.hover) {
+  &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
 
     &:before {
-      background: var(--colour-primary-theme);
+      background: var(--hover-icon-bg, var(--colour-primary-theme));
     }
     &:after {
-      background: #ffffff;
+      background: var(--hover-icon-colour, #ffffff);
     }
   }
 
   &:is(:active, .active){
-    --card-icon-right: 0.5rem;
+    --card-icon-right: var(--card-icon-right-overide,0.5rem);
     outline: none;
-    
-    &:before {
-      background: var(--colour-warning);
-    }
-    &:after {
-      background: var(--colour-primary);
-    }
   }
 
   &:is(:active){
@@ -115,7 +108,7 @@
   
 
   
-  span {
+  span{
     display: block;
     font-weight: bold;
     padding-top: rem(24);
@@ -190,29 +183,42 @@
   font-weight: normal!important;
   font-size: rem(16)!important;
 }
+::slotted(small){
+  padding-top: rem(16)!important;
+  display: block!important;
+  font-weight: normal!important;
+  padding-bottom: 0!important;
+  color: var(--colour-body);
+}
 ::slotted(span:not(.badge):not([class*="pt-"])){
   padding-top: rem(24)!important;
 }
 // #endregion
 
 // #region card bages
-.card__badges {
+.card__head .card__badges {
+  
   position: absolute;
-  top: 0;
-  right: 0.25rem;
-  padding: 0 0 0.25rem 0;
+  top: 1rem;
+  text-align: left;
+  left: 1rem;
   z-index: 9;
-  text-align: right;
-  width: 1;
 }
-.card__head .card__badges {
+
+.card__body .card__badges.card__badges--inline {
+  
+  margin-top: -1rem;
+  min-height: 1rem;
+}
+.card__body .card__badges:not(.card__badges--inline) {
   
-  top: auto;
-  bottom: 0;
+  position: absolute;
+  top: 0.5rem;
   text-align: left;
-  left: 0.25rem;
-  right: auto;
+  right: 0.75rem;
+  z-index: 9;
 }
+
 // #endregion
 
 // #region border left
@@ -258,6 +264,9 @@
     .card__body {
       background: none;
     }
+    .card__footer {
+      background: none;
+    }
   }
 
   &.card--has-icon {
@@ -304,7 +313,7 @@
 .card:has(.card__head) {
   .card__head {
     padding-bottom: 0;
-    padding-top: 27%;
+    padding-top: var(--img-height, 27%);
     position: relative;
     overflow: hidden;
     background: rgba(0,0,0,0.1);
@@ -379,15 +388,20 @@
   z-index: 99;
 }
 
-.card--secondary:has(.btn-compact:is(:hover, :focus, :active)) {
+// For docs
+.card--secondary.secondary-hover {
 
-  pointer-events: none;
-  outline: none;
+  outline: 2px solid var(--colour, var(--colour-primary));
+  outline-offset: -2px;
 
-  .card__body {
-    background: none;
-    border-color: transparent!important;
+  .btn-compact {
+    background-color: var(--colour);
+    color: var(--colour-primary-theme);
+    border-color: rgba(0, 0, 0, 0) !important;
   }
+}
+
+.card--secondary:has(.btn-compact:is(:hover, :focus, :active)) {
 
   .btn-compact {
     pointer-events: all;
@@ -401,3 +415,36 @@
   line-height: rem(40);
 }
 // #endregion
+
+//#region Record card 
+
+.card--record{
+  --img-height: 40%;
+
+  &:before,
+  &:after {
+    display: none;
+  }
+}
+
+slot[name="btns"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  margin-right: calc(var(--card-right-padding) * -1);
+
+  margin-bottom: calc(var(--card-bottom-padding) * -1);
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+
+  pointer-events: none;
+}
+
+::slotted([slot="btns"]){
+  
+  pointer-events: all;
+  margin: 0!important;
+}
+
+//#endregion

package/assets/sass/components/pagination.scss

@@ -35,10 +35,10 @@
   padding-inline: 1rem;
   
   .select--minimal {
+    --select-padding-left: rem(16);
     height: rem(52);
     line-height: rem(52);
     margin-left: rem(-16);
-    padding-left: rem(16);
     font-weight: bold;
   }
 

package/assets/sass/elements/badge-tag.scss

@@ -5,10 +5,8 @@
   font-size: rem(16);
   line-height: rem(26);
   border: none!important;
-  outline: 1px solid var(--colour-canvas);
-  outline-offset: -1px;
-  padding: 0 rem(16);
-  border-radius: rem(16);
+  //outline: 1px solid var(--colour-canvas);
+  //outline-offset: -1px;
   margin: 0;
   display: inline-block;
   text-align: center;
@@ -28,8 +26,17 @@
   }
 }
 
+.badge {
+
+  border-radius: rem(6);
+  padding: 0 rem(8);
+}
+
 .tag {
 
+  border-radius: rem(16);
+  padding: 0 rem(16);
+
   &:after {
     content: '\2715';
     margin-left: 0.6em;

package/assets/sass/elements/forms.scss

@@ -615,7 +615,7 @@ label:not(.tag):has(input[type="checkbox"]:not([disabled]):checked) {
   }
 }
 
-input[type="checkbox"]:checked + label,
+input[type="checkbox"]:checked + label:not(:has(> iam-card)),
 label:not(.tag):has(input[type="checkbox"]:checked) {
 
   &:after {
@@ -674,6 +674,7 @@ label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):checked:is(:focus
 }
 
 input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label,
+input:is([type="radio"],[type="checkbox"]) + label.hover,
 label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
 
   --tick-colour: var(--colour-muted);
@@ -684,6 +685,7 @@ label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,
   }
 }
 input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label,
+input:is([type="radio"],[type="checkbox"]) + label.active,
 label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
 
   --tick-colour: var(--colour-light);
@@ -827,7 +829,8 @@ div:has(> select){
   border: none;
   display: inline-block;
   margin: 0;
-  padding: 0 calc(1.25em + 0.8ch) 0 0.25em!important;
+  padding: 0 calc(1.25em + 0.8ch) 0 var(--select-padding-left, 0.25em)!important;
+  
   height: auto;
   cursor: pointer;
 

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

@@ -56,7 +56,9 @@ class iamActionbar extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
+    
       <div class="actionbar">
+        <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">

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

@@ -14,7 +14,7 @@ class iamCard extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
 
-    if(this.querySelector('[class*="fa-"]'))
+    if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();
@@ -35,7 +35,8 @@ class iamCard extends HTMLElement {
     <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') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
+      ${!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>` : ''}
@@ -44,6 +45,7 @@ class iamCard extends HTMLElement {
       <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>
     </div>
@@ -60,11 +62,12 @@ class iamCard extends HTMLElement {
     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')
+    const parentNode = this.parentNode.closest('a, button, label, router-link')
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
 
-    parentNode.setAttribute('tabindex','-1');
+    if(parentNode)
+      parentNode.setAttribute('tabindex','-1');
     
 
     if(parentNode.matches('label[for]')){
@@ -190,7 +193,7 @@ class iamCard extends HTMLElement {
       case "class": {
         let classList = this.classList.toString();
             
-        if(this.querySelector('[class*="fa-"]'))
+        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}`);

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

@@ -27,8 +27,8 @@ class iamFileupload extends HTMLElement {
     </style>
     <div class="file-upload">
       <span class="file-upload__title">Upload file</span>
-      <p class="helper-text"></p>
-      <button class="btn btn-primary"><slot name="btn"></slot> Upload document</button>
+      <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>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
@@ -46,7 +46,8 @@ class iamFileupload extends HTMLElement {
     const input = this.querySelector('input');
     const helperText = this.shadowRoot.querySelector('.helper-text');
 
-    helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : '' }${ input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : '' }`;
+    if(!this.querySelector('[slot="helper"]'))
+      helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : '' }${ input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : '' }`;
 
     fileupload(this,wrapper);
   }

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

@@ -58,12 +58,8 @@ class iamInlineEdit extends HTMLElement {
     // cancel
     cancelButton.addEventListener('click', (event) => {
 
-
-      console.log(originalValue)
-
       input.value = originalValue;
 
-
       input.blur();
       inlineEdit.blur();
 
@@ -101,7 +97,7 @@ class iamInlineEdit extends HTMLElement {
     });
 
     // Save
-    if(input.tagName === 'input'){
+    if(input.tagName === 'INPUT'){
       input.addEventListener('keydown', (event) => {
 
         switch (event.key) { // change to event.key to key to use the above variable
@@ -166,12 +162,10 @@ class iamInlineEdit extends HTMLElement {
     }
 
     //blur it should autosave
-    inlineEdit.addEventListener('blur',(event) => {
+    input.addEventListener('blur',(event) => {
 
       if(input.value != originalValue){
 
-        let feedbackText = '(Unsaved)';
-
         if(inlineEdit.hasAttribute('data-autosave')) {
 
           originalValue = input.value;

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

@@ -39,8 +39,9 @@ class iamTable extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     // insert extra CSS
-    if(!document.getElementById('tableExtras'))
+    if(!document.getElementById('tableExtras')){
       document.head.insertAdjacentHTML('beforeend',`<style id="tableExtras">${loadExtraCSS}</style>`);
+    }
   }
 
 	connectedCallback() {
@@ -48,17 +49,22 @@ class iamTable extends HTMLElement {
     const params = new URLSearchParams(window.location.search)
 
     // Set default attributes
-    if(!this.hasAttribute('data-total'))
+    if(!this.hasAttribute('data-total')){
       this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+    }
 
-    if(!this.hasAttribute('data-page'))
+    if(!this.hasAttribute('data-page')){
       this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+    }
 
-    if(!this.hasAttribute('data-show'))
+    if(!this.hasAttribute('data-show')){
       this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
-    
-    if(!this.hasAttribute('data-increment'))
+    }
+      
+    if(!this.hasAttribute('data-increment')){
       this.setAttribute('data-increment', this.getAttribute('data-show'));
+    }
+      
 
     // Update table__wrapper class
     let classList = this.classList.toString();
@@ -69,8 +75,9 @@ class iamTable extends HTMLElement {
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     // set actionbar class if needed
-    if(this.querySelector('.actionbar__sticky'))
+    if(this.querySelector('.actionbar__sticky')){
       this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
+    } 
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
@@ -81,21 +88,21 @@ class iamTable extends HTMLElement {
     this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
     this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
 
-    if(this.hasAttribute('data-page-jump'))
+    if(this.hasAttribute('data-page-jump')){
       this.pagination.setAttribute('data-page-jump', 'true');
-
-    if(this.hasAttribute('data-per-page'))
+    }
+    if(this.hasAttribute('data-per-page')){
       this.pagination.setAttribute('data-per-page', 'true');
-
-    if(this.hasAttribute('data-item-count'))
+    }
+    if(this.hasAttribute('data-item-count')){
       this.pagination.setAttribute('data-item-count', 'true');
-    
-    if(this.hasAttribute('data-loading'))
+    }
+    if(this.hasAttribute('data-loading')){
       this.pagination.setAttribute('data-loading', 'true');
-
-    if(this.classList.contains('table--fullwidth'))
+    }
+    if(this.classList.contains('table--fullwidth')){
       this.pagination.setAttribute('data-minimal', 'true');
-
+    }
 
     // Remove table CTA
     const isCTA = this.classList.contains('table--cta');
@@ -115,9 +122,9 @@ class iamTable extends HTMLElement {
     }
 
     // Set ajax class
-    if(this.form.hasAttribute('data-ajax'))
+    if(this.form.hasAttribute('data-ajax')){
       this.table.classList.add('table--ajax');
-
+    }
     // Create a data list if a search input is present
     tableModule.createSearchDataList(this.table, this.form);
 
@@ -150,9 +157,9 @@ class iamTable extends HTMLElement {
 
       // Add in the checkboxes
 
-      if(this.querySelector('iam-actionbar[data-selectall]')){
+      if(this.querySelector('iam-actionbar[data-selectall]') || document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)){
         
-        const actionbar = this.querySelector('iam-actionbar[data-selectall]');
+        const actionbar = this.querySelector('iam-actionbar[data-selectall]') ? this.querySelector('iam-actionbar[data-selectall]') : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
 
         Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
               

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

@@ -6,9 +6,12 @@ function createAppliedFilters(container,filters) {
 
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
+
+    if(!inputName){ return false; }
     
-    if(inputName.includes('[]'))
+    if(inputName.includes('[]')){
       inputName = inputName.replace('[]',`[${input.value}]`);
+    }
 
     let filter = filters.querySelector(`[data-name="${inputName}"]`);
 

package/assets/ts/modules/fileupload.ts

@@ -120,6 +120,21 @@ function fileupload(fileupload: Element, wrapper: Element) {
     if(filename)
       filesWrapper.innerHTML += `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
   }
+
+
+  // Change the filename
+  wrapper.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
+
+      const button = event.target.closest('.btn-primary');
+
+      // If the input allows multiples then use the buffer clone input
+      const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
+
+      inputTrigger.click();
+    }
+  });
 }
 
 export default fileupload;