@iamproperty/components 7.6.4--beta7 → 7.7.0

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

@@ -36,8 +36,8 @@
   iam-barchart::part(key-unchecked) {
     --key-border-radius: 50%;
     --btn-border-width: 1px;
-    --btn-padding-block: #{rem(6)};
-    --btn-padding-inline: #{rem(6)};
+    --btn-padding-block: 0.375rem; /* 6 */
+    --btn-padding-inline: 0.375rem; /* 6 */
 
     background-color: var(--colour-canvas-2);
     border: var(--btn-border-width) solid var(--colour-muted);
@@ -69,7 +69,7 @@
     text-decoration: none !important;
   }
   iam-barchart::part(tooltip):after {
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     font-weight: 900;
     content: '\f059';
     display: inline-block;

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

@@ -6,7 +6,6 @@
   .chart__key .key:nth-child(11n - #{11 - $i}),
   .chart__outer table tbody tr td:not(:first-child):nth-child(11n - #{11 - ($i+1)}) {
     --chart-colour: var(#{'--chart-colour-' + $i});
-    --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 
   .chart__outer
@@ -15,7 +14,6 @@
     tr:nth-child(#{$i}):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1])
     td:nth-child(2) {
     --chart-colour: var(#{'--chart-colour-' + $i});
-    --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 }
 // #endregion
@@ -119,7 +117,7 @@
   scroll-snap-type: x mandatory;
   scroll-padding: 0.75rem;
   //justify-content: flex-end;
-  gap: 0.5rem;
+  column-gap: 0.5rem;
 
   &:has(label:first-child:last-child) {
     display: var(--single-key-display, none);
@@ -307,7 +305,7 @@
   //color: var(--colour-primary-theme);
   white-space: pre;
   text-align: left;
-  box-shadow: var(--chart-details-shadow, 0 #{rem(2)} 0.75rem rgba(0, 0, 0, 0.25));
+  box-shadow: var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));
   transform: translate(-50%, -100%);
 
   &::before {
@@ -435,7 +433,7 @@
         height: var(--percent, 0%);
         bottom: var(--bottom, 0%);
         width: 100%;
-        max-width: #{rem(120)};
+        max-width: 7.5rem; /* 120 */
         position: relative;
         padding: 0;
         background: var(--chart-colour);
@@ -450,7 +448,7 @@
         }
 
         &:hover {
-          background: var(--chart-colour-hover);
+          background: color-mix(in oklab, var(--chart-colour), #000000 5%);
         }
 
         &:has(span:empty),
@@ -553,10 +551,6 @@
 :host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--success,
 .chart-colour--success td {
   --chart-colour: var(--chart-colour-success) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-success-hover) !important;
-  }
 }
 
 :host(.chart-colour--danger) td,
@@ -564,10 +558,6 @@
 .chart-colour--danger,
 .chart-colour--danger td {
   --chart-colour: var(--chart-colour-danger) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-danger-hover) !important;
-  }
 }
 
 :host(.chart-colour--warning) td,
@@ -575,10 +565,6 @@
 .chart-colour--warning,
 .chart-colour--warning td {
   --chart-colour: var(--chart-colour-warning) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-warning-hover) !important;
-  }
 }
 // #endregion
 

package/assets/sass/components/charts.scss

@@ -245,8 +245,8 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
       display: inline-block;
 
       vertical-align: bottom;
-      margin-bottom: rem(3);
-      margin-right: rem(6);
+      margin-bottom: 0.1875rem; /* 3 */
+      margin-right: 0.375rem; /* 6 */
     }
   }
 
@@ -1028,7 +1028,7 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
-    min-width: rem(200);
+    min-width: 12.5rem; /* 200 */
     flex: 1 1 auto;
     display: inline-block;
     max-width: var(--pie-size);

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

@@ -52,7 +52,7 @@
   left: 0;
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
-  width: rem(70);
+  width: 4.375rem; /* 70 */
   height: calc(100% - var(--nav-height));
   padding: 0 2.5rem 0 0;
   transition: width 1s;
