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

package/assets/sass/components/multiselect.scss

@@ -5,6 +5,7 @@
 @use '../elements/admin-panel.scss' as *;
 @use '../elements/buttons.scss' as *;
 @use '../elements/buttons--action.scss' as *;
+@use '../elements/dropdown.scss' as *;
 
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
@@ -15,227 +16,224 @@
   box-sizing: border-box;
 }
 
-:host {
+@layer components {
+  :host {
 
-  margin-bottom: 1.5rem;
-}
-
-.outer {
-  position: relative;
-  max-width: var(--input-max-width, 50rem);
-  display: block;
-}
-
-label {
-  margin-bottom: 0;
-  padding-bottom: 0.5rem;
-}
-
-.inner-label:empty {
-  display: none;
-}
-
-.wrapper {
-  max-width: var(--input-max-width, 50rem);
+    margin-bottom: 1.5rem;
+  }
 
-  &:after {
-    content: '';
+  .outer {
+    position: relative;
+    max-width: var(--input-max-width, 50rem);
     display: block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 1rem;
   }
 
-  input {
-    margin-bottom: 0.5rem;
+  label {
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
   }
 
-  .feedback {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    padding: 0.85rem;
-    width: min-content;
-    white-space: nowrap;
-    margin-bottom: 0.5rem;
+  .inner-label:empty {
     display: none;
   }
 
-  &.was-validated .feedback {
-    display: block;
-  }
-}
+  .wrapper {
+    max-width: var(--input-max-width, 50rem);
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 1rem;
+    }
 
-.wrapper {
+    input {
+      margin-bottom: 0.5rem;
+    }
 
-  input {
+    .feedback {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      padding: 0.85rem;
+      width: min-content;
+      white-space: nowrap;
+      margin-bottom: 0.5rem;
+      display: none;
+    }
 
-    margin-top: unset;
-  }
-}
-.wrapper.filled {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-  padding: 0.5rem 2rem 0 #{rem(13)};
-  font-size: var(--input-fs, 1rem);
-  line-height: var(--input-lh, 1.25rem);
-  color: var(--colour-body);
-  background-color: var(--colour-canvas-2);
-  border: 2px solid var(--colour-primary);
-  border-radius: 0.5rem;
-
-  &:is(:focus-within, .focus-within):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-  }
-
-  input {
-    all: unset;
-    font-size: 1rem;
-    line-height: rem(26);
-    display: var(--search-display,inline-block);
-    width: 0;
-    flex-grow: 1;
-    padding: 0 0.5rem 0 0 !important;
-    margin-inline: rem(3);
-    order: 999;
-    margin-bottom: 0.5rem;
+    &.was-validated .feedback {
+      display: block;
+    }
   }
 
-  .feedback {
-    display: none !important;
-  }
+  .wrapper {
+
+    input {
 
-  &:is(:focus, .focus):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+      margin-top: unset;
+    }
   }
-}
+  .wrapper.filled {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
+    padding: 0.5rem 2rem 0 #{rem(13)};
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-body);
+    background-color: var(--colour-canvas-2);
+    border: 2px solid var(--colour-primary);
+    border-radius: 0.5rem;
+
+    &:is(:focus-within, .focus-within):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
 
-button {
-  position: absolute;
-  right: 0.5rem;
-  border: none;
-  padding-inline: 0.5rem;
-  display: var(--display-button, none);
+    input {
+      all: unset;
+      font-size: 1rem;
+      line-height: rem(26);
+      display: var(--search-display,inline-block);
+      width: 0;
+      flex-grow: 1;
+      padding: 0 0.5rem 0 0 !important;
+      margin-inline: rem(3);
+      order: 999;
+      margin-bottom: 0.5rem;
+    }
 
-  &:after {
-    content: '\2715';
-    font-weight: bold;
-  }
-}
+    .feedback {
+      display: none !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;
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
   }
-}
 
-.wrapper:is(:focus-within) .dropdown {
-  display: var(--display-panel, none);
-}
+  button {
+    position: absolute;
+    right: 0.5rem;
+    border: none;
+    padding-inline: 0.5rem;
+    display: var(--display-button, none);
 
-@media (hover: hover) {
-  .wrapper .dropdown:hover {
-    display: var(--display-panel, none);
+    &:after {
+      content: '\2715';
+      font-weight: bold;
+    }
   }
-}
 
-@media (hover: none) {
-  :host(.hover) .wrapper .dropdown {
-    display: block;
+  .wrapper:is(:focus-within) .dropdown {
+    display: var(--display-panel, none);
   }
-}
 
-// Inline edit
-:host-context(:focus-within) {
-  input {
-    background-color: none !important;
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
   }
-}
-:host-context(iam-inline-edit) {
-  display: block;
-  --display-btns: none;
 
-  label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
-  .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
-    background-color: var(--colour-light);
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
+  }
 
+  // Inline edit
+  :host-context(:focus-within) {
     input {
+      background-color: none !important;
+    }
+  }
+  :host-context(iam-inline-edit) {
+    display: block;
+    --display-btns: none;
+
+    label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
+    .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
       background-color: var(--colour-light);
+
+      input {
+        background-color: var(--colour-light);
+      }
+
+      .dropdown {
+        display: none;
+      }
     }
 
-    .dropdown {
-      display: none;
+    .wrapper {
+      margin-bottom: 0;
     }
-  }
 
-  .wrapper {
-    margin-bottom: 0;
+    .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
+      input {
+        border-color: transparent;
+        background: none;
+        margin-left: var(--input-ms,-1rem);
+        width: calc(100% + 1rem);
+        max-width: calc(100% + 1rem);
+        box-shadow: none;
+      }
+
+      .dropdown {
+        display: none;
+      }
+    }
+    .wrapper.filled:not(:focus-within):not([data-mousedown]) {
+      background: none;
+      border: none;
+      padding-left: 0;
+    }
   }
 
-  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
-    input {
-      border-color: transparent;
-      background: none;
-      margin-left: var(--input-ms,-1rem);
-      width: calc(100% + 1rem);
-      max-width: calc(100% + 1rem);
-      box-shadow: none;
+  :host([data-single]){
+
+    .wrapper.filled{
+      
+      slot[name='checked'] {
+        pointer-events: none;
+      }
     }
 
-    .dropdown {
+    #clear {
+      display: none;
+    }
+    ::slotted([slot='checked'])::after {
       display: none;
     }
   }
-  .wrapper.filled:not(:focus-within):not([data-mousedown]) {
-    background: none;
-    border: none;
-    padding-left: 0;
-  }
-}
-
-:host([data-single]){
+  :host-context(td){
 
-  .wrapper.filled{
-    
-    slot[name='checked'] {
-      pointer-events: none;
-    }
+      input,
+      textarea,
+      select {
+        margin-left: 0!important;
+        width: 100%!important;
+        max-width: 100%!important;
+      }
   }
 
-  #clear {
-    display: none;
+  ::slotted([slot='checked']) {
+    margin-bottom: 0.5rem;
+    order: var(--order, 1);
+    margin-inline: rem(3);
   }
+
   ::slotted([slot='checked'])::after {
-    display: none;
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
   }
-}
-:host-context(td){
-
-    input,
-    textarea,
-    select {
-      margin-left: 0!important;
-      width: 100%!important;
-      max-width: 100%!important;
-    }
 }

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

@@ -1029,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;
@@ -1051,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/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/modal/modal.component.ts

@@ -43,7 +43,7 @@ class iamModal extends HTMLElement {
     const originalDialog = this.querySelector('dialog');
 
     const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog?.getAttribute('id');
-    const dialog = this.shadowRoot?.querySelector('dialog');
+    let dialog = this.shadowRoot?.querySelector('dialog');
     const closeButton = this.shadowRoot?.querySelector('[data-close]');
     const cancelButton = this.shadowRoot?.querySelector('[data-cancel]');
     const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : this.shadowRoot?.querySelector('[data-agreed]');