@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,4 +1,4 @@
-@use "../_func" as *;
+@use '../_func' as *;
 // Host
 :host {
   --colour-border: #e9e9e9;
@@ -6,18 +6,17 @@
   grid-column: full-width;
 
   @include light-mode() {
-            
     --side-link-hover: #eeeeee;
   }
 
   display: block;
   min-height: calc(100vh - var(--nav-height));
-  padding-top: 0!important;
+  padding-top: 0 !important;
   margin-inline: auto;
   width: 100%;
   overflow: hidden;
   position: relative;
- 
+
   @include media-breakpoint-up(md) {
     max-height: calc(100vh - var(--nav-height));
     overflow: auto;
@@ -27,13 +26,12 @@
 .container {
   position: static;
   min-height: 100%;
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-  padding-left: 0!important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
 
   @include media-breakpoint-up(md) {
-
-    padding-left: 5.25rem!important;
+    padding-left: 5.25rem !important;
   }
 }
 
@@ -50,7 +48,7 @@
   transition: width 1s;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     right: 0;
@@ -59,13 +57,11 @@
   }
 
   @include media-breakpoint-up(sm) {
-
     left: 0;
     width: rem(40);
-  }  
+  }
 
   @include media-breakpoint-up(md) {
-
     left: rem(84);
     margin-left: #{rem(-84)};
     position: fixed;
@@ -74,8 +70,8 @@
     &:not(.open).hover {
       width: rem(304);
 
-      .btn[class*=fa-]:before {
-        content: "\f023" !important;
+      .btn[class*='fa-']:before {
+        content: '\f023' !important;
       }
     }
   }
@@ -92,10 +88,10 @@
     z-index: 99;
     color: var(--colour-primary-theme);
 
-    &[aria-expanded]{
-       // Change icon
-      &[class*=fa-]:before {
-        content: "\f053"!important;
+    &[aria-expanded] {
+      // Change icon
+      &[class*='fa-']:before {
+        content: '\f053' !important;
       }
 
       @include media-breakpoint-up(md) {
@@ -104,8 +100,7 @@
     }
   }
 
-  &:is(:hover,:focus-within,:active) .btn {
-    
+  &:is(:hover, :focus-within, :active) .btn {
     border: 2px solid var(--colour-border);
     color: var(--colour-primary-theme);
 
@@ -115,17 +110,14 @@
   }
 
   &:is(.open) {
-
     width: calc(100% - var(--container-padding-x));
 
     @include media-breakpoint-up(sm) {
-
       width: rem(382);
-    }  
+    }
     @include media-breakpoint-up(md) {
-
       width: rem(304);
-    }  
+    }
   }
 
   // Content
@@ -145,28 +137,25 @@
     .h3 {
       padding-left: rem(24);
     }
-      
-    @include media-breakpoint-up(sm) {
 
+    @include media-breakpoint-up(sm) {
       .h3 {
         padding-left: rem(40);
       }
 
       width: rem(382);
-    }  
+    }
     @include media-breakpoint-up(md) {
-
       width: rem(304);
 
-      .h3{
+      .h3 {
         padding-left: var(--container-padding-x-md);
       }
-    }  
+    }
   }
 
   &:not(.hover):not(.open) .side-menu-content.closed {
-    
-      display: none;
+    display: none;
   }
 
   &.open .side-menu-content {
@@ -174,88 +163,79 @@
   }
 
   @include media-breakpoint-up(md) {
-
     &.hover .side-menu-content {
       opacity: 1;
     }
-  }  
+  }
 }
 
 // Links
