@iamproperty/components 5.6.1-beta2 → 5.6.1-beta21

package/assets/sass/_components.scss

@@ -40,4 +40,58 @@ iam-search .optional-text {
   .tabs {
     --tabs-gradient: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
   }
+}
+
+// Table dark mode support
+iam-table {
+
+  tbody tr {
+    
+    @include dark-mode(){
+      
+      --hover-background: var(--colour-canvas);
+
+      &:is(:hover,:focus-within,.hover) {
+        background: var(--row-bg);
+      }
+    }
+  }
+}
+
+@container (width > 23.4375em) {
+
+  iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
+
+    tr > *:not(:first-child):last-child {
+
+      @media screen and (prefers-color-scheme: dark) {
+        
+        background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+      }
+    }
+  }
+}
+
+iam-table {
+
+  tr:has([type="checkbox"]:checked){
+
+    @include dark-mode(){
+      --row-bg: #000000;
+    }
+  }
+}
+
+iam-pagination {
+  --pagination-link-color: var(--colour-light);
+  --pagination-link-color-active: #E0E0E0;
+}
+
+iam-fileupload::part(file) {
+  @include dark-mode() {
+
+    background: var(--colour-canvas-2);
+    border-color: var(--colour-canvas-2);
+    color: var(--colour-body);
+  }
 }

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

@@ -7,6 +7,10 @@ input[name="postcode"] {
   border-color: var(--error-border,var(--colour-primary))!important;
 }
 
+:is([name="postcode"]):is(:focus,.focus):not(:disabled) {
+  border-color: var(--colour-info)!important;
+}
+
 div:has(input[name="postcode"]) .suffix {
 
   border-color: var(--error-border,var(--colour-primary))!important;

package/assets/sass/components/card.scss

@@ -418,15 +418,102 @@
 
 //#region Record card 
 
-.card--record{
+
+
+.card--record:has(.card__head) {
   --img-height: 40%;
 
   &:before,
   &:after {
     display: none;
   }
+
+  .card__head {
+    background: transparent;
+    position: relative;
+
+  }
+}
+
+:host([data-record="business"]) {
+  --record-icon: '\f54f';
+  --record-colour: var(--wider-colour-2);
+}
+:host([data-record="page"]) {
+  --record-icon: '\f15c';
+  --record-colour: var(--wider-colour-3);
+}
+:host([data-record="contact"]) {
+  --record-icon: "\f2b9";
+  --record-colour: var(--wider-colour-4);
+}
+:host([data-record="lettings"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-5);
+}
+
+:host([data-record="sales"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-7);
+}
+:host([data-record="landlord"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-8);
+}
+
+:host([data-record="contractor"]) {
+  --record-icon: "\f82c";
+  --record-colour: var(--wider-colour-9);
+}
+
+:host([data-record="vendor"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-13);
+}
+
+:host([data-record="tenant"]) {
+  --record-icon: "\e1b0";
+  --record-colour: var(--wider-colour-6);
+}
+:host([data-record="sales-applicant"]) {
+  --record-icon: "";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-10);
+}
+
+:host([data-record]) .card--record:has(.card__head) {
+
+  .card__head {
+    background: transparent;
+    position: relative;
+
+    &:before {
+      font-family: var(--record-icon-font,"Font Awesome 6 Pro");
+      font-weight: normal;
+      font-size: rem(24);
+      content: var(--record-icon);
+      display: block;
+      position: absolute;
+      top: auto;
+      left: 50%;
+      bottom: 0;
+      background-color: var(--record-colour);
+      border-radius: 50%;
+      height: rem(64);
+      line-height: rem(64);
+      width: rem(64);
+      text-align: center;
+      transform: translate(-50%,0);
+    }
+
+  }
 }
 
+
 slot[name="btns"] {
   display: flex;
   flex-direction: row;

package/assets/sass/components/carousel.scss

@@ -130,18 +130,39 @@
 
 // #region carousel controls/pips
 .carousel .carousel__controls {
-
-  text-align: center;
-  width: 10rem;
-  max-height: 1rem;
   overflow: hidden;
   margin-inline: auto;
     
+  &:not(.thumbnails){
+    text-align: center;
+    max-width: 30rem;
+  }
+
+  &.thumbnails {
+    margin-block-start: 2rem;
+  }
+
   @include media-breakpoint-up(sm) {
     width: 100%;
   }
 
   button {
+    padding: 0;
+    margin: 0 0.2rem 0.2rem;
+    border: 3px solid var(--colour-canvas);
+    border-radius: 4px;
+
+    &.has-thumbnail {
+      height: 4.625rem;
+
+      img {
+        height: 100%;
+        width: auto;
+      }
+    }
+  }
+
+  button:not(.has-thumbnail) {
     width: 1rem;
     height: 1rem;
     min-height: 1rem;
@@ -149,10 +170,9 @@
     text-indent: -50rem;
     overflow: hidden;
     background: var(--colour-primary-theme);
-    padding: 0;
     margin: 0 0.5rem 0.5rem 0.5rem;
     border: none;
-
+    
     &:before {
       display: none;
     }
@@ -164,8 +184,12 @@
 }
 
 .carousel__controls > button[aria-current] {
+  --colour-active-thumbnail: var(--colour-info); 
+  border-color: var(--colour-active-thumbnail);
 
-  background: var(--colour-success);
+  &:not(.has-thumbnail) {
+    background: var(--colour-success);
+  }
 }
 
 // #endregion

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

@@ -185,7 +185,14 @@
 ::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);
   }
 }
