@iamproperty/components 7.1.0--beta6 → 7.2.0

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,24 +1,6 @@
 @use '../_func.scss' as *;
 @use 'charts.module.scss' as *;
-
-// #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 {
@@ -67,6 +49,7 @@
     align-items: flex-start;
     margin-bottom: 0.5rem;
     padding: 0;
+    min-height: 1.5rem;
 
     td {
       // part=value
@@ -97,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;
+  }
+}

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

@@ -1,78 +1,84 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-iam-carousel:defined {
-  > div > *:last-child {
-    margin-bottom: 0 !important;
-    padding-bottom: 0 !important;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  iam-carousel:defined {
+    > div > *:last-child {
+      margin-bottom: 0 !important;
+      padding-bottom: 0 !important;
+    }
   }
-}
 
-// Preload
-iam-carousel:not(:defined) {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow: auto;
-  margin-block-end: 2rem;
-  overflow: auto;
+  // Preload
+  iam-carousel:not(:defined) {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: auto;
+    margin-block-end: 2rem;
+    overflow: auto;
 
-  & > * {
-    width: 100%;
-    display: block;
-    flex: 0 0 100%;
-    padding-inline-end: 1rem;
+    & > * {
+      width: 100%;
+      display: block;
+      flex: 0 0 100%;
+      padding-inline-end: 1rem;
+    }
   }
-}
 
-// #region Carousel inside of a admin panel
-.admin-panel:has(iam-carousel) {
-  container-type: inline-size;
-}
+  // #region Carousel inside of a admin panel
+  .admin-panel:has(iam-carousel) {
+    container-type: inline-size;
+  }
 
-.admin-panel:has(iam-carousel:last-child) iam-carousel::part(carousel) {
-  margin-bottom: -1.5rem;
-}
+  .admin-panel:has(iam-carousel:last-child) iam-carousel::part(carousel) {
+    margin-bottom: -1.5rem;
+  }
 
-@container (min-width: 62em) {
-  .admin-panel iam-carousel {
-    --carousel-spacing: 1.5rem;
-    margin-inline: -1.5rem;
+  @container (min-width: 62em) {
+    .admin-panel iam-carousel {
+      --carousel-spacing: 1.5rem;
+      margin-inline: -1.5rem;
 
-    & > div {
-      scroll-margin-left: 1.5rem;
-      --last-item-extra: -1.5rem;
-    }
+      & > div {
+        scroll-margin-left: 1.5rem;
+        --last-item-extra: -1.5rem;
+      }
 
-    & > div:first-child {
-      margin-left: 1.5rem;
-    }
-    & > div:last-child {
-      padding-inline-end: 2rem;
-      --last-item-extra: 1.5rem;
+      & > div:first-child {
+        margin-left: 1.5rem;
+      }
+      & > div:last-child {
+        padding-inline-end: 2rem;
+        --last-item-extra: 1.5rem;
+      }
     }
   }
-}
-// #endregion
+  // #endregion
 
-// #region carousel in dialog
+  // #region carousel in dialog
 
-dialog:has(iam-carousel) {
-  container-type: inline-size;
-  --carousel-spacing: 2rem;
+  dialog:has(iam-carousel) {
+    container-type: inline-size;
+    --carousel-spacing: 2rem;
 
-  @include media-breakpoint-up(sm) {
-    min-width: rem(600);
-    max-width: rem(600);
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      min-width: rem(600);
+      max-width: rem(600);
+    }
   }
-}
 
-dialog:has(iam-carousel:last-child) {
-  iam-carousel::part(carousel) {
-    margin-bottom: 0 !important;
-  }
+  dialog:has(iam-carousel:last-child) {
+    iam-carousel::part(carousel) {
+      margin-bottom: 0 !important;
+    }
 
-  iam-carousel::part(controls) {
-    margin-bottom: 0 !important;
-    max-width: calc(100% - 4rem);
+    iam-carousel::part(controls) {
+      margin-bottom: 0 !important;
+      max-width: calc(100% - 4rem);
+    }
   }
+  // #endregion
 }
-// #endregion