@iamproperty/components 5.5.1-beta-1 → 5.5.1-beta-4

package/assets/sass/components/inline-edit.preload.scss

@@ -0,0 +1,98 @@
+@use "../_func" as *;
+
+iam-inline-edit {
+
+  .optional-text {
+    display: none;
+  }
+
+  label,
+  textarea {
+    margin: 0;;
+  }
+}
+
+
+iam-inline-edit:focus-within {
+
+
+  --display-status: none;
+}
+
+
+
+
+
+
+// Inactive state
+iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
+  
+  --display-btns: none;
+
+  input,
+  textarea,
+  select {
+    border: none;
+    background: none;
+    margin-left: -1rem;
+    width: calc(100% + 1rem);
+    max-width: calc(100% + 1rem);
+    box-shadow: none;
+  }
+}
+
+iam-inline-edit:defined:focus-within:has(select),
+iam-inline-edit:defined[data-saving]:has(select) {
+
+  --display-btns: none;
+}
+
+// Hover state
+iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
+  
+  input,
+  textarea,
+  select {
+    border: none;
+    background: var(--colour-light);
+  }
+}
+
+
+// Multi select
+
+iam-inline-edit:has(iam-multiselect label[slot=checked]) {
+  --display-btns: none;
+}
+
+iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot=checked]) {
+  --display-button: none;
+}
+
+iam-inline-edit iam-multiselect .tag[slot="checked"]{
+
+  outline: none;
+}
+
+
+// Error message
+
+iam-inline-edit.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)):has(:is(:invalid, .is-invalid)):after {
+
+  position: absolute;
+    right: 0;
+    bottom: 100%;
+    padding: 0.85rem;
+    width: min-content;
+    white-space: nowrap;
+    
+
+    color: var(--colour-heading);
+
+    display: block;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background: var(--colour-canvas-2);
+    border-radius: 0.5rem;
+    margin: 0 0 -1rem 0;
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+}

package/assets/sass/components/inline-edit.scss

@@ -0,0 +1,32 @@
+@use "../_func" as *;
+
+:host {
+  
+  max-width: var(--input-max-width, 50rem);
+  display: block;
+  font-weight: normal;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.btns, .status {
+  justify-content: flex-end;
+  gap: 0.5rem;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+}
+
+.btns {
+  
+  display: var(--display-btns, flex);
+  justify-content: flex-end;
+}
+
+.status {
+  display: var(--display-status, flex);
+}
+
+.btn-action {
+  margin: 0;
+}

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

@@ -0,0 +1,37 @@
+@use "../_func" as *;
+
+iam-multiselect .tag[slot="checked"]{
+  margin-bottom: rem(8);
+  order: var(--order, 1);
+  margin-inline: rem(3);
+}
+
+iam-multiselect .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-multiselect:has(label:not([slot="checked"]):not([slot="notmatched"])) {
+
+  --display-panel: block;
+}
+
+iam-multiselect:has(label[slot="checked"]) {
+
+  --display-button: block;
+}

package/assets/sass/components/multiselect.scss

@@ -0,0 +1,186 @@
+@use "../_func" as *;
+
+.outer {
+  
+  position: relative;
+  max-width: var(--input-max-width, 50rem);
+  display: block;
+}
+
+label {
+  margin-bottom: 0;
+  padding-bottom: 0.5rem;
+}
+
+.wrapper {
+
+  margin-bottom: rem(24);
+  max-width: var(--input-max-width, 50rem);
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 1rem;
+  }
+
+  input {
+    
+    margin-bottom: rem(8);
+  }
+
+  .feedback {
+    position: absolute;
+    right: 0;
+    bottom: 100%;
+    padding: 0.85rem;
+    width: min-content;
+    white-space: nowrap;
+    margin-bottom: 0.5rem;
+    display: none;
+  }
+
+  &.was-validated .feedback{
+    display: block;
+  }
+}
+
+.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: #{rem(8)} #{rem(32)} #{rem(0)} #{rem(13)};
+  font-size: var(--input-fs, #{rem(16)});
+  line-height: var(--input-lh, #{rem(20)});
+  color: var(--colour-body);
+  background-color: var(--colour-canvas-2);
+  border: 2px solid var(--colour-primary);
+  border-radius: rem(8);
+
+  &: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: rem(16);
+    line-height: rem(26);
+    display: inline-block;
+    width: 0;
+    flex-grow: 1;
+    padding: 0 rem(8) 0 0!important;
+    margin-inline: rem(3);
+    order: 999;
+    margin-bottom: rem(8);
+  }
+
+  .feedback {
+    display: none!important;
+  }
+
+  &: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);
+  }
+}
+
+button {
+  
+  position: absolute;
+  top: 0.75rem;
+  right: 0.5rem;
+  border: none;
+  background: none;
+  padding-inline: 0.5rem;
+  display: var(--display-button, none);
+
+  &:after {
+    content: '\2715';
+    font-weight: bold;
+  }
+}
+
+.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;
+  }
+}
+
+
+
+.wrapper:is(:hover, :focus-within) .dropdown {
+
+  display: var(--display-panel, none);
+}
+
+
+// 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;
+    }
+  }
+
+  .wrapper {
+    margin-bottom: 0;
+  }
+
+  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]){
+
+    input {
+      border: none;
+      background: none;
+      margin-left: -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;
+  }
+}

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

