@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/components/rank.component.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @use '../elements/type' as *;
 
@@ -13,7 +13,7 @@
 :host {
   display: block;
   width: 100%;
-  max-width: rem(100);
+  max-width: 6.25rem; /* 100 */
   margin-bottom: 2rem;
   z-index: 1;
 }
@@ -22,7 +22,7 @@
   display: flex;
   text-align: center;
   width: 100%;
-  max-width: rem(100);
+  max-width: 6.25rem; /* 100 */
   position: relative;
 }
 
@@ -32,8 +32,8 @@
 
   width: 100%;
   aspect-ratio: 1/1;
-  max-width: rem(100);
-  max-height: rem(100);
+  max-width: 6.25rem; /* 100 */
+  max-height: 6.25rem; /* 100 */
   height: auto;
   max-width: 10rem;
   text-align: center;
@@ -73,9 +73,9 @@
   flex-direction: column;
   justify-content: center;
   padding-top: 0.75rem;
-  padding-inline: rem(5);
+  padding-inline: 0.3125rem; /* 5 */ 
   padding-bottom: 0.75rem;
-  height: rem(84);
+  height: 5.25rem; /* 84 */
   position: relative;
   border-radius: 0 0 4px 4px;
   //overflow: hidden;
@@ -83,7 +83,7 @@
   &:before {
     content: '1';
     position: absolute;
-    font-size: rem(72);
+    font-size: 4.5rem; /* 72 */
     font-weight: bold;
     display: block;
     top: 50%;
@@ -96,7 +96,7 @@
   &:after {
     content: '';
     position: absolute;
-    height: rem(132);
+    height: 8.25rem;
     width: 100%;
     display: block;
     bottom: 0;
@@ -127,13 +127,13 @@
 :host([data-position='2nd']),
 :host([data-position='3rd']) {
   position: relative;
-  max-width: rem(70);
+  max-width: 4.375rem; /* 70 */
 
   .rank {
     border-width: 0;
     overflow: hidden;
     aspect-ratio: 14/25;
-    max-width: rem(70);
+    max-width: 4.375rem; /* 70 */
     margin-inline: auto;
   }
 
@@ -192,11 +192,11 @@
 }
 
 :host([data-position='1st'].rank--trophy) {
-  max-width: rem(100);
+  max-width: 6.25rem; /* 100 */
 
   .rank {
     aspect-ratio: 1/1;
-    max-width: rem(100);
+    max-width: 6.25rem; /* 100 */
     margin-bottom: 0;
   }
 
@@ -209,13 +209,13 @@
 :host([data-position='2nd']:not(.rank--medal)),
 :host([data-position='3rd']:not(.rank--medal)) {
   aspect-ratio: 8/10;
-  max-width: rem(125);
+  max-width: 7.8125rem;
 
   .wrapper {
     width: 100%;
     height: 100%;
-    max-width: rem(125);
-    max-height: rem(150);
+    max-width: 7.8125rem;
+    max-height: 9.375rem; /* 150*/ 
     align-items: center;
 
     .rank {
@@ -237,10 +237,10 @@
 
 :host([data-position='1st']:not(.rank--medal).rank--trophy) {
   aspect-ratio: 8/10;
-  max-width: rem(150);
+  max-width: 9.375rem; /* 150*/ 
   .wrapper {
-    max-width: rem(150);
-    max-height: rem(180);
+    max-width: 9.375rem; /* 150*/ 
+    max-height: 11.25rem;
     margin-top: -2rem;
   }
   .rank {

package/assets/sass/components/rankings.component.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @use '../elements/type' as *;
 

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
 
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @use '../elements/type' as *;
 
@@ -31,7 +31,7 @@ iam-rankings {
   }
 
   td {
-    font-size: rem(28);
+    font-size: 1.75rem;
     color: var(--colour-heading);
   }
 

package/assets/sass/components/record-card.component.scss

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use 'card.module.scss' as *;
+@use '../_func' as *;
+@use 'card.module' as *;
 
 :host {
   --card-head-height: 9rem;
@@ -18,7 +18,7 @@
 :host([data-record]) {
   .card__head {
     &:before {
-      font-family: var(--record-icon-font, 'Font Awesome 6 Pro');
+      font-family: var(--record-icon-font, 'Font Awesome 7 Pro');
       font-weight: normal;
       font-size: 1.5rem;
       content: var(--record-icon);
@@ -29,9 +29,9 @@
       bottom: 0;
       background-color: var(--record-colour);
       border-radius: 50%;
-      height: rem(64);
-      line-height: rem(64);
-      width: rem(64);
+      height: 4rem; /* 64 */
+      line-height: 4rem; /* 64 */
+      width: 4rem; /* 64 */
       text-align: center;
       transform: translate(-50%, 0);
     }
@@ -62,10 +62,10 @@
     bottom: 0;
     background-color: var(--record-colour);
     border-radius: 50%;
-    height: rem(64);
-    margin-top: rem(-64);
-    line-height: rem(64);
-    width: rem(64);
+    height: 4rem; /* 64 */
+    margin-top: -4rem;
+    line-height: 4rem; /* 64 */
+    width: 4rem; /* 64 */
     text-align: center;
     transform: translate(-50%, 0);
   }
@@ -83,9 +83,9 @@
     left: 50%;
     bottom: 0;
     border-radius: 50%;
-    height: rem(64);
-    line-height: rem(64);
-    width: rem(64);
+    height: 4rem; /* 64 */
+    line-height: 4rem; /* 64 */
+    width: 4rem; /* 64 */
     text-align: center;
     transform: translate(-50%, 0);
     margin: 0;
@@ -120,7 +120,7 @@
 ::slotted(span:not(.badge)) {
   display: block !important;
   font-weight: normal !important;
-  font-size: rem(14) !important;
+  font-size: 0.875rem !important;
   line-height: 1.5rem !important;
 }
 
@@ -131,7 +131,7 @@
 ::slotted(*:not(.badge)) {
   display: block !important;
   font-weight: normal !important;
-  font-size: rem(14) !important;
+  font-size: 0.875rem !important;
   line-height: 1.5rem !important;
 }
 

package/assets/sass/components/slider.scss

@@ -1,7 +1,7 @@
 @use '../_func' as *;
 
 @use '../bs_grid' as *;
-@use '../elements/forms.scss' as *;
+@use '../elements/forms' as *;
 
 .row {
   align-items: center;
@@ -78,7 +78,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
   display: flex;
 
   justify-content: flex-end;
-  --max-width: #{rem(100)};
+  --max-width: 6.25rem;
   --padding-top: 0.75rem;
 
   > span {
@@ -94,7 +94,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
     &:before {
       content: '';
       position: absolute;
-      width: rem(64);
+      width: 4rem; /* 64 */
       height: 2px;
       top: calc(50% - 1px);
       left: calc(50% - 2rem);
@@ -111,7 +111,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
     }
 
     span + span {
-      left: calc(50% + #{rem(64)});
+      left: calc(50% + 4rem);
     }
   }
 }

package/assets/sass/components/snapshot.scss

@@ -7,7 +7,7 @@
 
   > .row > .col {
     margin-bottom: 1rem;
-    min-width: rem(150);
+    min-width: 9.375rem;
     position: relative;
   }
 

package/assets/sass/components/split-button.component.scss

@@ -1,7 +1,7 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 @use '../elements/buttons';
 
-@use '../components/menu.global.scss';
+@use '../components/menu.global';
 
 // Main button
 ::slotted(button:not([slot])) {

package/assets/sass/components/table-basic.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @use '../utilities/max-height' as *;
 
@@ -18,7 +18,7 @@
   background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-  border-radius: rem(10);
+  border-radius: 0.625rem; /* 10 */
   margin-bottom: 2rem;
   overflow: hidden;
 
@@ -84,7 +84,7 @@
       overflow: visible !important;
       margin-inline: 1.5rem;
       margin-bottom: 1.5rem !important;
-      width: calc(100% - 3rem) !important;
+      width: var(--table-width, calc(100% - 3rem)) !important;
       display: block;
     }
 

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
@@ -32,7 +32,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
   tbody tr {
     background: var(--row-bg);
 
-    &:is(:hover, :focus-within, .hover) {
+    &:not(.no-hover):is(:hover, :focus-within, .hover) {
       --bg-colour-rgb: 238, 238, 238;
       --row-bg: var(--hover-background);
       background: var(--row-bg);
@@ -91,11 +91,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
         &:before {
           --fa: '\f055'!important;
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
           display: block!important;
 
           font-weight: 300 !important;
-          font-size: rem(28);
+          font-size: 1.75rem; /* 28 */
           line-height: var(--compact-size) !important;
         }
 
@@ -164,7 +164,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       &[data-label]:not([data-label='']):before {
         content: attr(data-label);
         color: var(--colour-heading);
-        padding: 0 0 rem(6) 0;
+        padding: 0 0 0.375rem 0;
         margin-bottom: 0;
         display: block;
         font-weight: bold;
@@ -284,7 +284,7 @@ table {
     }
 
     &:after {
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       position: absolute;
       top: var(--status-pt, 1rem);
       left: 0;
@@ -396,13 +396,13 @@ table {
   padding-top: 0;
 }
 :is(#{$selector}).table--fullwidth iam-actionbar {
-  margin: -2rem -2rem 2rem -2rem;
+  margin: -2rem -1.5rem 2rem -1.5rem;
   box-shadow: none;
   border-radius: 0;
 }
 
 :is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
-  margin: -2rem -2rem 2rem -2rem;
+  margin: -2rem -1.5rem 2rem -1.5rem;
   box-shadow: none;
   border-radius: 0;
     background-color: #e6eaec;
@@ -430,7 +430,7 @@ table {
       content: '';
       display: block;
       width: 100%;
-      height: calc(100vh - #{rem(68 + 24 + 16)});
+      height: calc(100vh - 6.75rem); /* 68 + 24 + 16 */ 
       pointer-events: none;
     }
 
@@ -451,10 +451,9 @@ table {
 }
 
 @container (width > 36em) {
-  :is(#{$selector}).table--fullwidth iam-actionbar,
-  :is(#{$selector}) iam-actionbar {
-    margin-left: -2rem;
-    margin-right: -2rem;
+  :is(#{$selector}).table--fullwidth iam-actionbar  {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
     margin-top: -2rem;
     margin-bottom: 2rem;
   }
@@ -618,7 +617,7 @@ table {
     }
     tr[data-highlight]:before {
 
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       content: '\f005';
       font-weight: bold;
       position: absolute;
@@ -654,3 +653,24 @@ table {
   }
 }
 // #endregion
+
+
+// #region Mobile view when in admin panel
+.admin-panel :is(#{$selector}):not(.table--fullwidth) {
+  @container (width < 23.4375em) {
+
+    table {
+
+      --table-width: 100%;
+      margin: 0;
+      width: 100% !important;
+
+      tr {
+        box-shadow: none;
+        padding: 0;
+      }
+    }
+
+  }
+}
+// #endregion

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

@@ -1,8 +1,8 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
-@use './table-basic.component.scss';
+@use './table-basic.component';
 
 // #region Table with actionbar
 @container (width < 23.4375em) {
@@ -17,24 +17,35 @@
   pointer-events: none;
   position: relative;
 
-  ::slotted(table) {
-    min-height: 20rem;
-    opacity: 0.5;
-  }
+  text-align: center;
+  padding-top: 5rem!important;
 
-  &::after {
-    content: 'Loading...';
+  &:after {
+    content: '\f3f4';
     position: absolute;
-    top: rem(100);
+    top: 2rem;
+
     left: 50%;
-    transform: translate(-50%, 0);
-    font-weight: bold;
-    color: var(--colour-heading);
+    translate: -50% 0;
+    font-family: "Font Awesome 7 Pro";
+    display: block;
+    font-weight: 900;
     font-size: 1.5rem;
-    text-shadow: 0px 0px 10px var(--colour-canvas-2);
-    padding-inline: 2rem;
-    text-shadow: 0px 0px 10px var(--colour-canvas-2);
-    background: radial-gradient(var(--colour-canvas-2), transparent);
+    
+    width: 1.5rem;
+    padding: 0;
+    height: 1.5rem;
+    line-height: 1;
+    text-align: center;
+    z-index: 2;
+
+    color: var(--colour-primary-theme);
+    animation: spin 1s infinite steps(10);
   }
+
+
 }
+
+
+
 // #endregion

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

@@ -1,9 +1,9 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
 
-@use './table-basic.global.scss';
+@use './table-basic.global';
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
@@ -56,7 +56,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     display: block;
     position: sticky;
     left: 0;
-    top: calc(var(--sticky-padding) + #{rem(16)});
+    top: calc(var(--sticky-padding) + 1rem);
     z-index: var(--index-menu);
     pointer-events: none;
 
@@ -64,7 +64,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       content: '';
       display: block;
       width: 100%;
-      height: calc(100vh - #{rem(68 + 24 + 16)});
+      height: calc(100vh - 6.75rem); /* 68 + 24 + 16 */
       pointer-events: none;
     }
 
@@ -80,13 +80,12 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     background: var(--colour-canvas-2);
     //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
-    margin-bottom: rem(24);
+    margin-bottom: 1.5rem;
   }
 }
 
 @container (width < 23.4375em) {
-  :is(#{$selector}).table--fullwidth iam-actionbar,
-  :is(#{$selector}) iam-actionbar {
+  :is(#{$selector}).table--fullwidth iam-actionbar {
     margin-left: -2rem;
     margin-right: -2rem;
     margin-top: -2rem;
@@ -181,7 +180,17 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     display: table-cell;
   }
 
-  @mixin fullwidthexpand() {
+  
+  &.table--fullwidth {
+    --expand: 'true';
+  }
+
+  @container (width > 23.4375em) {
+    --expand: 'true';
+  }
+
+  @container style(--expand) {
+
     [data-expand-button] {
       margin: 0.25rem 0 0 0;
 
@@ -191,7 +200,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       }
 
       &:before {
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         content: '\f078';
         font-weight: 500;
       }
@@ -215,14 +224,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       min-width: 10rem;
     }
   }
-
-  &.table--fullwidth {
-    @include fullwidthexpand();
-  }
-
-  @container (width > 23.4375em) {
-    @include fullwidthexpand();
-  }
 }
 // #endregion
 
@@ -261,7 +262,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       top: auto;
       z-index: 3;
       padding: 0 0 0 0;
-      min-width: rem(48 + 6);
+      min-width: 3.375rem;
       height: calc(var(--row-height) - 2px);
       text-align: left;
       background: var(--row-bg);
@@ -278,7 +279,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
     .th--fixed + th:not(.th--fixed),
     .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 6)) !important;
+      padding-left: 3.375rem !important;
     }
 
     .th--fixed + .th--fixed,
@@ -288,17 +289,17 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 6)) !important;
+      padding-left: 6.375rem !important; /* 48 + 48 + 6 */
     }
 
     .th--fixed + .th--fixed + .th--fixed,
     .td--fixed + .td--fixed + .td--fixed {
-      left: rem(48 + 48);
+      left: 6rem; /* 48 + 48 */
     }
 
     .th--fixed + .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 48 + 6)) !important;
+      padding-left: 9.375rem !important; /* 48 + 48 + 48 + 6 */
     }
 
     .dialog__wrapper {
@@ -320,41 +321,42 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #region sort by column header
 
+:is(#{$selector}) {
 
-@mixin column-sort {
-  th[data-sort] {
-    background-repeat: no-repeat;
-    background-size: 1rem 1rem;
-    background-position: calc(100% - 0.5rem) 50%;
-    padding-top: 0.75rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--colour-light);
-      background-image: var(--icon-sort);
-    }
+  &.table--fullwidth {
+    --sort: 'true';
   }
 
-  &:has(th[data-sort]) :is(th, td) {
-    padding-left: 0.25rem !important;
+  @container (width >= 32em) {
+    --sort: 'true';
   }
 
-  th[data-sort][data-order-by='asc'] {
-    background-image: var(--icon-sort-asc);
-  }
-  th[data-sort][data-order-by='desc'] {
-    background-image: var(--icon-sort-desc);
-  }
-}
+  @container style(--sort) {
+    th[data-sort] {
+      background-repeat: no-repeat;
+      background-size: 1rem 1rem;
+      background-position: calc(100% - 0.5rem) 50%;
+      padding-top: 0.75rem;
+      cursor: pointer;
 
-:is(#{$selector}) {
-  &.table--fullwidth {
-    @include column-sort;
-  }
+      &:hover {
+        background-color: var(--colour-light);
+        background-image: var(--icon-sort);
+      }
+    }
 
-  @container (width >= 32em) {
-    @include column-sort;
+    &:has(th[data-sort]) :is(th, td) {
+      padding-left: 0.25rem !important;
+    }
+
+    th[data-sort][data-order-by='asc'] {
+      background-image: var(--icon-sort-asc);
+    }
+    th[data-sort][data-order-by='desc'] {
+      background-image: var(--icon-sort-desc);
+    }
   }
+
 }
 
 // #endregion

package/assets/sass/components/tabs.component.scss

@@ -1,7 +1,7 @@
 @use '../_func' as *;
-@use '../elements/links.scss';
-@use '../elements/buttons.scss';
-@use '../components/tabs.config.scss';
+@use '../elements/links';
+@use '../elements/buttons';
+@use '../components/tabs.config';
 
 
 :host {