@iamproperty/components 5.6.1-beta7 → 5.6.1-beta9

package/assets/sass/components/card.scss

@@ -418,15 +418,102 @@
 
 //#region Record card 
 
-.card--record{
+
+
+.card--record:has(.card__head) {
   --img-height: 40%;
 
   &:before,
   &:after {
     display: none;
   }
+
+  .card__head {
+    background: transparent;
+    position: relative;
+
+  }
+}
+
+:host([data-record="business"]) {
+  --record-icon: '\f54f';
+  --record-colour: var(--wider-colour-2);
+}
+:host([data-record="page"]) {
+  --record-icon: '\f15c';
+  --record-colour: var(--wider-colour-3);
+}
+:host([data-record="contact"]) {
+  --record-icon: "\f2b9";
+  --record-colour: var(--wider-colour-4);
+}
+:host([data-record="lettings"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-5);
+}
+
+:host([data-record="sales"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-7);
+}
+:host([data-record="landlord"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-8);
+}
+
+:host([data-record="contractor"]) {
+  --record-icon: "\f82c";
+  --record-colour: var(--wider-colour-9);
+}
+
+:host([data-record="vendor"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-13);
+}
+
+:host([data-record="tenant"]) {
+  --record-icon: "\e1b0";
+  --record-colour: var(--wider-colour-6);
+}
+:host([data-record="sales-applicant"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-10);
+}
+
+:host([data-record]) .card--record:has(.card__head) {
+
+  .card__head {
+    background: transparent;
+    position: relative;
+
+    &:before {
+      font-family: var(--record-icon-font,"Font Awesome 6 Pro");
+      font-weight: normal;
+      font-size: rem(24);
+      content: var(--record-icon);
+      display: block;
+      position: absolute;
+      top: auto;
+      left: 50%;
+      bottom: 0;
+      background-color: var(--record-colour);
+      border-radius: 50%;
+      height: rem(64);
+      line-height: rem(64);
+      width: rem(64);
+      text-align: center;
+      transform: translate(-50%,0);
+    }
+
+  }
 }
 
+
 slot[name="btns"] {
   display: flex;
   flex-direction: row;

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

@@ -415,8 +415,10 @@ iam-table {
     }
   }
 
-  tr:has([type="checkbox"]:checked){
-    height: 3.5rem;
+  @container (width > 23.4375em) {
+    tr:has([type="checkbox"]:checked){
+      height: calc(4.625rem - 2px)
+    }
   }
 
   tr:has([type="checkbox"]:checked){

package/assets/sass/elements/forms.scss

@@ -828,28 +828,53 @@ div:has(> select){
 
   all: unset;
   font-size: inherit;
+  line-height: inherit;
   background: none;
-  border: none;
+  border: 2px solid transparent;
   display: inline-block;
-  margin: 0;
-  padding: 0 calc(1.25em + 0.8ch) 0 var(--select-padding-left, 0.25em)!important;
-  
+  padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em)!important;
+  font-weight: normal!important;
+  margin: -0.4em 0!important;
+  border-radius: 0.25em;
+
+  color: var(--colour-body);
+
   height: auto;
   cursor: pointer;
+  font-family: var(--font-body)!important;
 
   option {
     background-color: var(--colour-canvas);
     padding-left: 1em;
+    font-size: inherit;
+    line-height: inherit;
   }
 
+  &:hover {
+    
+    //border: none;
+    background: var(--colour-light);
+  }
+  
+  &:is(:focus,.focus):not(:disabled) {
 
-  &:is(:hover,:focus) {
-    outline: 1px solid var(--colour-info);
+    border-color: var(--colour-info);
+    outline: 0;
+    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
   }
 }
 
 *:has(> .select--minimal){
   position: relative;
+  display: inline-block!important;
+  width: auto!important;
+  font-size: inherit!important;
+  line-height: 1!important;
+
+  padding: 0!important;
+  margin: 0!important;
+
+  font-family: var(--font-body)!important;
 
   &:after {
     font-size: 0.8em;
@@ -857,10 +882,13 @@ div:has(> select){
     content: "\f078";
     font-family: "Font Awesome 6 Pro";
     position: absolute;
-    top: 50%;
+    top: 40%;
     transform: translate(0,-50%);
-    right: calc(0.25em + 0.8ch);
+    right: calc(0.8ch);
     pointer-events: none;
+    
+  color: var(--colour-body);
+
   }
 }
 // #endregion

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/card/card.component.ts

@@ -33,17 +33,17 @@ 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.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.querySelector('[slot="badges"]') ? `<div class="card__badges"><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">
+      <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>` : ''}
@@ -65,6 +65,7 @@ class iamCard extends HTMLElement {
     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(parentNode)
       parentNode.setAttribute('tabindex','-1');
@@ -177,6 +178,7 @@ class iamCard extends HTMLElement {
           window.location = addLocation;
       });
     }
+
   }
 
   static get observedAttributes() {

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>

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

@@ -26,13 +26,13 @@ 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" type="button"><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>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

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

@@ -27,9 +27,9 @@ class iamInlineEdit extends HTMLElement {
     
     <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>
+      <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">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>

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));

package/assets/ts/modules/dynamicEvents.ts

@@ -115,6 +115,9 @@ const runEvent = (element,event,eventType) => {
         element.setAttribute(event['attribute'],event['value']);
       });
       break;
+    case "focus":
+      document.querySelector(`${event['target']}`).focus();
+      break;
     case "removeAttribute":
       Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
         element.removeAttribute(event['attribute']);

package/assets/ts/modules/helpers.ts

@@ -100,6 +100,12 @@ export const addGlobalEvents = (body) => {
     }
   });
 
+  Array.from(document.querySelectorAll('label progress')).forEach((progress,index) => {
+    let label = progress.closest('label');
+
+    label.setAttribute('data-percent',progress.getAttribute('value'));
+  });
+
   return null
 }