@iamproperty/components 6.0.0 → 6.1.0--beta2

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

@@ -0,0 +1,106 @@
+@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{
+
+    align-items: center;
+    display: flex;
+  }
+
+  &:before,
+  &:after {
+    display: none;
+  }
+
+  &.card--has-icon {
+    --bottom-padding: #{rem(16)};
+    border: none;
+  }
+
+  .icon {
+    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)) {
+
+  outline: none;
+    
+  :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-offset: -2px;
+
+  .card__body {
+    background: none;
+  }
+  .card__footer {
+    background: none;
+  }
+}
+
+
+::slotted(i) {
+  display: block !important;
+  font-size: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+}
+
+
+// #region card with a flag 
+:host(.card--flag) {
+  position: relative;
+  
+  &:after {
+    content: var(--card-flag-icon, "\f024");
+    font-family: "Font Awesome 6 Pro";
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: rem(16);
+    line-height: 1;
+    height: rem(16);
+    width: rem(16);
+    display: inline-block;
+    font-weight: normal;
+    color: var(--colour, var(--colour-primary));
+  }
+}
+// #endregion
+
+// #region Show total number
+.card__body:has(.card__total) {
+  --card-head-top-padding: 2rem;
+  --card-head-bottom-padding: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+.card__total {
+  order: -1;
+}
+
+// #endregion

package/assets/sass/components/header.scss

@@ -4,6 +4,7 @@
   padding-top: 0!important;
   margin-bottom: rem(32);
   background-color: transparent!important;
+  display: block!important;
 }
 
 .header-banner {

package/assets/sass/components/multi-step.component.scss

@@ -0,0 +1,148 @@
+@use "../_func.scss" as *;
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+// #region Multi 
+
+:host {
+
+  --dialog-padding: 1.5rem;
+  box-sizing: border-box;
+  padding-top: calc(var(--dialog-padding) * 4); 
+  display: block;
+  position: relative;
+  margin-right: 0!important;
+  min-height: 100%;
+  padding-left: var(--dialog-padding);
+  
+  @include media-breakpoint-up(md) {
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + #{rem(282)})!important;
+    display: flex; 
+    flex-direction: column;
+  }
+}
+
+
+// #region steps
+.steps {
+  width: 100%;
+  position: absolute;
+  top:0;
+  left: 0;
+  padding: var(--dialog-padding);
+  counter-reset: section;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--colour-primary);
+
+  &:before {   
+
+    content: "";
+    position: absolute;
+    top: calc(50% - 1px);
+    left: var(--dialog-padding);
+    z-index: 2;
+    width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+    height: 2px;
+    background: currentColor;
+    z-index: 1;
+    background: linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255,255,255,0.5) var(--progress, 0%), rgba(255,255,255,0.5) 100%);
+  }
+
+  button {
+
+    position: relative;
+    background: transparent;
+    border: none;
+    color: rgba($color: #ffffff, $alpha: 0.5);
+    height: rem(24);
+    line-height: rem(24);
+    width: rem(24);
+    text-indent: 300%;
+    overflow: hidden;
+    z-index: 2;
+    background-color: var(--colour-primary);
+    outline: 0.5rem solid var(--colour-primary);
+    cursor: pointer;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      counter-increment: section;
+      content: counter(section);
+
+      border: 1px solid currentColor;
+      height: rem(24);
+      line-height: rem(24);
+      width: rem(24);
+      text-align: center;
+      display: inline-block;
+      text-indent: 0;
+      border-radius: 50%;
+    }
+
+    &:not(.active):not(.valid) {
+      
+      pointer-events: none;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &.active {
+      color: var(--colour-white);
+    }
+    &.valid {
+      color: var(--colour-success);
+    }
+  }
+
+  @include dark-mode() {
+
+    button {
+      
+      color: rgba($color: #000000, $alpha: 0.5);
+
+      &.active {
+        color: black;
+      }
+      &.valid {
+        color: var(--colour-complete);
+      }
+    }
+  }
+
+  
+  @include media-breakpoint-up(md) {
+    
+      width: rem(282);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        margin-block: 0.5rem;
+        width: 100%;
+        text-indent: 0;
+        text-align: left;
+        padding-left: 2rem;
+        font-size: rem(18);
+        outline-width: 1px;
+      }
+    
+
+  }
+}
+// #endregion
+
+
+

package/assets/sass/components/multiselect.preload.scss

