@iamproperty/components 7.6.4--beta6 → 7.6.4--beta8

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

@@ -3,6 +3,7 @@
 @use '../elements/prefix.scss' as *;
 @use '../elements/forms.scss' as *;
 @use '../elements/buttons.scss' as *;
+@use '../elements/badge-tag.scss' as *;
 @use '../elements/dialog.scss' as *;
 @use '../elements/popover.scss' as *;
 
@@ -42,6 +43,14 @@ slot[name='selectall'] {
   }
 }
 
+:host([data-view="square"]) .views [data-view="square"],
+:host([data-view="list"]) .views [data-view="list"],
+:host([data-view="small"]) .views [data-view="small"] {
+
+  background: #e9f9fd;
+  outline: 1px solid #1ebee6;
+}
+
 .selectall,
 slot[name='selectall'] {
   width: 2.5rem;
@@ -69,7 +78,7 @@ slot[name='selectall'] {
 :is(.actionbar, .actionbar--selected, .actionbar--search) {
   border-top-left-radius: var(--actionbar-radius, #{rem(10)});
   border-top-right-radius: var(--actionbar-radius, #{rem(10)});
-  padding: 0 1.5rem;
+  padding: 0 1rem;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
@@ -81,7 +90,7 @@ slot[name='selectall'] {
   }
 
   @media screen and (min-width: 36em) {
-    padding: 0 2rem;
+    padding: 0 1.5rem;
   }
 }
 
@@ -361,6 +370,8 @@ slot[name='selectall'] {
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
+    mask-image:unset;
+    -webkit-mask-image:unset;
   }
 }
 
@@ -407,6 +418,4 @@ slot[name="filters"]{
   }
 }
 
-
-
 // #endregion

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

@@ -105,3 +105,11 @@ iam-actionbar:has(.selectall input:checked) {
   --selectall-actionbar-opactiy: 0;
   --selectall-action-pe: none;
 }
+
+// #region filters 
+
+iam-actionbar [slot="filters"]:not(:has(+[slot="filters"])) {
+  margin-inline-end: auto!important;
+}
+
+// #endregion

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

@@ -0,0 +1,235 @@
+@use '../_func.scss' as *;
+
+@use '../_grid' as *;
+
+@use '../elements/forms' as *;
+@use '../elements/admin-panel' as *;
+
+@use '../elements/type' as *;
+@use '../elements/buttons' as *;
+@use '../utilities/margins';
+@use '../utilities/paddings';
+@use '../utilities/colours.scss';
+@use '../utilities/visually-hidden.scss';
+
+@use '../utilities/font-awesome-iso-fallbacks.scss';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block!important;
+}
+
+// #region enable icons
+.fa-chevron-up {
+  --fa: "\f077";
+}
+
+.fa-chevron-down {
+  --fa: "\f078";
+}
+
+.fa-trash {
+  --fa: "\f1f8";
+}
+
+.fa-plus {
+  --fa: "\2b";
+}
+
+.fa-pen-to-square {
+  --fa: "\f044";
+}
+
+.fa-floppy-disk {
+  
+  --fa: "\f0c7";
+}
+
+[class*="fa-"]{
+
+  &:before {
+    content: var(--fa);
+    font-weight: 600;
+    font-family: "Font Awesome 6 Pro";
+  }
+}
+// #endregion
+
+// #region basic structure
+
+#wrapper {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+
+  .admin-panel {
+    order: 1;
+    justify-content: flex-end;
+    display: flex;
+    max-width: fit-content;
+    gap: 0.75rem;
+    padding: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  #items {
+    order: 2;
+    display: block!important;
+  }
+}
+// #endregion
+
+// #region buckets
+#buckets {
+  
+  display: block!important;
+}
+
+.bucket {
+  display: block;
+  min-height: 10rem;
+  background-color: blue;
+  margin-bottom: 2rem;
+  padding: 1rem;
+}
+
+.bucket:empty {
+  display: block;
+  min-height: 10rem;
+  background-color: red;
+  margin-bottom: 2rem;
+  padding: 1rem;
+}
+
+.bucket__wrapper {
+
+  padding-right: 10.25rem;
+  position: relative;
+  border-bottom: 1px solid var(--colour-border);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+
+  > .btn__group {
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+    gap: 0;
+    padding: 0;
+  }
+}
+// #endregion
+
+// #region item
+#items [data-bucket] {
+  
+  display: block;
+
+  form {
+    --btns-width: 2.5rem;
+    --col-size: calc((100% - (var(--gap) * 11)) / 12);
+    column-gap: var(--gap);
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
+    grid-template-columns: [content-start col-1-start] var(--col-size) [col-1-end col-2-start] var(--col-size) [col-2-end col-3-start] var(--col-size) [col-3-end col-4-start] var(--col-size) [col-4-end col-5-start] var(--col-size) [col-5-end col-6-start] var(--col-size) [col-6-end col-7-start] var(--col-size) [col-7-end col-8-start] var(--col-size) [col-8-end col-9-start] var(--col-size) [col-9-end col-10-start] var(--col-size) [col-10-end col-11-start] var(--col-size) [col-11-end col-12-start] var(--col-size) [col-12-end content-end];
+
+    padding-right: calc(var(--btns-width) + 0.5rem);
+    position: relative;
+
+    .btn__group {
+      position: absolute;
+      top: 0.25rem;
+      right: 0;
+      gap: 0;
+      width: var(--btns-width);
+      padding-top: 1.75rem;
+      margin: 0;
+
+      .btn:not(.fa-trash){
+        display: none;
+      }
+    }
+
+    &:not(:where(main)):has(>[class*=col-]) {
+      .btn__group {
+        left: 100%;
+        margin-left: 0.5rem;
+        right: auto;
+      }
+    }
+  }
+}
+
+:host([data-order]) #items [data-bucket] form {
+
+  --btns-width: 10rem;
+
+  .btn:not(.fa-trash) {
+    display: inline-block;
+  }
+}
+// #endregion
+
+// #region criteria
+.criteria {
+  display: flex;
+  gap: 1rem;
+  padding-right: 5.25rem;
+  position: relative;
+
+  .btn__group {
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+    gap: 0;
+    padding: 0;
+  }
+
+  label {
+    flex-grow: 1;
+  }
+  label:nth-child(2) {
+    flex-grow: 0;
+  }
+}
+// #endregion
+
+// #region expand criteria
+.bucket__wrapper:not(.bucket--expanded) {
+  > label > span { // TODO add a selector if the input matches the only criteria item
+    display: none;
+  }
+  .criteria {
+    display: none;
+  }
+  .criteria label:nth-child(3):has(:disabled){
+    display: none;
+  }
+}
+
+.bucket__wrapper.bucket--expanded {
+
+  .btn__group .fa-pen-to-square {
+    --fa: "\e0a6";
+  }
+}
+// #endregion
+
+// #region Disable top and bottom buttons
+
+#buckets .bucket__wrapper:first-child .btn__group [data-direction="up"],
+#buckets .bucket__wrapper:last-child .btn__group [data-direction="down"],
+[data-bucket] form:first-child .btn__group [data-direction="up"],
+[data-bucket] form:last-child .btn__group [data-direction="down"] {
+
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// #endregion

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

@@ -238,6 +238,7 @@
       display: flex;
       justify-content: center;
       padding-top: 2rem;
+      margin-bottom: 0;
     }
   }
 

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

