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

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

@@ -16,9 +16,9 @@
     --chart-colour: var(#{'--chart-colour-' + $i});
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Basic setup - including: container setup, css vars
+/* #region Basic setup - including: container setup, css vars */
 
 ::slotted(table) {
   display: none !important;
@@ -39,7 +39,7 @@
   --chart-height-lg: 12.5rem;
   --chart-height-resp: var(--chart-height);
 
-  // Non-configurable css vars
+  /*  Non-configurable css vars */
   --index-below: -1;
   --index-base: 0;
   --index-focus: 2;
@@ -98,9 +98,9 @@
     opacity: 0;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Chart key
+/* #region Chart key */
 .chart__outer > input[type='checkbox'] {
   opacity: 0;
   position: absolute;
@@ -116,7 +116,7 @@
   overflow: auto;
   scroll-snap-type: x mandatory;
   scroll-padding: 0.75rem;
-  //justify-content: flex-end;
+  /* justify-content: flex-end; */
   column-gap: 0.5rem;
 
   &:has(label:first-child:last-child) {
@@ -154,9 +154,9 @@
   }
 }
 
-// Hide chart keys
+/*  Hide chart keys */
 .chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
-  //opacity: 0.25;
+  /* opacity: 0.25; */
 }
 
 @for $i from 1 to 11 {
@@ -164,9 +164,9 @@
     opacity: 0.25;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region y-axis
+/* #region y-axis */
 :host([data-yaxis]) {
   --yaxis-display: flex;
 }
@@ -191,7 +191,7 @@
       transform: translate(0, -50%);
       padding-right: 0.25rem;
       text-align: right;
-      //font-size: var(--label-size);
+      /* font-size: var(--label-size); */
       font-weight: var(--chart-yaxis-fw, normal);
       font-size: var(--chart-yaxis-fs, 0.75rem);
       color: var(--colour-body);
@@ -202,9 +202,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region X-axis
+/* #region X-axis */
 .chart__xaxis {
   margin-bottom: 1rem;
   display: flex;
@@ -231,9 +231,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Guidelines
+/* #region Guidelines */
 .chart__guidelines {
   position: absolute;
   top: 0;
@@ -254,7 +254,7 @@
     border-bottom: 1px dashed #eeeeee;
     pointer-events: none;
     z-index: var(--index-below);
-    //overflow: hidden;
+    /* overflow: hidden; */
 
     &:not(.guideline--target) span {
       display: none;
@@ -284,12 +284,12 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region tooltip
+/* #region tooltip */
 
 [part='popover'] {
-  //part="popover"
+  /* part="popover" */
   position: absolute;
   top: var(--cursor-y, 50%);
   left: var(--cursor-x, 50%);
@@ -302,7 +302,7 @@
   border-radius: 0.5rem;
   margin-bottom: 0.25rem;
   display: block;
-  //color: var(--colour-primary-theme);
+  /* color: var(--colour-primary-theme); */
   white-space: pre;
   text-align: left;
   box-shadow: var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));
@@ -342,9 +342,9 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Default column chart (Also applies to line chart)
+/* #region Default column chart (Also applies to line chart) */
 .chart__wrapper {
   display: block;
   display: flex;
@@ -359,7 +359,7 @@
   table {
     display: block;
     width: 100% !important;
-    padding-top: var(--chart-height-resp); // 16:9 ratio
+    padding-top: var(--chart-height-resp); /*  16:9 ratio */
     position: relative;
     margin-bottom: 0;
     overflow: visible;
@@ -396,7 +396,7 @@
       }
 
       td:first-child {
-        // part=xaxis
+        /*  part=xaxis */
         position: absolute;
         top: 100%;
         left: 0%;
@@ -474,7 +474,7 @@
       }
     }
 
-    // change the look of chart when crowded
+    /*  change the look of chart when crowded */
     @container (min-width: 62em) {
       tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
       tbody:has(tr:nth-child(10)) tr {
@@ -508,7 +508,7 @@
         }
       }
     }
-    // Hide labels when it gets crowded
+    /*  Hide labels when it gets crowded */
     @container (min-width: 36em) {
       tbody:has(tr:nth-child(25)) {
         tr td:first-child {
@@ -544,9 +544,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Chart colour overide classes
+/* #region Chart colour overide classes */
 :host(.chart-colour--success) td,
 :host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--success,
 .chart-colour--success td {
@@ -566,11 +566,11 @@
 .chart-colour--warning td {
   --chart-colour: var(--chart-colour-warning) !important;
 }
-// #endregion
+/* #endregion */
 
-// #region Hide data sets
+/* #region Hide data sets */
 .chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
-  //display: none;
+  /* display: none; */
 }
 
 @for $i from 1 to 11 {
@@ -585,4 +585,4 @@
     opacity: 0;
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/charts.scss

@@ -33,29 +33,29 @@ $chart-colors: map.merge(
 $chart-height: 56.25% !default;
 $chart-height-lg: 42.86% !default;
 
-// Selectors
+/*  Selectors */
 $default-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__wrapper';
 $bar-chart: 'input[type=radio]:is([value="bar"],[value="comparison"]):not([value=none]):not([value=pie]):checked~.chart__wrapper';
 
-//$comparison-chart: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
-//$comparison-chart-key: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__key';
+/* $comparison-chart: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__wrapper'; */
+/* $comparison-chart-key: 'input[type=radio][value="comparison"]:not([value=none]):not([value=pie]):checked~.chart__key'; */
 
 $responsive-chart: 'input[type=radio][value="responsive"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
 $scatter-line-chart: 'input[type="radio"]:not([value="pie"]):is([value="line"],[value="scatter"],[value="bubble"],[value="radar"],[value="proportional"],[value="combo"]):checked ~ .chart__wrapper';
 
 $line-chart: 'input[type="radio"]:not([value="pie"])[value="line"]:checked ~ .chart__wrapper';
-//$bubble-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="bubble"]:checked ~ .chart__wrapper';
-//$radar-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="radar"]:checked ~ .chart__wrapper';
-//$proportional-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__wrapper';
-//$proportional-chart-key: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__key';
+/* $bubble-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="bubble"]:checked ~ .chart__wrapper'; */
+/* $radar-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="radar"]:checked ~ .chart__wrapper'; */
+/* $proportional-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__wrapper'; */
+/* $proportional-chart-key: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="proportional"]:checked ~ .chart__key'; */
 $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="polar"]):checked ~ .chart__wrapper';
-//$polar-chart: 'input[type="radio"]:not([value="none"])[value="polar"]:checked ~ .chart__wrapper';
-//$tree-chart: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__wrapper';
-//$tree-chart-key: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__key';
-//$dumbbell-chart: 'input[type="radio"]:not([value="none"])[value="dumbbell"]:checked ~ .chart__wrapper';
-//$waffle-chart: 'input[type="radio"]:not([value="none"])[value="waffle"]:checked ~ .chart__wrapper';
+/* $polar-chart: 'input[type="radio"]:not([value="none"])[value="polar"]:checked ~ .chart__wrapper'; */
+/* $tree-chart: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__wrapper'; */
+/* $tree-chart-key: 'input[type="radio"]:not([value="none"])[value="treemap"]:checked ~ .chart__key'; */
+/* $dumbbell-chart: 'input[type="radio"]:not([value="none"])[value="dumbbell"]:checked ~ .chart__wrapper'; */
+/* $waffle-chart: 'input[type="radio"]:not([value="none"])[value="waffle"]:checked ~ .chart__wrapper'; */
 
-// #region Basic setup - including: container setup, css vars
+/* #region Basic setup - including: container setup, css vars */
 
 ::slotted(table) {
   display: none !important;
@@ -64,13 +64,13 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 .chart__outer {
   container-type: inline-size;
 
-  // CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set
+  /*  CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set */
   --body-colour-set: var(--body-colour, white);
   --text-colour-set: var(--text-colour, black);
   --chart-height-set: var(--chart-height, #{$chart-height});
   --chart-height-lg-set: var(--chart-height-lg, #{$chart-height-lg});
   --chart-height-resp: var(--chart-height-set);
-  // Non-configurable css vars
+  /*  Non-configurable css vars */
   --index-below: -1;
   --index-base: 0;
   --index-focus: 2;
@@ -160,9 +160,9 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region figure caption elements
+/* #region figure caption elements */
 .chart__title {
   font-size: 2rem;
   font-weight: 700;
@@ -178,9 +178,9 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   position: relative;
   padding-top: 0.25rem;
 }
-// #endregion
+/* #endregion */
 
-// #region Apply chart colours
+/* #region Apply chart colours */
 @for $i from 1 to 10 {
   .chart__key .key:nth-child(10n - #{10 - $i}),
   .chart__outer table tbody tr td:not(:first-child):nth-child(10n - #{10 - ($i+1)}) {
@@ -209,9 +209,9 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
   td:not(:first-child):nth-child(10n + 1) {
   --chart-colour: var(#{'--chart-colour-10-set'});
 }
-// #endregion
+/* #endregion */
 
-// #region Chart type switcher
+/* #region Chart type switcher */
 .chart__outer > [type='radio'] {
   opacity: 0;
   position: absolute;
@@ -284,9 +284,9 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
     display: block;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Chart key
+/* #region Chart key */
 .chart__outer > input[type='checkbox'] {
   opacity: 0;
   position: absolute;
@@ -296,7 +296,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
 .chart__key {
   padding: 0 0 0 0;
   margin-bottom: 1.5rem;
-  //background: var(--colour-key-bg, rgb(220, 220, 220));
+  /* background: var(--colour-key-bg, rgb(220, 220, 220)); */
   display: flex;
   overflow: auto;
   scroll-snap-type: x mandatory;
@@ -344,9 +344,9 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Hide data sets
+/* #region Hide data sets */
 .chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
   opacity: 0.25;
 }
@@ -361,7 +361,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
 
 @for $i from 1 to 10 {
   .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):focus ~ .chart__key .key:nth-of-type(#{$i}) {
-    //outline: 3px solid var(--chart-colour);
+    /* outline: 3px solid var(--chart-colour); */
   }
 
   .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
@@ -382,16 +382,16 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
     display: block !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Second table
+/* #region Second table */
 .chart:has(.chart__outer) > table {
   order: 10;
   display: none;
 }
-// #endregion Second table
+/* #endregion */ Second table
 
-// #region Default column chart (Also applies to line chart)
+/* #region Default column chart (Also applies to line chart) */
 .chart__wrapper {
   display: block;
   display: flex;
@@ -475,7 +475,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
       border-bottom: 1px dashed #eeeeee;
       pointer-events: none;
       z-index: var(--index-below);
-      //overflow: hidden;
+      /* overflow: hidden; */
 
       &:not(.guideline--target) span {
         display: none;
@@ -513,7 +513,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
   table {
     display: block;
     width: 100% !important;
-    padding-top: var(--chart-height-resp); // 16:9 ratio
+    padding-top: var(--chart-height-resp); /*  16:9 ratio */
     position: relative;
     margin-bottom: 0;
     overflow: visible;
@@ -561,7 +561,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
         overflow: hidden;
         text-overflow: ellipsis;
         font-size: var(--label-size);
-        //display: none;
+        /* display: none; */
         text-align: center;
 
         @container (min-width: 62em) {
@@ -651,7 +651,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
       }
     }
 
-    // change the look of chart when crowded
+    /*  change the look of chart when crowded */
     @container (max-width: 36em) {
       tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
       tbody:has(tr:nth-child(10)) tr {
@@ -685,7 +685,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
         }
       }
     }
-    // Hide labels when it gets crowded
+    /*  Hide labels when it gets crowded */
     @container (min-width: 62em) {
       tbody:has(tr:nth-child(25)) {
         tr td:first-child {
@@ -720,7 +720,7 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
       }
     }
 
-    // Hide items when theres too many too display
+    /*  Hide items when theres too many too display */
     tbody:has(tr:nth-child(1001)) {
       tr {
         display: none;
@@ -737,9 +737,9 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
     display: none;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Bar chart
+/* #region Bar chart */
 @mixin barchart($selector) {
   #{$selector} {
     tbody {
@@ -837,9 +837,9 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
 @container (max-width: 36em) {
   @include barchart('.chart__outer ' + $responsive-chart);
 }
-// #endregion
+/* #endregion */
 
-// #region stacked
+/* #region stacked */
 input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrapper {
   table tbody tr {
     --bar-gap: 0;
@@ -852,9 +852,9 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Scatter and line chart
+/* #region Scatter and line chart */
 #{'.chart__outer ' + $scatter-line-chart} {
   table tbody {
     justify-content: space-between;
@@ -979,9 +979,9 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     z-index: var(--index-above);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Line chart
+/* #region Line chart */
 #{'.chart__outer ' + $line-chart} {
   .chart__lines ~ table tbody {
     tr {
@@ -1003,9 +1003,9 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     z-index: var(--index-above);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Pie chart
+/* #region Pie chart */
 #{'.chart__outer ' + $pie-chart} {
   margin-bottom: 2rem;
 
@@ -1110,11 +1110,11 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Modifiers
+/* #region Modifiers */
 
-// #region Display data modifier class
+/* #region Display data modifier class */
 :host(.chart--display-data) {
   table tbody tr {
     td:not(:first-child) {
@@ -1159,9 +1159,9 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     opacity: 1;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region show chart totals
+/* #region show chart totals */
 :host(.chart--show-totals) {
   .chart__key {
     .key {
@@ -1182,11 +1182,11 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #endregion
+/* #endregion */
 
-// #region aniamtion
+/* #region aniamtion */
 
 #{'.chart--animate.animating.inview'} {
   --animation-left: 2s;
@@ -1225,15 +1225,15 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
 }
 */
 
-// #region Animate bar and column chart
+/* #region Animate bar and column chart */
 #{'.chart--animate.animating ' + $default-chart} {
   table tbody tr td:not(:first-child) {
     overflow: hidden;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region scatter and line charts
+/* #region scatter and line charts */
 
 #{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
   table tbody tr td:not(:first-child) {
@@ -1253,10 +1253,10 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
   }
 }
 
-// Line chart
+/*  Line chart */
 #{'.chart--animate.animating '+$line-chart}
-//#{'.chart--animate '+proportional-chart},
-//#{'.chart--animate '+combo-chart}
+/* #{'.chart--animate '+proportional-chart}, */
+/* #{'.chart--animate '+combo-chart} */
 {
   .line path {
     transition: 2s ease-out;
@@ -1264,16 +1264,16 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
 }
 
 #{'.chart--animate:not(.inview) '+$line-chart}
-//#{'.chart--animate:not(.inview) '+proportional-chart},
-//#{'.chart--animate:not(.inview) '+combo-chart}
+/* #{'.chart--animate:not(.inview) '+proportional-chart}, */
+/* #{'.chart--animate:not(.inview) '+combo-chart} */
 {
   .line path {
     d: var(--path);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region pie charts
+/* #region pie charts */
 #{'.chart--animate ' + $pie-chart} {
   .pie path {
     transition: calc(2s * var(--second-fraction, 1)) ease-out;
@@ -1293,6 +1293,6 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
   }
 }
 */
-// #endregion
+/* #endregion */
 
-// #endregion
+/* #endregion */

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

@@ -5,7 +5,7 @@
 
 
 
-// Host
+/*  Host */
 :host {
   --side-link-hover: light-dark(#eeeeee,var(--colour-canvas-2));
   grid-column: full-width;
@@ -44,7 +44,7 @@
   }
 }
 
-// #region Side menu
+/* #region Side menu */
 .side-menu {
   position: absolute;
   z-index: 20;
@@ -101,7 +101,7 @@
     transition: opacity 0.2s;
 
     &[aria-expanded] {
-      // Change icon
+      /*  Change icon */
       &[class*='fa-']:before {
         content: '\f053' !important;
       }
@@ -132,7 +132,7 @@
     }
   }
 
-  // Content
+  /*  Content */
   .side-menu-content {
     position: absolute;
     top: 0;
@@ -182,10 +182,10 @@
   }
 }
 
-// links moved to links
-// #endregion
+/*  links moved to links */
+/* #endregion */
 
-// #region main content
+/* #region main content */
 .main-content {
   position: relative;
   z-index: 10;
@@ -226,9 +226,9 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Desktop open state
+/* #region Desktop open state */
 @media screen and (min-width: 62em) {
   .container:has(.side-menu.open) {
     padding-left: 2rem !important;
@@ -237,7 +237,7 @@
     max-width: min(var(--container-max-width), 100% - 19rem);
   }
 }
-// #endregion
+/* #endregion */
 
 @media screen and (min-width: 62em) {
   :host([open-always]) {