@iamproperty/components 7.5.1--beta2 → 7.5.1--beta4

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

@@ -360,3 +360,178 @@ table {
   }
 }
 // #endregion
+
+// #region Tables are only stacked on mobile
+:is(#{$selector}):not(.table--fullwidth).table--cta {
+  @container (width < 23.4375em) {
+    tbody tr td:last-child {
+      display: block !important;
+    }
+  }
+}
+
+
+// #endregion
+
+// #region As part of the iam-table component
+
+:is(#{$selector}) iam-actionbar {
+  margin: 0 1.5rem 1rem 1.5rem;
+
+  @container (width < 23.4375em) {
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+  }
+}
+:is(#{$selector}).table--fullwidth:has(iam-actionbar) {
+  padding-top: 0;
+}
+:is(#{$selector}).table--fullwidth iam-actionbar {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+:is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+
+  @include light-mode($darkMode) {
+    background-color: #e6eaec;
+  }
+}
+
+// Actionbar
+.actionbar__sticky-wrapper {
+  container-type: inline-size;
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
+    padding: 0 !important;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}):is(.actionbar__sticky-wrapper) > .actionbar__sticky {
+    display: block;
+    position: sticky;
+    left: 0;
+    top: calc(var(--sticky-padding) + #{rem(16)});
+    z-index: var(--index-menu);
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: calc(100vh - #{rem(68 + 24 + 16)});
+      pointer-events: none;
+    }
+
+    & + * {
+      margin-top: calc(-100vh - -6.75rem);
+    }
+  }
+
+  :is(#{$selector}):is(.actionbar__sticky) > iam-actionbar {
+    pointer-events: all !important;
+    display: block;
+    border: none;
+    background: var(--colour-canvas-2);
+    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+    margin-bottom: rem(24);
+  }
+}
+
+@include container-up(sm) {
+  :is(#{$selector}).table--fullwidth iam-actionbar,
+  :is(#{$selector}) iam-actionbar {
+    margin-left: -2rem;
+    margin-right: -2rem;
+    margin-top: -2rem;
+    margin-bottom: 2rem;
+  }
+}
+// #endregion
+
+// #region Table with actionbar
+
+:is(#{$selector}) {
+  input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+    padding-left: 0 !important;
+    margin: 0 !important;
+
+    &:before,
+    &:after {
+      top: 0.75rem !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
+  &:has([type='checkbox']:checked) tr:has([type='checkbox']):not(:has(.tag)) {
+    [type='checkbox'] {
+      width: 100vw;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100vw;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: 0rem;
+    }
+  }
+
+  @container (width > 23.4375em) {
+    tr:has([type='checkbox']:checked) {
+      height: calc(4.625rem - 2px);
+    }
+  }
+
+  tr:has([type='checkbox']:hover, [type='checkbox']:focus):not(:has(.tag)) {
+    --row-bg: #eeeeee;
+  }
+  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked):not(:has(.tag)) {
+    --row-bg: #e0e0e0;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}) {
+    iam-actionbar {
+      @include light-mode($darkMode) {
+        background-color: #e6eaec;
+      }
+    }
+    .actionbar__sticky + * {
+      margin-top: 0 !important;
+    }
+  }
+
+  :is(#{$selector}) {
+    input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+      padding-left: 0 !important;
+      margin: 0 !important;
+      min-height: 2rem;
+
+      &:before,
+      &:after {
+        top: 0.25rem !important;
+        left: 0 !important;
+      }
+    }
+
+    &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+      [type='checkbox'] {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        margin-top: -2rem;
+      }
+    }
+  }
+}
+// #endregion

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

@@ -23,169 +23,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #endregion
 