@@ -69,17 +69,17 @@
 
   @media screen and (min-width: 36em) {
     left: 0;
-    width: rem(80);
+    width: 5rem; /* 80 */
   }
 
   @media screen and (min-width: 62em) {
-    left: rem(84);
-    margin-left: #{rem(-84)};
+    left: 5.25rem; /* 84 */
+    margin-left: -5.25rem; /* -84 */
     position: fixed;
     top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(344);
+      width: 21.5rem; /* 344 */
 
       .btn[class*='fa-']:before {
         content: '\f023' !important;
@@ -94,7 +94,7 @@
     top: 2rem;
     right: 2.5rem;
     margin-bottom: 0;
-    margin-right: rem(-20);
+    margin-right: -1.25rem; /* -20 */
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
@@ -125,10 +125,10 @@
     width: calc(100% - var(--container-padding-x) + 2.5rem);
 
     @media screen and (min-width: 36em) {
-      width: rem(422);
+      width: 26.375rem; /* 422 */
     }
     @media screen and (min-width: 62em) {
-      width: rem(344);
+      width: 21.5rem; /* 344 */
     }
   }
 
@@ -138,7 +138,7 @@
     top: 0;
     right: 2.5rem;
     padding: 2rem 2.5rem 2.5rem 0;
-    width: rem(351);
+    width: 21.9375rem; /* (351) */
     background-color: var(--colour-canvas);
     opacity: 0;
     transition: opacity 1s;
@@ -156,10 +156,10 @@
         padding-left: 2.5rem;
       }
 
-      width: rem(382);
+      width: 23.875rem; /* 283 */
     }
     @media screen and (min-width: 62em) {
-      width: rem(304);
+      width: 19rem; /* (304) */
 
       .h3 {
         padding-left: var(--container-padding-x);
@@ -182,7 +182,7 @@
   }
 }
 
-// links moved to links.scss
+// links moved to links
 // #endregion
 
 // #region main content
@@ -190,10 +190,10 @@
   position: relative;
   z-index: 10;
   padding-top: 1.5rem;
