@iamproperty/components 7.7.1--beta15 → 7.7.1--beta17

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

@@ -1,6 +1,7 @@
 @use '../_func' as *;
 
 @use '../elements/forms' as *;
+@use '../elements/dropdown' as *;
 @use '../elements/prefix' as *;
 @use '../elements/buttons' as *;
 @use '../elements/links' as *;
@@ -105,6 +106,110 @@ input[name='postcode'] {
 
 /*  change the datalist */
 
+  .dropdown {
+
+
+    top: 100%;
+    position: absolute;
+    //border-radius: 0.5rem;
+    //box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+    //width: 100% !important;
+    /* max-width: var(--menu-item-width, 50rem) !important; */
+    //z-index: 100;
+    display: none;
+    //max-height: 25rem;
+    //overflow-y: auto;
+    
+    //max-width: var(--input-max-width) !important;
+    padding: 0;
+
+    & > datalist {
+      border: none!important;
+      box-shadow: none!important;
+      position: static!important;
+      display: block!important;
+      border-radius: 0!important;
+      max-height: 100%!important;
+      margin: 0!important;
+    }
+
+    &:focus {
+      outline: none!important;
+    }
+  }
+    
+  .postcode-lookup:is(:focus-within,:has(*:active)) .dropdown:has(datalist:not(:empty)),
+  .postcode-lookup:is(:focus-within,:has(*:active)) .dropdown:has(datalist.loading),
+  .postcode-lookup:is(:focus-within,:has(*:active)) .dropdown:has(datalist.noresults),
+  .postcode-lookup .dropdown:hover {
+
+    display: block;
+  }
+
+  .postcode-lookup .dropdown:has(datalist.noresults){
+    datalist {
+
+      display: block;
+
+      &:before {
+        content: "No addresses found";
+        background-color: white;
+        padding: 0.5rem;
+        color: var(--colour-primary) !important;
+        font-weight: inherit !important;
+        font-family: inherit !important;
+        font-size: 1rem !important;
+        line-height: 1.1875rem !important;
+        padding-block: var(--menu-item-padding, 0.5rem) !important;
+        display: block;
+      }
+    }
+  }
+
+  .postcode-lookup:is(:focus-within,:has(option:active)) .dropdown:has(datalist.loading) {
+
+    datalist {
+
+      height: 5rem;
+
+      &:before {
+        content: "\f021";
+        font-family: "Font Awesome 7 Pro";
+        font-size: 1.75rem;
+        font-weight: 300;
+        display: block;
+        position: absolute;
+        top: calc(50% - 1rem);
+        left: calc(50% - 1rem);
+        /*transform: translate(-50%,-50%);*/
+
+        animation-name: spin;
+        animation-duration: 4000ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+    }
+  }
+
+
+
+  /* #region welsh banner */
+  [name="beforeList"] {
+    display: none;
+  }
+
+  [name="beforeList"]:has(+ .show-welsh-banner) {
+    //display: block;
+  }
+  .dropdown.show-welsh-banner [name="beforeList"] {
+    display: block;
+  }
+
+  /* #endregion*/
+
+
+
+
 .postcode-lookup > div {
   position: relative;
 }
@@ -119,14 +224,41 @@ input[name='postcode'] {
 }
 
 
+.postcode-lookup label:has(.clear-search) {
+ position: relative;
+}
+
+/*
 .postcode-lookup .empty {
   display: var(--error-hide, block);
-}
 
+  position: absolute;
+  bottom: 0.5rem;
+  right: 3.5rem;
+  margin: 0;
+  aspect-ratio: 1 / 1;
+
+  width: 2rem;
+  height: 2rem;
+
+  text-align: center;
+  line-height: 1;
+
+  &:not(:hover, :focus) {
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  i {
+    font-size: 1.2rem;
+  }
+    
+}
+*/
 
 .postcode-lookup:has(input.is-invalid) .datalist__wrapper,
 .postcode-lookup:has(input.is-invalid) label:after,
-.postcode-lookup:has(input.is-invalid) .empty,
+.postcode-lookup:has(input.is-invalid) .clear-search,
 .postcode-lookup:has(input.is-invalid) [slot="hint"] {
   display: none!important;
 }

package/assets/sass/components/advanced-select.component.scss

@@ -0,0 +1,59 @@
+@use '../_func' as *;
+@use '../elements/forms';
+@use '../elements/dropdown';
+
+@use '../elements/prefix';
+
+:host {
+  display: block;
+  margin-top: 0.5rem;
+}
+
+.wrapper {
+  display: flex;
+  width: 100%;
+
+  .input__wrapper {
+    flex-grow: 1;
+    position: relative;
+    margin-top: 0!important;
+  }
+
+  .suffix {
+    flex-grow: 0;
+  }
+}
+
+:host(.has-label){
+
+  .wrapper {
+    display: contents!important;
+  }
+  .suffix {
+    display: none;
+  }
+}
+
+:host(.has-empty-input){
+  .clear-search {
+    display: none!important;
+  }
+}
+
+::slotted(input){
+  
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  margin-top: 0!important;
+}
+
+::slotted(label){
+  
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  margin-top: 0!important;
+}
+
+::slotted(button){
+  margin-top: 0!important;
+}

package/assets/sass/components/bento-grid.global.scss

@@ -48,7 +48,7 @@ iam-bento-grid {
           margin-left: 0.5em;
           line-height: 1em;
           font-size: 1em;
-          font-family: 'Font Awesome 7 Pro';
+          font-family: var(--fa-family-classic);
         }
       }
 
@@ -63,7 +63,7 @@ iam-bento-grid {
         line-height: 1em;
         font-size: 0.5em;
 
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
         font-weight: 300;
       }
 

package/assets/sass/components/calendar.component.scss

@@ -46,7 +46,7 @@
 
 [class*='fa-']:before {
   content: var(--fa);
-  font-family: 'Font Awesome 7 Pro';
+  font-family: var(--fa-family-classic);
   line-height: 1em;
 }
 

package/assets/sass/components/calendar.config.scss

@@ -170,7 +170,7 @@
       top: 0;
       right: 0.25rem;
       content: '\f363';
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       font-weight: 300;
       line-height: 1.625rem; /* 26 */
     }

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

