@iamproperty/components 7.2.1--beta1 → 7.2.1--beta3

package/assets/sass/_functions/variables.scss

@@ -765,3 +765,33 @@ $ut-mh-md: #{rem($ut-mh-md-px)};
 $ut-mh-lg-px: 600;
 $ut-mh-lg: #{rem($ut-mh-lg-px)};
 // #endregion
+
+
+
+$chart-colour-1: map.get($wider-colours, '3') !default;
+$chart-colour-2: map.get($wider-colours, '4') !default;
+$chart-colour-3: map.get($wider-colours, '5') !default;
+$chart-colour-4: map.get($wider-colours, '6') !default;
+$chart-colour-5: map.get($wider-colours, '7') !default;
+$chart-colour-6: map.get($wider-colours, '8') !default;
+$chart-colour-7: map.get($wider-colours, '9') !default;
+$chart-colour-8: map.get($wider-colours, '10') !default;
+$chart-colour-9: map.get($wider-colours, '11') !default;
+$chart-colour-10: map.get($wider-colours, '12') !default;
+
+$chart-colors: ();
+$chart-colors: map.merge(
+  (
+    1: $chart-colour-1,
+    2: $chart-colour-2,
+    3: $chart-colour-3,
+    4: $chart-colour-4,
+    5: $chart-colour-5,
+    6: $chart-colour-6,
+    7: $chart-colour-7,
+    8: $chart-colour-8,
+    9: $chart-colour-9,
+    10: $chart-colour-10,
+  ),
+  $chart-colors
+);

package/assets/sass/components/charts.module.scss

@@ -2,33 +2,7 @@
 
 @use '../_func' as *;
 
-$chart-colour-1: map.get($wider-colours, '3') !default;
-$chart-colour-2: map.get($wider-colours, '4') !default;
-$chart-colour-3: map.get($wider-colours, '5') !default;
-$chart-colour-4: map.get($wider-colours, '6') !default;
-$chart-colour-5: map.get($wider-colours, '7') !default;
-$chart-colour-6: map.get($wider-colours, '8') !default;
-$chart-colour-7: map.get($wider-colours, '9') !default;
-$chart-colour-8: map.get($wider-colours, '10') !default;
-$chart-colour-9: map.get($wider-colours, '11') !default;
-$chart-colour-10: map.get($wider-colours, '12') !default;
-
-$chart-colors: ();
-$chart-colors: map.merge(
-  (
-    1: $chart-colour-1,
-    2: $chart-colour-2,
-    3: $chart-colour-3,
-    4: $chart-colour-4,
-    5: $chart-colour-5,
-    6: $chart-colour-6,
-    7: $chart-colour-7,
-    8: $chart-colour-8,
-    9: $chart-colour-9,
-    10: $chart-colour-10,
-  ),
-  $chart-colors
-);
+
 
 $chart-colour-1-hover: map.get($wider-colours-hover, '3') !default;
 $chart-colour-2-hover: map.get($wider-colours-hover, '4') !default;

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

@@ -0,0 +1,111 @@
+@use 'sass:map';
+
+@use '../_func.scss' as *;
+
+@use '../elements/type.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+
+:host {
+
+  display: block;
+  text-align: center;
+  margin-bottom: 2rem;
+  width: 100%;
+  max-width: 10rem;
+}
+
+.rank {
+
+  position: relative;
+  display: flex;
+
+  aspect-ratio: 1/1;
+  width: 100%;
+  height: auto;
+  max-width: 10rem;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1rem solid var(--colour-info);
+  border-radius: 50%;
+
+  .position {
+    margin: 0;
+    padding: 0;
+    line-height: 1!important;
+  }
+  
+  .position:after {
+    content: var(--rank-sub-text, "Your rank");
+    display: block;
+    font-size: rem(map.get($heading-sizes, 'lead_fs'));
+    line-height: 1;
+    font-weight: 700;
+    margin: 0;
+    padding: 0;
+  }
+
+  svg {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    display: none;
+  }
+}
+
+
+:host([data-position="1st"]),
+:host([data-position="2nd"]),
+:host([data-position="3rd"]) {
+
+  .rank {
+    border-width: 0;
+    overflow: hidden;
+  }
+
+  .position {
+    display: none;
+  }
+}
+
+:host([data-position="1st"]) {
+
+  .rank {
+
+    background: #FFEE56;
+  }
+  
+  .rank svg:nth-child(1) {
+    display: block;
+  }
+}
+
+:host([data-position="2nd"]) {
+
+  .rank {
+    background: #EDEDED;
+  }
+
+  .rank svg:nth-child(2) {
+    display: block;
+  }
+}
+
+:host([data-position="3rd"]) {
+
+  .rank {
+    background: #FFE798;
+  }
+
+  .rank svg:nth-child(3) {
+    display: block;
+  }
+}

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

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../_func.scss' as *;
+
+
+
+@use '../elements/type.scss' as *;
+
+@include max-height();
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.podium {
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  max-width: 30rem;
+  margin: auto;
+
+  > div {
+    flex-basis: 33.33%;
+    flex-grow: 0;
+    flex-shrink: 0;
+    order: 1;
+
+    iam-rank {
+
+      margin: 0;
+      width: 100%;
+    }
+
+    > span {
+      display: block;
+      font-size: rem(14);
+      line-height: 1;
+      font-weight: 700;
+      margin: 0;
+      padding-block: 0.5rem;
+      text-align: center;
+      max-width: 100%;
+      //margin-inline: -1rem;
+      overflow: hidden;
+    }
+  }
+
+
+  > div:nth-child(1) {
+    order: 2;
+    padding: 0;
+  }
+
+  > div:nth-child(2) {
+    
+    padding: 1rem 1rem 0 0;
+  }
+
+  > div:nth-child(3) {
+    order: 3;
+    padding: 1rem 0 0 1rem;
+  }
+}

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

