@iamproperty/components 5.5.1-beta-5 → 5.6.1-beta1

package/assets/sass/components/actionbar.scss

@@ -184,6 +184,7 @@ slot[name="selectall"] {
   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

@@ -50,6 +50,10 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
   max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
+  &:is(textarea) {
+    max-height: 100%
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
   &:is(:focus,.focus):not(:disabled) {
     border-color: var(--colour-info);
@@ -80,7 +84,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
 textarea {
   min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
 }
 // #endregion
 
@@ -615,7 +618,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 +677,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 +688,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 +832,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/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/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;

package/assets/ts/modules/table.ts

@@ -283,6 +283,16 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         
       formSubmit(event);
     }
+
+
+    if(event && event.target instanceof HTMLElement && event.target.hasAttribute('id')){
+      
+      let id = event.target.getAttribute('id');
+
+      if(document.querySelector(`[data-duplicate="${id}"]`)){
+        document.querySelector(`[data-duplicate="${id}"]`).checked = event.target.checked;
+      }
+    }
   });