@iamproperty/components 7.6.1 → 7.6.3--beta1

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

@@ -1,12 +1,12 @@
-@use '../_func.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/badge-tag.scss' as *;
-@use '../elements/type.scss' as *;
-@use '../elements/forms.scss' as *;
+@use '../_func' as *;
+@use '../elements/buttons' as *;
+@use '../elements/badge-tag' as *;
+@use '../elements/type';
+@use '../elements/forms' as *;
 
-@use '../elements/dialog.scss' as *;
+@use '../elements/dialog' as *;
 
-@use '../elements/modal.scss' as *;
+@use '../elements/modal' as *;
 
 *,
 *::before,
@@ -293,7 +293,7 @@ hr {
     display: inline-block;
     margin-bottom: rem(9);
     margin-right: 0;
-    line-height: rem(32);
+    line-height: 2rem;
     order: 1;
     margin-left: auto;
 
@@ -348,8 +348,8 @@ hr {
 
 // To do setup CSS vars
 :host {
-  --columnHeadingFontSide: #{rem(14)};
-  --columnHeadingLineHeight: #{rem(24)};
+  --columnHeadingFontSide: 0.875rem; /* 14/16 */
+  --columnHeadingLineHeight: 1.5rem;
   --columnHeadingFontWeight: bold;
 
   --alldayHeight: #{rem(28)};
@@ -363,7 +363,7 @@ hr {
   height: var(--columnHeadingLineHeight);
   color: var(--colour-heading);
   white-space: nowrap;
-  padding-inline: rem(4);
+  padding-inline: 0.25rem;
   font-weight: var(--columnHeadingFontWeight);
 }
 
@@ -391,9 +391,9 @@ time.column-header {
 }
 
 .day {
-  width: rem(20);
-  height: rem(20);
-  line-height: rem(20);
+  width: 1.25rem;
+  height: 1.25rem;
+  line-height: 1.25rem;
   margin-top: rem(2);
   text-align: left;
   border-radius: 50%;
@@ -416,7 +416,7 @@ time.column-header {
   max-height: unset;
   table-layout: fixed;
   height: 30rem;
-  font-size: rem(16);
+  font-size: 1rem;
   line-height: 1;
   border: 1px solid var(--colour-border);
   margin-bottom: 2rem;
@@ -695,7 +695,7 @@ time.column-header {
 }
 
 .calendar__controls:has(select :is(option[value='day'], option[value='week']):checked) ~ .calendar__wrapper {
-  --side-panel-width: #{rem(48)};
+  --side-panel-width: 3rem;
   position: relative;
   height: 40rem;
   overflow: auto;
@@ -777,7 +777,7 @@ time.column-header {
       height: var(--alldayHeight);
       color: var(--colour-heading);
       white-space: nowrap;
-      padding-inline: rem(4);
+      padding-inline: 0.25rem;
       vertical-align: top;
       font-weight: normal;
     }
@@ -890,7 +890,7 @@ time.column-header {
         font-size: var(--columnHeadingFontSide);
         color: var(--colour-heading);
         //white-space: nowrap;
-        padding-inline: rem(4);
+        padding-inline: 0.25rem;
         height: var(--alldayHeight) !important;
         line-height: var(--alldayHeight) !important;
       }
@@ -971,7 +971,7 @@ time.column-header {
   }
 
   #calendar > table {
-    --side-panel-width: #{rem(48)};
+    --side-panel-width: 3rem;
     table-layout: fixed;
     width: 100%;
     max-width: 100%;
@@ -1213,7 +1213,7 @@ time.column-header {
     thead > tr > th,
     .column-header {
       font-size: rem(10);
-      line-height: rem(12);
+      line-height: 0.75rem;
     }
 
     tbody > tr > td.selected {

package/assets/sass/components/calendar.config.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   iam-calendar,
   .event-colours {
     --event-colour-1: var(--wider-colour-1);
@@ -30,7 +30,7 @@ $darkMode: 'true' !default;
   }
 
   iam-calendar {
-    margin-bottom: rem(16);
+    margin-bottom: 1rem;
   }
 
   iam-calendar button {
@@ -38,15 +38,15 @@ $darkMode: 'true' !default;
 
     display: block;
     width: 100%;
-    //height:  rem(24);
+    //height:  1.5rem;
     border: none;
     border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
     border-radius: 4px;
-    padding: rem(4);
+    padding: 0.25rem;
 
-    font-size: rem(14);
-    line-height: rem(18);
-    margin-bottom: rem(8);
+    font-size: 0.875rem; /* 14/16 */
+    line-height: 1.125rem; /* 18/16 */
+    margin-bottom: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
@@ -75,7 +75,7 @@ $darkMode: 'true' !default;
       width: rem(250);
       background: var(--colour-primary);
       color: var(--colour-white);
-      padding: rem(12);
+      padding: 0.75rem;
       border-radius: 0.5rem;
       box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
       //top: auto;
@@ -83,7 +83,7 @@ $darkMode: 'true' !default;
       left: 50%;
 
       //transform: translate(-50%,0);
-      font-size: rem(14);
+      font-size: 0.875rem; /* 14/16 */
       line-height: 1.2;
 
       white-space: normal;
@@ -168,7 +168,7 @@ $darkMode: 'true' !default;
     &:after {
       position: absolute;
       top: 0;
-      right: rem(4);
+      right: 0.25rem;
       content: '\f363';
       font-family: 'Font Awesome 6 Pro';
       font-weight: 300;
@@ -181,7 +181,7 @@ $darkMode: 'true' !default;
 
     > span {
       display: block;
-      height: rem(18);
+      height: 1.125rem; /* 18/16 */
       white-space: nowrap;
 
       overflow: hidden;
@@ -192,7 +192,7 @@ $darkMode: 'true' !default;
     &[data-start] > span:before {
       content: attr(data-start);
       display: inline-block;
-      margin-right: rem(4);
+      margin-right: 0.25rem;
     }
 
     /*
@@ -209,8 +209,8 @@ $darkMode: 'true' !default;
 
   iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
     height: var(--event-height, #{rem(17.5)});
-    line-height: rem(18) !important;
-    padding-top: rem(4) !important;
+    line-height: 1.125rem !important;
+    padding-top: 0.25rem !important;
     white-space: normal !important;
 
     display: inline-flex !important; /* keep the inline nature of buttons */
@@ -244,7 +244,7 @@ $darkMode: 'true' !default;
   iam-calendar:is([data-view='week'], [data-view='day']) button.allday-event {
     > span {
       display: block;
-      height: rem(18);
+      height: 1.125rem; /* 18/16 */
       //white-space: nowrap;
 
       overflow: hidden;
@@ -255,7 +255,7 @@ $darkMode: 'true' !default;
     &[data-start] > span:before {
       content: attr(data-start);
       display: inline-block;
-      margin-right: rem(4);
+      margin-right: 0.25rem;
     }
   }
 

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

@@ -1,9 +1,7 @@
 @use '../_func.scss' as *;
 @use 'card.module.scss' as *;
 @use '../elements/dialog.scss' as *;
-@use '../elements/popover.scss' as * with (
-  $layers: 'false'
-);
+@use '../elements/popover.scss' as *;
 @use '../elements/buttons.scss' as *;
 
 :host {
@@ -41,8 +39,8 @@
     position: absolute;
     right: var(--card-icon-right);
     bottom: var(--card-bottom-padding);
-    height: rem(24);
-    width: rem(24);
+    height: 1.5rem;
+    width: 1.5rem;
     background: var(--colour-warning);
     border-radius: 50%;
   }
@@ -91,7 +89,7 @@
     .card__illustration {
       height: rem(64);
       width: rem(64);
-      margin-right: rem(24);
+      margin-right: 1.5rem;
       margin-top: rem(-20);
       margin-bottom: rem(-20);
       position: relative;
@@ -112,7 +110,7 @@
 
 // #region border left
 :host([class*='colour-']) {
-  border-left: rem(12) solid var(--colour, var(--colour-primary));
+  border-left: 0.75rem solid var(--colour, var(--colour-primary));
 }
 // #endregion
 
@@ -137,9 +135,9 @@ slot[name='secondary'] {
   position: absolute !important;
   top: 0.5rem;
   right: 0.5rem;
-  width: rem(32);
-  height: rem(32);
-  height: rem(40);
+  width: 2rem;
+  height: 2rem;
+  height: 2.5rem;
   overflow: hidden;
 }
 // #endregion

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

@@ -11,8 +11,8 @@
   border-radius: var(--card-border-radius);
   position: relative;
   font-weight: bold;
-  font-size: rem(18);
-  line-height: rem(24);
+  font-size: 1.125rem; /* 18/16 */
+  line-height: 1.5rem;
   color: var(--colour-primary);
   //min-height: calc(100% - 2rem);
   width: 100%;
@@ -73,7 +73,7 @@
 }
 
 ::slotted(i) {
-  font-size: rem(24) !important;
+  font-size: 1.5rem !important;
   margin: -3px var(--card-icon-right) 0 0 !important;
   vertical-align: middle !important;
 }
@@ -87,17 +87,17 @@
 ::slotted(span:not(.badge)) {
   display: block !important;
   font-weight: normal !important;
-  font-size: rem(16) !important;
+  font-size: 1rem !important;
 }
 ::slotted(small) {
-  padding-top: rem(16) !important;
+  padding-top: 1rem !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;
+  padding-top: 1.5rem !important;
 }
 
 ::slotted(:is(a, button)[slot='footer']) {
@@ -111,9 +111,9 @@
 }
 
 .card__total {
-  font-size: rem(48);
-  line-height: rem(48);
-  padding-right: rem(16);
+  font-size: 3rem;
+  line-height: 3rem;
+  padding-right: 1rem;
   margin-top: 0.5rem;
 
   i {

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

@@ -27,7 +27,7 @@
   }
 
   .carousel__inner {
-    --gutter-x: #{$grid-gutter-width};
+    --gutter-x: 1rem;
     overflow-x: auto;
     padding-bottom: 1rem;
     scroll-snap-type: x mandatory;
@@ -117,7 +117,7 @@
   .carousel__wrapper {
     overflow: hidden;
 
-    margin-inline: calc(-0.5 * $grid-gutter-width);
+    margin-inline: calc(-0.5 * 1rem);
   }
   .carousel__inner {
   }
@@ -132,7 +132,7 @@
   }
 
   ::slotted(div:last-child) {
-    padding-inline-end: calc(0.5 * $grid-gutter-width);
+    padding-inline-end: calc(0.5 * 1rem);
     --last-item-extra: 0px;
   }
 
@@ -202,11 +202,11 @@
     height: 100%;
     width: 100%;
     background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
+    mask-image:  var(--icon-arrow);
     mask-size: 50%;
     mask-repeat: no-repeat;
     mask-position: 50% 60%;
-    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-image:  var(--icon-arrow);
     -webkit-mask-size: 50%;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: 55% 50%;
@@ -259,9 +259,9 @@
   }
 
   button {
-    width: rem(8);
-    height: rem(8);
-    min-height: rem(8);
+    width: 0.5rem;
+    height: 0.5rem;
+    min-height: 0.5rem;
     border-radius: 50%;
     text-indent: -50rem;
     overflow: hidden;
@@ -289,9 +289,9 @@
   border-color: var(--colour-active-thumbnail);
   background: var(--colour-info);
 
-  width: rem(16);
-  height: rem(16);
-  min-height: rem(16);
+  width: 1rem;
+  height: 1rem;
+  min-height: 1rem;
   margin-inline: rem(2);
 
   &:hover {
@@ -308,10 +308,10 @@
 }
 
 input[type='range'] {
-  --track-size: #{rem(8)};
+  --track-size: 0.5rem;
   --track-colour: #a5ecfd;
   --thumb-colour: var(--colour-info);
-  --thumb-size: #{rem(16)};
+  --thumb-size: 1rem;
   --thumb-size-outline: #{rem(0)};
   width: 90%;
   max-width: rem(172);
@@ -319,7 +319,7 @@ input[type='range'] {
   background: transparent;
   cursor: pointer;
   margin: 0;
-  height: rem(16);
+  height: 1rem;
   border-radius: 50%;
   accent-color: var(--thumb-colour);
   -webkit-appearance: none;
@@ -588,7 +588,7 @@ input[type='range']:focus::-moz-range-thumb {
 
     border-radius: 0;
     position: relative;
-    border-radius: rem(4);
+    border-radius: 0.25rem;
 
     img {
       position: absolute;

package/assets/sass/components/carousel.config.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   iam-carousel:defined {
     > div > *:last-child {
       margin-bottom: 0 !important;
@@ -64,7 +64,7 @@ $darkMode: 'true' !default;
     container-type: inline-size;
     --carousel-spacing: 2rem;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       min-width: rem(600);
       max-width: rem(600);
     }

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

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   iam-barchart {
     --chart-bar-alignment: left;
     --chart-text-color: var(--colour-heading);
@@ -41,10 +41,10 @@ $darkMode: 'true' !default;
 
     background-color: var(--colour-canvas-2);
     border: var(--btn-border-width) solid var(--colour-muted);
-    border-radius: rem(4) !important;
+    border-radius: 0.25rem !important;
     font-weight: 400 !important;
     font-size: 1rem;
-    line-height: rem(20);
+    line-height: 1.25rem;
     padding: calc(var(--btn-padding-block) - var(--btn-border-width))
       calc(var(--btn-padding-inline) - var(--btn-border-width));
     color: var(--colour-heading);

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

@@ -2,58 +2,10 @@
 
 @use '../_func' as *;
 
-$chart-colour-1-hover: var(--widericolour-3) !default;
-$chart-colour-2-hover: var(--widericolour-4) !default;
-$chart-colour-3-hover: var(--widericolour-5) !default;
-$chart-colour-4-hover: var(--widericolour-6) !default;
-$chart-colour-5-hover: var(--widericolour-7) !default;
-$chart-colour-6-hover: var(--widericolour-8) !default;
-$chart-colour-7-hover: var(--widericolour-9) !default;
-$chart-colour-8-hover: var(--widericolour-10) !default;
-$chart-colour-9-hover: var(--widericolour-11) !default;
-$chart-colour-10-hover: var(--widericolour-12) !default;
-
-$chart-colors-hover: ();
-$chart-colors-hover: map.merge(
-  (
-    1: $chart-colour-1-hover,
-    2: $chart-colour-2-hover,
-    3: $chart-colour-3-hover,
-    4: $chart-colour-4-hover,
-    5: $chart-colour-5-hover,
-    6: $chart-colour-6-hover,
-    7: $chart-colour-7-hover,
-    8: $chart-colour-8-hover,
-    9: $chart-colour-9-hover,
-    10: $chart-colour-10-hover,
-  ),
-  $chart-colors-hover
-);
-
-$chart-height: #{rem(120)} !default;
-$chart-height-lg: #{rem(200)} !default;
-
-// #region Apply chart colours
-:host {
-  @each $index, $value in $chart-colors {
-    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
-  }
-  @each $index, $value in $chart-colors-hover {
-    --chart-colour-#{$index}-hover: var(--chart-colour-#{$index}, #{$value});
-  }
-
-  --chart-colour-success: #d2f0c9 !important;
-  --chart-colour-success-hover: #8ad873 !important;
-  --chart-colour-danger: #f5c2c7 !important;
-  --chart-colour-danger-hover: #f5c2e7 !important;
-  --chart-colour-warning: #ffd280 !important;
-  --chart-colour-warning-hover: #ffb020 !important;
-}
-
-@for $i from 1 to 11 {
+@for $i from 1 through 10 {
   .chart__key .key:nth-child(11n - #{11 - $i}),
   .chart__outer table tbody tr td:not(:first-child):nth-child(11n - #{11 - ($i+1)}) {
-    --chart-colour: var(#{'--chart-colour-' + $i + '-set'});
+    --chart-colour: var(#{'--chart-colour-' + $i});
     --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 
@@ -62,7 +14,7 @@ $chart-height-lg: #{rem(200)} !default;
     tbody
     tr:nth-child(#{$i}):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1])
     td:nth-child(2) {
-    --chart-colour: var(#{'--chart-colour-' + $i + '-set'});
+    --chart-colour: var(#{'--chart-colour-' + $i});
     --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 }
@@ -85,14 +37,9 @@ $chart-height-lg: #{rem(200)} !default;
   font-weight: var(--chart-font-weight, bold);
   color: var(--chart-text-color, black);
 
-  // CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set
-  --body-colour-set: var(--body-colour, Canvas);
-  --text-colour-set: var(--text-colour, black);
-
-  --chart-height-set: var(--chart-height, #{$chart-height});
-  --chart-height-lg-set: var(--chart-height-lg, #{$chart-height-lg});
-
-  --chart-height-resp: var(--chart-height-set);
+  --chart-height: 7.5rem;
+  --chart-height-lg: 12.5rem;
+  --chart-height-resp: var(--chart-height);
 
   // Non-configurable css vars
   --index-below: -1;
@@ -103,7 +50,7 @@ $chart-height-lg: #{rem(200)} !default;
   --index-menu: 200;
   --index-overlay: 1000;
   --key-label-width: 100%;
-  --label-size: #{rem(12)};
+  --label-size: 0.75rem;
   --line-thickness: 1px;
   --yaxis-width: auto;
   --yaxis-point-display: block;
@@ -120,7 +67,7 @@ $chart-height-lg: #{rem(200)} !default;
     --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
   }
 
-  @container (min-width: #{em($device-xs-width,16)}) {
+  @container (min-width: 36em) {
     :has(tr:nth-child(5) td:nth-child(4)),
     :has(tr:nth-child(10)) {
       --yaxis-width: 0;
@@ -130,7 +77,7 @@ $chart-height-lg: #{rem(200)} !default;
     }
 
     .chart__wrapper {
-      --chart-height-resp: var(--chart-height-lg-set);
+      --chart-height-resp: var(--chart-height-lg);
       --line-thickness: 0.8px;
       --yaxis-width: auto;
       --yaxis-point-display: block;
@@ -138,13 +85,13 @@ $chart-height-lg: #{rem(200)} !default;
     }
   }
 
-  @container (min-width: #{em($device-sm-width,16)}) {
+  @container (min-width: 62em) {
     :has(tr:nth-child(10)) {
       --bar-gap: 0;
     }
 
     .chart__wrapper {
-      --label-size: #{rem(14)};
+      --label-size: 0.875rem; /* 14/16 */
       --line-thickness: 0.5px;
     }
   }
@@ -248,7 +195,7 @@ $chart-height-lg: #{rem(200)} !default;
       text-align: right;
       //font-size: var(--label-size);
       font-weight: var(--chart-yaxis-fw, normal);
-      font-size: var(--chart-yaxis-fs, #{rem(12)});
+      font-size: var(--chart-yaxis-fs, 0.75rem);
       color: var(--colour-body);
     }
 
@@ -360,7 +307,7 @@ $chart-height-lg: #{rem(200)} !default;
   //color: var(--colour-primary-theme);
   white-space: pre;
   text-align: left;
-  box-shadow: var(--chart-details-shadow, 0 #{rem(2)} #{rem(12)} rgba(0, 0, 0, 0.25));
+  box-shadow: var(--chart-details-shadow, 0 #{rem(2)} 0.75rem rgba(0, 0, 0, 0.25));
   transform: translate(-50%, -100%);
 
   &::before {
@@ -463,7 +410,7 @@ $chart-height-lg: #{rem(200)} !default;
         font-size: var(--label-size);
         text-align: center;
 
-        @container (min-width: #{em($device-sm-width,16)}) {
+        @container (min-width: 62em) {
           display: block;
         }
 
@@ -530,7 +477,7 @@ $chart-height-lg: #{rem(200)} !default;
     }
 
     // change the look of chart when crowded
-    @container (min-width: #{em($device-sm-width,16)}) {
+    @container (min-width: 62em) {
       tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
       tbody:has(tr:nth-child(10)) tr {
         td:first-child {
@@ -564,7 +511,7 @@ $chart-height-lg: #{rem(200)} !default;
       }
     }
     // Hide labels when it gets crowded
-    @container (min-width: #{em($device-xs-width,16)}) {
+    @container (min-width: 36em) {
       tbody:has(tr:nth-child(25)) {
         tr td:first-child {
           display: none !important;