-  padding-left: rem(60);
+  padding-left: 3.75rem; /* 60 */
 
   @media screen and (min-width: 36em) {
-    padding-left: rem(80);
+    padding-left: 5rem; /* 80 */
   }
 
   @media screen and (min-width: 62em) {
@@ -294,10 +294,10 @@
 
   .main-content {
     padding-left: var(--container-padding-x);
-    padding-right: rem(60);
+    padding-right: 3.75rem; /* 60 */
 
     @media screen and (min-width: 36em) {
-      padding-right: rem(80);
+      padding-right: 5rem; /* 80 */
     }
 
     @media screen and (min-width: 62em) {

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

@@ -0,0 +1,235 @@
+@use '../_func' as *;
+
+@use '../_grid' as *;
+
+@use '../elements/forms' as *;
+@use '../elements/admin-panel' as *;
+
+@use '../elements/type' as *;
+@use '../elements/buttons' as *;
+@use '../utilities/margins';
+@use '../utilities/paddings';
+@use '../utilities/colours';
+@use '../utilities/visually-hidden';
+
+@use '../utilities/font-awesome-iso-fallbacks';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block!important;
+}
+
+// #region enable icons
+.fa-chevron-up {
+  --fa: "\f077";
+}
+
+.fa-chevron-down {
+  --fa: "\f078";
+}
+
+.fa-trash {
+  --fa: "\f1f8";
+}
+
+.fa-plus {
+  --fa: "\2b";
+}
+
+.fa-pen-to-square {
+  --fa: "\f044";
+}
+
+.fa-floppy-disk {
+  
+  --fa: "\f0c7";
+}
+
+[class*="fa-"]{
+
+  &:before {
+    content: var(--fa);
+    font-weight: 600;
+    font-family: "Font Awesome 7 Pro";
+  }
+}
+// #endregion
+
+// #region basic structure
+
+#wrapper {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+
+  .admin-panel {
+    order: 1;
+    justify-content: flex-end;
+    display: flex;
+    max-width: fit-content;
+    gap: 0.75rem;
+    padding: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  #items {
+    order: 2;
+    display: block!important;
+  }
+}
+// #endregion
+
+// #region buckets
+#buckets {
+  
+  display: block!important;
+}
+
+.bucket {
+  display: block;
+  min-height: 10rem;
+  background-color: blue;
+  margin-bottom: 2rem;
+  padding: 1rem;
+}
+
+.bucket:empty {
+  display: block;
+  min-height: 10rem;
+  background-color: red;
+  margin-bottom: 2rem;
+  padding: 1rem;
+}
+
+.bucket__wrapper {
+
+  padding-right: 10.25rem;
+  position: relative;
+  border-bottom: 1px solid var(--colour-border);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+
+  > .btn__group {
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+    gap: 0;
+    padding: 0;
+  }
+}
+// #endregion
+
+// #region item
+#items [data-bucket] {
+  
+  display: block;
+
+  form {
+    --btns-width: 2.5rem;
+    --col-size: calc((100% - (var(--gap) * 11)) / 12);
+    column-gap: var(--gap);
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
+    grid-template-columns: [content-start col-1-start] var(--col-size) [col-1-end col-2-start] var(--col-size) [col-2-end col-3-start] var(--col-size) [col-3-end col-4-start] var(--col-size) [col-4-end col-5-start] var(--col-size) [col-5-end col-6-start] var(--col-size) [col-6-end col-7-start] var(--col-size) [col-7-end col-8-start] var(--col-size) [col-8-end col-9-start] var(--col-size) [col-9-end col-10-start] var(--col-size) [col-10-end col-11-start] var(--col-size) [col-11-end col-12-start] var(--col-size) [col-12-end content-end];
+
+    padding-right: calc(var(--btns-width) + 0.5rem);
+    position: relative;
+
+    .btn__group {
+      position: absolute;
+      top: 0.25rem;
+      right: 0;
+      gap: 0;
+      width: var(--btns-width);
+      padding-top: 1.75rem;
+      margin: 0;
+
+      .btn:not(.fa-trash){
+        display: none;
+      }
+    }
+
+    &:not(:where(main)):has(>[class*=col-]) {
+      .btn__group {
+        left: 100%;
+        margin-left: 0.5rem;
+        right: auto;
+      }
+    }
+  }
+}
+
+:host([data-order]) #items [data-bucket] form {
+
+  --btns-width: 10rem;
+
+  .btn:not(.fa-trash) {
+    display: inline-block;
+  }
+}
+// #endregion
+
+// #region criteria
+.criteria {
+  display: flex;
+  gap: 1rem;
+  padding-right: 5.25rem;
+  position: relative;
+
+  .btn__group {
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+    gap: 0;
+    padding: 0;
+  }
+
+  label {
+    flex-grow: 1;
+  }
+  label:nth-child(2) {
+    flex-grow: 0;
+  }
+}
+// #endregion
+
+// #region expand criteria
+.bucket__wrapper:not(.bucket--expanded) {
+  > label > span { // TODO add a selector if the input matches the only criteria item
+    display: none;
+  }
+  .criteria {
+    display: none;
+  }
+  .criteria label:nth-child(3):has(:disabled){
+    display: none;
+  }
+}
+
+.bucket__wrapper.bucket--expanded {
+
+  .btn__group .fa-pen-to-square {
+    --fa: "\e0a6";
+  }
+}
+// #endregion
+
+// #region Disable top and bottom buttons
+
+#buckets .bucket__wrapper:first-child .btn__group [data-direction="up"],
+#buckets .bucket__wrapper:last-child .btn__group [data-direction="down"],
+[data-bucket] form:first-child .btn__group [data-direction="up"],
+[data-bucket] form:last-child .btn__group [data-direction="down"] {
+
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// #endregion

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

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/buttons' as *;
 
 *,
 *::before,

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 ::slotted(.toggle):after {

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

@@ -1,6 +1,6 @@
-@use '../_func.scss' as *;
-@use 'charts.module.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use 'charts.module' as *;
+@use '../elements/buttons' as *;
 
 .d-block {
   display: block;
@@ -24,7 +24,7 @@
 
   .btn-action {
     font-size: 0.75rem;
-    margin-right: rem(-6) !important;
+    margin-right: -0.375rem !important; /* -6 */
     border-color: transparent !important;
   }
 
@@ -35,6 +35,7 @@
 }
 // #endregion
 
+
 // #region Horizontal
 :host(.chart--horizontal) {
   .chart__outer {
@@ -46,8 +47,8 @@
       overflow: visible;
 
       .btn-action {
-        margin-right: rem(0) !important;
-        margin-bottom: rem(-12) !important;
+        margin-right: 0 !important;
+        margin-bottom: -0.75 !important; /* -12 */
       }
     }
   }
@@ -81,15 +82,15 @@
 
 // #region doughnut chart
 :host(.chart--lg) {
-  --doughnut-size: #{rem(286)};
+  --doughnut-size: 17.875rem; /* 286 */
 }
 
 :host {
-  --doughnut-size: #{rem(236)};
+  --doughnut-size: 14.75rem; /* 236 */
 }
 
 :host(.chart--sm) {
-  --doughnut-size: #{rem(190)};
+  --doughnut-size: 11.875rem; /* 190 */;
 }
 
 .chart__outer {
@@ -115,7 +116,7 @@
   .doughnut {
     position: relative;
     aspect-ratio: 1 / 1;
-    min-width: rem(190);
+    min-width: 11.875rem; /* 190 */;
     flex: 1 1 auto;
     display: inline-block;
     max-width: var(--doughnut-size);

package/assets/sass/components/fileupload.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../_func' as *;
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
 
 @use '../utilities/display' as *;
 
@@ -20,7 +20,7 @@ hr {
 // #region file upload field
 
 .file-upload {
-  max-width: rem(400) !important;
+  max-width: 25rem !important; /* 400 */
   padding-bottom: 1rem;
 
   .drop-area > input {
@@ -46,7 +46,7 @@ hr {
   }
 
   .helper-text {
-    max-width: rem(270);
+    max-width: 16.875rem; /* (270); */
   }
 }
 
@@ -64,7 +64,7 @@ hr {
     color: var(--colour-primary);
     border-color: #d8d8d8;
     background: #d8d8d8;
-    max-width: rem(400) !important;
+    max-width: 25rem!important; /*(400) */
     position: relative;
 
     @media (forced-colors: active) {
@@ -83,7 +83,7 @@ hr {
 
     button {
       position: absolute;
-      top: calc(50% - #{rem(9)});
+      top: calc(50% - 0.5625rem);
       right: 0.875rem; /* 14/16 */
       z-index: var(--index-floating);
       text-indent: 300%;
@@ -118,15 +118,15 @@ hr {
 }
 
 :host(.fileupload--drag-drop) .file-upload {
-  max-width: rem(800) !important;
+  max-width: 50rem !important; /* 800 */
 
   .helper-text {
-    max-width: rem(800) !important;
+    max-width: 50rem !important; /* 800 */
   }
 
   .drop-area > input {
     display: block;
-    min-height: rem(200);
+    min-height: 12.5rem; /* 200 */
     border: 2px dashed var(--colour-primary-theme);
     color: transparent;
     position: relative;

package/assets/sass/components/filter-card.component.scss

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use 'card.module.scss' as *;
+@use '../_func' as *;
+@use 'card.module' as *;
 
 :host {
   --top-padding: 1.5rem;
@@ -69,7 +69,7 @@
 
   &:after {
     content: var(--card-flag-icon, '\f024');
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     position: absolute;
     top: 1rem;
     right: 1rem;