@@ -0,0 +1,84 @@
+@use 'sass:map';
+
+@use '../_func.scss' as *;
+
+@use '../elements/type.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+iam-rankings {
+
+  table {
+    display: block;
+    width: 100%;
+    font-weight: normal;
+    counter-reset: countItem;
+  }
+  thead {
+    display: none;
+  }
+  tbody {
+    display: contents;
+  }
+
+  :is(td,th) {
+    font-weight: normal;
+  }
+
+  tr.current {
+    background-color: var(--colour-light);
+  }
+  tr.current :is(td,th) {
+    font-weight: bolder;
+  }
+
+  tr {
+    display: flex;
+    width: 100%;
+    position: relative;
+    
+
+    &:before {
+      counter-increment: countItem; /* Increment the value of section counter by 1 */
+      content: counter(countItem)".";
+      font-size: rem(32);
+      line-height: rem(40);
+      font-weight: bolder;
+      color: var(--colour-primary);
+      width: rem(48);
+      text-align: center;
+      margin-top: 0.5rem;
+    }
+
+    > *:first-child {
+      width: 100%;
+      margin-right: 0;
+      padding-right: 0;
+    }
+
+    > *:last-child {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    progress {
+      width: 100%;
+      height: 1rem ;
+    }
+  }
+
+
+  @each $index, $value in $chart-colors {
+    tr:nth-child(#{$index}) progress{
+      --colour: var(--chart-colour-#{$index}, #{$value});
+    }
+    
+  }
+
+
+}

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

@@ -35,6 +35,10 @@ $darkMode: 'true' !default;
   }
 }
 
+:host-context(.admin-panel) .table__container {
+  display: contents;
+}
+
 :host(.mh-sm) {
   max-height: none !important;
 }

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

@@ -5,6 +5,9 @@ $darkMode: 'true' !default;
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 // #region Basic table stuff
+
+
+
 :is(#{$selector}) {
   --hover-background: var(--colour-light);
   --row-bg: var(--colour-canvas-2);
@@ -13,6 +16,12 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     margin-bottom: 0;
   }
 
+  table thead tr th {
+    position: relative;
+    padding-right: 2rem !important;
+    padding-left: 0rem !important;
+  }
+
   td {
     background-color: var(--row-bg);
   }
@@ -199,11 +208,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 :is(#{$selector}).table--cta {
   @container (width > 23.4375em) {
-    padding-right: calc(var(--wrapper-padding) + 1.5rem);
+    padding-right: calc(var(--wrapper-padding) + 1.5rem)!important;
 
     tr > th:nth-last-child(2),
     tr > td:nth-last-child(2) {
-      padding-right: var(--cta-width);
+      padding-right: var(--cta-width)!important;
     }
 
     tr > *:not(:first-child):last-child {
@@ -222,6 +231,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
         white-space: nowrap;
         padding-right: 0.2rem;
         padding-bottom: 0;
+        margin: 0;
       }
     }
 

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

@@ -286,7 +286,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + th:not(.th--fixed),
     .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 6));
+      padding-left: calc(rem(48 + 6))!important;
     }
 
     .th--fixed + .th--fixed,
@@ -296,7 +296,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 6));
+      padding-left: calc(rem(48 + 48 + 6))!important;
     }
 
 
@@ -307,7 +307,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .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));
+      padding-left: calc(rem(48 + 48 + 48 + 6))!important;
     }
     
     .dialog__wrapper {
@@ -350,7 +350,7 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
   }
 
   &:has(th[data-sort]) :is(th, td) {
-    padding-left: 0.25rem;
+    padding-left: 0.25rem!important;
   }
 
   th[data-sort][data-order-by='asc'] {