@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/components/charts.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use '../_func' as *;
 
 $chart-colour-1: #1ebee6 !default;
@@ -12,7 +14,7 @@ $chart-colour-9: #9d9d9d !default;
 $chart-colour-10: #66838a !default;
 
 $chart-colors: ();
-$chart-colors: map-merge(
+$chart-colors: map.merge(
   (
     1: $chart-colour-1,
     2: $chart-colour-2,
@@ -68,16 +70,6 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   --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);
-
-  tbody {
-    --chart-direction: 360deg;
-    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
-  }
-
-  @each $index, $value in $chart-colors {
-    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
-  }
-
   // Non-configurable css vars
   --index-below: -1;
   --index-base: 0;
@@ -95,6 +87,46 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   --yaxis-last-point-transform: translate(0, -50%);
   --bar-gap: min(10%, 0.75rem);
 
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @each $index, $value in $chart-colors {
+    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
+  }
+
+  tbody {
+    --chart-direction: 360deg;
+    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
+  }
+
+  &:has(.chart__options) {
+    position: relative;
+    padding-top: rem(24);
+  }
+
+  > * {
+    display: block;
+    order: 2;
+  }
+
+  > figcaption {
+    display: contents;
+
+    p:not(.chart__strapline, .chart__title) {
+      margin-bottom: 0.25rem;
+      font-size: var(--label-size);
+    }
+
+    > * {
+      order: 3;
+    }
+
+    > :is(.chart__title, .chart__strapline) {
+      order: 1;
+    }
+  }
+
   @container (max-width: 36em) {
     :has(tr:nth-child(5) td:nth-child(4)),
     :has(tr:nth-child(10)) {
@@ -127,37 +159,6 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
       --line-thickness: 0.5px;
     }
   }
-
-  &:has(.chart__options) {
-    position: relative;
-    padding-top: rem(24);
-  }
-
-  margin-bottom: 2rem;
-  display: flex;
-  flex-direction: column;
-
-  > * {
-    display: block;
-    order: 2;
-  }
-
-  > figcaption {
-    display: contents;
-
-    p:not(.chart__strapline, .chart__title) {
-      margin-bottom: 0.25rem;
-      font-size: var(--label-size);
-    }
-
-    > * {
-      order: 3;
-    }
-
-    > :is(.chart__title, .chart__strapline) {
-      order: 1;
-    }
-  }
 }
 // #endregion
 

package/assets/sass/components/collapsible-side.scss

@@ -1,14 +1,13 @@
 @use '../_func' as *;
+
+$darkMode: 'true' !default;
+
 // Host
 :host {
   --colour-border: #e9e9e9;
   --side-link-hover: var(--colour-canvas-2);
   grid-column: full-width;
 
-  @include light-mode() {
-    --side-link-hover: #eeeeee;
-  }
-
   display: block;
   min-height: calc(100vh - var(--nav-height));
   padding-top: 0 !important;
@@ -17,7 +16,11 @@
   overflow: hidden;
   position: relative;
 
-  @include media-breakpoint-up(md) {
+  @include light-mode($darkMode) {
+    --side-link-hover: #eeeeee;
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
     max-height: calc(100vh - var(--nav-height));
     overflow: auto;
   }
@@ -30,7 +33,7 @@
   padding-bottom: 0 !important;
   padding-left: 0 !important;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-left: 5.25rem !important;
   }
 }
@@ -56,12 +59,12 @@
     border-right: 2px solid var(--colour-border);
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     left: 0;
     width: rem(40);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     left: rem(84);
     margin-left: #{rem(-84)};
     position: fixed;
@@ -94,7 +97,7 @@
         content: '\f053' !important;
       }
 
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(md, $mobileOnly) {
         opacity: 0;
       }
     }
@@ -104,7 +107,7 @@
     border: 2px solid var(--colour-border);
     color: var(--colour-primary-theme);
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       opacity: 1;
     }
   }
@@ -112,10 +115,10 @@
   &:is(.open) {
     width: calc(100% - var(--container-padding-x));
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       width: rem(382);
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       width: rem(304);
     }
   }
