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

package/assets/sass/_functions/functions.scss

@@ -10,7 +10,7 @@
   $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29'));
   @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
-      // Do not escape the url brackets
+      /*  Do not escape the url brackets */
       @if string.index($string, 'url(') == 1 {
         $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
@@ -34,7 +34,7 @@
 }
 
 
-// converts pixels to em (context sets the current size of the font)
+/*  converts pixels to em (context sets the current size of the font) */
 @function em($pixels, $context: 16) {
   @return #{math.div($pixels, $context)}em;
 }

package/assets/sass/_grid.scss

@@ -11,7 +11,7 @@ $breakpoints: (
   /* 576 */ md: 62em /* 992 */,
 );
 
-// #region grid mixins
+/* #region grid mixins */
 @mixin grid-utilities($br: '') {
   .#{$br}inline-start {
     justify-self: start;
@@ -54,7 +54,7 @@ $breakpoints: (
   }
 
   .#{$br}flow-dense {
-    // Apply to a wrapper div of the items
+    /*  Apply to a wrapper div of the items */
     grid-auto-flow: dense;
   }
 
@@ -107,24 +107,24 @@ $breakpoints: (
 }
 
 @mixin grid-rows($br: '') {
-  // Assign how many rows an item takes
+  /*  Assign how many rows an item takes */
   @for $i from 0 to $grid-utility-count {
     .#{$br}row-span-#{$i + 1} {
       --row-span: #{$i + 1};
     }
   }
 
-  // Move the item to a set row
+  /*  Move the item to a set row */
   @for $i from 0 to $rows-per-page {
     .#{$br}row-start-#{$i + 1} {
       --row-start: #{$i + 1};
     }
   }
 }