@@ -34,4 +34,11 @@ iam-multiselect:has(label:not([slot="checked"]):not([slot="notmatched"])) {
 iam-multiselect:has(label[slot="checked"]) {
 
   --display-button: block;
+}
+
+@include dark-mode() {
+  iam-multiselect :is(.tag,.badge):not([slot="checked"]){
+
+    color: var(--colour-heading);
+  }
 }

package/assets/sass/components/nav.preload.scss

@@ -1,6 +1,10 @@
 @use "sass:math";
 @use "../_func" as *;
 
+nav:has(iam-nav) {
+
+  grid-column: container;
+}
 iam-nav {
 
   display: block;
@@ -9,6 +13,7 @@ iam-nav {
   padding-bottom: 1.5rem;
   max-width: 100%;
   margin-inline: auto;
+  column-grid: container;
   
   .brand {
     font-size: rem(48);

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

@@ -0,0 +1,204 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+
+:host {
+  --card-head-height: 9rem;
+  --card-right-padding: 1rem;
+  
+  background: transparent!important;
+  position: relative;
+}
+
+: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-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);
+    }
+  }
+}
+
+:host([data-initials]:before) {
+
+  content: (data-initials);
+  display: block;
+}
+  
+
+
+:host([data-initials]) {
+
+  .card__head {
+
+    &:before {
+      display: none!important;
+    }
+  }
+
+  &:before {
+    font-family: var(--font-body);
+    font-weight: normal;
+    font-size: rem(32);
+    content: attr(data-initials);
+    display: block;
+    position: absolute;
+    top: var(--card-head-height);
+    left: 50%;
+    bottom: 0;
+    background-color: var(--record-colour);
+    border-radius: 50%;
+    height: rem(64);
+    margin-top: rem(-64);
+    line-height: rem(64);
+    width: rem(64);
+    text-align: center;
+    transform: translate(-50%,0);
+  }
+
+}
+
+.card__head {
+  background: transparent!important;
+  position: relative;
+  min-height: var(--card-head-height);
+
+  .card__avatar {
+
+    display: block;
+    position: absolute;
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    border-radius: 50%;
+    height: rem(64);
+    line-height: rem(64);
+    width: rem(64);
+    text-align: center;
+    transform: translate(-50%,0);
+    margin: 0;
+    object-fit: cover;
+  }
+}
+
+.card__badges {
+  
+  position: absolute;
+  top: 0;
+  text-align: left;
+  left: 0;
+  z-index: 9;
+}
+
+.card__body {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical; overflow: hidden;
+  overflow: hidden;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.card__details {
+  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):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;
+}
+
+
+:host([data-initials]) {
+  --record-content: attr(data-initials);
+  --record-colour: var(--wider-colour-2);
+}
+
+
+: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: "\E003";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-5);
+}
+
+: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";
+  --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: "\E002";
+  --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: "\E006";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-10);
+}

package/assets/sass/components/tabs.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-*:has(> iam-tabs){
+*:not(main):has(> iam-tabs){
   
   container-type: inline-size;
 }

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

@@ -0,0 +1,80 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+
+
+:host {
+  --card-right-padding: 1rem;
+
+  --card-head-height: 10rem;
+
+  font-size: 1.5rem;
+  --line-height: 2rem;
+}
+
+
+//video-card--top
+
+
+:host(:is([data-youtube],[data-vimeo]):not(.video-card--top)) .card__head {
+  order: 2;
+}
+
+:host(:is([data-youtube],[data-vimeo])) .card__head {
+
+  cursor: pointer;
+  position: relative;
+
+  > *:not(img){
+    z-index: -1;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    background-color: var(--video-btn-colour, var(--colour-success));
+    height: 5rem;
+    width: 5rem;
+    position: absolute;
+    top: calc(50% - 2.5rem);
+    left: calc(50% - 2.5rem);
+    z-index: 2;
+    border-radius: 2.5rem;
+  }
+
+  &:after {
+
+    $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
+    --icon: #{$icon-play};
+
+    content: "";
+    display: block;
+    height: 2rem;
+    width: 2rem;
+    position: absolute;
+    top: calc(50% - 1rem);
+    left: calc(50% - 0.8rem);
+    z-index: 5;
+    background: var(--colour-primary-theme);
+    mask-image: var(--icon);
+    mask-size: 80%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon);
+    -webkit-mask-size: 80%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  &:is(:hover,:focus) {
+    --video-btn-colour: var(--colour-canvas);
+  }
+  &:is(:active) {
+    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
+  }
+}
+
+.embed {
+  aspect-ratio: 1 / 1;
+  display: block;
+  width: 10rem;
+}

package/assets/sass/components.reset.scss

@@ -1,46 +1,8 @@
-$darkModeLocal: 'false'!default;
+@charset "UTF-8";
 
-@use "_func.scss" as * with (
-  $darkMode: $darkModeLocal
+@use "_fonts";
+@use "_corefiles.scss" with (
+  $root: ":host", // copied directory from iamkey repo
+  $layers: "false"
 );
 
-@use "foundations/root.scss" with (
-  $root: ":is(iam-card,iam-nav,iam-table,.iamkey)" // copied directory from iamkey repo
-);
-
-a:has(iam-card) {
-  all: unset;
-}
-
-
-:is(iam-card,iam-nav, iam-table, .iamkey) {
-
-  @import "foundations/reboot.scss";
-  
-  @include var(font-family,--font-body);
-  @include var(color,--colour-body);
-  width: 100%;
-  line-height: 1.2;
-  min-height: 100%;
-
-  @import "_elements.scss";
-}
-
-:is(iam-table) {
-  width: auto;
-  max-width: rem(1112);
-  display: block;
-}
-
-
-:is(iam-card,iam-nav, iam-table, .iamkey) {
-  @import "_utilities.scss";
-}
-
-body.js-enabled .js-hide {
-  display: none!important;
-}
-
-body:not(.js-enabled) .js-show {
-  display: none!important;
-}

package/assets/sass/elements/admin-panel.scss

@@ -13,7 +13,8 @@
   border-radius: rem(8);
   margin-bottom: rem(24);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
+  overflow: hidden;
+  
   @include dark-mode() {
     background-color: var(--colour-canvas-2);
     color: var(--colour-body);

package/assets/sass/elements/badge-tag.scss

@@ -12,7 +12,7 @@
   text-align: center;
   white-space: nowrap;
   max-width: fit-content;
-  color: #262626!important;
+  color: #262626;
   position: relative;
   background: var(--wider-colour, var(--wider-colour-1));
   margin-bottom: 1rem;
@@ -24,6 +24,10 @@
   &:empty {
     display: none;
   }
+
+  &:is(.bg-primary,.bg-dark,.bg-danger){
+    color: #{$colour-inverted}!important;
+  }
 }
 
 .badge {