@@ -215,7 +222,7 @@
     padding-left: rem(40)!important;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     padding-left: var(--container-padding-x-md)!important;
   }
   &:after {

package/assets/sass/components/fileupload.scss

@@ -50,16 +50,6 @@
     max-width: rem(400)!important;
     position: relative;
 
-
-
-    
-    @include dark-mode() {
-
-      background: var(--colour-canvas-2);
-      border-color: var(--colour-canvas-2);
-      color: var(--colour-body);
-    }
-
     
     @media (forced-colors: active) {
 
@@ -130,6 +120,7 @@
     user-select: none;
     max-width: 100%;
     min-width: 100%;
+    margin-bottom: 1rem;
 
     &.focus {
       

package/assets/sass/components/multiselect.scss

@@ -127,12 +127,16 @@ button {
 }
 
 
-
 .wrapper:is(:focus-within) .dropdown {
 
   display: var(--display-panel, none);
 }
 
+.wrapper .dropdown:hover {
+
+  display: var(--display-panel, none);
+}
+
 
 // Inline edit
 :host-context(:focus-within) {

package/assets/sass/components/pagination.scss

@@ -35,15 +35,18 @@
   padding-inline: 1rem;
   
   .select--minimal {
-    --select-padding-left: rem(16);
-    height: rem(52);
-    line-height: rem(52);
+    height: calc(3.25rem - 1em);
+    line-height: calc(3.25rem - 1em);
     margin-left: rem(-16);
     font-weight: bold;
   }
 
   div:has(> select){
     margin-bottom: 0;
+    
+    &:after {
+      top: 50%;
+    }
   }
 }
 
@@ -118,7 +121,7 @@
   display: none;
   background: none;
   padding-inline: 1rem;
-
+  color: var(--colour-body);
   
   @include container-up(sm) {
 
@@ -134,21 +137,13 @@
   }
 
   &:is(:hover,:focus):not(:disabled){
-    background-color: var(--colour-light);
+    background-color: var(--pagination-link-color);
+    color: var(--colour-hover);
   }
 
   &:is(:active):not(:disabled){
-    background-color: #E0E0E0;
-  }
-
-  @include dark-mode(){
-    &:is(:hover,:focus):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
-  
-    &:is(:active):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
+    background-color: var(--pagination-link-color);
+    color: var(--colour-active);
   }
 
   &:disabled {

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

@@ -23,15 +23,6 @@ iam-table {
       --row-bg: var(--hover-background);
       background: var(--row-bg);
     }
-
-    @include dark-mode(){
-      
-      --hover-background: var(--colour-canvas);
-
-      &:is(:hover,:focus-within,.hover) {
-        background: var(--row-bg);
-      }
-    }
   }
 
   &[data-expandable] [data-expand-button][aria-expanded] {
@@ -219,10 +210,6 @@ iam-table {
       cursor: default;
       padding-bottom: 0;
 
-      @media screen and (prefers-color-scheme: dark) {
-        
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
-      }
       a {
         white-space: nowrap;
         padding-right: 0.2rem;
@@ -428,16 +415,14 @@ iam-table {
     }
   }
 
-  tr:has([type="checkbox"]:checked){
-    height: 3.5rem;
+  @container (width > 23.4375em) {
+    tr:has([type="checkbox"]:checked){
+      height: calc(4.625rem - 2px)
+    }
   }
 
   tr:has([type="checkbox"]:checked){
     --row-bg: #E0E0E0;
-
-    @include dark-mode(){
-      --row-bg: #000000;
-    }
   }
 }
 

package/assets/sass/elements/dialog.scss

@@ -12,7 +12,7 @@ dialog[open] {
   --dialog-padding: #{rem(24)};
 
   --mh-padding-inline: var(--dialog-padding);
-
+  color: inherit;
   width: fit-content;
   height: fit-content;  
   border: none;

package/assets/sass/elements/forms.scss

@@ -83,7 +83,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 }
 
 textarea {
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
+  --textarea-height-scale: 3;
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px)!important;
 }
 // #endregion
 
@@ -343,7 +344,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 
 // #region word counter
 
-input[maxlength] + span {
+:is(input,textarea)[maxlength] + span {
 
   position: relative;
 
@@ -828,28 +829,53 @@ div:has(> select){
 
   all: unset;
   font-size: inherit;
+  line-height: inherit;
   background: none;
-  border: none;
+  border: 2px solid transparent;
   display: inline-block;
-  margin: 0;
-  padding: 0 calc(1.25em + 0.8ch) 0 var(--select-padding-left, 0.25em)!important;
-  
+  padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em)!important;
+  font-weight: normal!important;
+  margin: -0.4em 0!important;
+  border-radius: 0.25em;
+
+  color: var(--colour-body);
+
   height: auto;
   cursor: pointer;
+  font-family: var(--font-body)!important;
 
   option {
     background-color: var(--colour-canvas);
     padding-left: 1em;
+    font-size: inherit;
+    line-height: inherit;
   }
 
+  &:hover {
+    
+    //border: none;
+    background: var(--colour-light);
+  }
+  
+  &:is(:focus,.focus):not(:disabled) {
 
-  &:is(:hover,:focus) {
-    outline: 1px solid var(--colour-info);
+    border-color: var(--colour-info);
+    outline: 0;
+    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
   }
 }
 
 *:has(> .select--minimal){
   position: relative;
+  display: inline-block!important;
+  width: auto!important;
+  font-size: inherit!important;
+  line-height: 1!important;
+
+  padding: 0!important;
+  margin: 0!important;
+
+  font-family: var(--font-body)!important;
 
   &:after {
     font-size: 0.8em;
@@ -857,10 +883,13 @@ div:has(> select){
     content: "\f078";
     font-family: "Font Awesome 6 Pro";
     position: absolute;
-    top: 50%;
+    top: 40%;
     transform: translate(0,-50%);
-    right: calc(0.25em + 0.8ch);
+    right: calc(0.8ch);
     pointer-events: none;
+    
+  color: var(--colour-body);
+
   }
 }
 // #endregion