-::slotted(*[slot="menu"]) {
+::slotted(*[slot='menu']) {
   padding-left: rem(24);
 
-
-
-  
   @include media-breakpoint-up(sm) {
     padding-left: rem(40);
   }
-  
+
   @include media-breakpoint-up(md) {
     padding-left: var(--container-padding-x-md);
   }
 }
 
 ::slotted(hr) {
-  border-bottom: 2px solid var(--colour-border)!important;
-  margin-right: rem(-40)!important;
+  border-bottom: 2px solid var(--colour-border) !important;
+  margin-right: rem(-40) !important;
 }
 
-::slotted(a[slot="menu"]) {
+::slotted(a[slot='menu']) {
   display: block;
 
-  display: block!important;
-  line-height: rem(20)!important;
-  padding: rem(16) rem(40) rem(16) rem(24)!important;
-  margin: 0!important;
+  display: block !important;
+  line-height: rem(20) !important;
+  padding: rem(16) rem(40) rem(16) rem(24) !important;
+  margin: 0 !important;
   flex-shrink: 0;
-  font-size: 1rem!important;
-  font-weight: normal!important;
+  font-size: 1rem !important;
+  font-weight: normal !important;
   text-decoration: none;
 
-  border-bottom: 2px solid var(--colour-border)!important;
+  border-bottom: 2px solid var(--colour-border) !important;
+
+  margin-right: rem(-40) !important;
 
-  margin-right: rem(-40)!important;
-  
   @include media-breakpoint-up(sm) {
-    padding-left: rem(40)!important;
+    padding-left: rem(40) !important;
   }
 
   @include media-breakpoint-up(md) {
-    padding-left: var(--container-padding-x-md)!important;
+    padding-left: var(--container-padding-x-md) !important;
   }
   &:after {
     display: none;
   }
 
-  
-  border-right: 2px solid var(--colour-border)!important;
+  border-right: 2px solid var(--colour-border) !important;
 }
 
-::slotted(a[slot="menu"]:where(:hover,:focus,[aria-expanded])) {
-
-  background-color: var(--side-link-hover)!important;
+::slotted(a[slot='menu']:where(:hover, :focus, [aria-expanded])) {
+  background-color: var(--side-link-hover) !important;
 }
 
-::slotted(a[slot="menu"]:active) {
-
-  background-color: var(--side-link-hover)!important;
-  font-weight: bold!important;
+::slotted(a[slot='menu']:active) {
+  background-color: var(--side-link-hover) !important;
+  font-weight: bold !important;
 }
 
-::slotted(a[slot="menu"][aria-expanded]) {
-
-  background-color: var(--side-link-hover)!important;
-  font-weight: bold!important;
-  margin-right: #{rem(-40)}!important;
+::slotted(a[slot='menu'][aria-expanded]) {
+  background-color: var(--side-link-hover) !important;
+  font-weight: bold !important;
+  margin-right: #{rem(-40)} !important;
   position: relative;
 
-  border-right: 2px solid var(--colour-info)!important;
-
+  border-right: 2px solid var(--colour-info) !important;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     right: 0;
@@ -265,9 +245,7 @@
     border-right: 2px solid var(--colour-info);
     margin-right: -2px;
 
-        
     @media (forced-colors: active) {
-
       border-right: 10px solid var(--colour-info);
     }
   }
@@ -276,46 +254,39 @@
 
 // #region main content
 .main-content {
-
   padding-top: rem(24);
   padding-left: rem(60);
 
-  
   @include media-breakpoint-up(sm) {
-
     padding-left: rem(80);
-  }  
+  }
 
   @include media-breakpoint-up(md) {
-
-    padding-top: rem(40)!important;
+    padding-top: rem(40) !important;
     padding-left: 0;
-  }  
+  }
 
   > span.h3 {
     padding-top: 0.75rem;
 
     border-bottom: 2px solid var(--colour-border);
-    margin-bottom: rem(40)!important;
+    margin-bottom: rem(40) !important;
 
     @include media-breakpoint-up(md) {
-
       display: none;
-    }  
+    }
   }
 }
 
-::slotted(.main-content__title){
-
+::slotted(.main-content__title) {
   border-bottom: 2px solid var(--colour-border);
-  margin-bottom: rem(40)!important;
-  max-width: 100%!important;
+  margin-bottom: rem(40) !important;
+  max-width: 100% !important;
   display: block;
 }
 
 @include media-breakpoint-up(md) {
-
-  ::slotted(.main-content__title){ 
+  ::slotted(.main-content__title) {
     display: none;
   }
 }
@@ -324,10 +295,8 @@
 
 // #region Desktop open state
 @include media-breakpoint-up(md) {
-
-
   .container:has(.side-menu.open) {
-    padding-left: 2rem!important;
+    padding-left: 2rem !important;
     margin-left: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
     margin-right: 0;
     max-width: min(var(--container-max-width), 100% - 19rem);
@@ -335,10 +304,8 @@
 }
 // #endregion
 
-
 @include media-breakpoint-up(md) {
-
-:host([open-always]){
-  --btn-display: none;
+  :host([open-always]) {
+    --btn-display: none;
+  }
 }
-}

package/assets/sass/components/fileupload.scss

@@ -1,8 +1,8 @@
-@use "../_func" as *;
+@use '../_func' as *;
 // #region file upload field
 
 .file-upload {
-  max-width: rem(400)!important;
+  max-width: rem(400) !important;
   padding-bottom: rem(16);
 
   .drop-area > input {
@@ -21,9 +21,9 @@
     display: block;
     padding-bottom: 2rem;
 
-    font-size: rem(map-get($heading-sizes,"h4_fs"));
-    line-height: rem(map-get($heading-sizes,"h4_lh"));
-    padding-bottom: rem(map-get($heading-sizes,"h4_pb"));
+    font-size: rem(map-get($heading-sizes, 'h4_fs'));
+    line-height: rem(map-get($heading-sizes, 'h4_lh'));
+    padding-bottom: rem(map-get($heading-sizes, 'h4_pb'));
     max-width: var(--content-max-width);
   }
 
@@ -33,7 +33,6 @@
 }
 
 .files {
-
   span {
     display: block;
     width: 100%;
@@ -45,23 +44,21 @@
     border-radius: rem(8);
     margin-bottom: rem(16);
     color: var(--colour-primary);
-    border-color: #D8D8D8;
-    background: #D8D8D8;
-    max-width: rem(400)!important;
+    border-color: #d8d8d8;
+    background: #d8d8d8;
+    max-width: rem(400) !important;
     position: relative;
 
-    
     @media (forced-colors: active) {
-
       padding-right: 5rem;
 
       button {
         padding: 0;
-        width: 3.7rem!important;
+        width: 3.7rem !important;
         text-indent: 0% !important;
 
         &:after {
-          display: none!important;
+          display: none !important;
         }
       }
     }
@@ -79,7 +76,7 @@
       background: transparent;
 
       &:after {
-        content: "";
+        content: '';
         top: 0;
         left: 0;
         position: absolute;
@@ -102,12 +99,10 @@
 }
 
 :host(.fileupload--drag-drop) .file-upload {
-  
-  max-width: rem(800)!important;
-  
-  .helper-text {
+  max-width: rem(800) !important;
 
-    max-width: rem(800)!important;
+  .helper-text {
+    max-width: rem(800) !important;
   }
 
   .drop-area > input {
@@ -123,7 +118,6 @@
     margin-bottom: 1rem;
 
     &.focus {
-      
       border: 2px solid var(--colour-info);
     }
   }
@@ -133,17 +127,17 @@
   }
 
   .drop-area::before {
-    content: "Drag and drop files here or click to upload";
+    content: 'Drag and drop files here or click to upload';
     position: absolute;
     inset: rem(24) rem(32) rem(24) rem(32);
     z-index: 1;
     pointer-events: none;
   }
-  
+
   ::file-selector-button {
     position: absolute;
     inset: 0;
     opacity: 0;
   }
 }
-// #endregion
+// #endregion

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

@@ -1,15 +1,13 @@
-@use "../_func.scss" as *;
-@use "card.module.scss" as *;
+@use '../_func.scss' as *;
+@use 'card.module.scss' as *;
 
 :host {
-
   --top-padding: #{rem(24)};
   --right-padding: 1rem;
   --bottom-padding: #{rem(24)};
   --left-padding: 1rem;
 
-  &:has(.card__total) .card__body{
-
+  &:has(.card__total) .card__body {
     align-items: center;
     display: flex;
   }
@@ -25,33 +23,30 @@
   }
 
   .icon {
-    font-size: rem(18)!important;
-    height: rem(18)!important;
-    margin: 0 0 0.5rem 0!important;
-    font-weight: 400!important;
-    display: block!important;
+    font-size: rem(18) !important;
+    height: rem(18) !important;
+    margin: 0 0 0.5rem 0 !important;
+    font-weight: 400 !important;
+    display: block !important;
   }
-    
+
   .card__total {
     margin-top: 0;
     order: -1;
   }
 }
 
-
-:host(:is(:hover,:focus,.hover)) {
-
+:host(:is(:hover, :focus, .hover)) {
   outline: none;
-    
-  :is(.card__body,.card__footer) {
-    background: #EEEEEE;
+
+  :is(.card__body, .card__footer) {
+    background: #eeeeee;
   }
 }
 
 :host-context(:is(:checked, .checked)),
 :host(:is(:active, .active)) {
-
-  outline: 2px solid var(--colour,var(--colour-primary));
+  outline: 2px solid var(--colour, var(--colour-primary));
   outline-offset: -2px;
 
   .card__body {
@@ -62,21 +57,19 @@
   }
 }
 
-
 ::slotted(i) {
   display: block !important;
-  font-size: rem(18)!important;
-  margin: 0 0 0.5rem 0!important;
+  font-size: rem(18) !important;
+  margin: 0 0 0.5rem 0 !important;
 }
 
-
-// #region card with a flag 
+// #region card with a flag
 :host(.card--flag) {
   position: relative;
-  
+
   &:after {
-    content: var(--card-flag-icon, "\f024");
-    font-family: "Font Awesome 6 Pro";
+    content: var(--card-flag-icon, '\f024');
+    font-family: 'Font Awesome 6 Pro';
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -103,4 +96,4 @@
   order: -1;
 }
 
-// #endregion
+// #endregion

package/assets/sass/components/header.scss

@@ -1,18 +1,17 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
-:host{
-  padding-top: 0!important;
+:host {
+  padding-top: 0 !important;
   margin-bottom: rem(32);
-  background-color: transparent!important;
-  display: block!important;
+  background-color: transparent !important;
+  display: block !important;
 }
 
 .header-banner {
-  
   padding-top: rem(44);
 
   max-width: rem(1920);
-  
+
   min-height: rem(400);
   margin-inline: auto;
   display: block;
@@ -25,7 +24,6 @@
   height: auto;
 
   > picture {
-  
     display: block;
     position: absolute;
     top: 0;
@@ -38,31 +36,28 @@
     max-height: rem(400);
 
     &:after {
-      content: "";
+      content: '';
       display: block;
       position: absolute;
       z-index: -1;
       inset: 0;
-      background: linear-gradient(300deg, rgba(30,190,230,1) 0%, rgba(0,49,60,1) 100%);
+      background: linear-gradient(300deg, rgba(30, 190, 230, 1) 0%, rgba(0, 49, 60, 1) 100%);
       opacity: 0.85;
     }
 
     img {
-        display: block;
-        position: absolute;
-        z-index: -2;
-        inset: 0;
-        object-fit: cover;
-        object-position: 50% 50%;
-        width: 100%;
-        height: 100%;
+      display: block;
+      position: absolute;
+      z-index: -2;
+      inset: 0;
+      object-fit: cover;
+      object-position: 50% 50%;
+      width: 100%;
+      height: 100%;
     }
   }
-
-  
 }
 
-
 :host(.header--contain) {
   .header-banner {
     padding-bottom: 2rem;
@@ -72,27 +67,19 @@
   }
 }
 
-
-
-
-
-
-
-
-
 // Web component CSS
-::slotted(.breadcrumb){
-  margin-top: rem(24)!important;
-  margin-bottom: -0.5rem!important;
+::slotted(.breadcrumb) {
+  margin-top: rem(24) !important;
+  margin-bottom: -0.5rem !important;
 
   @include media-breakpoint-up(md) {
-    position: absolute!important;
-    top: 0!important;
-    left: 5.25rem!important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 5.25rem !important;
   }
 }
 
 ::slotted(*:last-child) {
-  padding-bottom: 0!important;
-  margin-bottom: 0!important;
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
 }