@iamproperty/components 7.1.0--beta6 → 7.2.0

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;

package/assets/sass/components/inline-edit.preload.scss

@@ -1,131 +1,137 @@
 @use '../_func' as *;
 
-iam-inline-edit {
-  .optional-text {
-    display: none;
-  }
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  iam-inline-edit {
+    .optional-text {
+      display: none;
+    }
 
-  label,
-  textarea {
-    margin: 0;
+    label,
+    textarea {
+      margin: 0;
+    }
   }
-}
-
-iam-inline-edit:focus-within {
-  position: relative;
-  z-index: 99;
-  --display-status: none;
-}
 
-// Inactive state
-iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
-  --display-btns: none;
-
-  input,
-  textarea,
-  select {
-    border: none;
-    background: none;
-    margin-left: -1rem;
-    width: calc(100% + 1rem);
-    max-width: calc(100% + 1rem);
-    box-shadow: none;
+  iam-inline-edit:focus-within {
+    position: relative;
+    z-index: 99;
+    --display-status: none;
   }
-}
 
-iam-inline-edit:defined:focus-within:has(select),
-iam-inline-edit:defined[data-saving]:has(select) {
-  --display-btns: none;
-}
+  // Inactive state
+  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
+    --display-btns: none;
 
-// Hover state
-iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
-  input,
-  textarea,
-  select {
-    border: none;
-    background: var(--colour-light);
+    input,
+    textarea,
+    select {
+      border: none;
+      background: none;
+      margin-left: -1rem;
+      width: calc(100% + 1rem);
+      max-width: calc(100% + 1rem);
+      box-shadow: none;
+    }
   }
-}
 
-// Multi select
-
-iam-inline-edit:has(iam-multiselect label[slot='checked']) {
-  --display-btns: none;
-}
+  iam-inline-edit:defined:focus-within:has(select),
+  iam-inline-edit:defined[data-saving]:has(select) {
+    --display-btns: none;
+  }
 
-iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
-  --display-button: none;
-}
+  // Hover state
+  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
+    input,
+    textarea,
+    select {
+      border: none;
+      background: var(--colour-light);
+    }
+  }
 
-iam-inline-edit iam-multiselect .tag[slot='checked'] {
-  outline: none;
-}
+  // Multi select
 
-// Error message
-
-iam-inline-edit.was-validated
-  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  padding: 0.85rem;
-  width: min-content;
-  white-space: nowrap;
-
-  color: var(--colour-heading);
-
-  display: block;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-  background: var(--colour-canvas-2);
-  border-radius: 0.5rem;
-  margin: 0 0 -1rem 0;
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-}
-
-// #region preview element
+  iam-inline-edit:has(iam-multiselect label[slot='checked']) {
+    --display-btns: none;
+  }
 
-iam-inline-edit:has(.preview) {
-  position: relative;
+  iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
+    --display-button: none;
+  }
 
-  label {
-    opacity: 0;
-    margin-top: -0.75rem;
+  iam-inline-edit iam-multiselect .tag[slot='checked'] {
+    outline: none;
   }
 
-  .preview {
+  // Error message
+
+  iam-inline-edit.was-validated
+    label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    pointer-events: none;
-    padding: 0.75rem;
-    margin-top: -0.75rem;
-    margin-left: -0.75rem;
+    right: 0;
+    bottom: 100%;
+    padding: 0.85rem;
+    width: min-content;
+    white-space: nowrap;
+
+    color: var(--colour-heading);
+
+    display: block;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background: var(--colour-canvas-2);
+    border-radius: 0.5rem;
+    margin: 0 0 -1rem 0;
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   }
 
-  .preview:empty {
-    &:before {
-      content: attr(data-placeholder);
+  // #region preview element
+
+  iam-inline-edit:has(.preview) {
+    position: relative;
+
+    label {
+      opacity: 0;
+      margin-top: -0.75rem;
     }
-  }
 
-  &:hover,
-  &:focus {
     .preview {
-      border: none;
-      background: var(--colour-light);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      pointer-events: none;
+      padding: 0.75rem;
+      margin-top: -0.75rem;
+      margin-left: -0.75rem;
     }
-  }
 
-  &:focus-within {
-    label {
-      opacity: 1;
+    .preview:empty {
+      &:before {
+        content: attr(data-placeholder);
+      }
     }
-    .preview {
-      opacity: 0;
+
+    &:hover,
+    &:focus {
+      .preview {
+        border: none;
+        background: var(--colour-light);
+      }
+    }
+
+    &:focus-within {
+      label {
+        opacity: 1;
+      }
+      .preview {
+        opacity: 0;
+      }
     }
   }
-}
 
-// #endregion
+  // #endregion
+}