@iamproperty/components 7.4.0 → 7.5.1--beta1

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

@@ -5,8 +5,6 @@ $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
 @include layer('components', $layers) {
-
-
   iam-calendar,
   .event-colours {
     --event-colour-1: var(--wider-colour-1);
@@ -21,35 +19,28 @@ $darkMode: 'true' !default;
     --event-colour-10: var(--wider-colour-23);
   }
 
-
   @for $i from 1 to 10 {
-
-    iam-calendar:not(.calendar--multi) [data-event-type-enum="#{$i}"] {
-
+    iam-calendar:not(.calendar--multi) [data-event-type-enum='#{$i}'] {
       --event-colour: var(--event-colour-#{$i});
     }
 
-    iam-calendar.calendar--multi [data-calendar-enum="#{$i}"] {
-
+    iam-calendar.calendar--multi [data-calendar-enum='#{$i}'] {
       --event-colour: var(--event-colour-#{$i});
     }
   }
 
   iam-calendar {
-
     margin-bottom: rem(16);
   }
 
-
   iam-calendar button {
-
     --background-opacity: 100%;
 
     display: block;
     width: 100%;
     //height:  rem(24);
     border: none;
-    border-left: 4px solid color-mix(in srgb, var(--event-colour,var(--wider-colour-1)), black 28%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
     border-radius: 4px;
     padding: rem(4);
 
@@ -63,29 +54,24 @@ $darkMode: 'true' !default;
     position: relative;
     z-index: 1;
 
-
-    background: rgb(from var(--event-colour,var(--wider-colour-1)) r g b / var(--background-opacity));
+    background: rgb(from var(--event-colour, var(--wider-colour-1)) r g b / var(--background-opacity));
 
     &:hover {
-      background: color-mix(in srgb, var(--event-colour,var(--wider-colour-1)), black 10%);
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
     }
     &:active {
-      background: color-mix(in srgb, var(--event-colour,var(--wider-colour-1)), black 20%);
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
     }
 
-
-
     .tooltip__content {
-
       display: none;
     }
 
-
     &:hover .tooltip__content {
       display: block;
       z-index: var(--index-floating);
       position: absolute;
-      
+
       width: rem(250);
       background: var(--colour-primary);
       color: var(--colour-white);
@@ -115,7 +101,6 @@ $darkMode: 'true' !default;
       }
 
       &:after {
-
         content: '';
         position: absolute;
         top: 100%;
@@ -127,35 +112,31 @@ $darkMode: 'true' !default;
         border-color: var(--colour-primary) transparent transparent transparent;
         margin-top: -1px;
       }
-
     }
-
-    
   }
 
   iam-calendar.calendar--multi {
-    background: rgb(from var(--event-colour,var(--wider-colour-8)) r g b / var(--background-opacity));
+    background: rgb(from var(--event-colour, var(--wider-colour-8)) r g b / var(--background-opacity));
 
     &:hover {
-      background: rgb(from var(--event-colour-hover,var(--wider-colour-8-hover)) r g b / var(--background-opacity));
+      background: rgb(from var(--event-colour-hover, var(--wider-colour-8-hover)) r g b / var(--background-opacity));
     }
     &:active {
-      background: rgb(from var(--event-colour-active,var(--wider-colour-8-active)) r g b / var(--background-opacity));
+      background: rgb(from var(--event-colour-active, var(--wider-colour-8-active)) r g b / var(--background-opacity));
     }
   }
 
   iam-calendar[data-hide-confirmed] button:not(.tentative, .cancelled) {
-    display: none!important;
+    display: none !important;
   }
   iam-calendar[data-hide-unconfirmed] button.tentative {
-    display: none!important;
+    display: none !important;
   }
   iam-calendar[data-hide-cancelled] button.cancelled {
-    display: none!important;
+    display: none !important;
   }
 
   iam-calendar button.tentative {
-    
     --background-opacity: 40%;
     border-top: 1px dashed var(--event-colour);
     border-right: 1px dashed var(--event-colour);
@@ -164,7 +145,7 @@ $darkMode: 'true' !default;
     padding-left: 0.5rem;
 
     &:before {
-      content: "";
+      content: '';
       height: 100%;
       width: 4px;
       background-color: var(--event-colour);
@@ -176,7 +157,6 @@ $darkMode: 'true' !default;
   }
 
   iam-calendar button.cancelled {
-
     border-top: 2px solid var(--colour-danger);
     border-right: 2px solid var(--colour-danger);
     border-bottom: 2px solid var(--colour-danger);
@@ -189,21 +169,19 @@ $darkMode: 'true' !default;
       position: absolute;
       top: 0;
       right: rem(4);
-      content: "\f363";
-      font-family: "Font Awesome 6 Pro";
+      content: '\f363';
+      font-family: 'Font Awesome 6 Pro';
       font-weight: 300;
       line-height: rem(26);
     }
   }
 
-
-  iam-calendar[data-view="month"] button {
-
+  iam-calendar[data-view='month'] button {
     margin-bottom: 1px;
 
     > span {
       display: block;
-    height: rem(18);
+      height: rem(18);
       white-space: nowrap;
 
       overflow: hidden;
@@ -227,33 +205,24 @@ $darkMode: 'true' !default;
       white-space: inherit;
     }
       */
-
   }
 
-
-
-
-
-  iam-calendar:is([data-view="week"],[data-view="day"]) button:not(.allday-event) {
-
-
+  iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
     height: var(--event-height, #{rem(17.5)});
-    line-height: rem(18)!important;
-    padding-top: rem(4)!important;
-    white-space: normal!important;
+    line-height: rem(18) !important;
+    padding-top: rem(4) !important;
+    white-space: normal !important;
 
-    display: inline-flex!important; /* keep the inline nature of buttons */
-    align-items: flex-start!important;
-
-    width: var(--event-width, 100%)!important;
-    max-width: var(--event-max-width, 100%)!important;
-    margin-bottom: 0px!important;
+    display: inline-flex !important; /* keep the inline nature of buttons */
+    align-items: flex-start !important;
 
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
+    margin-bottom: 0px !important;
 
     > span:not(.tooltip__content) {
-      
       display: -webkit-box;
-      -webkit-line-clamp: var(--line-clamp,2);
+      -webkit-line-clamp: var(--line-clamp, 2);
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -263,27 +232,21 @@ $darkMode: 'true' !default;
   }
 
   // resize
-  iam-calendar[data-resize]:is([data-view="week"],[data-view="day"]) button:not(.allday-event) {
-    
-    resize: vertical!important;
+  iam-calendar[data-resize]:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
+    resize: vertical !important;
   }
 
-  iam-calendar:is([data-view="week"]) button.allday-event {
-
-          width: var(--event-width, 100%)!important;
-      max-width: var(--event-max-width, 100%)!important;
+  iam-calendar:is([data-view='week']) button.allday-event {
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
   }
 
-
-
-  iam-calendar:is([data-view="week"],[data-view="day"]) button.allday-event {
-
-
+  iam-calendar:is([data-view='week'], [data-view='day']) button.allday-event {
     > span {
       display: block;
       height: rem(18);
       //white-space: nowrap;
-      
+
       overflow: hidden;
 
       text-overflow: ellipsis;
@@ -294,49 +257,38 @@ $darkMode: 'true' !default;
       display: inline-block;
       margin-right: rem(4);
     }
-
   }
 
-  iam-calendar:is([data-view="week"],[data-view="day"]) button.resizing {
-
-    background: black!important;
+  iam-calendar:is([data-view='week'], [data-view='day']) button.resizing {
+    background: black !important;
 
     .tooltip__content {
       opacity: 0;
     }
   }
-  iam-calendar:is([data-view="week"],[data-view="day"]) button:-webkit-drag {
-
+  iam-calendar:is([data-view='week'], [data-view='day']) button:-webkit-drag {
     .tooltip__content {
       opacity: 0;
     }
   }
 
-  iam-calendar:is([data-view="week"],[data-view="day"]) button.continued {
-    display: none!important;
-  } 
-
-
-
+  iam-calendar:is([data-view='week'], [data-view='day']) button.continued {
+    display: none !important;
+  }
 
   // #endregion
 }
 
-
-
-
-
-
 .event-colours option {
   //display: none;
 }
 
-.event-colours option[value="month"]{
+.event-colours option[value='month'] {
   display: flex;
 }
 
-
-.event-colours, .event-colours::picker(select){
+.event-colours,
+.event-colours::picker(select) {
   appearance: base-select;
 }
 
@@ -349,7 +301,7 @@ $darkMode: 'true' !default;
   background-color: transparent;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0.4rem;
     left: 0.4rem;
@@ -358,14 +310,13 @@ $darkMode: 'true' !default;
     background: pink;
     border-radius: 0.5rem;
   }
-
 }
 
 .event-colours::picker-icon {
   display: none;
 }
 
-.event-colours::picker(select){
+.event-colours::picker(select) {
   border-radius: 0.5rem;
   border-color: var(--colour-border);
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
@@ -388,16 +339,16 @@ $darkMode: 'true' !default;
   }
 
   &:hover {
-    background: color-mix(in srgb, var(--event-colour,var(--wider-colour-1)), black 10%);
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
     border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
   }
   &:active {
-    background:  color-mix(in srgb, var(--event-colour,var(--wider-colour-1)), black 20%);
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
     border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0.4rem;
     left: 0.4rem;
@@ -410,63 +361,59 @@ $darkMode: 'true' !default;
 
 .event-colours option:before,
 .event-colours:has(option:checked):before {
-
   background: color-mix(in srgb, var(--event-colour), black 28%);
 }
 
-.event-colours option[value="--wider-colour-1"],
-.event-colours:has(option[value="--wider-colour-1"]:checked) {
-
+.event-colours option[value='--wider-colour-1'],
+.event-colours:has(option[value='--wider-colour-1']:checked) {
   --event-colour: var(--wider-colour-1);
 }
 
-.event-colours option[value="--wider-colour-2"],
-.event-colours:has(option[value="--wider-colour-2"]:checked) {
+.event-colours option[value='--wider-colour-2'],
+.event-colours:has(option[value='--wider-colour-2']:checked) {
   --event-colour: var(--wider-colour-2);
 }
 
-.event-colours option[value="--wider-colour-3"],
-.event-colours:has(option[value="--wider-colour-3"]:checked) {
+.event-colours option[value='--wider-colour-3'],
+.event-colours:has(option[value='--wider-colour-3']:checked) {
   --event-colour: var(--wider-colour-3);
 }
 
-.event-colours option[value="--wider-colour-4"],
-.event-colours:has(option[value="--wider-colour-4"]:checked) {
+.event-colours option[value='--wider-colour-4'],
+.event-colours:has(option[value='--wider-colour-4']:checked) {
   --event-colour: var(--wider-colour-4);
 }
 
-.event-colours option[value="--wider-colour-17"],
-.event-colours:has(option[value="--wider-colour-17"]:checked) {
+.event-colours option[value='--wider-colour-17'],
+.event-colours:has(option[value='--wider-colour-17']:checked) {
   --event-colour: var(--wider-colour-17);
 }
 
-.event-colours option[value="--wider-colour-6"],
-.event-colours:has(option[value="--wider-colour-6"]:checked) {
+.event-colours option[value='--wider-colour-6'],
+.event-colours:has(option[value='--wider-colour-6']:checked) {
   --event-colour: var(--wider-colour-6);
 }
 
-.event-colours option[value="--wider-colour-7"],
-.event-colours:has(option[value="--wider-colour-7"]:checked) {
+.event-colours option[value='--wider-colour-7'],
+.event-colours:has(option[value='--wider-colour-7']:checked) {
   --event-colour: var(--wider-colour-7);
 }
 
-.event-colours option[value="--wider-colour-14"],
-.event-colours:has(option[value="--wider-colour-14"]:checked) {
+.event-colours option[value='--wider-colour-14'],
+.event-colours:has(option[value='--wider-colour-14']:checked) {
   --event-colour: var(--wider-colour-14);
 }
 
-.event-colours option[value="--wider-colour-10"],
-.event-colours:has(option[value="--wider-colour-10"]:checked) {
+.event-colours option[value='--wider-colour-10'],
+.event-colours:has(option[value='--wider-colour-10']:checked) {
   --event-colour: var(--wider-colour-10);
 }
 
-.event-colours option[value="--wider-colour-23"],
-.event-colours:has(option[value="--wider-colour-23"]:checked) {
+.event-colours option[value='--wider-colour-23'],
+.event-colours:has(option[value='--wider-colour-23']:checked) {
   --event-colour: var(--wider-colour-23);
 }
 
-
-
 .event-colours option:checked {
   font-weight: bold;
 }

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

@@ -1,4 +1,6 @@
 @use '../_func' as *;
+@use '../elements/buttons.scss' as *;
+@use '../elements/container.scss' as *;
 
 $darkMode: 'true' !default;
 

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

@@ -0,0 +1,22 @@
+@use '../_func.scss' as *;
+
+$icon-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/></svg>");
+$icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/></svg>");
+
+::slotted(.toggle):after {
+  --icon: #{escape-svg($icon-light)};
+  background: var(--colour-primary-theme);
+  mask-image: var(--icon);
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 50% 50%;
+  z-index: 2;
+}
+
+::slotted(.toggle.dark-theme):after {
+  --icon: #{escape-svg($icon-dark)};
+}

package/assets/sass/components/fileupload.scss

@@ -1,5 +1,23 @@
 @use 'sass:map';
 @use '../_func' as *;
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
+
+
+@include display();
+
+hr {
+    --border-style: solid;
+    --border-color: var(--colour-border);
+    border: 0;
+    color: rgba(0, 0, 0, 0);
+    margin: 0;
+    border-bottom: none;
+    background-color: currentColor;
+    opacity: 1;
+    clear: both;
+}
+
 // #region file upload field
 
 .file-upload {

package/assets/sass/components/header.scss

@@ -1,4 +1,13 @@
 @use '../_func' as *;
+@use '../elements/container.scss' as *;
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+.container {
+    box-sizing: border-box;
+}
 
 :host {
   padding-top: 0 !important;

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

@@ -29,7 +29,7 @@ $darkMode: 'true' !default;
     input,
     textarea,
     select {
-      border: none;
+      border-color: transparent;
       background: none;
       margin-left: -1rem;
       width: calc(100% + 1rem);
@@ -55,16 +55,82 @@ $darkMode: 'true' !default;
 
   // Multi select
 
-  iam-inline-edit:has(iam-multiselect label[slot='checked']) {
+  iam-inline-edit:has(iam-multiselect) {
     --display-btns: none;
+    --display-status: none;
+  }
+
+  *:has(> iam-inline-edit) {
+    position: relative;
+
+    &[data-value]:hover:before {
+      
+      opacity: 1;
+      z-index: 1;
+      position: relative;
+    }
+
+    &[data-value]:before{
+      content: attr(data-value);
+      display: block;
+      padding-inline: 1rem;
+      opacity: 0;
+      white-space: nowrap;
+      font-size: rem(16);
+      line-height: rem(26);
+      pointer-events: none;
+      color: var(--colour-heading);
+    }
+  }
+
+  td:has(> iam-inline-edit) {
+
+    height: 3.5rem;
+  }
+  
+  iam-inline-edit:has(iam-multiselect) {
+    --search-display: none;
+    --input-ms: 0;
+
+    position: absolute;
+    inset: 0.1rem 2rem 0.75rem 0;
+    width: 100%;
+    height: 100%;
+
+    &:focus-within {
+      
+      position: absolute;
+    }
+  }
+
+  td iam-inline-edit:has(iam-multiselect) {
+    width: calc(100% - 2rem);
   }
 
+
   iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
     --display-button: none;
   }
 
+  *:hover > iam-inline-edit iam-multiselect,
+  iam-inline-edit iam-multiselect.hover,
+  iam-inline-edit:focus-within iam-multiselect {
+    --search-display: inline-block;
+  }
+
   iam-inline-edit iam-multiselect .tag[slot='checked'] {
     outline: none;
+    pointer-events: none;
+  }
+
+  iam-inline-edit iam-multiselect.hover .tag[slot='checked'],
+  iam-inline-edit iam-multiselect:hover .tag[slot='checked'],
+  iam-inline-edit iam-multiselect:focus-within .tag[slot='checked'] {
+    display: none;
+  }
+
+  span iam-inline-edit:has(iam-multiselect) {
+    margin-top: -0.6rem;
   }
 
   // Error message

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

@@ -1,7 +1,14 @@
 @use '../_func' as *;
+@use '../elements/buttons--action.scss' as *;
 
 @include display();
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :host {
   max-width: var(--input-max-width, 50rem);
   display: block;