@iamproperty/components 5.6.1-beta6 → 5.6.1-beta8

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

@@ -33,10 +33,10 @@ 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>` : ''}
+    ${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">
       ${!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>` : ''}
@@ -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/modules/dialogs.ts

@@ -111,7 +111,7 @@ const extendDialogs = (body) => {
 
         if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
 
-          if(!event.target.closest('input[type="radio"]') && !event.target.closest('input[type="file"]') && !event.target.closest('iam-fileupload')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
+          if(!event.target.closest('dialog *')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
             dialog.close()
           
           window.dataLayer = window.dataLayer || [];

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
 }
 

package/dist/components.es.js

@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-e0fe586a.mjs").then((t) => {
+      import("./fileupload.component.min-ed94d887.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-04da6019.mjs").then((t) => {
+      import("./accordion.component.min-6669453f.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -592,7 +592,7 @@ const Da = /* @__PURE__ */ m(Ne, [["render", Fe]]), ze = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component-8fb6e63b.mjs").then((t) => {
+      import("./card.component-cba2d342.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -619,7 +619,7 @@ const Va = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-594075ef.mjs").then((t) => {
+      import("./carousel.component.min-c9ef8655.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -646,7 +646,7 @@ const Fa = /* @__PURE__ */ m(Oe, [["render", Ue]]), We = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-64220aeb.mjs").then((t) => {
+      import("./header.component.min-2d982f85.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1042,7 +1042,7 @@ const Ua = /* @__PURE__ */ m(yt, [["render", Et]]), Ht = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-cb09f2a4.mjs").then((t) => {
+      import("./nav.component.min-816f0053.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1162,7 +1162,7 @@ const Xt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-9319b151.mjs").then((t) => {
+      import("./tabs.component.min-cbbc5135.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1309,7 +1309,7 @@ function pa(t, a, e, i, r, s) {
 }
 const Za = /* @__PURE__ */ m(ma, [["render", pa]]);
 /*!
-  * iamKey v5.6.1-beta6
+  * iamKey v5.6.1-beta8
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1479,7 +1479,7 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-d0782723.mjs").then((t) => {
+      import("./actionbar.component.min-9bf97a1b.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1494,7 +1494,7 @@ function xa(t, a, e, i, r, s) {
 }
 const as = /* @__PURE__ */ m(Aa, [["render", xa]]);
 /*!
-  * iamKey v5.6.1-beta6
+  * iamKey v5.6.1-beta8
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {