@iamproperty/components 5.6.0 → 5.6.1-beta10

package/assets/sass/_components.scss

@@ -34,3 +34,50 @@ iam-search .optional-text {
   display: none!important;
 }
 
+// tabs
+
+@media screen and (prefers-color-scheme: dark) {
+  .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;
+    }
+  }
+}

package/assets/sass/_functions/variables.scss

@@ -199,7 +199,7 @@ $dark-mode-colors: (
   "success": #B4E6A5,
   "danger": #E7727D,
   "dark": #B599B1,
-  "light": $light,
+  "light": #444444,
 );
 
 $dark-mode-functional-colors: (

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/collapsible-side.scss

@@ -3,6 +3,7 @@
 :host {
   --colour-border: #e9e9e9;
   --side-link-hover: var(--colour-canvas-2);
+  grid-column: full-width;
 
   @include light-mode() {
             
@@ -13,9 +14,14 @@
   min-height: calc(100vh - var(--nav-height));
   padding-top: 0!important;
   margin-inline: auto;
-  max-width: 80rem;
+  width: 100%;
   overflow: hidden;
   position: relative;
+ 
+  @include media-breakpoint-up(md) {
+    max-height: calc(100vh - var(--nav-height));
+    overflow: auto;
+  }
 }
 
 .container {
@@ -28,8 +34,7 @@
   @include media-breakpoint-up(md) {
 
     padding-left: 5.25rem!important;
-    overflow: hidden;
-  }  
+  }
 }
 
 // #region Side menu
@@ -40,7 +45,7 @@
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
   width: rem(30);
-  height: 100%;
+  height: calc(100% - var(--nav-height));
   background-color: var(--colour-canvas);
   transition: width 1s;
 
@@ -61,25 +66,13 @@
 
   @include media-breakpoint-up(md) {
 
-    left: calc(50% - #{rem(556)});
+    left: rem(84);
     margin-left: #{rem(-84)};
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      height: 100%;
-      border-right: 2px solid var(--colour-border);
-      left: 0;
-      opacity: 1;
-      transition: all 1s;
-      //margin-left: rem(-260);
-      width: rem(40);
-      background: var(--colour-canvas);
-    }
+    position: fixed;
+    top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(344);
+      width: rem(304);
 
       .btn[class*=fa-]:before {
         content: "\f023" !important;
@@ -88,6 +81,7 @@
   }
 
   .btn {
+    display: var(--btn-display, block);
     position: absolute;
     top: rem(32);
     right: 0;
@@ -96,7 +90,8 @@
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
-    
+    color: var(--colour-primary-theme);
+
     &[aria-expanded]{
        // Change icon
       &[class*=fa-]:before {
@@ -105,15 +100,20 @@
 
       @include media-breakpoint-up(md) {
         opacity: 0;
-        transition: opacity 0.5s;
-
-        &:is(:hover,:focus,:active) {
-          opacity: 1;
-        }
       }
     }
   }
 
+  &:is(:hover,:focus-within,:active) .btn {
+    
+    border: 2px solid var(--colour-border);
+    color: var(--colour-primary-theme);
+
+    @include media-breakpoint-up(md) {
+      opacity: 1;
+    }
+  }
+
   &:is(.open) {
 
     width: calc(100% - var(--container-padding-x));
@@ -124,7 +124,7 @@
     }  
     @include media-breakpoint-up(md) {
 
-      width: rem(344);
+      width: rem(304);
     }  
   }
 
@@ -142,9 +142,6 @@
     overflow: auto;
     max-height: 100%;
 
-    &.closed {
-    }
-
     .h3 {
       padding-left: rem(24);
     }
@@ -161,6 +158,9 @@
 
       width: rem(304);
 
+      .h3{
+        padding-left: var(--container-padding-x-md);
+      }
     }  
   }
 
@@ -185,8 +185,15 @@
 ::slotted(*[slot="menu"]) {
   padding-left: rem(24);
 
+
+
+  
   @include media-breakpoint-up(sm) {
-    padding-left: rem(40)!important;
+    padding-left: rem(40);
+  }
+  
+  @include media-breakpoint-up(md) {
+    padding-left: var(--container-padding-x-md);
   }
 }
 
@@ -215,24 +222,15 @@
     padding-left: rem(40)!important;
   }
 
+  @include media-breakpoint-up(md) {
+    padding-left: var(--container-padding-x-md)!important;
+  }
   &:after {
     display: none;
   }
 
   
   border-right: 2px solid var(--colour-border)!important;
-/*
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: calc(100%);
-    margin-top: 0;
-    width: 2px;
-    background-color: var(--colour-border);
-  }
-  */
 }
 
 ::slotted(a[slot="menu"]:where(:hover,:focus,[aria-expanded])) {
@@ -317,13 +315,30 @@
 
 @include media-breakpoint-up(md) {
 
-  .side-menu.open + .main-content {
-
-    padding-left: rem(300);
-  }
-
   ::slotted(.main-content__title){ 
     display: none;
   }
 }
+
+// #endregion
+
+// #region Desktop open state
+@include media-breakpoint-up(md) {
+
+
+  .container:has(.side-menu.open) {
+    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);
+  }
+}
 // #endregion
+
+
+@include media-breakpoint-up(md) {
+
+:host([open-always]){
+  --btn-display: none;
+}
+}

package/assets/sass/components/fileupload.scss

@@ -130,6 +130,7 @@
     user-select: none;
     max-width: 100%;
     min-width: 100%;
+    margin-bottom: 1rem;
 
     &.focus {
       

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

@@ -14,8 +14,8 @@ iam-inline-edit {
 
 
 iam-inline-edit:focus-within {
-
-
+  position: relative;
+  z-index: 99;
   --display-status: none;
 }
 
@@ -95,4 +95,58 @@ iam-inline-edit.was-validated label:has(:is(input:not([type=radio]):not([type=ch
     border-radius: 0.5rem;
     margin: 0 0 -1rem 0;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-}
+}
+
+
+// #region preview element
+
+iam-inline-edit:has(.preview) {
+
+  position: relative;
+
+  label {
+    opacity: 0;
+    margin-top: -0.75rem;
+  }
+
+  .preview {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    pointer-events: none;
+    padding: 0.75rem;
+    margin-top: -0.75rem;
+    margin-left: -0.75rem;
+  }
+
+  .preview:empty {
+    &:before {
+      content: attr(data-placeholder);
+    }
+  }
+
+  &:hover, &:focus {
+
+
+    .preview {
+        
+      border: none;
+      background: var(--colour-light);
+
+    }
+  }
+
+  &:focus-within {
+    label {
+      opacity: 1;
+    }
+    .preview {
+      opacity: 0;
+    }
+  }
+}
+
+
+// #endregion

package/assets/sass/components/multiselect.scss

@@ -127,8 +127,12 @@ button {
 }
 
 
+.wrapper:is(:focus-within) .dropdown {
 
-.wrapper:is(:hover, :focus-within) .dropdown {
+  display: var(--display-panel, none);
+}
+
+.wrapper .dropdown:hover {
 
   display: var(--display-panel, none);
 }

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/components/tabs.scss

@@ -16,7 +16,7 @@
       top: 0;
       bottom: 1px;
       width: 2.5rem;
-      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
+      background: var(--tabs-gradient, linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)));
       z-index: 1000;
       pointer-events: none;
     }
@@ -33,11 +33,6 @@
       clear: both;
     }
 
-    @media screen and (prefers-color-scheme: dark) {
-      &:before {
-        background: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
-      }
-    }
   }
 }
 

package/assets/sass/elements/buttons.scss

@@ -280,7 +280,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     }
   }
 
-  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]) {
+  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]):not(.btn-collapse) {
     background-color: var(--colour);
     color: var(--colour-primary-theme);
     border-color: transparent!important;

package/assets/sass/elements/dialog.scss

@@ -527,6 +527,15 @@ dialog::backdrop {
   margin-bottom: calc(var(--btn-margin) - 0.25rem);
 
 
+  &:has(dialog[open]) > button {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+    filter: brightness(85%);
+    transition: background 0.1s, color 0.1s;
+    //color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
   > .btn:first-child {
 
     margin-bottom: 0.25rem;
@@ -749,4 +758,23 @@ dialog::backdrop {
     }
   }
 }
-// #endregion
+// #endregion
+
+// #region admin panel dialog
+dialog:has(> .admin-panel) {
+
+  .dialog__close {
+    margin-top: -0.8rem;
+  }
+}
+dialog > .admin-panel {
+  margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1)!important;
+  padding-top: 0;
+
+  &:last-child {
+    
+    margin-bottom: calc(var(--dialog-padding) * -1);
+  }
+}
+
+// #endregion

package/assets/sass/elements/forms.scss

@@ -50,6 +50,10 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
   max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
+  &:is(textarea) {
+    max-height: 100%
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
   &:is(:focus,.focus):not(:disabled) {
     border-color: var(--colour-info);
@@ -80,7 +84,6 @@ $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;
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
 }
 // #endregion
 
@@ -825,28 +828,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;
@@ -854,10 +882,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