-// #region As part of the iam-table component
-
-:is(#{$selector}) iam-actionbar {
-  margin: 0 1.5rem 1rem 1.5rem;
-
-  @container (width < 23.4375em) {
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    border-radius: 0.5rem;
-  }
-}
-:is(#{$selector}).table--fullwidth:has(iam-actionbar) {
-  padding-top: 0;
-}
-:is(#{$selector}).table--fullwidth iam-actionbar {
-  margin: -2rem -2rem 2rem -2rem;
-  box-shadow: none;
-  border-radius: 0;
-}
-
-:is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
-  margin: -2rem -2rem 2rem -2rem;
-  box-shadow: none;
-  border-radius: 0;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
-}
-
-// Actionbar
-.actionbar__sticky-wrapper {
-  container-type: inline-size;
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding: 0 !important;
-  }
-}
-
-@container (width < 23.4375em) {
-  :is(#{$selector}):is(.actionbar__sticky-wrapper) > .actionbar__sticky {
-    display: block;
-    position: sticky;
-    left: 0;
-    top: calc(var(--sticky-padding) + #{rem(16)});
-    z-index: var(--index-menu);
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: calc(100vh - #{rem(68 + 24 + 16)});
-      pointer-events: none;
-    }
-
-    & + * {
-      margin-top: calc(-100vh - -6.75rem);
-    }
-  }
-
-  :is(#{$selector}):is(.actionbar__sticky) > iam-actionbar {
-    pointer-events: all !important;
-    display: block;
-    border: none;
-    background: var(--colour-canvas-2);
-    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    border-radius: 0.5rem;
-    margin-bottom: rem(24);
-  }
-}
-
-@include container-up(sm) {
-  :is(#{$selector}).table--fullwidth iam-actionbar,
-  :is(#{$selector}) iam-actionbar {
-    margin-left: -2rem;
-    margin-right: -2rem;
-    margin-top: -2rem;
-    margin-bottom: 2rem;
-  }
-}
-// #endregion
-
-// #region Table with actionbar
-
-:is(#{$selector}) {
-  input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
-    padding-left: 0 !important;
-    margin: 0 !important;
-
-    &:before,
-    &:after {
-      top: 0.75rem !important;
-      left: 0.25rem !important;
-      --border-radius: 0.25rem;
-    }
-  }
-
-  &:has([type='checkbox']:checked) tr:has([type='checkbox']):not(:has(.tag)) {
-    [type='checkbox'] {
-      width: 100vw;
-      height: 100%;
-      max-height: var(--row-height);
-      max-width: 100vw;
-      cursor: pointer;
-      pointer-events: all;
-      top: auto;
-      margin: 0;
-      margin-top: 0rem;
-    }
-  }
-
-  @container (width > 23.4375em) {
-    tr:has([type='checkbox']:checked) {
-      height: calc(4.625rem - 2px);
-    }
-  }
-
-  tr:has([type='checkbox']:hover, [type='checkbox']:focus):not(:has(.tag)) {
-    --row-bg: #eeeeee;
-  }
-  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked):not(:has(.tag)) {
-    --row-bg: #e0e0e0;
-  }
-}
-
-@container (width < 23.4375em) {
-  :is(#{$selector}) {
-    iam-actionbar {
-      @include light-mode($darkMode) {
-        background-color: #e6eaec;
-      }
-    }
-    .actionbar__sticky + * {
-      margin-top: 0 !important;
-    }
-  }
-
-  :is(#{$selector}) {
-    input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
-      padding-left: 0 !important;
-      margin: 0 !important;
-      min-height: 2rem;
-
-      &:before,
-      &:after {
-        top: 0.25rem !important;
-        left: 0 !important;
-      }
-    }
-
-    &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
-      [type='checkbox'] {
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
-        max-width: 100%;
-        margin-top: -2rem;
-      }
-    }
-  }
-}
-// #endregion
-
 // #region Expandable tables
 :is(#{$selector})[data-expandable] {
   td:has([data-expand-button]),

package/assets/sass/elements/buttons--action.scss

@@ -52,4 +52,30 @@ $darkMode: 'true' !default;
     }
   }
   // #endregion
+
+  .btn-action:not(.btn-compact).fa-compact-only:before {
+
+    display: none!important;
+  }
+
+  // #region Select as button
+  .btn:has(select) {
+    padding-block: 0;
+    padding-right: 2rem;
+
+  
+    select {
+      //all: unset !important;
+      margin: 0rem 0rem !important;
+      padding-right: 2rem!important;
+      margin-right: -2rem !important;
+      //field-sizing: content
+    }
+
+    &:after {
+      top: 0.2rem;
+      right: rem(8);
+    }
+  }
+  // #endregion
 }

package/assets/sass/elements/buttons--global.scss

@@ -241,10 +241,6 @@ $darkMode: 'true' !default;
     position: relative;
     padding-right: rem(56);
 