-// #endregion
+/* #endregion */
 
 @layer reset {
-  // #region Main grid setup
+  /* #region Main grid setup */
   body {
     --excess-space: calc((100% - var(--max-width)) / 2);
     --col-size: calc(
@@ -199,9 +199,9 @@ $breakpoints: (
     grid-column: full-width;
     grid-template-columns: subgrid;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Grid utility classes
+  /* #region Grid utility classes */
   .grid {
     display: grid !important;
     grid-template-columns: subgrid !important;
@@ -234,9 +234,9 @@ $breakpoints: (
   @media screen and (min-width: 62em) {
     @include grid-utilities(#{'md-'});
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Create the columns
+  /* #region Create the columns */
   :is([class*='col-start-'], [class*='col-end-'], [class*='col-span-']) {
     grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
   }
@@ -267,9 +267,9 @@ $breakpoints: (
   @media screen and (min-width: 62em) {
     @include grid-columns(#{'md-'});
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Create rows
+  /* #region Create rows */
   :where([class*='row-'], [class*='rows-']) {
     grid-row: var(--row-start, auto) / span var(--row-span, 1);
   }
@@ -281,9 +281,9 @@ $breakpoints: (
   @media screen and (min-width: 62em) {
     @include grid-rows(#{'md-'});
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Create the Columns wrappers
+  /* #region Create the Columns wrappers */
   [class*='cols-']:not(.row) {
     display: grid;
     grid-template-columns: subgrid;
@@ -316,5 +316,5 @@ $breakpoints: (
     }
   }
 
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/_print.scss

@@ -35,7 +35,7 @@ $printMedia: print !default;
     background: none;
   }
 
-  // Nav fixes
+  /*  Nav fixes */
   .nav {
     position: relative;
     box-shadow: none !important;

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

@@ -22,7 +22,7 @@
   container-type: inline-size;
 }
 
-// #region View states (Default, search, selected)
+/* #region View states (Default, search, selected) */
 .views,
 .selectall,
 slot[name='selectall'] {
@@ -120,7 +120,7 @@ slot[name='selectall'] {
   background-color: #e6eaec;
 }
 
-// Show selected bar
+/*  Show selected bar */
 .actionbar {
   opacity: var(--selectall-actionbar-opacity, 1);
   pointer-events: var(--selectall-actionbar-pe, all);
@@ -143,7 +143,7 @@ slot[name='selectall'] {
   pointer-events: all;
 }
 
-// Show search bar
+/*  Show search bar */
 .actionbar--search.show {
   opacity: 1;
   pointer-events: all;
@@ -153,9 +153,9 @@ slot[name='selectall'] {
   opacity: 0;
   pointer-events: none;
 }
-// #endregion
+/* #endregion */
 
-// #region Slotted elements
+/* #region Slotted elements */
 ::slotted(.btn) {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
@@ -173,7 +173,7 @@ slot[name='selectall'] {
   margin-block: 0;
 }
 
-// buttons only for single items
+/*  buttons only for single items */
 ::slotted([data-single]) {
   pointer-events: none;
   opacity: 0.5;
@@ -197,9 +197,9 @@ slot[name='selectall'] {
     display: block;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region safe area
+/* #region safe area */
 .safe-area {
   display: flex;
   flex-wrap: nowrap;
@@ -238,9 +238,9 @@ slot[name='selectall'] {
 :host([data-switchviews]) .safe-area {
   width: 9rem; /* (144) */
 }
-// #endregion
+/* #endregion */
 
-// #region overflow dialog
+/* #region overflow dialog */
 ::slotted(.btn-compact[slot='selected-overflow']),
 ::slotted(.btn-compact[slot='overflow']) {
   max-width: none !important;
@@ -261,9 +261,9 @@ slot[name='selectall'] {
   margin-left: 0.5rem;
   margin-right: -0.5rem;
 }
-// #endregion
+/* #endregion */
 
-// #region Search bar
+/* #region Search bar */
 .actionbar--search .btn {
   margin: 0;
   margin-left: -0.75rem !important;
@@ -319,9 +319,9 @@ slot[name='selectall'] {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region filter columns
+/* #region filter columns */
 .filter-columns,
 .checklist-btns {
   display: none;
@@ -418,4 +418,4 @@ slot[name="filters"]{
   }
 }
 
-// #endregion
+/* #endregion */

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

@@ -2,7 +2,7 @@
 
 
 
-// #region Default view
+/* #region Default view */
 iam-actionbar {
   --actionbar-radius: 0;
   background-color: #fcfcfc;
@@ -14,9 +14,9 @@ iam-actionbar {
     background-color: var(--colour-canvas);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region at the top
+/* #region at the top */
 main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
   border-radius: 0.5rem;
   margin: var(--container-padding);
@@ -41,9 +41,9 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
     padding-inline: calc(50% - 34.75rem - 2rem); /* 556px */
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Switchview
+/* #region Switchview */
 iam-actionbar ~ :is([data-view='square'], [data-view='list'], [data-view='small']) {
   display: none;
 }
@@ -57,9 +57,9 @@ iam-actionbar[data-view='list'] ~ [data-view='list'] {
 iam-actionbar[data-view='small'] ~ [data-view='small'] {
   display: block;
 }
-// #endregion
+/* #endregion */
 
-// #region Child elements
+/* #region Child elements */
 iam-actionbar {
   .actionbar__text {
     font-size: 1.125rem; /* 18/16 */
@@ -68,7 +68,7 @@ iam-actionbar {
     display: inline-block;
   }
 
-  // Dialog wrapper
+  /*  Dialog wrapper */
   .menu__wrapper [slot='selected-overflow'] > button,
   .menu__wrapper [slot='overflow'] > button {
     background: none;
@@ -95,9 +95,9 @@ iam-actionbar {
     display: contents;
   }
 }
-// #endregion
+/* #endregion */
 
-// Select all done with vue
+/*  Select all done with vue */
 
 iam-actionbar:has(.selectall input:checked) {
   --selectall-opacity: 1;
@@ -106,10 +106,10 @@ iam-actionbar:has(.selectall input:checked) {
   --selectall-action-pe: none;
 }
 
-// #region filters 
+/* #region filters  */
 
 iam-actionbar [slot="filters"]:not(:has(+[slot="filters"])) {
   margin-inline-end: auto!important;
 }
 
-// #endregion
+/* #endregion */

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

@@ -43,7 +43,7 @@
 }
 
 :host([data-required]) {
- // --error-border: var(--colour-danger);
+ /*  --error-border: var(--colour-danger); */
 }
 
 input[name='postcode'] {
@@ -103,14 +103,14 @@ input[name='postcode'] {
   }
 }
 
-// change the datalist
+/*  change the datalist */
 
 .postcode-lookup > div {
   position: relative;
 }
 
 .postcode-lookup input:not(.is-invalid) {
-  //background-image: none!important;
+  /* background-image: none!important; */
 }
 
 .postcode-lookup:has(input.is-invalid) .invalid-feedback:not(:empty) {
@@ -141,7 +141,7 @@ input[name='postcode'] {
 }
 
 
-// #region Matched address
+/* #region Matched address */
 .matched .inner {
   border: 2px solid var(--colour-danger);
   background: #fcebec;
@@ -158,4 +158,4 @@ input[name='postcode'] {
 
   --colour-underline: currentColor;
 }
-// #endregion
+/* #endregion */

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

@@ -69,7 +69,7 @@ iam-std-address-lookup iam-address-lookup input:is(:valid, .is-valid):not(:is(:i
   background-image: none!important;
 }
 
-// For demo purposes
+/*  For demo purposes */
 
 
 iam-std-address-lookup.open-results iam-address-lookup::part(list-wrapper){

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

@@ -2,7 +2,7 @@
 @use 'charts.module' as *;
 @use '../elements/buttons' as *;
 
-// #region Bar chart (Horizontal)
+/* #region Bar chart (Horizontal) */
 :host(.chart--horizontal) .chart__outer {
   tbody {
     --chart-direction: 90deg;
@@ -52,7 +52,7 @@
     min-height: 1.5rem;
 
     td {
-      // part=value
+      /*  part=value */
 
       height: var(--bar-height, 1.5rem);
       bottom: 0;
@@ -64,7 +64,7 @@
     }
 
     td:first-child {
-      // part=xaxis-label
+      /*  part=xaxis-label */
       position: static;
       transform: none;
       display: block !important;
@@ -105,7 +105,7 @@
 
   .chart__wrapper[data-longest-label] table tbody tr td:first-child {
     position: absolute;
-    //transform: translate(-100%, -50%)!important;
+    /* transform: translate(-100%, -50%)!important; */
     display: block !important;
     max-height: 1.5rem;
     z-index: var(--index-above);
@@ -120,9 +120,9 @@
     display: none !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region stacked
+/* #region stacked */
 :host(.chart--stacked) .chart__wrapper {
   table tbody tr {
     --bar-gap: 0;
@@ -157,9 +157,9 @@
     content: none;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region animation
+/* #region animation */
 
 #{'.chart--animate.animating.inview'} {
   --animation-left: 2s;
@@ -189,9 +189,9 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Display data modifier class
+/* #region Display data modifier class */
 :host(.chart--display-data) {
   table tbody tr {
     td:not(:first-child) {
@@ -200,7 +200,7 @@
 
         position: absolute;
         opacity: 1 !important;
-        //z-index: var(--index-above);
+        /* z-index: var(--index-above); */
         bottom: 100%;
         left: 50%;
 
@@ -240,7 +240,7 @@
     padding-top: 1rem;
   }
 }
-// #endregion
+/* #endregion */
 
 :host(.chart--fit-content:not(.chart--horizontal)) {
   width: 100%;
@@ -290,7 +290,7 @@
   }
 }
 
-// #region tooltip
+/* #region tooltip */
 button.tooltip {
   &:after {
     content: '?';
@@ -301,7 +301,7 @@ button.tooltip {
 }
 
 .tooltip__content[popover] {
-  //display: block;
+  /* display: block; */
   z-index: var(--index-floating);
   background: var(--colour-primary);
   color: var(--colour-white);
@@ -311,19 +311,19 @@ button.tooltip {
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
 
   white-space: normal;
-  //transform: none;
-  //inset: auto;
+  /* transform: none; */
+  /* inset: auto; */
 
   position: fixed;
-  //inset-area: bottom center;
-  //position-area: bottom center;
+  /* inset-area: bottom center; */
+  /* position-area: bottom center; */
   border: none;
   margin: 0;
   box-sizing: border-box;
 
-  //top: anchor(bottom);
+  /* top: anchor(bottom); */
 
-  //left: anchor(center);
+  /* left: anchor(center); */
 
   inset-area: bottom center;
 
@@ -344,4 +344,4 @@ button.tooltip {
   }
 }
 
-// #endregion
+/* #endregion */