@iamproperty/components 7.5.0 → 7.5.1--beta2

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

@@ -29,7 +29,7 @@ $darkMode: 'true' !default;
     input,
     textarea,
     select {
-      border: none;
+      border-color: transparent;
       background: none;
       margin-left: -1rem;
       width: calc(100% + 1rem);
@@ -55,16 +55,82 @@ $darkMode: 'true' !default;
 
   // Multi select
 
-  iam-inline-edit:has(iam-multiselect label[slot='checked']) {
+  iam-inline-edit:has(iam-multiselect) {
     --display-btns: none;
+    --display-status: none;
+  }
+
+  *:has(> iam-inline-edit) {
+    position: relative;
+
+    &[data-value]:hover:before {
+      
+      opacity: 1;
+      z-index: 1;
+      position: relative;
+    }
+
+    &[data-value]:before{
+      content: attr(data-value);
+      display: block;
+      padding-inline: 1rem;
+      opacity: 0;
+      white-space: nowrap;
+      font-size: rem(16);
+      line-height: rem(26);
+      pointer-events: none;
+      color: var(--colour-heading);
+    }
+  }
+
+  td:has(> iam-inline-edit) {
+
+    height: 3.5rem;
+  }
+  
+  iam-inline-edit:has(iam-multiselect) {
+    --search-display: none;
+    --input-ms: 0;
+
+    position: absolute;
+    inset: 0.1rem 2rem 0.75rem 0;
+    width: 100%;
+    height: 100%;
+
+    &:focus-within {
+      
+      position: absolute;
+    }
+  }
+
+  td iam-inline-edit:has(iam-multiselect) {
+    width: calc(100% - 2rem);
   }
 
+
   iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
     --display-button: none;
   }
 
+  *:hover > iam-inline-edit iam-multiselect,
+  iam-inline-edit iam-multiselect.hover,
+  iam-inline-edit:focus-within iam-multiselect {
+    --search-display: inline-block;
+  }
+
   iam-inline-edit iam-multiselect .tag[slot='checked'] {
     outline: none;
+    pointer-events: none;
+  }
+
+  iam-inline-edit iam-multiselect.hover .tag[slot='checked'],
+  iam-inline-edit iam-multiselect:hover .tag[slot='checked'],
+  iam-inline-edit iam-multiselect:focus-within .tag[slot='checked'] {
+    display: none;
+  }
+
+  span iam-inline-edit:has(iam-multiselect) {
+    margin-top: -0.6rem;
   }
 
   // Error message

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

@@ -1,7 +1,14 @@
 @use '../_func' as *;
+@use '../elements/buttons--action.scss' as *;
 
 @include display();
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :host {
   max-width: var(--input-max-width, 50rem);
   display: block;

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

@@ -11,6 +11,11 @@ $darkMode: 'true' !default;
     margin-inline: rem(3);
   }
 
+  iam-multiselect .tag[slot='checked']:first-child:last-child {
+
+    margin-inline: 0;
+  }
+
   iam-multiselect .tag:not([slot='checked']) {
     display: block;
     width: 100%;
@@ -44,4 +49,9 @@ $darkMode: 'true' !default;
       color: var(--colour-heading);
     }
   }
+
+  iam-multiselect[data-single] .tag[slot='checked'],
+  iam-multiselect[data-single] .tag[slot='checked'] * {
+    pointer-events: none!important;
+  }
 }

package/assets/sass/components/multiselect.scss

@@ -1,6 +1,27 @@
 @use '../_func' as *;
 