-    &:not(.mw-100) {
-      max-width: rem(112 + 40 + 56);
-    }
-
     select {
       all: unset !important;
       margin: calc(rem(-12)) calc(rem(-40)) !important;
@@ -262,6 +258,7 @@ $darkMode: 'true' !default;
       font-weight: 500;
       font-size: var(--btn-font-size) !important;
       line-height: var(--btn-line-height) !important;
+      field-sizing: content!important;
 
       option {
         padding: 0;

package/assets/sass/elements/forms.scss

@@ -218,29 +218,7 @@ $optionalText: 'true' !default;
   }
   // #endregion
 
-  // #region Optional text
-  :is(label:not(.tag), .label) {
-    @if $optionalText == 'true' {
-      &:has(
-          + input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not(
-              [type='file']
-            )
-        ):after {
-        content: ' (Optional)';
-      }
-    }
-
-    &:has(
-        input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not(
-            [type='file']
-          )
-      )
-      .optional-text:before {
-      content: ' (Optional)';
-    }
-  }
 
-  // #endregion
 
   // #region input field
   :is(
@@ -462,8 +440,12 @@ $optionalText: 'true' !default;
   // #region prefix
   :is(.prefix, .suffix) {
     display: none;
+  }
+  
+  :not(button):is(.prefix, .suffix) {
     pointer-events: none;
   }
+  
   @supports selector(:has(*)) {
     :is(.prefix, .suffix) {
       display: inline-block;
@@ -675,7 +657,9 @@ $optionalText: 'true' !default;
 
   .was-validated iam-address-lookup:has([required]:invalid) {
     --error-border: var(--colour-danger);
+    --error-bg: #{escape-svg($icon-error)};
     --error-display: block;
+    --error-hide: none;
   }
 
   // Password checker
@@ -1320,7 +1304,7 @@ $optionalText: 'true' !default;
 }
 
 // #region datalist
-:is(iam-advanced-select, iam-search) {
+:is(iam-advanced-select, iam-search, .postcode-lookup) {
   position: relative;
   display: block;
 
@@ -1362,9 +1346,8 @@ $optionalText: 'true' !default;
   }
 }
 
-.was-validated
-  :is(iam-advanced-select, iam-search)
-  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
+.was-validated :is(iam-advanced-select, iam-search, postcode-lookup) label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
+:is(iam-advanced-select, iam-search, postcode-lookup).was-validated label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
   margin-bottom: 2.5rem;
 
   input {
@@ -1376,29 +1359,38 @@ $optionalText: 'true' !default;
   }
 }
 
-:is(iam-advanced-select, iam-search) datalist {
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
+  
   &:empty {
     display: none !important;
   }
 
-  z-index: 99;
+  z-index: 100;
   top: 100%;
   position: absolute;
   background-color: white;
   border-top: none;
-  padding: 0.5rem;
-  max-height: 10rem;
+
+  &:not(:empty):has(option:not(.hide)){
+
+    padding: 0.5rem;
+  }
+
+
+  max-height: 25rem;
   overflow-y: auto;
   width: 100%;
   max-width: var(--input-max-width, 50rem);
   border: none !important;
   border-radius: 0.5rem;
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  display: none;
 
   option {
     background-color: white;
     padding: 0.5rem;
-    color: blue !important;
+    
     cursor: pointer;
     background: unset !important;
     border: unset !important;
@@ -1409,10 +1401,17 @@ $optionalText: 'true' !default;
     line-height: rem(19) !important;
     margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
     padding-block: var(--menu-item-padding, 0.5rem) !important;
-    width: var(--menu-item-width, 100%) !important;
-    max-width: var(--menu-item-width, 100%) !important;
+    width: 100% !important;
+    max-width: 100% !important;
     text-align: var(--menu-item-text-align, left) !important;
 
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    text-overflow: ellipsis;
+    overflow: clip;
+
     &:is(:hover, :focus) {
       background: var(--colour-light) !important;
       border-radius: 0.25rem !important;
@@ -1422,11 +1421,7 @@ $optionalText: 'true' !default;
       background: rgba(224, 224, 224, 1) !important;
       border-radius: 0.25rem !important;
     }
-  }
-}
 
-iam-advanced-select datalist {
-  option {
     &.active {
       border-left: 4px solid var(--colour-info) !important;
       border-radius: 0.25rem !important;
@@ -1435,4 +1430,154 @@ iam-advanced-select datalist {
   }
 }
 
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active),:active) datalist {
+
+  display: block;
+
+  &:empty {
+    display: block !important;
+  }
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper {
+
+  top: 100%;
+  position: absolute;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  width: var(--menu-item-width, 50rem) !important;
+  max-width: var(--menu-item-width, 50rem) !important;
+  z-index: 100;
+  display: none;
+  max-height: 25rem;
+  overflow-y: auto;
+
+  > datalist {
+    border: none!important;
+    box-shadow: none!important;
+    position: relative;
+    display: block!important;
+    border-radius: 0!important;
+    max-height: 100%!important;
+  }
+
+  &:focus {
+    outline: none!important;
+  }
+}
+
+iam-address-lookup [slot="preloadedList"]{
+  border: none!important;
+  box-shadow: none!important;
+  position: relative;
+  display: block!important;
+  border-radius: 0!important;
+  max-height: 100%!important;
+
+  &.noresults {
+    display: block !important;
+  }
+
+  &.noresults:before {
+    content: "No addresses found";
+    background-color: white;
+    padding: 1rem 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, 1rem) !important;
+    display: block;
+  }
+}
+
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist:not(:empty)),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.loading),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.noresults),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper:hover {
+
+  display: block;
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper: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: rem(19) !important;
+      padding-block: var(--menu-item-padding, 0.5rem) !important;
+      display: block;
+    }
+  }
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(option:active)) .datalist__wrapper:has(datalist.loading) {
+
+  datalist {
+
+    height: 5rem;
+
+    &:before {
+      content: "\f021";
+      font-family: "Font Awesome 6 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;
+    }
+  }
+}
+
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
+
+:is(iam-advanced-select, iam-search, .postcode-lookup) {
+
+  [name="beforeList"] {
+    display: none;
+  }
+
+  [name="beforeList"]:has(+ .show-welsh-banner) {
+    display: block;
+  }
+  .datalist__wrapper.show-welsh-banner [name="beforeList"] {
+    display: block;
+  }
+}
 // #endregion