@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,11 +1,10 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .container.notification__holder {
-
   position: fixed;
   top: var(--nav-height);
   left: 50%;
-  transform: translate(-50%,0);
+  transform: translate(-50%, 0);
   bottom: 0;
   z-index: 999999;
   pointer-events: none;

package/assets/sass/components/notification.scss

@@ -1,17 +1,16 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 :host,
 .iam-notification {
   display: block;
-  padding: rem(22) rem(24) rem(22) rem(24 - 8)!important;
+  padding: rem(22) rem(24) rem(22) rem(24 - 8) !important;
   border-radius: rem(8);
-  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
   margin-bottom: 1rem;
   font-size: rem(15);
-  border: rem(2) solid var(--colour,var(--colour-info));
+  border: rem(2) solid var(--colour, var(--colour-info));
 
-  @include light-mode(){
-      
+  @include light-mode() {
     background: #e9f9fd;
   }
 
@@ -19,37 +18,32 @@
 
   ::slotted(i),
   i {
-    color: var(--colour,currentColor);
+    color: var(--colour, currentColor);
   }
 }
 
 :host([data-type]),
 .iam-notification[data-type] {
-  
   border: rem(2) solid transparent;
 }
 
 :host(.colour-warning),
 .iam-notification.colour-warning {
-
-  background: #FFF6E6;
+  background: #fff6e6;
 }
 
 :host(.colour-danger),
 .iam-notification.colour-danger {
-
   background: #fcebec;
 }
 
 :host(.colour-success),
 .iam-notification.colour-success {
-
   background: #f8fdf6;
 }
 
 :host(.bg-white),
-.iam-notification.bg-white{
-  
+.iam-notification.bg-white {
   border: none;
   border-left: rem(8) solid var(--colour-info);
 
@@ -60,8 +54,8 @@
 }
 
 // Alerts
-:host([data-type="alert"]),
-.iam-notification[data-type="alert"] {
+:host([data-type='alert']),
+.iam-notification[data-type='alert'] {
   border-radius: 0;
   position: fixed;
   top: var(--nav-height);
@@ -72,9 +66,8 @@
 }
 
 // Toasts
-:host([data-type="toast"]),
-.iam-notification[data-type="toast"] {
-  
+:host([data-type='toast']),
+.iam-notification[data-type='toast'] {
   margin: auto;
   display: block;
 
@@ -82,13 +75,11 @@
   max-width: rem(360);
 }
 
-:host([data-type="toast"].notification--dismissable) {
-  
+:host([data-type='toast'].notification--dismissable) {
   max-width: rem(454);
 }
 
 .notification {
-
   container-type: inline-size;
   max-width: rem(1112);
   margin-inline: auto;
@@ -100,7 +91,6 @@
   }
 
   .notification__icon {
-
     margin-inline-end: rem(16);
     flex-grow: 0;
 
@@ -114,9 +104,7 @@
     flex-wrap: wrap;
     flex-grow: 1;
 
-    
     @container (width > 23.4375em) {
-
       flex-wrap: nowrap;
     }
   }
@@ -132,15 +120,13 @@
     flex-shrink: 0;
     --colour-underline: currentColor;
 
-
     ::slotted(a),
     ::slotted(button),
     > * {
-      margin: rem(16) rem(16) 0 0!important;
+      margin: rem(16) rem(16) 0 0 !important;
     }
-    
-    @container (width > 23.4375em) {
 
+    @container (width > 23.4375em) {
       display: flex;
       align-items: center;
       border-left: 1px solid currentColor;
@@ -149,7 +135,7 @@
       ::slotted(a),
       ::slotted(button),
       > * {
-        margin: 0 0 0 rem(32)!important;
+        margin: 0 0 0 rem(32) !important;
       }
     }
   }
@@ -170,7 +156,7 @@
       color: inherit;
 
       &:after {
-        content: "";
+        content: '';
         top: 0;
         left: 0;
         position: absolute;
@@ -191,7 +177,6 @@
     }
 
     @container (width > 23.4375em) {
-      
       padding-left: rem(32);
       display: flex;
       align-items: center;

package/assets/sass/components/pagination.scss

@@ -1,7 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 :host {
-  
   container-type: inline-size;
   display: block;
 }
@@ -10,15 +9,13 @@
   display: block;
 
   @include container-up(sm) {
-
     display: flex;
     align-items: center;
-    justify-content: space-between!important;
+    justify-content: space-between !important;
     padding-top: rem(32);
   }
 
   > div {
-    
     display: flex;
     align-items: center;
   }
@@ -26,14 +23,13 @@
 
 // #region page jump and per page
 .pagination div:is(.page-jump, .per-page) {
-
   border: 1px solid var(--colour-light);
   height: rem(52);
 
   display: none;
   align-items: center;
   padding-inline: 1rem;
-  
+
   .select--minimal {
     height: calc(3.25rem - 1em);
     line-height: calc(3.25rem - 1em);
@@ -41,9 +37,9 @@
     font-weight: bold;
   }
 
-  div:has(> select){
+  div:has(> select) {
     margin-bottom: 0;
-    
+
     &:after {
       top: 50%;
     }
@@ -51,8 +47,7 @@
 }
 
 .page-jump {
-  
-  border-right: none!important;
+  border-right: none !important;
 }
 
 .total-pages {
@@ -61,28 +56,28 @@
 
 :host([data-page-jump][data-minimal]) {
   .page-jump {
-    display: flex!important;
+    display: flex !important;
   }
 }
 @include container-up(sm) {
-:host([data-page-jump]) {
-  .page-jump {
-    display: flex!important;
+  :host([data-page-jump]) {
+    .page-jump {
+      display: flex !important;
+    }
   }
 }
-}
 
 @include container-up(sm) {
   :host([data-per-page]:not([data-page-jump][data-item-count])) {
     .per-page {
-      display: flex!important;
+      display: flex !important;
     }
   }
 }
 @include container-up(md) {
   :host([data-per-page][data-page-jump][data-item-count]) {
     .per-page {
-      display: flex!important;
+      display: flex !important;
     }
   }
 }
@@ -97,14 +92,13 @@
 }
 
 @include container-up(sm) {
-
   .pagination > .item-count {
     display: none;
   }
 
   :host([data-item-count]) {
     .pagination > .item-count {
-      display: flex!important;
+      display: flex !important;
       margin: 0;
     }
   }
@@ -113,7 +107,6 @@
 
 // #region buttons
 *:where(.prev, .next) {
-
   border: 1px solid var(--colour-light);
   line-height: rem(52);
   height: rem(52);
@@ -122,35 +115,33 @@
   background: none;
   padding-inline: 1rem;
   color: var(--colour-body);
-  
-  @include container-up(sm) {
 
+  @include container-up(sm) {
     display: inline-block;
   }
 
   &:after {
     margin-left: 0.5em;
     font-size: 0.8rem;
-    content: "\f054";
-    font-family: "Font Awesome 6 Pro";
-    color:var(--colour-info);
+    content: '\f054';
+    font-family: 'Font Awesome 6 Pro';
+    color: var(--colour-info);
   }
 
-  &:is(:hover,:focus):not(:disabled){
+  &:is(:hover, :focus):not(:disabled) {
     background-color: var(--pagination-link-color);
     color: var(--colour-hover);
   }
 
-  &:is(:active):not(:disabled){
+  &:is(:active):not(:disabled) {
     background-color: var(--pagination-link-color);
     color: var(--colour-active);
   }
 
   &:disabled {
-    
     &:after,
     &:before {
-      color: inherit!important;
+      color: inherit !important;
     }
   }
 }
@@ -160,17 +151,15 @@
     justify-content: flex-end;
 
     @include container-up(sm) {
-
       justify-content: space-between;
     }
   }
-  *:where(.prev, .next){
-    display: inline-block!important;
+  *:where(.prev, .next) {
+    display: inline-block !important;
   }
 }
 
 .prev {
-
   border-right: none;
   &:after {
     display: none;
@@ -178,9 +167,9 @@
   &:before {
     margin-right: 0.5em;
     font-size: 0.8rem;
-    content: "\f053";
-    font-family: "Font Awesome 6 Pro";
-    color:var(--colour-info);
+    content: '\f053';
+    font-family: 'Font Awesome 6 Pro';
+    color: var(--colour-info);
   }
 }
 // #endregion
@@ -197,39 +186,38 @@
     align-items: center;
     justify-content: flex-end;
   }
-  *:is(.mobile-controls,.item-count) {
+  *:is(.mobile-controls, .item-count) {
     display: none;
   }
 }
 
 @include container-up(sm) {
   .mobile-controls {
-    display: none!important;
+    display: none !important;
   }
   :host([data-item-count]) {
     .item-count {
-      display: flex!important;
+      display: flex !important;
     }
   }
 }
 
 .fa-spin {
-  display: none!important;
+  display: none !important;
   font-size: rem(48);
   color: var(--colour-info);
 }
 
 :host([data-loading]) {
-
   .mobile-controls {
     padding-top: rem(32);
   }
   .item-count,
   .mobile-controls > *:not(.fa-spin) {
-    display: none!important;
+    display: none !important;
   }
   .fa-spin {
-    display: block!important;
+    display: block !important;
     margin: auto;
   }
 }

package/assets/sass/components/property-searchbar.scss

@@ -1,8 +1,7 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 // #region Property searchbar
 .property-searchbar {
-
   fieldset {
     position: relative;
 
@@ -11,7 +10,7 @@
       padding-right: 1.5rem;
 
       &:after {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         right: 0.5rem;
@@ -39,7 +38,6 @@
   }
 
   @include media-breakpoint-up(md) {
-
     .row .row {
       .form-label {
         display: none;
@@ -101,7 +99,6 @@
 
 // #region Heror searchbar
 .property-searchbar--hero .property-searchbar {
-
   @include reset-colours();
 
   padding: 1rem;
@@ -113,7 +110,6 @@
   position: relative;
 
   @include media-breakpoint-up(md) {
-
     border-radius: rem(48);
     padding: 1.5rem 2.5rem;
 

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

@@ -1,27 +1,24 @@
-@use "../_func.scss" as *;
-@use "card.module.scss" as *;
+@use '../_func.scss' as *;
+@use 'card.module.scss' as *;
 
 :host {
   --card-head-height: 9rem;
   --card-right-padding: 1rem;
-  
-  background: transparent!important;
+
+  background: transparent !important;
   position: relative;
 }
 
-:host(:is(:hover,:focus,.hover)) {
-
+:host(:is(:hover, :focus, .hover)) {
   --hover-outline-colour-default: var(--colour, var(--colour-primary));
   outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
   outline-offset: -2px;
 }
 
 :host([data-record]) {
-
   .card__head {
-
     &:before {
-      font-family: var(--record-icon-font,"Font Awesome 6 Pro");
+      font-family: var(--record-icon-font, 'Font Awesome 6 Pro');
       font-weight: normal;
       font-size: rem(24);
       content: var(--record-icon);
@@ -36,25 +33,20 @@
       line-height: rem(64);
       width: rem(64);
       text-align: center;
-      transform: translate(-50%,0);
+      transform: translate(-50%, 0);
     }
   }
 }
 
 :host([data-initials]:before) {
-
   content: (data-initials);
   display: block;
 }
-  
-
 
 :host([data-initials]) {
-
   .card__head {
-
     &:before {
-      display: none!important;
+      display: none !important;
     }
   }
 
@@ -75,18 +67,16 @@
     line-height: rem(64);
     width: rem(64);
     text-align: center;
-    transform: translate(-50%,0);
+    transform: translate(-50%, 0);
   }
-
 }
 
 .card__head {
-  background: transparent!important;
+  background: transparent !important;
   position: relative;
   min-height: var(--card-head-height);
 
   .card__avatar {
-
     display: block;
     position: absolute;
     top: auto;
@@ -97,14 +87,13 @@
     line-height: rem(64);
     width: rem(64);
     text-align: center;
-    transform: translate(-50%,0);
+    transform: translate(-50%, 0);
     margin: 0;
     object-fit: cover;
   }
 }
 
 .card__badges {
-  
   position: absolute;
   top: 0;
   text-align: left;
@@ -117,7 +106,8 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical; overflow: hidden;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   overflow: hidden;
   padding-bottom: 0;
   margin-bottom: 0;
@@ -127,78 +117,75 @@
   padding: 0 var(--card-right-padding) 1.5rem var(--card-left-padding);
 }
 
-
-::slotted(span:not(.badge)){
-  display: block!important;
-  font-weight: normal!important;
-  font-size: rem(14)!important;
-  line-height: rem(24)!important;
+::slotted(span:not(.badge)) {
+  display: block !important;
+  font-weight: normal !important;
+  font-size: rem(14) !important;
+  line-height: rem(24) !important;
 }
 
-::slotted(span:not(.badge):not([class*=pt-])) {
+::slotted(span:not(.badge):not([class*='pt-'])) {
   padding-top: 1rem !important;
 }
 
-::slotted(*:not(.badge)){
-  display: block!important;
-  font-weight: normal!important;
-  font-size: rem(14)!important;
-  line-height: rem(24)!important;
+::slotted(*:not(.badge)) {
+  display: block !important;
+  font-weight: normal !important;
+  font-size: rem(14) !important;
+  line-height: rem(24) !important;
 }
 
-
 :host([data-initials]) {
   --record-content: attr(data-initials);
   --record-colour: var(--wider-colour-2);
 }
 
-
-:host([data-record="business"]) {
+:host([data-record='business']) {
   --record-icon: '\f54f';
   --record-colour: var(--wider-colour-2);
 }
-:host([data-record="page"]) {
+:host([data-record='page']) {
   --record-icon: '\f15c';
   --record-colour: var(--wider-colour-3);
 }
-:host([data-record="contact"]) {
-  --record-icon: "\f2b9";
+:host([data-record='contact']) {
+  --record-icon: '\f2b9';
   --record-colour: var(--wider-colour-4);
 }
-:host([data-record="lettings"]) {
-  --record-icon: "\E003";
+:host([data-record='lettings']) {
+  --record-icon: '\E003';
   --record-icon-font: Font Awesome Kit;
   --record-colour: var(--wider-colour-5);
 }
 
-:host([data-record="sales"]) {
-  --record-icon: "\E004";
+:host([data-record='sales']) {
+  --record-icon: '\E004';
   --record-icon-font: Font Awesome Kit;
   --record-colour: var(--wider-colour-7);
 }
-:host([data-record="landlord"]) {
-  --record-icon: "\E001";
+:host([data-record='landlord']) {
+  --record-icon: '\E001';
   --record-icon-font: Font Awesome Kit;
   --record-colour: var(--wider-colour-8);
 }
 
-:host([data-record="contractor"]) {
-  --record-icon: "\f82c";
+:host([data-record='contractor']) {
+  --record-icon: '\f82c';
   --record-colour: var(--wider-colour-9);
 }
 
-:host([data-record="vendor"]) {
-  --record-icon: "\E002";
+:host([data-record='vendor']) {
+  --record-icon: '\E002';
   --record-icon-font: Font Awesome Kit;
   --record-colour: var(--wider-colour-13);
 }
 
-:host([data-record="tenant"]) {
-  --record-icon: "\e1b0";
+:host([data-record='tenant']) {
+  --record-icon: '\e1b0';
   --record-colour: var(--wider-colour-6);
 }
-:host([data-record="sales-applicant"]) {
-  --record-icon: "\E006";
+:host([data-record='sales-applicant']) {
+  --record-icon: '\E006';
   --record-icon-font: Font Awesome Kit;
   --record-colour: var(--wider-colour-10);
 }