@@ -8,6 +8,7 @@
   --card-right-padding: 1rem;
   /* --card-head-height: 10rem; */
   --card-icon-right: 1rem;
+  position: relative;
 }
 
 :host(:is(:hover, :focus, .hover):not(.prevent-hover)) {
@@ -18,7 +19,7 @@
 
 :host(:is(:active, .active):not(.prevent-hover)) {
   --card-icon-right: var(--card-icon-right-overide, 0.5rem);
-  outline: none;
+  //outline: none;
 }
 
 :host(.prevent-hover) {
@@ -158,7 +159,7 @@ slot[name='secondary'] {
 
   > .btn:before {
     content: '\f142';
-    font-family: 'Font Awesome 7 Pro';
+    font-family: var(--fa-family-classic);
   }
 }
 
@@ -185,3 +186,29 @@ slot[name='secondary'] {
   border-radius: var(--card-border-radius) !important;
 }
 /* #endregion */
+
+/* #region link */
+slot[name="link"] {
+
+  position: absolute;
+  display: block;
+  inset: 0;
+  z-index: 1;
+}
+
+::slotted([slot="link"]) {
+
+  position: absolute!important;
+  display: block!important;
+  inset: 0!important;
+  z-index: 1!important;
+  margin: 0!important;
+  text-indent: -300%!important;
+  overflow: hidden!important;
+}
+::slotted([slot="link"]):after {
+
+  display: none!important;
+}
+
+/* #endregion */

package/assets/sass/components/card.module.scss

@@ -7,14 +7,21 @@
   --card-footer-bottom-padding: 1.5rem;
   --card-head-height: 6rem;
 
-  box-shadow: var(--card-box-shadow);
   border-radius: var(--card-border-radius);
+  margin-bottom: 2rem;
+  display: block;
+}
+
+.wrapper {
+
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--card-box-shadow);
   position: relative;
   font-weight: bold;
   font-size: 1.125rem; /* 18/16 */
   line-height: 1.5rem;
   color: var(--colour-primary);
-  /* min-height: calc(100% - 2rem); */
+  min-height: 100%;
   width: 100%;
   text-align: left;
   display: flex;
@@ -24,7 +31,6 @@
   background: var(--colour-canvas-2);
   outline: 2px solid var(--outline-colour, --colour-canvas-2);
   outline-offset: -2px;
-  margin-bottom: 2rem;
 
   > * {
     width: 100%;
@@ -84,7 +90,7 @@
 ::slotted(.badge) {
   margin-bottom: 0.375rem !important;
 }
-::slotted(span:not(.badge)) {
+::slotted(span:not(.badge,.title)) {
   display: block !important;
   font-weight: normal !important;
   font-size: 1rem !important;
@@ -96,7 +102,7 @@
   padding-bottom: 0 !important;
   color: var(--colour-body);
 }
-::slotted(span:not(.badge):not([class*='pt-'])) {
+::slotted(span:not(.badge,.title):not([class*='pt-'])) {
   padding-top: 1.5rem !important;
 }