@@ -140,6 +140,8 @@ iam-nav {
 
 
 iam-nav details {
+
+  padding-bottom: 0;
   
   > summary {
 

package/assets/sass/components/tabs.scss

@@ -197,4 +197,13 @@
     pointer-events: none;
   }
 }
-// #endregion
+// #endregion
+@include media-breakpoint-up(sm) {
+  :host(.tabs--inline) .tabs__links {
+    margin: 0;
+    justify-content: center;
+  }
+  :host(.tabs--inline) .tabs__links__wrapper:after {
+    width: 100%;
+  }
+}

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

@@ -5,10 +5,7 @@
   --padding-top: #{rem(16)};
   --padding-bottom: #{rem(24)};
   --mh-modifier: #{rem(56 + 16)};
-
   --mh-padding-inline: var(--padding-x);
-
-
   display: block;
   padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);

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

@@ -0,0 +1,92 @@
+@use "../_func" as *;
+
+:is(.badge, .tag) {
+
+  font-size: rem(16);
+  line-height: rem(26);
+  border: none!important;
+  outline: 1px solid var(--colour-canvas);
+  outline-offset: -1px;
+  padding: 0 rem(16);
+  border-radius: rem(16);
+  margin: 0;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  max-width: fit-content;
+  color: #262626!important;
+  position: relative;
+  background: var(--wider-colour, var(--wider-colour-1));
+  margin-bottom: 1rem;
+
+  &:has(+ :is(.badge, .tag)) {
+    margin-right: rem(6);
+  }
+  
+  &:empty {
+    display: none;
+  }
+}
+
+.tag {
+
+  &:after {
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
+  }
+
+  &:is(:hover,:focus,.hover,:focus-within, :focus-visible) {
+    background: var(--wider-colour-hover, var(--wider-colour-1-hover));
+  }
+
+  &:is(:active,.active) {
+    background: var(--wider-colour-active, var(--wider-colour-1-active));
+  }
+
+  &:has(input:disabled),
+  &:disabled {
+    
+    background: var(--wider-colour-1)!important;
+    color: #99adb1!important;
+  }
+}
+
+.tag.tag--not-set,
+iam-multiselect:not(:defined) .tag,
+.tag.tag--toggle {
+
+  background: var(--colour-canvas);
+  outline: 1px solid var(--colour-border);
+
+}
+
+.tag.tag--toggle {
+  
+  &:after {
+    display: none;
+  }
+
+  &:is(:hover,:focus) {
+    
+    background: #EEEEEE;
+  }
+  
+  &:is(:active) {
+    
+    background: #E0E0E0;
+  }
+  
+  &:has(input:checked),
+  &.selected {
+      
+    background: #E9F9FD;
+    outline: 1px solid #1EBEE6;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn :is(.badge, .tag) {
+  position: relative;
+  top: -1px;
+}

package/assets/sass/elements/buttons.scss

@@ -113,7 +113,6 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     margin-right: rem(6);
   }
 
-  
   a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
   &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
     background: var(--colour-btn-action-hover-bg);
@@ -137,6 +136,19 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     line-height: 1em;
   }
 