+
+@use '../elements/forms.scss' as *;
+@use '../elements/admin-panel.scss' as *;
+
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 @include visually-hidden();
+@include display();
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+
+  margin-bottom: rem(24);
+}
 
 .outer {
   position: relative;
@@ -13,8 +34,11 @@ label {
   padding-bottom: 0.5rem;
 }
 
+.inner-label:empty {
+  display: none;
+}
+
 .wrapper {
-  margin-bottom: rem(24);
   max-width: var(--input-max-width, 50rem);
 
   &:after {
@@ -47,6 +71,13 @@ label {
   }
 }
 
+.wrapper {
+
+  input {
+
+    margin-top: unset;
+  }
+}
 .wrapper.filled {
   display: flex;
   flex-direction: row;
@@ -71,7 +102,7 @@ label {
     all: unset;
     font-size: rem(16);
     line-height: rem(26);
-    display: inline-block;
+    display: var(--search-display,inline-block);
     width: 0;
     flex-grow: 1;
     padding: 0 rem(8) 0 0 !important;
@@ -168,9 +199,9 @@ button {
 
   .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
     input {
-      border: none;
+      border-color: transparent;
       background: none;
-      margin-left: -1rem;
+      margin-left: var(--input-ms,-1rem);
       width: calc(100% + 1rem);
       max-width: calc(100% + 1rem);
       box-shadow: none;
@@ -186,3 +217,30 @@ button {
     padding-left: 0;
   }
 }
+
+:host([data-single]){
+
+  .wrapper.filled{
+    
+    slot[name='checked'] {
+      pointer-events: none;
+    }
+  }
+
+  #clear {
+    display: none;
+  }
+  ::slotted([slot='checked'])::after {
+    display: none;
+  }
+}
+:host-context(td){
+
+    input,
+    textarea,
+    select {
+      margin-left: 0!important;
+      width: 100%!important;
+      max-width: 100%!important;
+    }
+}

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

@@ -4,10 +4,25 @@
 
 @use '../bs_grid' as *;
 
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
+
+@use '../elements/brand.scss' as *;
+
+@use '../elements/dialog.scss' as *;
+@use '../elements/modal.scss' as *;
+@use '../elements/container.scss' as *;
+
+
 @include margins();
+@include paddings();
 @include sizes();
 @include display();
 
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 $layers: 'true' !default;
 $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;

package/assets/sass/components/notification.scss

@@ -20,10 +20,7 @@ $darkMode: 'true' !default;
     background: var(--colour-canvas-2);
     }
 
-  &::slotted(strong) {
-    color: green;
-  }
-  &::slotted(i),
+  ::slotted(i),
   i {
     color: var(--colour, currentColor);
   }
@@ -76,6 +73,11 @@ $darkMode: 'true' !default;
   }
 }
 
+:host(.bg-danger) .notification{
+
+  color: var(--colour-white);
+}
+
 // Alerts
 :host([data-type='alert']),
 .iam-notification[data-type='alert'] {

package/assets/sass/components/pagination.scss

@@ -1,4 +1,6 @@
 @use '../_func' as *;
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
 
 @include margins();
 
@@ -7,6 +9,10 @@
   display: block;
 }
 
+:host(.d-none){
+  display: none;
+}
+
 .pagination {
   display: block;
 

package/assets/sass/components/slider.scss

@@ -1,6 +1,7 @@
 @use '../_func' as *;
 
 @use '../bs_grid' as *;
+@use '../elements/forms.scss' as *;
 
 .row {
   align-items: center;

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

@@ -2,7 +2,7 @@
 
 $darkMode: 'true' !default;
 
-$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
+$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
 // #region Basic table stuff
 

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

@@ -1,12 +1,15 @@
 @use '../_func.scss' as *;
 
+
 $darkMode: 'true' !default;
 
 @use './table-basic.global.scss' with (
   $darkMode: $darkMode
 );
 
-$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
+$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
+
+@include display();
 
 // #region Tables are only stacked on mobile
 :is(#{$selector}):not(.table--fullwidth).table--cta {
@@ -16,6 +19,8 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 }
+
+
 // #endregion
 
 // #region As part of the iam-table component
@@ -115,7 +120,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 
-  &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+  &:has([type='checkbox']:checked) tr:has([type='checkbox']):not(:has(.tag)) {
     [type='checkbox'] {
       width: 100vw;
       height: 100%;
@@ -135,10 +140,10 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 
-  tr:has([type='checkbox']:hover, [type='checkbox']:focus) {
+  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) {
+  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked):not(:has(.tag)) {
     --row-bg: #e0e0e0;
   }
 }

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

@@ -1,4 +1,8 @@
 @use '../_func' as *;
+@use '../elements/links.scss';
+@use '../elements/buttons.scss';
+@use '../components/tabs.config.scss';
+
 
 :host {
   background: transparent;

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

@@ -4,24 +4,251 @@ $layers: 'true' !default;
 $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+*:not(main):has(> iam-tabs) {
+  container-type: inline-size;
+}
+
+iam-tabs {
+  --colour-tab-underline: var(--colour-info);
+
+  details:not([open]) {
+    padding-bottom: 0;
+  }
+
   .tabs__dropdown {
     display: none;
+    width: fit-content;
   }
 
-  iam-tabs:is(.tabs--dropdown) {
+  &:is(.tabs--dropdown) {
     .tabs__dropdown {
       display: block;
     }
+
+    &::part(wrapper) {
+      display: none;
+    }
   }
 
   @container (min-width: 62em) {
-    iam-tabs:is(.tabs--dropdown-md) {
+    &:is(.tabs--dropdown) {
       .tabs__dropdown {
+        display: none;
+      }
+
+      &::part(wrapper) {
         display: block;
       }
     }
   }
+}
+
+iam-tabs::part(next-button) {
+  display: none;
+}
+
+iam-tabs.tabs--guided::part(next-button) {
+  @container (width > 62em) {
+    position: absolute;
+    top: rem(150);
+    right: 0;
+    display: block;
+  }
+}
+
+iam-tabs.tabs--guided::part(next-button):not(:hover) {
+  background: var(--colour-success);
+}
+
+.tabs:not(.admin-panel) {
+  position: relative;
+
+  .tabs__links__wrapper {
+    position: relative;
+    margin: 0 auto 2rem;
+
+    &:after {
+      content: '';
+      left: 50%;
+      position: relative;
+      height: 1px;
+      width: 100vw;
+      background-color: var(--colour-border);
+      transform: translate(-50%, 0);
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+.tabs.admin-panel {
+  .tabs__links__wrapper {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.tabs:not(.admin-panel) .tabs__links {
+  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+}
+
+.tabs__links {
+  scroll-snap-type: x mandatory;
+  padding-bottom: 3px;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+  margin: 0 -1.5rem;
+  overflow-y: clip;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .link {
+    white-space: nowrap;
+    scroll-snap-align: start;
+    scroll-margin-left: var(--container-padding);
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    --is-current: 0;
+    font-weight: bold;
+    font-family: var(--font-heading);
+    font-size: rem(18);
+    cursor: pointer;
+    margin: 0;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+    display: inline-block;
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:last-child {
+      margin-inline-end: 0;
+    }
+
+    &:after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 50%; // half way across
+      height: 3px;
+      width: 100%;
+      transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
+      background: var(--colour-tab-underline);
+      transition: transform 0.4s;
+    }
+
+    &:not(.disabled) {
+      &:hover:after,
+      &:focus:after,
+      &.focus:after {
+        transform: translate(-50%, 0) scale(0.6, 1);
+      }
+    }
+
+    &:not(.disabled) {
+      &:is([aria-pressed='true'], :active, .current):after {
+        transform: translate(-50%, 0) scale(1, 1);
+      }
+    }
+
+    &:is([aria-pressed='true'], .current) {
+      pointer-events: none;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .tabs__links {
+    .link:not(.text-decoration-none):not(.btn) {
+      padding: 2rem 2rem 0.5rem 2rem;
+    }
+  }
+
+  .tabs__links__wrapper {
+    margin: 0 auto 2.5rem;
+  }
+}
+
+// #region admin-panel links
+.admin-panel :is(.admin-panel__links, .tabs__links) {
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
-  // #endregion
+  border-top-left-radius: rem(8);
+  border-top-right-radius: rem(8);
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  &:after {
+    display: none;
+  }
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
+    flex-direction: row;
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    margin: 0;
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
+    width: 100%;
+    position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color: var(--colour-success);
+
+    &:not([class*='bg-']) {
+      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed='true']) {
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed='true']) {
+      background: var(--colour-canvas-2) !important;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      margin: 0;
+
+      &:not(:first-child) {
+        border-left: 1px solid var(--colour-border) !important;
+      }
+    }
+  }
+
+  .link:is(.current, [aria-pressed='true']) {
+    pointer-events: none;
+  }
+}
+
+// #endregion
+@include media-breakpoint-up(sm, $mobileOnly) {
+  :host(.tabs--inline) .tabs__links {
+    margin: 0;
+    justify-content: center;
+  }
+
+  :host(.tabs--inline) .tabs__links__wrapper:after {
+    width: 100%;
+  }
 }