@@ -136,11 +136,11 @@ nav:has(iam-nav.nav--sticky) {
   left: 0;
   right: 0;
   z-index: 9999;
-  transition: transform 1s;
 
   iam-nav {
     position: fixed;
     outline: 2px solid #eeeeee;
+  transition: margin 1s;
   }
 }
 
@@ -148,6 +148,7 @@ nav:has(iam-nav.nav--sticky) {
   body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
     max-height: 100vh;
     overflow: hidden;
+    margin-top: 0rem;
   }
 
   nav:has(iam-nav.nav--xs-sticky) {
@@ -156,7 +157,7 @@ nav:has(iam-nav.nav--sticky) {
     left: 0;
     right: 0;
     z-index: 9999;
-    transition: transform 1s;
+    transition: margin 1s;
 
     iam-nav {
       position: fixed;
@@ -164,7 +165,8 @@ nav:has(iam-nav.nav--sticky) {
   }
 
   body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
-    transform: translate(0, -110%);
+    
+  margin-top: -8rem;
   }
 }
 
@@ -175,8 +177,10 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-body[data-direction='down'].past100 nav:has(.nav--sticky) {
-  transform: translate(0, -110%);
+body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
+  //transform: translate(0, -100%);
+
+  margin-top: -8rem;
 }
 
 // #endregion

package/assets/sass/components/notification.scss

@@ -33,22 +33,12 @@
 }
 
 