+  &.btn[class*='fa-after'] {
+    padding-right: 4rem;
+  }
+  &.btn[class*='fa-after']:before {
+
+    margin-right: 0;
+    margin-right: rem(6);
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
   &:not(.btn-compact):before{
     margin-right: 1rem;
   }

package/assets/sass/elements/details.scss

@@ -1,10 +1,46 @@
-details:not(.details--revert) {
+
+details {
+
+  &:not([open]){
+      
+    padding-bottom: rem(32);
+  }
+
+  summary {
+
+    font-size: rem(18);
+    line-height: rem(21);
+    font-weight: normal;
+    color: var(--colour-heading);
+    display: block;
+
+    &:after {
+      content: "\f055";
+      display: inline-block;
+      margin-left: 0.5em;
+      line-height: 1em;
+      font-size: 1em;
+      font-family: "Font Awesome 6 Pro";
+    }
+  }
+
+  &[open] summary {
+    
+    margin-bottom: rem(16);
+  }
+
+}
+
+
+
+iam-accordion details {
 
   --inline-padding: #{rem(2)};
   --border-radius: #{rem(8)} #{rem(8)} 0 0;
   --icon-top: #{rem(14)};
   --line-height: #{rem(24)};
 
+
   *:not(iam-tabs) > &:not([open]){
     
     padding-bottom: rem(42);
@@ -19,7 +55,7 @@ details:not(.details--revert) {
 
   summary {
 
-    border-bottom: 1px solid var(--colour-border);
+  border-bottom: 1px solid var(--colour-border);
     padding-left: var(--inline-padding);
     padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
     padding-block: rem(14)!important;
@@ -36,7 +72,11 @@ details:not(.details--revert) {
       all: unset!important;
     }
 
-    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6){
+    &::after {
+      display: none;
+    }
+
+    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label){
       max-width: 100%;
       padding: 0;
       margin: 0;
@@ -60,7 +100,7 @@ details:not(.details--revert) {
     margin-bottom: 2rem;
   }
 
-  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6) {
+  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6, .label) {
 
     &:after {
       content: "\f056";
@@ -68,7 +108,7 @@ details:not(.details--revert) {
     }
   }
 
-  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6)) { // h3 purposelessly missed out
+  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label)) { // h3 purposelessly missed out
 
     font-family: $headings-font-family;
     font-style: $headings-font-style;
@@ -88,12 +128,14 @@ details:not(.details--revert) {
 
     &:after {
       content: "\f055";
+      display: block;
       position: absolute;
       font-size: rem(24);
       top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
       right: var(--inline-padding);
       width: rem(24);
       height: rem(24);
+      margin: 0;
       line-height: rem(24);
       font-weight: 300;
       font-family: "Font Awesome 6 Pro";
@@ -115,4 +157,51 @@ details:not(.details--revert) {
       font-weight: 900;
     }
   }
+}
+
+
+dialog iam-accordion details {
+
+  --inline-padding: var(--dialog-padding);
+
+  margin-inline: calc(var(--dialog-padding) * -1);
+  width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
+
+
+  &:has(summary:is(:hover, :focus-visible)),
+  &[open] {
+    background: var(--colour-light);
+    overflow: hidden;
+  }
+
+  // Fix the border bottom issue
+  &:has(+ details[open]),
+  &:has(summary:is(:hover, :focus-visible)),
+  &:has(+ details summary:is(:hover, :focus-visible)),
+  &[open] {
+    border-bottom: 1px solid var(--colour-border);
+  }
+
+  &:has(+ details[open]) summary,
+  &:has(summary:is(:hover, :focus-visible)) summary,
+  &:has(+ details summary:is(:hover, :focus-visible)) summary,
+  &[open] summary {
+    border-bottom: 0;
+  }
+
+  &[open] summary {
+
+    margin-bottom: 1rem;
+  }
+ 
+  summary {
+    --inline-padding: 0;
+  }
+
+  padding-inline: var(--dialog-padding);
+
+  &::before {
+    content: "";
+
+  }
 }

package/assets/sass/elements/dialog.scss

@@ -11,6 +11,8 @@ dialog[open] {
 
   --dialog-padding: #{rem(24)};
 
+  --mh-padding-inline: var(--dialog-padding);
+
   width: fit-content;
   height: fit-content;  
   border: none;