@@ -138,14 +141,14 @@
       padding-left: rem(24);
     }
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       .h3 {
         padding-left: rem(40);
       }
 
       width: rem(382);
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       width: rem(304);
 
       .h3 {
@@ -162,7 +165,7 @@
     opacity: 1;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     &.hover .side-menu-content {
       opacity: 1;
     }
@@ -173,11 +176,11 @@
 ::slotted(*[slot='menu']) {
   padding-left: rem(24);
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     padding-left: rem(40);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-left: var(--container-padding-x-md);
   }
 }
@@ -199,22 +202,21 @@
   font-weight: normal !important;
   text-decoration: none;
 
+  border-right: 2px solid var(--colour-border) !important;
   border-bottom: 2px solid var(--colour-border) !important;
 
   margin-right: rem(-40) !important;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     padding-left: rem(40) !important;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-left: var(--container-padding-x-md) !important;
   }
   &:after {
     display: none;
   }
-
-  border-right: 2px solid var(--colour-border) !important;
 }
 
 ::slotted(a[slot='menu']:where(:hover, :focus, [aria-expanded])) {
@@ -257,11 +259,11 @@
   padding-top: rem(24);
   padding-left: rem(60);
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     padding-left: rem(80);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-top: rem(40) !important;
     padding-left: 0;
   }
@@ -272,7 +274,7 @@
     border-bottom: 2px solid var(--colour-border);
     margin-bottom: rem(40) !important;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       display: none;
     }
   }
@@ -285,7 +287,7 @@
   display: block;
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   ::slotted(.main-content__title) {
     display: none;
   }
@@ -294,7 +296,7 @@
 // #endregion
 
 // #region Desktop open state
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .container:has(.side-menu.open) {
     padding-left: 2rem !important;
     margin-left: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
@@ -304,7 +306,7 @@
 }
 // #endregion
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :host([open-always]) {
     --btn-display: none;
   }

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

