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

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

@@ -24,7 +24,7 @@
   display: block!important;
 }
 
-// #region enable icons
+/* #region enable icons */
 .fa-chevron-up {
   --fa: "\f077";
 }
@@ -58,9 +58,9 @@
     font-family: "Font Awesome 7 Pro";
   }
 }
-// #endregion
+/* #endregion */
 
-// #region basic structure
+/* #region basic structure */
 
 #wrapper {
   container-type: inline-size;
@@ -85,9 +85,9 @@
     display: block!important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region buckets
+/* #region buckets */
 #buckets {
   
   display: block!important;
@@ -125,9 +125,9 @@
     padding: 0;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region item
+/* #region item */
 #items [data-bucket] {
   
   display: block;
@@ -174,9 +174,9 @@
     display: inline-block;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region criteria
+/* #region criteria */
 .criteria {
   display: flex;
   gap: 1rem;
@@ -198,11 +198,11 @@
     flex-grow: 0;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region expand criteria
+/* #region expand criteria */
 .bucket__wrapper:not(.bucket--expanded) {
-  > label > span { // TODO add a selector if the input matches the only criteria item
+  > label > span { /*  TODO add a selector if the input matches the only criteria item */
     display: none;
   }
   .criteria {
@@ -219,9 +219,9 @@
     --fa: "\e0a6";
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Disable top and bottom buttons
+/* #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"],
@@ -232,4 +232,4 @@
   pointer-events: none;
 }
 
-// #endregion
+/* #endregion */

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

@@ -16,7 +16,7 @@
   order: 1;
 }
 
-// #region chart key
+/* #region chart key */
 .chart__key {
   --key-border-radius: 50%;
   order: 2;
@@ -33,10 +33,10 @@
     background: transparent !important;
   }
 }
-// #endregion
+/* #endregion */
 
 
-// #region Horizontal
+/* #region Horizontal */
 :host(.chart--horizontal) {
   .chart__outer {
     flex-direction: row;
@@ -78,9 +78,9 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region doughnut chart
+/* #region doughnut chart */
 :host(.chart--lg) {
   --doughnut-size: 17.875rem; /* 286 */
 }
@@ -203,4 +203,4 @@
     }
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/fileupload.scss

@@ -17,7 +17,7 @@ hr {
     clear: both;
 }
 
-// #region file upload field
+/* #region file upload field */
 
 .file-upload {
   max-width: 25rem !important; /* 400 */
@@ -28,7 +28,7 @@ hr {
   }
 
   .file-upload__title {
-    margin-top: 0; // 1
+    margin-top: 0; /*  1 */
     margin-bottom: 0;
     font-family: var(--font-heading);
     font-style: normal;
@@ -58,7 +58,7 @@ hr {
     font-size: var(--input-fs, 1rem);
     line-height: var(--input-lh, 1.25rem);
     border: 2px solid var(--colour-primary-theme);
-    appearance: none; // Fix appearance for date inputs in Safari
+    appearance: none; /*  Fix appearance for date inputs in Safari */
     border-radius: 0.5rem;
     margin-bottom: 1rem;
     color: var(--colour-primary);
@@ -159,4 +159,4 @@ hr {
     opacity: 0;
   }
 }
-// #endregion
+/* #endregion */

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

@@ -63,7 +63,7 @@
   margin: 0 0 0.5rem 0 !important;
 }
 
-// #region card with a flag
+/* #region card with a flag */
 :host(.card--flag) {
   position: relative;
 
@@ -82,9 +82,9 @@
     color: var(--colour, var(--colour-primary));
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Show total number
+/* #region Show total number */
 .card__body:has(.card__total) {
   --card-head-top-padding: 2rem;
   --card-head-bottom-padding: 2rem;
@@ -96,4 +96,4 @@
   order: -1;
 }
 
-// #endregion
+/* #endregion */

package/assets/sass/components/header.scss

@@ -21,17 +21,12 @@
 .header-banner {
   padding-top: 2.75rem; /* 44*/
   max-width: 120rem; /* 1920 */
-  //min-height: 25rem; /* 400 */
   margin-inline: auto;
   display: block;
 
   position: relative;
   height: auto;
 
-  @media screen and (min-width: 62em) {
-    //padding-top: 5.25rem; /* 84 */
-  }
-
   > .picture-overflow {
     overflow: hidden;
     position: absolute;
@@ -84,7 +79,7 @@
   }
 }
 
-// Web component CSS
+/*  Web component CSS */
 ::slotted(.breadcrumb) {
   margin-top: 1.5rem !important;
   margin-bottom: -0.5rem !important;
@@ -97,11 +92,11 @@
 }
 
 ::slotted(*:not(.btn__group):last-child) {
-  //padding-bottom: 0 !important;
-  //margin-bottom: 0 !important;
+  /* padding-bottom: 0 !important; */
+  /* margin-bottom: 0 !important; */
 }
 
-// #region Breadcrumbs
+/* #region Breadcrumbs */
 :host(.has-breadcrumbs) {
 
   .header-banner {
@@ -112,9 +107,9 @@
     margin-bottom: 2rem!important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region badge
+/* #region badge */
 
 slot[name="badge"] {
   display: block;
@@ -122,9 +117,9 @@ slot[name="badge"] {
   top: 0;
   left: 0;
 }
-// #endregion
+/* #endregion */
 
-// #region panel 
+/* #region panel  */
 :host(.has-panel) [name="panel"]{
 
   display: block;
@@ -194,10 +189,10 @@ slot[name="badge"] {
     text-align: center;
   }
 }
-// #endregion
+/* #endregion */
 
 
-// #region toolbox 
+/* #region toolbox  */
 :host(.has-toolbox) {
 
   margin-bottom: 4rem;
@@ -236,9 +231,9 @@ slot[name="badge"] {
   height: 2.5rem !important;
 }
 
-// #endregion
+/* #endregion */
 
-// #region gradient background
+/* #region gradient background */
 .gradient-overflow {
   overflow: hidden;
   position: absolute;
@@ -253,4 +248,4 @@ slot[name="badge"] {
   width: 54rem; /* 874px */
   aspect-ratio: 1 / 1;
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/inline-edit.preload.scss

@@ -22,7 +22,7 @@
     --display-status: none;
   }
 
-  // Inactive state
+  /*  Inactive state */
   iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
     --display-btns: none;
 
@@ -43,7 +43,7 @@
     --display-btns: none;
   }
 
-  // Hover state
+  /*  Hover state */
   iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
     input,
     textarea,
@@ -53,7 +53,7 @@
     }
   }
 
-  // Multi select
+  /*  Multi select */
 
   iam-inline-edit:has(iam-multiselect) {
     --display-btns: none;
@@ -133,7 +133,7 @@
     margin-top: -0.6rem;
   }
 
-  // Error message
+  /*  Error message */
 
   iam-inline-edit.was-validated
     label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
@@ -154,7 +154,7 @@
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   }
 
-  // #region preview element
+  /* #region preview element */
 
   iam-inline-edit:has(.preview) {
     position: relative;
@@ -199,5 +199,5 @@
     }
   }
 
-  // #endregion
+  /* #endregion */
 }

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

@@ -19,7 +19,7 @@
 }
 
 :host(:not(.mb-0)) {
-  //margin-bottom: 1.5rem;
+  /* margin-bottom: 1.5rem; */
 }
 
 ::slotted(input) {
@@ -37,7 +37,7 @@
   border-end-end-radius: 0!important;
 }
 
-// #region colors
+/* #region colors */
 ::slotted(input[type='color']) {
   width: 3rem !important;
   flex-shrink: 0 !important;
@@ -59,15 +59,15 @@
   border-start-start-radius: 0 !important;
   margin: 0 !important;
 }
-// #endregion
+/* #endregion */
 
-// #region 
+/* #region  */
 @layer elements {
 ::slotted(select:is([slot="prefix"],[slot="suffix"])){
 
   --option-colour: red;
 
-  //--input-padding-block: 0;
+  /* --input-padding-block: 0; */
 
   margin: 0!important;
 
@@ -78,7 +78,7 @@
   
   margin-right: 0rem !important;
   border: none !important;
-  //color: white;
+  /* color: white; */
   height: 100%!important;
   max-height: 100%!important;
   min-height: 100%!important;
@@ -94,7 +94,7 @@
   field-sizing: content!important;
 }
 }
-// #endregion
+/* #endregion */
 
 
 .suffix[role="button"] {

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

@@ -1,7 +1,7 @@
 @use '../_func' as *;
 
 :host {
-  //all: unset;
+  /* all: unset; */
   inset: auto;
   top: anchor(bottom);
   left: anchor(left);
@@ -58,7 +58,7 @@
 }
 
 ::slotted(*:is(button, a, label, span)) {
-  //all: unset !important;
+  /* all: unset !important; */
   background: unset !important;
   border: unset !important;
   color: var(--colour-primary) !important;
@@ -88,7 +88,7 @@
   margin-bottom: 0 !important;
 }
 
-// Radio buttons
+/*  Radio buttons */
 
 ::slotted(*:is(label)) {
   --radio-size: 1.25rem;
@@ -103,7 +103,7 @@
   padding-left: 2.25rem; /* 36 */
 }
 
-// States
+/*  States */
 
 ::slotted(*:is(button, a, label):is(.selected)) {
   background: #e9f8fc !important;
@@ -120,7 +120,7 @@
 }
 
 ::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
-  //all: unset !important;
+  /* all: unset !important; */
   background: var(--colour-light) !important;
   border-radius: 0.25rem !important;
 }
@@ -144,7 +144,7 @@
   padding: 0 !important;
 }
 
-// #region sub menu
+/* #region sub menu */
 ::slotted(iam-menu:not([popover])) {
   border: none !important;
   border-radius: 0 !important;
@@ -158,33 +158,4 @@
   top: anchor(top);
   left: calc(anchor(right) + 1rem);
 }
-// #endregion
-
-/*
-
-::slotted([popovertarget]):before {
-  text-align: center;
-  display: inline-block !important;
-  vertical-align: bottom;
-  float: right;
-  color: inherit;
-  height: 1em;
-  width: 1em;
-}
-::slotted([popovertarget]:not([class*='fa-'])):before {
-  content: '' !important;
-  height: 1.2em;
-  width: 1.2em;
-  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");
-  background: var(--menu-after-bg, currentColor) !important;
-  mask-image: var(--menu-down-icon, var(--icon-arrow));
-  mask-size: 50%;
-  mask-repeat: no-repeat;
-  mask-position: 50% 50%;
-  -webkit-mask-image: var(--menu-down-icon, var(--icon-arrow));
-  -webkit-mask-size: 50%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: 50% 50%;
-  z-index: 2;
-}
-*/
+/* #endregion */

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

@@ -17,7 +17,7 @@
     width: 1.25rem;
   }
 
-  // #region sub menu
+  /* #region sub menu */
 
   iam-menu > button:has(+ iam-menu) {
     position: relative;
@@ -78,5 +78,5 @@
   iam-menu > button + iam-menu:not([popover]) > *:is(button, a, label) {
     padding-left: 2rem;
   }
-  // #endregion
+  /* #endregion */
 }

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

@@ -21,11 +21,11 @@
 
 @layer components {
   dialog[open] {
-    //overflow-y: hidden;
+    /* overflow-y: hidden; */
     width: 90vw;
     max-width: 20.25rem; /* col-width*4 324px */
 
-    //height: 90vh;
+    /* height: 90vh; */
     max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
     overflow-y: hidden;
@@ -87,7 +87,7 @@
     }
 
 
-    // Close button
+    /*  Close button */
     > button:first-child {
 
       position: absolute;
@@ -120,8 +120,8 @@
       display: none;
     }
   }
-  // Size variants
-  // small
+  /*  Size variants */
+  /*  small */
   @media screen and (min-width: 36em) {
 
     :host(.modal--sm) dialog[open] {
@@ -141,7 +141,7 @@
     }
   }
 
-  // large
+  /*  large */
   @media screen and (min-width: 36em) {
 
     :host(.modal--lg) dialog[open] {
@@ -195,7 +195,7 @@
     margin-bottom: 0!important;
   }
 
-  // #region transactional
+  /* #region transactional */
   :host(:is([data-type="transactional"],[data-type="acknowledgement"])) dialog[open] {
     text-align: center;
 
@@ -248,6 +248,6 @@
       display: none;
     }
   }
-  // #endregion
+  /* #endregion */
 
 }