-:host(.colour-warning),
-.iam-notification.colour-warning {
-  background: var(--colour-notification-warning-bg);
+:host([class*="colour-"]) {
+  
+  --bg-colour: color-mix(in oklab, var(--colour), #ffffff 80%) !important;
+  background: light-dark(var(--bg-colour),var(--colour-canvas-2));
 }
 
-  :host(.colour-danger),
-  .iam-notification.colour-danger {
-    
-  background: var(--colour-notification-danger-bg);
-  }
-
-  :host(.colour-success),
-  .iam-notification.colour-success {
-    
-  background: var(--colour-notification-success-bg);
-  }
 
 :host(.bg-white),
 .iam-notification.bg-white {

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

@@ -77,6 +77,9 @@
       max-height: none !important;
     }
 
+    ::slotted(*) {
+      margin-inline: 1.5rem;
+    }
     ::slotted(table) {
       overflow: visible !important;
       margin-inline: 1.5rem;

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

@@ -6,6 +6,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #region Basic table stuff
 
+@layer components {
 :is(#{$selector}) {
   --hover-background: var(--colour-light);
   --row-bg: var(--colour-canvas-2);
@@ -89,16 +90,21 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
         --compact-size: 2rem;
 
         &:before {
+          --fa: '\f055'!important;
           font-family: 'Font Awesome 6 Pro';
-          content: '\f055';
+          display: block!important;
+
           font-weight: 300 !important;
           font-size: rem(28);
           line-height: var(--compact-size) !important;
         }
 
+        &[aria-expanded] {
+            --fa: '\f056'!important;
+        }
         &[aria-expanded] {
           &:before {
-            content: '\f056';
+            --fa: '\f056'!important;
             font-weight: 900 !important;
           }
         }
@@ -390,13 +396,13 @@ table {
   padding-top: 0;
 }
 :is(#{$selector}).table--fullwidth iam-actionbar {
-  margin: -2rem -2rem 2rem -2rem;
+  margin: -2rem -1.5rem 2rem -1.5rem;
   box-shadow: none;
   border-radius: 0;
 }
 
 :is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
-  margin: -2rem -2rem 2rem -2rem;
+  margin: -2rem -1.5rem 2rem -1.5rem;
   box-shadow: none;
   border-radius: 0;
     background-color: #e6eaec;
@@ -447,8 +453,8 @@ table {
 @container (width > 36em) {
   :is(#{$selector}).table--fullwidth iam-actionbar,
   :is(#{$selector}) iam-actionbar {
-    margin-left: -2rem;
-    margin-right: -2rem;
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
     margin-top: -2rem;
     margin-bottom: 2rem;
   }
@@ -470,6 +476,33 @@ table {
     }
   }
 
+  td:not(.selectrow) input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+    
+    &:before,
+    &:after {
+      top: 0 !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
+  td:not(.selectrow):has(label:not(.radio--tick) input:is([type='radio'], [type='checkbox'])) + td {
+
+    border-top: 0;
+  }
+  td:not(.selectrow) label:not(.radio--tick):has(input:is([type='radio'], [type='checkbox'])) {
+    
+    padding-inline: 0;
+    margin-right: 0;
+
+    &:before,
+    &:after {
+      top: 0 !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
   &:has([type='checkbox']:checked) table{
     overflow: hidden;
   }
@@ -531,4 +564,93 @@ table {
     }
   }
 }
+}
+// #endregion
+
+
+// #region Highlighted row
+:is(#{$selector}):not(.table--fullwidth) {
+
+
+  tr:has(td label input:is([type="checkbox"])):has(+ .tr--highlight) td {
+
+    padding-bottom: 1.5rem;
+  }
+
+  .tr--highlight {
+    --row-bg: var(--colour-success);
+    --padding-block: 0.5rem;
+
+    td:has(i) {
+      color: var(--colour-primary-theme);
+      padding-left: 0.5rem;
+      font-style: italic;
+      position: relative;
+      padding-left: 2.5rem;
+      padding-right: 2rem;
+      padding-block: var(--padding-block);
+
+      i {
+        position: absolute;
+        top: 0.5rem;
+        left: 1rem;
+      }
+    }
+  }
+
+  tr:has(td label input:is([type="checkbox"])) + .tr--highlight td:has(i){
+
+    padding-left: 4.5rem;
+    
+      i {
+        left: 3rem;
+      }
+  }
+
+
+  tr:has(+ .tr--highlight) {
+    border-bottom: 0;
+  }
+
+  @container (width < 23.4375em) {
+    .tr--highlight {
+      display: none;
+    }
+    tr[data-highlight]:before {
+
+      font-family: 'Font Awesome 6 Pro';
+      content: '\f005';
+      font-weight: bold;
+      position: absolute;
+      left: 1rem;
+      z-index: 99;
+      top: anchor(--my-anchor top);
+      left: anchor(--my-anchor left);
+      margin-top: 1rem;
+      margin-left: 2rem;
+      position-anchor: --my-anchor;
+      color: var(--colour-primary-theme);
+    }
+    tr[data-highlight]:after {
+      content: attr(data-highlight);
+      background: var(--colour-success);
+      color: var(--colour-primary-theme);
+      display: block;
+      width: calc(100% + 4rem);
+      margin-top: 0.5rem;
+      margin-inline: -2rem;
+      padding-inline: 2rem;
+      margin-bottom: -2rem;
+      padding-block: 1rem;
+
+      border-bottom-left-radius: 0.5rem;
+      border-bottom-right-radius: 0.5rem;
+
+      font-style: italic;
+      padding-left: 3.5rem;
+
+      anchor-name: --my-anchor;
+    }
+  }
+}
 // #endregion