@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/_grid.scss

@@ -2,6 +2,10 @@
 @use 'sass:map';
 @use '_func' as *;
 
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
 // #region grid mixins
 @mixin grid-utilities($br: '') {
   .#{$br}inline-start {
@@ -98,7 +102,7 @@
 }
 // #endregion
 
-@include layer('reset') {
+@include layer('reset', $layers) {
   // #region Main grid setup
   body {
     --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
@@ -116,7 +120,12 @@
     display: grid;
     margin-inline: 0;
     width: 100%;
+    grid-template-rows: auto;
+    align-content: start;
+    justify-content: center;
+
     $templateColumns: '';
+
     @for $i from 1 to $columns {
       $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
     }
@@ -137,10 +146,6 @@
         [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;
 
@@ -181,6 +186,15 @@
   // #endregion
 
   // #region Grid utility classes
+  .grid:not(.admin-panel) {
+    display: grid !important;
+    grid-template-columns: subgrid !important;
+
+    > * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+
   *:has([class*='order-']) > *:not([class*='order-']) {
     order: 99;
   }

package/assets/sass/_tests/func.spec.scss

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 /*#region em*/
 @include describe('em [func]') {
@@ -194,39 +194,3 @@
   }
 }
 /*#endregion*/
-
-/*#region breakpoint-max*/
-@include describe('breakpoint-max [func]') {
-  @include it('breakpoint-max func creates a max-width media query') {
-    // Assert the expected results
-    @include assert {
-      @include output {
-        $name: 'sm';
-        $max: breakpoint-max($name);
-        @media (max-width: $max) {
-          color: red;
-        }
-      }
-      @include expect {
-        @media (max-width: 35.98em) {
-          color: red;
-        }
-      }
-    }
-    @include assert {
-      @include output {
-        $name: 'md';
-        $max: breakpoint-max($name);
-        @media (max-width: $max) {
-          color: red;
-        }
-      }
-      @include expect {
-        @media (max-width: 61.98em) {
-          color: red;
-        }
-      }
-    }
-  }
-}
-/*#endregion*/

package/assets/sass/_tests/mixins.spec.scss

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 /*#region prefix*/
 @include describe('prefix [Mixin]') {
@@ -29,22 +29,6 @@
 }
 /*#endregion*/
 
-/*#region var*/
-@include describe('var [Mixin]') {
-  @include it('Var mixin returns the colour heading as a CSS variable') {
-    // Assert the expected results
-    @include assert {
-      @include output {
-        @include var(color, --colour-primary);
-      }
-      @include expect {
-        color: var(--colour-primary);
-      }
-    }
-  }
-}
-/*#endregion*/
-
 /*#region inline-text*/
 @include describe('inline-text[Mixin]') {
   @include it('inline-text returns selecters prefixed with inline element selectors') {
@@ -127,63 +111,3 @@
   }
 }
 // #endregion
-
-/*#region bg-variant*/
-@include describe('bg-variant [Mixin]') {
-  @include it('bg-variant returns the correct css variable') {
-    // Assert the expected results
-    @include assert {
-      @include output {
-        $parent: '.bg-primary';
-        $color: 'primary';
-        @include bg-variant($parent, $color);
-      }
-      @include expect {
-        .bg-primary {
-          --bg-colour: var(--colour-primary);
-          --bg-colour-tint: var(--colour-primary-tint);
-          background-color: var(--colour-primary) !important;
-        }
-      }
-    }
-  }
-}
-/*#endregion */
-
-/*#region text-emphasis-variant*/
-@include describe('text-emphasis-variant [Mixin]') {
-  @include it('text-emphasis-variant returns') {
-    // Assert the expected results
-    @include assert {
-      @include output {
-        $parent: '.text-primary';
-        $color: 'primary';
-        @include text-emphasis-variant($parent, $color);
-      }
-      @include expect {
-        .text-primary {
-          color: var(--colour-primary) !important;
-        }
-      }
-    }
-  }
-}
-/*#endregion */
-
-/*#region font-size*/
-@include describe('font-size [Mixin]') {
-  @include it('font-size returns') {
-    // Assert the expected results
-    @include assert {
-      @include output {
-        @include font-size($h1-font-size);
-        @include font-size($h1-font-size, 'true');
-      }
-      @include expect {
-        font-size: 3rem;
-        font-size: $h1-font-size;
-      }
-    }
-  }
-}
-/*#endregion */

package/assets/sass/_tests/typography.spec.scss

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 @include describe('Font variables should be defined correctly') {
   @include it('with the body font set to Qanelas Medium') {

package/assets/sass/_utilities.scss

@@ -1,7 +1,17 @@
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
 @use '_func' as *;
 
-@include layer('utilities') {
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@forward '_functions/variables_old' show $utilities;
+@use '_functions/bs_utilities' as *;
+
+@include layer('utilities', $layers) {
   // Missing classes that exist as mixins
   @include clearfix();
   @include visually-hidden();
@@ -14,16 +24,16 @@
   @include line-clamp();
 
   // Loop over each breakpoint
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     // Generate media query if needed
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
       $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 == '') {
+        @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
           @include generate-utility($utility, $infix);
         }
       }
@@ -35,7 +45,7 @@
     @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 {
+      @if meta.type-of($utility) == 'map' and map.get($utility, print) == true {
         @include generate-utility($utility, '-print');
       }
     }

package/assets/sass/_utility-mixins.scss

@@ -1,7 +1,12 @@
 @use 'sass:math';
 @use '_func' as *;
 
-@include layer('utilities') {
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('utilities', $layers) {
   @include clearfix();
   @include visually-hidden();
   @include text-truncate();

package/assets/sass/components/{actionbar.scss → actionbar.component.scss}

@@ -1,5 +1,8 @@
 @use '../_func.scss' as *;
 
+@include margins();
+@include visually-hidden();
+
 :host {
   background-color: #fcfcfc;
 }
@@ -20,14 +23,13 @@ slot[name='selectall'] {
   top: 50%;
   left: rem(24);
   margin-left: 0;
+  transform: translate(0, -50%);
+  z-index: 10;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     left: rem(32);
   }
 
-  transform: translate(0, -50%);
-  z-index: 10;
-
   .btn-action:not(:last-child) {
     margin-right: rem(4) !important;
   }
@@ -42,7 +44,7 @@ slot[name='selectall'] {
     height: rem(40);
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     width: auto;
     overflow: visible;
   }
@@ -65,11 +67,11 @@ slot[name='selectall'] {
   justify-content: flex-end;
   align-items: center;
   height: rem(68);
+  inset: 0;
 
   @supports selector(:has(*)) {
     position: absolute;
   }
-  inset: 0;
 
   @include container-up(sm) {
     padding: 0 rem(32);
@@ -82,30 +84,30 @@ slot[name='selectall'] {
 
 .actionbar--selected {
   background-color: var(--colour-canvas);
+  pointer-events: none;
+  display: flex;
 
-  @include light-mode {
+  @include light-mode($darkMode) {
     background-color: #e6eaec;
   }
 
-  display: flex;
-
   @supports selector(:has(*)) {
     opacity: 0;
   }
-  pointer-events: none;
 }
 
 .actionbar--search {
   background-color: var(--colour-canvas);
 
-  @include light-mode {
-    background-color: #e6eaec;
-  }
   display: flex;
   z-index: 2;
   position: relative;
   opacity: 0;
   pointer-events: none;
+
+  @include light-mode($darkMode) {
+    background-color: #e6eaec;
+  }
 }
 
 // Show selected bar
@@ -155,6 +157,11 @@ slot[name='selectall'] {
   order: 2;
 }
 
+::slotted(:not([slot])) {
+  align-self: center !important;
+  margin-block: 0;
+}
+
 // buttons only for single items
 ::slotted([data-single]) {
   pointer-events: none;
@@ -187,6 +194,9 @@ slot[name='selectall'] {
   align-items: center;
   width: rem(210);
 
+  overflow: visible;
+  position: relative;
+
   @include container-up(sm) {
     width: rem(450);
   }
@@ -195,9 +205,6 @@ slot[name='selectall'] {
     width: rem(750);
   }
 
-  overflow: visible;
-  position: relative;
-
   .body {
     display: contents;
   }
@@ -277,3 +284,62 @@ slot[name='selectall'] {
   }
 }
 // #endregion
+
+// #region filter columns
+.filter-columns,
+.checklist-btns {
+  display: none;
+}
+
+:host([data-filter-columns]) .filter-columns {
+  display: block;
+}
+
+:host([data-filter-columns-save]) .filter-columns {
+  display: block;
+}
+
+:host([data-filter-columns-save]) .checklist-btns {
+  display: block;
+  text-align: right;
+  padding-top: 0.5rem;
+
+  #saveColumns {
+    margin-left: 0.25rem;
+  }
+  #saveColumns:not(:hover, :focus, :active) {
+    background-color: var(--colour-warning);
+  }
+  #cancelColumns:not(:hover, :focus, :active) {
+    border-color: var(--colour-border);
+  }
+}
+
+.fa-table-columns:has(+ dialog input:not(:checked)) {
+  overflow: visible;
+  text-indent: -200vw;
+
+  &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: var(--colour-info);
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+  }
+}
+
+:host([data-filter-columns-save]) .fa-table-columns:after {
+  display: none !important;
+}
+
+@for $i from 1 through 30 {
+  :host([data-filter-columns-save][data-hide-col#{$i}]) .fa-table-columns:after {
+    display: block !important;
+  }
+}
+
+// #endregion

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

@@ -1,26 +1,23 @@
 @use '../_func.scss' as *;
 
+$darkMode: 'true' !default;
+
 // #region Default view
 iam-actionbar {
+  --actionbar-radius: 0;
   background-color: #fcfcfc;
-
-  @include dark-mode() {
-    background-color: var(--colour-canvas);
-  }
-
   display: block;
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
 
-  --actionbar-radius: 0;
+  @include dark-mode($darkMode) {
+    background-color: var(--colour-canvas);
+  }
 }
 // #endregion
 
 // #region at the top
 main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
-  @include light-mode() {
-    background-color: #e6eaec;
-  }
   border-radius: rem(8);
   margin: var(--container-padding);
   margin-bottom: 2rem;
@@ -30,13 +27,17 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
     padding-top: 0;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include light-mode($darkMode) {
+    background-color: #e6eaec;
+  }
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
     box-shadow: none;
     margin-inline: 0;
     border-radius: 0;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-inline: calc(50% - #{rem(556)} - 2rem);
   }
 }
@@ -47,11 +48,23 @@ iam-table iam-actionbar {
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
+iam-table.table--fullwidth:has(iam-actionbar) {
+  padding-top: 0;
+}
+iam-table.table--fullwidth iam-actionbar {
+  margin: 0 -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+
+  @include light-mode($darkMode) {
+    background-color: #e6eaec;
+  }
+}
 
 .actionbar__sticky-wrapper {
   container-type: inline-size;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     padding: 0 !important;
   }
 }
@@ -90,11 +103,12 @@ iam-table iam-actionbar {
 }
 
 @include container-up(sm) {
+  iam-table.table--fullwidth iam-actionbar,
   iam-table iam-actionbar {
     margin-left: -2rem;
     margin-right: -2rem;
-    margin-top: -2rem;
-    margin-bottom: 1rem;
+    margin-top: 0;
+    margin-bottom: 2rem;
   }
 }
 // #endregion

package/assets/sass/components/address-lookup.scss

@@ -1,3 +1,9 @@
+@use '../_func.scss' as *;
+
+.js-hide {
+  display: none !important;
+}
+
 :host {
   margin-bottom: 1rem;
   display: block;

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

@@ -1,25 +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) {
-  //display: none;
-}
-
-@for $i from 1 to 10 {
-  .chart__outer
-    > input[type='checkbox']:nth-of-type(#{$i}):not(:checked)
-    ~ .chart__wrapper
-    table
-    tbody
-    tr
-    td:not(:first-child):nth-child(#{$i + 1}) {
-    display: none;
-    opacity: 0;
-  }
-}
-// #endregion
+@use '../elements/buttons.scss' as *;
 
 // #region Bar chart (Horizontal)
 :host(.chart--horizontal) .chart__outer {
@@ -99,6 +80,12 @@
     }
   }
 
+  table tbody:has(td:first-child strong) {
+    td:first-child {
+      font-weight: normal !important;
+    }
+  }
+
   .chart__wrapper[data-longest-label]:before {
     display: block;
     content: attr(data-longest-label);

package/assets/sass/components/bento-grid.component.scss

@@ -0,0 +1,91 @@
+@use '../_func.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  container-type: inline-size;
+  display: block;
+}
+
+::slotted(details) {
+  margin-bottom: 1rem;
+  border-radius: 1rem;
+  padding: 0 !important;
+  position: relative;
+  overflow: hidden;
+}
+
+@container (width > 40em) {
+  .wrapper {
+    aspect-ratio: 1.75 / 1;
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: 1rem;
+
+    --content-max-width: 28rem;
+  }
+
+  ::slotted(details) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(60% - 0.5rem) !important;
+    height: calc(50% - 0.5rem);
+    z-index: 1;
+    border-radius: 1rem;
+    margin: 0;
+  }
+
+  ::slotted(details.animating) {
+    transition: 1s !important;
+    z-index: 10 !important;
+  }
+
+  ::slotted(details:nth-child(2)) {
+    top: 0;
+    left: calc(60% + 0.5rem);
+    width: calc(40% - 0.5rem) !important;
+    height: calc(50% - 0.5rem);
+  }
+  ::slotted(details:nth-child(3)) {
+    top: calc(50% + 0.5rem);
+    left: 0;
+    width: calc(50% - 0.5rem) !important;
+    height: calc(50% - 0.5rem);
+  }
+  ::slotted(details:nth-child(4)) {
+    top: calc(50% + 0.5rem);
+    left: calc(50% + 0.5rem);
+    width: calc(50% - 0.5rem) !important;
+    height: calc(50% - 0.5rem);
+  }
+
+  ::slotted(details[open]) {
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100%;
+    z-index: 9;
+  }
+
+  ::slotted(details[open]:after) {
+    content: '';
+    display: block;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    width: 100%;
+    background: red;
+  }
+
+  ::slotted(details[open]:not(.animating)) {
+    overflow: auto;
+    overflow-x: clip;
+    overscroll-behavior: contain;
+  }
+}