package/assets/sass/components/multi-step-modal.component.scss

@@ -11,22 +11,22 @@
   box-sizing: border-box;
 }
 
-// #region Multi
+/* #region Multi */
 
 dialog[open] {
   --dialog-padding: 1.5rem;
   box-sizing: border-box;
   padding-top: calc(var(--dialog-padding) * 4);
-  //display: block;
-  //position: relative;
-  //margin-right: 0 !important;
-  //min-height: 100%;
+  /* display: block; */
+  /* position: relative; */
+  /* margin-right: 0 !important; */
+  /* min-height: 100%; */
   padding-left: var(--dialog-padding);
 
   @media screen and (min-width: 62em) {
     padding-top: var(--dialog-padding);
     padding-left: calc(var(--dialog-padding) + 17.625rem) !important;
-    //display: flex;
+    /* display: flex; */
     flex-direction: column;
   }
 }
@@ -42,7 +42,7 @@ dialog[open] {
 
 
 
-// #region Multi step modal
+/* #region Multi step modal */
 
   dialog[open] {
     padding: 6rem 1.5rem 0 1.5rem;
@@ -87,9 +87,9 @@ dialog[open] {
   
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region mobile fullwidth view For multi step modal
+  /* #region mobile fullwidth view For multi step modal */
   @media screen and (max-width: 36em) {
     dialog[open] {
       min-width: 100%;
@@ -127,7 +127,7 @@ dialog[open] {
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
 
 
@@ -139,7 +139,7 @@ dialog[open] {
 
 
 
-// #region steps
+/* #region steps */
 .steps {
   width: 100%;
   position: absolute;
@@ -252,4 +252,4 @@ dialog[open] {
     }
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/multi-step-modal.global.scss

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-// #region Multi step modal
+/* #region Multi step modal */
 @layer components {
   iam-multi-step-modal {
     
@@ -89,4 +89,4 @@
     }
   }
 }
-  // #endregion
+  /* #endregion */

package/assets/sass/components/multi-step.component.scss

@@ -8,7 +8,7 @@
   box-sizing: border-box;
 }
 
-// #region Multi
+/* #region Multi */
 
 :host {
   --dialog-padding: 1.5rem;
@@ -28,7 +28,7 @@
   }
 }
 
-// #region steps
+/* #region steps */
 .steps {
   width: 100%;
   position: absolute;
@@ -141,4 +141,4 @@
     }
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/multiselect.scss

@@ -150,7 +150,7 @@
     }
   }
 
-  // Inline edit
+  /*  Inline edit */
   :host-context(:focus-within) {
     input {
       background-color: none !important;