@iamproperty/components 7.1.0--beta5 → 7.1.0--beta7

package/assets/sass/{foundations/grid.scss → _grid.scss}

@@ -1,87 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '../_func' as *;
-
-// #region Main grid setup
-body {
-  --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
-  --col-size: calc(
-    (
-        100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
-            --gutter,
-            #{$gutter}
-          ) -
-          (var(--gap, #{$gap}) * (#{$columns - 1}))
-      ) /
-      #{$columns}
-  );
-  column-gap: var(--gap, #{$gap});
-  display: grid;
-  margin-inline: 0;
-  width: 100%;
-  $templateColumns: '';
-  @for $i from 1 to $columns {
-    $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
-  }
-  grid-template-columns:
-    [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-    [content-start col-1-start]
-    #{$templateColumns}
-    var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-    [container-end full-width-end];
-
-  @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
-    grid-template-columns:
-      [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
-      [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-      [content-start col-1-start]
-      #{$templateColumns}
-      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-      [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
-  }
-
-  grid-template-rows: auto;
-  align-content: start;
-  justify-content: center;
-
-  & * {
-    grid-column: content;
-
-    &:where(button):not(:has(.card)) {
-      max-width: fit-content;
-      place-self: start;
-    }
-
-    &:is(div) {
-      align-content: start;
-    }
-  }
-}
-
-div:has(main) {
-  display: contents !important;
-}
-
-:is(nav, main, footer) {
-  display: grid;
-  grid-column: full-width !important;
-  grid-template-columns: subgrid;
-}
-
-*:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
-  padding-bottom: 1rem;
-}
-
-main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
-  grid-column: full-width;
-}
-
-[class*='bg-']:not([class*='col-']):has(.container) {
-  display: grid;
-  grid-column: full-width;
-  grid-template-columns: subgrid;
-}
-// #endregion
+@use '_func' as *;
 
 // #region grid mixins
 @mixin grid-utilities($br: '') {
@@ -179,7 +98,88 @@ main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsi
 }
 // #endregion
 
-@if $enable-new-grid == 'true' {
+@include layer('reset') {
+  // #region Main grid setup
+  body {
+    --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
+    --col-size: calc(
+      (
+          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
+              --gutter,
+              #{$gutter}
+            ) -
+            (var(--gap, #{$gap}) * (#{$columns - 1}))
+        ) /
+        #{$columns}
+    );
+    column-gap: var(--gap, #{$gap});
+    display: grid;
+    margin-inline: 0;
+    width: 100%;
+    $templateColumns: '';
+    @for $i from 1 to $columns {
+      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
+    }
+    grid-template-columns:
+      [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [content-start col-1-start]
+      #{$templateColumns}
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [container-end full-width-end];
+
+    @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
+      grid-template-columns:
+        [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
+        [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+        [content-start col-1-start]
+        #{$templateColumns}
+        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+        [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+    }
+
+    grid-template-rows: auto;
+    align-content: start;
+    justify-content: center;
+
+    & * {
+      grid-column: content;
+
+      &:where(button):not(:has(.card)) {
+        max-width: fit-content;
+        place-self: start;
+      }
+
+      &:is(div) {
+        align-content: start;
+      }
+    }
+  }
+
+  div:has(main) {
+    display: contents !important;
+  }
+
+  :is(nav, main, footer) {
+    display: grid;
+    grid-column: full-width !important;
+    grid-template-columns: subgrid;
+  }
+
+  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+    padding-bottom: 1rem;
+  }
+
+  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
+    grid-column: full-width;
+  }
+
+  [class*='bg-']:not([class*='col-']):has(.container) {
+    display: grid;
+    grid-column: full-width;
+    grid-template-columns: subgrid;
+  }
+  // #endregion
+
   // #region Grid utility classes
   *:has([class*='order-']) > *:not([class*='order-']) {
     order: 99;

package/assets/sass/_utilities.scss

@@ -1,135 +1,43 @@
-// Helpers
-//@import "../bootstrap/scss/helpers";
-.clearfix {
-  @include clearfix();
-}
-
-//@import "../bootstrap/scss/helpers/colored-links";
-.ratio {
-  position: relative;
-  width: 100%;
-
-  &::before {
-    display: block;
-    padding-top: var(--#{$prefix}aspect-ratio);
-    content: '';
-  }
-
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $aspect-ratios {
-  .ratio-#{$key} {
-    --#{$prefix}aspect-ratio: #{$ratio};
-  }
-}
-
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
-
-.fixed-bottom {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
-
-// Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .sticky#{$infix}-top {
-      position: sticky;
-      top: 0;
-      z-index: $zindex-sticky;
-    }
-
-    .sticky#{$infix}-bottom {
-      position: sticky;
-      bottom: 0;
-      z-index: $zindex-sticky;
-    }
-  }
-}
+@use 'sass:math';
+@use '_func' as *;
 
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
+@include layer('utilities') {
+  // Missing classes that exist as mixins
+  @include clearfix();
   @include visually-hidden();
-}
-
-//@import "../bootstrap/scss/helpers/stretched-link";
-
-.text-truncate {
   @include text-truncate();
-}
-
-//@import "../bootstrap/scss/helpers/vr";
-
-// Helpers
-@import 'helpers/max-height.scss';
-@import 'helpers/dynamic.scss';
-@import 'helpers/line-clamp.scss';
-@import 'helpers/wider-colours.scss';
-
-// Utilities
-
-// Loop over each breakpoint
-@each $breakpoint in map-keys($grid-breakpoints) {
-  // Generate media query if needed
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    // Loop over each utility property
-    @each $key, $utility in $utilities {
-      // The utility can be disabled with `false`, thus check if the utility is a map first
-      // Only proceed if responsive media queries are enabled or if it's the base media query
-      @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
-        @include generate-utility($utility, $infix);
-      }
-    }
-  }
-}
-
-// RFS rescaling
-/*
-@media (min-width: $rfs-mq-value) {
+  @include ratio();
+  @include fixed();
+  @include sticky();
+  @include max-height();
+  @include js-display();
+  @include line-clamp();
+
+  // Loop over each breakpoint
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    // Generate media query if needed
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
       // Loop over each utility property
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
-          @include generate-utility($utility, $infix, true);
+        @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
+          @include generate-utility($utility, $infix);
         }
       }
     }
   }
-}
-*/
 
-// Print utilities
-@media print {
-  @each $key, $utility in $utilities {
-    // The utility can be disabled with `false`, thus check if the utility is a map first
-    // Then check if the utility needs print styles
-    @if type-of($utility) == 'map' and map-get($utility, print) == true {
-      @include generate-utility($utility, '-print');
+  // Print utilities
+  @media print {
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Then check if the utility needs print styles
+      @if type-of($utility) == 'map' and map-get($utility, print) == true {
+        @include generate-utility($utility, '-print');
+      }
     }
   }
 }

package/assets/sass/_utility-mixins.scss

@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '_func' as *;
+
+@include layer('utilities') {
+  @include clearfix();
+  @include visually-hidden();
+  @include text-truncate();
+  @include ratio();
+  @include fixed();
+  @include sticky();
+  @include max-height();
+  @include js-display();
+  @include line-clamp();
+  @include align();
+  @include opacity();
+  @include overflow();
+  @include display();
+  @include position();
+  @include border();
+  @include sizes();
+  @include flex();
+  @include order();
+  @include margins();
+  @include paddings();
+  @include gap();
+  @include text();
+  @include colours();
+  @include wider-colours();
+  @include pointer-events();
+  @include rounded();
+  @include visible();
+}

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

@@ -1,5 +1,6 @@
 @use '../_func.scss' as *;
 @use 'charts.module.scss' as *;
+@import '../elements/buttons.scss';
 
 // #region Hide data sets
 .chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
@@ -67,6 +68,7 @@
     align-items: flex-start;
     margin-bottom: 0.5rem;
     padding: 0;
+    min-height: 1.5rem;
 
     td {
       // part=value

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

@@ -199,13 +199,13 @@ $chart-height-lg: #{rem(200)} !default;
   }
 
   .key {
-    margin: 0;
+    margin: 0 !important;
 
     &:before {
       content: '';
       height: 0.8em;
       width: 0.8em;
-      margin-right: 0.3em;
+      margin-right: 0.3em !important;
       background-color: var(--chart-colour);
       display: inline-block;
       border-radius: var(--key-border-radius, 4px);
@@ -500,14 +500,41 @@ $chart-height-lg: #{rem(200)} !default;
           &::before {
             content: attr(data-group) '\A';
           }
+
           &[data-label]::before {
             content: attr(data-group) '\A' attr(data-label) '\A';
           }
+
+          &:has(:is(a, button)) {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -100%);
+            font-size: 0.9rem;
+          }
+
+          hr {
+            margin: 0;
+            opacity: 0;
+          }
+          :is(a, button) {
+            display: inline-block;
+            clear: both;
+            float: left;
+            margin-top: 1rem;
+            margin-right: 1rem;
+            margin-bottom: 0.25em;
+            font-size: 1em;
+          }
+
+          :is(a, button) + :is(a, button) {
+            margin-top: 0;
+          }
         }
 
         &:hover span {
           opacity: 1;
           z-index: var(--index-above);
+          pointer-events: all;
         }
       }
 

package/assets/sass/components/multiselect.scss

@@ -132,7 +132,7 @@ button {
 }
 
 @media (hover: none) {
-  :host-context(.hover) .wrapper .dropdown {
+  :host(.hover) .wrapper .dropdown {
     display: block;
   }
 }

package/assets/sass/components/tabs.scss

@@ -55,14 +55,13 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-.tabs__links {
-  scroll-snap-type: x mandatory;
-
+.tabs:not(.admin-panel) .tabs__links {
   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
 }
 
 .tabs__links {
+  scroll-snap-type: x mandatory;
   padding-bottom: 3px;
   position: relative;
   display: flex;

package/assets/sass/core.scss

@@ -2,4 +2,6 @@
 
 @use '_fonts';
 @use '_corefiles.scss';
-@use '_print';
+@import '_utilities';
+
+@import '_utility-mixins';

package/assets/sass/elements/admin-panel.scss

@@ -3,7 +3,7 @@
 .admin-panel {
   --padding-x: #{rem(24)};
   --padding-top: #{rem(16)};
-  --padding-bottom: #{rem(24)};
+  --padding-bottom: #{rem(16)};
   --mh-modifier: #{rem(56 + 16)};
   --mh-padding-inline: var(--padding-x);
   display: block;
@@ -49,7 +49,7 @@
     font-size: rem(18);
     line-height: rem(24);
     font-weight: bold;
-    padding: rem(16) var(--padding-x);
+    padding: rem(16) rem(24);
   }
 
   > :is(.admin-panel__heading):first-child {
@@ -57,7 +57,7 @@
     flex-wrap: wrap;
     gap: 1rem;
     align-items: center;
-    padding: rem(16) var(--padding-x);
+    padding: rem(16) rem(24);
 
     > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
       padding: 0;
@@ -66,6 +66,7 @@
 
     .btn {
       --btn-margin: 0;
+      margin-bottom: 0;
     }
 
     .dialog__wrapper + .btn {
@@ -105,7 +106,7 @@
     padding-bottom: rem(24);
   }
 
-  > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg) {
+  > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
     overflow: auto;
 
     &:before {
@@ -114,12 +115,23 @@
   }
 
   > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child
-    + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg) {
+    + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
     padding-top: var(--padding-top);
     margin-top: calc(var(--padding-top) * -1);
   }
 
-  > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg):last-child {
+  > :is(
+      .mh-sm,
+      .mh-md,
+      .mh-lg,
+      .mh-sm-sm,
+      .mh-sm-md,
+      .mh-sm-lg,
+      .mh-md-sm,
+      .mh-md-md,
+      .mh-md-lg,
+      .mh-fluid
+    ):last-child {
     padding-bottom: var(--padding-bottom);
     margin-bottom: calc(var(--padding-bottom) * -1) !important;
 
@@ -135,11 +147,16 @@
   > iam-pagination {
     margin-top: -1rem;
   }
+
+  &:has(.mh-fluid) {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
-[class*='col']
-  .admin-panel:first-child:last-child:not(
-    :has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg)
+[class*='col'].admin-panel:first-child:last-child:not(
+    :has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)
   ) {
   min-height: calc(100% - #{rem(24)});
 }
@@ -183,3 +200,39 @@
   }
 }
 // #endregion
+
+// #region Admin panel as details
+details.admin-panel {
+  summary:after {
+    content: '\f077';
+    font-weight: bold;
+    margin-left: 0;
+    height: 2rem;
+    width: 2rem;
+    text-align: center;
+    line-height: 2rem;
+    margin-right: -0.5rem;
+  }
+
+  summary:not(:has(.btn:hover)):hover:after {
+    background: var(--colour-light);
+    border-radius: 50%;
+  }
+  summary:not(:has(.btn:hover)):active:after {
+    background: var(--colour-light);
+    filter: brightness(85%);
+    border-radius: 50%;
+  }
+}
+details.admin-panel:not([open]) {
+  padding-bottom: 0;
+
+  summary:first-child {
+    margin-bottom: 0;
+  }
+
+  summary:after {
+    content: '\f078';
+  }
+}
+// #endregion

package/assets/sass/elements/container.scss

@@ -11,6 +11,39 @@
   grid-column: container !important;
   width: 100%;
 
+  &:not(:has(.row)):has([class*='col-']) {
+    display: grid;
+    grid-template-columns:
+      [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end
+      col-3-start] 1fr [col-3-end
+      col-4-start] 1fr [col-4-end
+      col-5-start] 1fr [col-5-end
+      col-6-start] 1fr [col-6-end
+      col-7-start] 1fr [col-7-end
+      col-8-start] 1fr [col-8-end
+      col-9-start] 1fr [col-9-end
+      col-10-start] 1fr [col-10-end
+      col-11-start] 1fr [col-11-end
+      col-12-start] 1fr [col-12-end content-end];
+    column-gap: 1rem;
+  }
+
+  [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
+    --col-start: auto;
+  }
+
+  @include media-breakpoint-up(sm) {
+    [class*='sm-col-span-']:not(:first-child) {
+      --col-start: auto;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    [class*='md-col-span-']:not(:first-child) {
+      --col-start: auto;
+    }
+  }
+
   &:not(.container-fluid) {
     max-width: var(--container-max-width);
   }

package/assets/sass/email.scss

@@ -21,6 +21,10 @@ $container-padding-x: 32;
 $default-curve-width: 600;
 
 @import '_corefiles';
+@import '_grid';
+@import '_bs_grid';
+@import '_utilities';
+@import '_utility-mixins';
 
 :root {
   --container-padding-x: #{rem(66)};

package/assets/sass/error.scss

@@ -11,6 +11,10 @@
 }
 
 @import '_corefiles';
+@import '_grid';
+@import '_bs_grid';
+@import '_utilities';
+@import '_utility-mixins';
 
 @include layer('elements') {
   .h1 {

package/assets/sass/helpers/line-clamp.scss

@@ -1,23 +0,0 @@
-.line-clamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  text-overflow: hidden;
-  overflow: hidden;
-}
-
-.line-clamp--2 {
-  -webkit-line-clamp: 2;
-}
-
-.line-clamp--3 {
-  -webkit-line-clamp: 3;
-}
-
-.line-clamp--4 {
-  -webkit-line-clamp: 4;
-}
-
-.line-clamp--5 {
-  -webkit-line-clamp: 5;
-}