@iamproperty/components 7.6.4--beta1 → 7.6.4--beta3

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

@@ -1,78 +1,59 @@
 @use '../_func' as *;
 @use '../elements/forms';
-
 @use '../elements/admin-panel.scss' as *;
-
-
+@use '../elements/dropdown.scss' as *;
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
+
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
-
-.wrapper {
-
-  position: relative;
-  display: inline-block;
-  margin-bottom: 1rem;
-
-  input {
-    position: absolute;
-    min-height: unset;
-    top: 50%;
-    left: 0;
-    transform: translate(0,-50%);
-    z-index: -99;
-    opacity: 0;
+@layer components {
+  .wrapper {
+
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1rem;
+
+    input {
+      position: absolute;
+      min-height: unset;
+      top: 50%;
+      left: 0;
+      transform: translate(0,-50%);
+      z-index: -99;
+      opacity: 0;
+    }
   }
-}
-
-::slotted(*) {
-  margin-bottom: 0!important;
-}
-
-
-
-
-input:focus {
- 
-  opacity: 1;
-  z-index: 99;
-}
 
+  ::slotted(*) {
+    margin-bottom: 0!important;
+  }
 
-.dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  padding: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  z-index: 99;
-  display: none;
-  max-height: rem(244) !important;
-  overflow: auto;
 
-  &:before {
-    display: none;
+  input:focus {
+  
+    opacity: 1;
+    z-index: 99;
   }
-}
-
-.wrapper:is(:focus-within) .dropdown {
-  display: var(--display-panel, none);
-}
 
-@media (hover: hover) {
-  .wrapper .dropdown:hover {
+  .wrapper:is(:focus-within) .dropdown {
     display: var(--display-panel, none);
   }
-}
 
-@media (hover: none) {
-  :host(.hover) .wrapper .dropdown {
-    display: block;
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
+  }
+
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
   }
-}
+
+}

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

@@ -2,32 +2,7 @@
 
 
 @layer components {
-  iam-tag .tag[slot='checked'] {
-    //margin-bottom: 0.5rem;
-    order: var(--order, 1);
-    //margin-inline: rem(3);
-  }
-
-  iam-tag .tag:not([slot='checked']) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    text-align: left;
-    border-radius: 0;
-    padding-inline: 1rem;
-    outline: none;
-    padding-block: 0.5rem;
-
-    &:not(:hover, :focus, :active, :focus-within) {
-      background: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-
+  
   iam-tag:has(label:not([slot='checked']):not([slot='notmatched'])) {
     --display-panel: block;
   }

package/assets/sass/elements/dropdown.scss

@@ -0,0 +1,87 @@
+@use '../_func' as *;
+
+@layer elements {
+  
+  // #region Dropdown
+  .dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    padding: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    z-index: 99;
+    display: none;
+    max-height: rem(244) !important;
+    overflow: auto;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  // #endregion
+  
+  // #region Needed for the component files
+  :is(iam-tag,iam-multiselect):has(label:not([slot='checked'])) {
+    --display-panel: block;
+  }
+
+  :is(iam-tag,iam-multiselect):has(label[slot='checked']) {
+    --display-button: block;
+  }
+
+  :is(iam-tag,iam-multiselect)[data-single] .tag[slot='checked'],
+  :is(iam-tag,iam-multiselect)[data-single] .tag[slot='checked'] * {
+    pointer-events: none!important;
+  }
+
+  @container style(--theme: dark) {
+    :host :is(.tag, .badge):not([slot='checked']) {
+      color: var(--colour-heading);
+    }
+  }
+  // #endregion
+
+  // #region Indivitual options
+  .dropdown__option[slot='checked'] {
+    order: var(--order, 1);
+  }
+
+  .dropdown__option:not([slot='checked']) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    text-align: left;
+    border-radius: 0;
+    padding-inline: 1rem;
+    outline: none;
+    padding-block: 0.5rem;
+
+    padding-bottom: 0.25em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &:not(:hover, :focus, :active, :focus-within) {
+      background: none !important;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &[data-email] {
+
+      &::after {
+        content: attr(data-email);
+        display: block;
+        line-height: 1;
+        padding-bottom: 0.25em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+  // #endregion
+}

package/assets/sass/elements/forms.scss

@@ -5,6 +5,7 @@
 
 @use './label' as *;
 @use './input' as *;
+@use './textarea' as *;
 
 
 $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
@@ -17,8 +18,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
   // 1. Remove the margin in Firefox and Safari
   select,
-  optgroup,
-  textarea {
+  optgroup {
     margin: 0; // 1
     font-family: inherit;
     font-size: inherit;
@@ -45,13 +45,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   }
 
   
-
-  // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
-
-  textarea {
-    resize: vertical; // 1
-  }
-
   // 1. Browsers set a default `min-width: min-content;` on fieldsets,
   //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
   //    So we reset that to ensure fieldsets behave more like a standard block element.
@@ -165,6 +158,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   // #region legend
   fieldset {
     width: 100%;
+    position: relative;
   }
   legend {
     font-family: var(--font-heading);
@@ -209,7 +203,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       width: 100%;
     }
 
-    :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
+    :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), output) {
       flex-shrink: 1;
       flex-grow: 1;
       width: 0;
@@ -279,14 +273,12 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
         input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
             [type='time']
           ),
-        textarea,
         output
       ),
     :is(
       input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
           [type='time']
         ),
-      textarea,
       output
     ):has(~ .suffix) {
       order: 1;
@@ -660,7 +652,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
   input:checked + .conditional,
   input:checked + label + .conditional,
-  label:has(:checked) + .conditional {
+  label:has(:checked) + .conditional,
+  .was-validated .conditional:has(input[required]:invalid),
+  .was-validated .conditional:focus-within {
     display: block;
     clear: both;
   }
@@ -833,7 +827,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     margin-bottom: 1.5rem;
     max-width: var(--input-max-width);
 
-    :is(input:not([type='range']), select, textarea) {
+    :is(input:not([type='range']), select) {
       margin-top: 0.5rem;
       margin-bottom: 0 !important;
     }
@@ -1035,6 +1029,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     padding-right: 3rem;
   }
 
+
   .empty {
     position: absolute;
     bottom: 0.5rem;
@@ -1057,6 +1052,11 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       font-size: 1.5rem;
     }
   }
+  
+  &:has([name="postcode"][disabled]) .empty{
+
+    display: none;
+  }
 
   &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
     display: none;

package/assets/sass/elements/icons.css

@@ -37,11 +37,11 @@
 
   .icon[class*='fa-'][class*='bg-'] {
     aspect-ratio: 1 / 1;
-    width: calc(1lh + 0.5rem);
-    min-width: calc(1lh + 0.5rem);
-    max-width: calc(1lh + 0.5rem);
+    width: calc(1lh + 0.5em);
+    min-width: calc(1lh + 0.5em);
+    max-width: calc(1lh + 0.5em);
     text-align: center;
-    padding: 0.25rem;
+    padding: 0.25em;
     border-radius: 50% !important;
     display: inline-block;
   }

package/assets/sass/elements/input.scss

@@ -131,7 +131,6 @@
   // #region input field
   :is(
     input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
     output
   ) {
     display: block;
@@ -182,11 +181,6 @@
     }
   }
 
-  textarea {
-    max-height: 100%;
-  }
-
-
   input[type='color'] {
 
     padding: 0!important;
@@ -195,7 +189,6 @@
   
   [disabled] :is(
     input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
     output,
     select:not(.select--minimal, .btn)
   ) {
@@ -215,13 +208,6 @@
     max-width: var(--input-max-width);
   }
 
-  textarea {
-    --textarea-height-scale: 3;
-    min-height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) +
-        (var(--input-lh, 1.25rem) * var(--textarea-height-scale)) + 4px
-    ) !important;
-  }
   // #endregion
 
 }

package/assets/sass/elements/textarea.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements {
+
+
+  textarea {
+
+    --textarea-height-scale: 3;
+
+    margin: 0; // 1
+    font-family: inherit;
+  
+    resize: vertical; // 1
+    display: block;
+    width: 100%;
+    display: block;
+    width: 100%;
+    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-heading);
+    background-color: var(--colour-canvas-2);
+    background-clip: padding-box;
+    border: 2px solid var(--colour-primary);
+    appearance: none; // Fix appearance for date inputs in Safari
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    max-height: 100%;
+
+    
+    &:not([rows]){
+      
+      min-height: calc(
+        var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) +
+          (var(--input-lh, 1.25rem) * var(--textarea-height-scale)) + 4px
+      ) !important;
+    }
+
+    &[rows="1"] {
+      
+      --textarea-height-scale: 1;
+    }
+
+    &[rows="2"] {
+      
+      --textarea-height-scale: 2;
+    }
+
+    &:is([rows="2"],[rows="2"]) {
+      min-height: calc(
+        var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) +
+          (var(--input-lh, 1.25rem) * var(--textarea-height-scale)) + 4px
+      ) !important;
+    }
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+    }
+
+    &:is(:focus, .focus):not(:disabled):not(:invalid) {
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+    
+
+    // Disabled inputs
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  [disabled] textarea {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  label:not(.tag):has(textarea) {
+    display: block;
+    margin-bottom: 1.5rem;
+    max-width: var(--input-max-width);
+
+    textarea {
+      margin-top: 0.5rem;
+      margin-bottom: 0 !important;
+    }
+  }
+
+}

package/assets/sass/templates/form.scss

@@ -50,21 +50,30 @@
       outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
       width: 100%;
 
-      @media screen and (min-width: 36em) {
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      .form-panel {
         max-width: calc(100% - 5rem); // Guess
         margin-inline: auto;
       }
+    }
 
-      @media screen and (min-width: 62em) {
+    @media screen and (min-width: 62em) {
+      .form-panel {
         max-width: rem(924); // Guess
         border-radius: 0.5rem;
         padding-inline: rem(94);
         padding-block: 2.5rem;
         margin-bottom: 2rem;
       }
-
-      > *:last-child {
-        margin-bottom: 0 !important;
+      
+      .form-panel--sm {
+        max-width: 40rem; /* 640px */
+        padding-inline: 2rem;
       }
     }
 

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -617,19 +617,26 @@ class iamAddressLookup extends HTMLElement {
     // #endregion
 
     advancedSelect(this, lookup, list, true);
+
+    if (this.hasAttribute('data-disabled'))
+      lookup?.setAttribute('disabled','disabled');
   }
 
   static get observedAttributes(): any {
-    return ['data-url'];
+    return ['data-disabled'];
   }
 
   attributeChangedCallback(attrName, oldVal, newVal): void {
-    const addressComponent = this.querySelector('iam-address-lookup');
+    const lookup = this.shadowRoot.querySelector('[name="postcode"]');
 
     switch (attrName) {
-      case 'data-url': {
-        if (oldVal != newVal && addressComponent) {
-          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+      case 'data-disabled': {
+      console.log(newVal);
+        if (oldVal != newVal && newVal == 'disabled') {
+          lookup?.setAttribute('disabled','disabled');
+        }
+        else if (oldVal != newVal) {
+          lookup?.removeAttribute('disabled');
         }
         break;
       }

package/assets/ts/components/form/form.component.ts

@@ -0,0 +1,102 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { searchAjax, filterList, setTag } from '../../modules/dropdown';
+
+trackComponentRegistered('iam-tag');
+
+class iamTag extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  isFormValid(form):boolean {
+
+    if (form.querySelector(':invalid'))
+      return false;
+
+    if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+      return false;
+
+    if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+      return false;
+
+    return true;
+  };
+
+  connectedCallback(): void {
+
+    const form = this.querySelector('form');
+
+    if(!form)
+      return false;
+
+    form.setAttribute('novalidate','true');
+
+    // Form validation
+    form.addEventListener('submit', (e) => {
+
+      form.classList.add('was-validated');
+
+      if (!this.isFormValid(form)) {
+
+      console.log('hey2');
+
+        e.preventDefault();
+        form?.querySelector('input:invalid')?.scrollIntoView();
+      }
+    });
+
+
+    // conditional reveal required fields
+    Array.from(form.querySelectorAll('.conditional [required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-required','true');
+      input.removeAttribute('required');
+    });
+
+    // conditional reveal required fields (for fields inside of components like the address lookup)
+    Array.from(form.querySelectorAll('.conditional [data-required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-data-required','true');
+      input.removeAttribute('data-required');
+    });
+
+    form.addEventListener('change', () => {
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
+
+        input.removeAttribute('required');
+        input.removeAttribute('data-required');
+      });
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('required', 'required');
+      });
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-data-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('data-required', 'true');
+      });
+    });
+  }
+}
+
+export default iamTag;

package/assets/ts/components/input/input.component.ts

@@ -66,16 +66,18 @@ class iamInput extends HTMLElement {
 
 
     const setCurrencyRules = (): void => {
-      
+      let originalValue = input.value.replace(',','');
+
+      input?.setAttribute('data-value',originalValue);
       input.setAttribute('type','text');
-      input?.setAttribute('data-value',input.value);
-      input.value = new Intl.NumberFormat("en-GB", { 
+      originalValue = new Intl.NumberFormat("en-GB", { 
         style: "currency", 
         currency: "GBP",
-        minimumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
-        maximumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        minimumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,
+        maximumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,
         trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer
-      }).format(input.value).replace("£", "");
+      }).format(originalValue).replace("£", "");
+      input.value = originalValue;
     }