@@ -0,0 +1,205 @@
+@use '../_func.scss' as *;
+@use 'charts.module.scss' as *;
+@use '../elements/buttons.scss' as *;
+
+.d-block {
+  display: block;
+}
+
+@for $i from 1 to 11 {
+  .chart__wrapper .doughnut path:nth-child(11n - #{11 - $i}) {
+    fill: var(#{'--chart-colour-' + $i + '-set'});
+  }
+}
+
+.chart__wrapper {
+  order: 1;
+}
+
+// #region chart key
+.chart__key {
+  --key-border-radius: 50%;
+  order: 2;
+  margin-bottom: 0;
+
+  .btn-action {
+    font-size: rem(12);
+    margin-right: rem(-6) !important;
+    border-color: transparent !important;
+  }
+
+  .btn-action:not(:hover):not(:focus) {
+    border-color: transparent !important;
+    background: transparent !important;
+  }
+}
+// #endregion
+
+// #region Horizontal
+:host(.chart--horizontal) {
+  .chart__outer {
+    flex-direction: row;
+
+    .chart__key {
+      flex-direction: column;
+      justify-content: center;
+      overflow: visible;
+
+      .btn-action {
+        margin-right: rem(0) !important;
+        margin-bottom: rem(-12) !important;
+      }
+    }
+  }
+}
+
+:host(.chart--horizontal.chart--show-totals) {
+  .chart__outer .chart__key {
+    .btn-action {
+      min-width: 100%;
+      display: flex;
+      align-items: center;
+      min-width: 100%;
+    }
+
+    .btn-action[data-numeric]:before {
+      flex-shrink: 0;
+    }
+
+    .btn-action[data-numeric]:after {
+      content: attr(data-numeric);
+      display: inline-block;
+      flex-grow: 1;
+      flex-shrink: 0;
+      min-width: 6ch;
+      text-align: right;
+    }
+  }
+}
+
+// #endregion
+
+// #region doughnut chart
+:host(.chart--lg) {
+  --doughnut-size: #{rem(286)};
+}
+
+:host {
+  --doughnut-size: #{rem(236)};
+}
+
+:host(.chart--sm) {
+  --doughnut-size: #{rem(190)};
+}
+
+.chart__outer {
+  .chart__yaxis,
+  .line {
+    display: none;
+  }
+  table {
+    display: none;
+  }
+
+  .chart {
+    display: flex;
+    align-items: center;
+  }
+
+  .doughnuts {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .doughnut {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    min-width: rem(190);
+    flex: 1 1 auto;
+    display: inline-block;
+    max-width: var(--doughnut-size);
+
+    @container (min-width: #{em($device-xs-width,16)}) {
+      width: var(--doughnut-size);
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .doughnut svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .doughnut > .doughnut__title {
+    &:before {
+      content: attr(data-numeric);
+      display: block;
+      text-align: center;
+      color: var(--colour-heading);
+      font-size: 3rem;
+    }
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: all;
+    background: var(--bg-colour, var(--colour-canvas));
+    border-radius: 50%;
+    z-index: var(--index-focus);
+    padding: 1rem;
+    aspect-ratio: 1/1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 67%;
+
+    span {
+      text-align: center;
+      display: block;
+    }
+  }
+
+  .doughnut svg:has(path:nth-child(1):hover) ~ .tooltips > [part='popover']:nth-child(1),
+  .doughnut svg:has(path:nth-child(2):hover) ~ .tooltips > [part='popover']:nth-child(2),
+  .doughnut svg:has(path:nth-child(3):hover) ~ .tooltips > [part='popover']:nth-child(3),
+  .doughnut svg:has(path:nth-child(4):hover) ~ .tooltips > [part='popover']:nth-child(4),
+  .doughnut svg:has(path:nth-child(5):hover) ~ .tooltips > [part='popover']:nth-child(5),
+  .doughnut svg:has(path:nth-child(6):hover) ~ .tooltips > [part='popover']:nth-child(6),
+  .doughnut svg:has(path:nth-child(7):hover) ~ .tooltips > [part='popover']:nth-child(7),
+  .doughnut svg:has(path:nth-child(8):hover) ~ .tooltips > [part='popover']:nth-child(8),
+  .doughnut svg:has(path:nth-child(9):hover) ~ .tooltips > [part='popover']:nth-child(9),
+  .doughnut svg:has(path:nth-child(10):hover) ~ .tooltips > [part='popover']:nth-child(10),
+  [part='popover']:hover {
+    opacity: 1;
+    z-index: var(--index-above);
+    pointer-events: all;
+    z-index: 99;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  @for $i from 1 to 10 {
+    .doughnut:has([part='popover'] > :is(button, a))
+      svg:has(path:nth-child(#{$i}):hover)
+      ~ .tooltips
+      > [part='popover']:nth-child(#{$i}),
+    .doughnut:has([part='popover'] > :is(button, a)) [part='popover']:nth-child(#{$i}):hover {
+      top: var(--middle-#{$i}-y, 50%);
+      left: var(--middle-#{$i}-x, 50%);
+
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+// #endregion

package/assets/sass/components/fileupload.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../_func' as *;
 // #region file upload field
 
@@ -21,9 +22,9 @@
     display: block;
     padding-bottom: 2rem;
 
-    font-size: rem(map-get($heading-sizes, 'h4_fs'));
-    line-height: rem(map-get($heading-sizes, 'h4_lh'));
-    padding-bottom: rem(map-get($heading-sizes, 'h4_pb'));
+    font-size: rem(map.get($heading-sizes, 'h4_fs'));
+    line-height: rem(map.get($heading-sizes, 'h4_lh'));
+    padding-bottom: rem(map.get($heading-sizes, 'h4_pb'));
     max-width: var(--content-max-width);
   }
 

package/assets/sass/components/header.scss

@@ -16,13 +16,13 @@
   margin-inline: auto;
   display: block;
 
-  @include media-breakpoint-up(md) {
-    padding-top: rem(84);
-  }
-
   position: relative;
   height: auto;
 
+  @include media-breakpoint-up(md, $mobileOnly) {
+    padding-top: rem(84);
+  }
+
   > picture {
     display: block;
     position: absolute;
@@ -72,7 +72,7 @@
   margin-top: rem(24) !important;
   margin-bottom: -0.5rem !important;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     position: absolute !important;
     top: 0 !important;
     left: 5.25rem !important;