@iamproperty/components 4.0.0 → 4.1.0-beta-2

package/assets/sass/components/forms.scss

@@ -16,7 +16,7 @@ label {
 // #endregion
 
 // #region input field
-:is(input,textarea,output,select) {
+:is(input:not([type="checkbox"]):not([type="radio"]),textarea,output,select) {
   display: block;
   width: 100%;
   max-width: $content-max-width;
@@ -192,111 +192,117 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 
 // #region prefix
 :is(.prefix, .suffix) {
-  display: inline-block;
-  width: auto;
-  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
-  font-size: var(--input-fs, #{rem(16)});
-  line-height: var(--input-lh, #{rem(20)});
-  color: var(--colour-body);
-  background-color: var(--colour-primary-theme);
-  border: 2px solid var(--colour-primary);
-  color: var(--colour-white);
-  margin-bottom: 1rem;
-  border-end-start-radius: rem(8);
-  border-start-start-radius: rem(8);
-  min-width: calc(#{rem(20 + 12 + 12)} + 4px);
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
-  position: relative;
-  
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-
+  display: none;
+}
+@supports selector(:has(*)) {
 
-  &:after {
+  :is(.prefix, .suffix) {
     display: inline-block;
-    max-width: rem(20);
-  }
+    width: auto;
+    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    color: var(--colour-body);
+    background-color: var(--colour-primary-theme);
+    border: 2px solid var(--colour-primary);
+    color: var(--colour-white);
+    margin-bottom: 1rem;
+    border-end-start-radius: rem(8);
+    border-start-start-radius: rem(8);
+    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+    
+    min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+    max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
-  &[class*="fa-"] {
-    width: calc(#{rem(20 + 12 + 12)} + 4px);
-    padding-inline: 0;
-  }
 
-  select {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
+    &:after {
+      display: inline-block;
+      max-width: rem(20);
+    }
 
-  span {
-    display: none;
-  }
+    &[class*="fa-"] {
+      width: calc(#{rem(20 + 12 + 12)} + 4px);
+      padding-inline: 0;
+    }
 
-  select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
-  select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
-  select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
-  select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
-  select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
-  select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
-  select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
-  select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
-  select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
-  select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+    select {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
 
-    display: block;
-  }
+    span {
+      display: none;
+    }
 
-  select ~ span:after {
-    content: " \f078";
-    font-family: "Font Awesome 6 Pro";
-    font-size: 0.8em;
-    display: inline-block;
-    padding-left: 1em;
-  }
+    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+
+      display: block;
+    }
 
-  select:focus-visible ~ span:after {
-    content: "\f077";
+    select ~ span:after {
+      content: " \f078";
+      font-family: "Font Awesome 6 Pro";
+      font-size: 0.8em;
+      display: inline-block;
+      padding-left: 1em;
+    }
+
+    select:focus-visible ~ span:after {
+      content: "\f077";
+    }
   }
-}
 
-.prefix {
-  
-  border-right: none;
-}
+  .prefix {
+    
+    border-right: none;
+  }
 
-.suffix {
-  
-  border-left: none;
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-  border-start-end-radius: rem(8)!important;
-  border-end-end-radius: rem(8)!important;
-  order: 2;
-}
+  .suffix {
+    
+    border-left: none;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: rem(8)!important;
+    border-end-end-radius: rem(8)!important;
+    order: 2;
+  }
 
-.prefix span {
-  display: none;
+  .prefix span {
+    display: none;
 
-  small {
-    font-size: 0.8em;
+    small {
+      font-size: 0.8em;
+    }
   }
-}
 
-.prefix ~ :is(input,textarea,output) {
-  
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-}
+  .prefix ~ :is(input,textarea,output) {
+    
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
 
-.suffix ~ :is(input,textarea,output) {
-  order: 1;
-  
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  .suffix ~ :is(input,textarea,output) {
+    order: 1;
+    
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
 }
 // #endregion
 
@@ -379,6 +385,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region radio/checkbox field 
+@supports selector(:has(*)) {
+
 input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
@@ -629,6 +637,8 @@ input[type="checkbox"][disabled]:checked + label {
     border-color: #E0E0E0!important;
   }
 }
+
+}
 // #endregion
 
 // #region Conditional reveal

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

@@ -10,11 +10,17 @@ body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
 body {
   
   --nav-height: #{rem(96)};
+  --sticky-padding: 0px;
 
   &:has(iam-nav a[slot="secondary"]){
     
     --nav-height: #{rem(96 + 40)};
   }
+
+  &:has(iam-nav.nav--sticky) {
+    
+    --sticky-padding: var(--nav-height);
+  }
 }
 
 // #region Create the correct padding top of the page
@@ -110,7 +116,7 @@ iam-nav {
     text-decoration: none;
   }
 
-  a:not([slot="logo"]):not(:has(iam-card)) {
+  a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
     
     text-decoration: none;
 
@@ -165,7 +171,7 @@ iam-nav details {
 
     background-color: var(--colour-canvas);
     
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -180,9 +186,9 @@ iam-nav details {
       background-color: var(--colour-white);
 
             
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
         
-      background-color: var(--colour-canvas-2);
+        background-color: var(--colour-canvas-2);
       }
       display:block;
       border: none;
@@ -378,11 +384,11 @@ iam-nav details {
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
 
         @include invert-colours();
       }
@@ -393,7 +399,7 @@ iam-nav details {
       
       background: var(--colour-canvas-2);
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: #EEEEEE;
       }
       a {
@@ -426,7 +432,7 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         --colour-canvas-2: white;
       }
@@ -489,7 +495,7 @@ iam-nav details {
       }
     }
 
-    a:not([slot="logo"]):not(:has(iam-card)) {
+    a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
 
       font-size: 1rem;
       line-height: rem(24);

package/assets/sass/components/nav.scss

@@ -98,7 +98,7 @@
     }
 
     .btn {
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
     
         @include reset-colours();
 
@@ -188,13 +188,13 @@
       flex-shrink: 0;
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       --colour-link: var(--colour-white);
       @include invert-colours();
     }
 
     // The menu is always white unless in dark mode
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       
       background-color: var(--colour-white);
       @include reset-colours();
@@ -242,7 +242,7 @@
     flex-grow: 1;
     position: relative;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -393,14 +393,13 @@
     left: 0;
     width: 100%;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode(){
             
       background-color: #EEEEEE;
       @include reset-colours();
     }
 
-    @media screen and (prefers-color-scheme: dark) {
-            
+    @include dark-mode() {
       
       @include invert-colours();
     }
@@ -494,7 +493,7 @@
 
     background: #E6EAEC!important;
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       
       background: var(--colour-canvas-2)!important;
     }
@@ -564,13 +563,13 @@
     flex-shrink: 0;
   }
 
-  @media screen and (prefers-color-scheme: dark) {
+  @include dark-mode() {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }
 
   // The menu is always white unless in dark mode
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     
     background-color: var(--colour-white);
     @include reset-colours();

package/assets/sass/components/notification.scss

@@ -90,7 +90,7 @@
   display: flex;
   flex-wrap: nowrap;
 
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     color: var(--colour-heading);
   }
 

package/assets/sass/components/table.scss

@@ -76,7 +76,7 @@ tr td[colspan="100%"]:first-child:last-child span {
 @container (width >= 60em) {
   thead {
 
-    th {
+    th:not(:empty) {
       white-space: nowrap;
       min-width: #{$td-mw};
     }
@@ -136,12 +136,17 @@ table.border-0 {
     margin-bottom: 0;
 
     td:has(input[type="checkbox"]) {
-      width: rem(30);
-      min-width: rem(30);
-      max-width: rem(30);
+      width: rem(40);
+      min-width: rem(40);
+      max-width: rem(40);
     }
   }
 
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background: var(--colour-canvas-2);
+  }
+
   @media (forced-colors: active) {
     --wrapper-padding: 0;
     background: var(--colour-canvas-2);
@@ -170,6 +175,11 @@ table.border-0 {
     margin-right: -1.5rem;
     margin-bottom: 0;
     background: white;
+
+    @media screen and (prefers-color-scheme: dark) {
+      
+      background: var(--colour-canvas-2);
+    }
   }
   
 
@@ -381,7 +391,13 @@ table.border-0 {
       margin-left: rem(-40);
       min-height: var(--row-height);
       text-align: right;
+      background: linear-gradient(90deg, transparent 0%, white 1.25rem);
+      cursor: default;
+
+      @media screen and (prefers-color-scheme: dark) {
+        
       background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
+      }
 
       &:after {
         bottom: 0;
@@ -622,3 +638,68 @@ table {
     color: var(--colour-primary);
   }
 }
+
+// #region Table with actionbar 
+
+iam-table {
+
+  td:has([type="checkbox"]){
+    position: static!important;
+    width: rem(40);
+  }
+
+  input:is([type="radio"],[type="checkbox"]) + label {
+    padding-left: 0!important;
+    margin: 0!important;
+  
+    &:before,
+    &:after {
+      top: 0!important;
+    }
+  }
+
+  table:has([type="checkbox"]:checked) tr:has([type="checkbox"]){
+    
+    cursor: pointer;
+
+    &:is(:hover, :focus) {
+      
+      background: var(--hover-background);
+    }
+
+    td {
+      background: transparent;
+    }
+
+    [type="checkbox"] {
+      width: 100%;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100%;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: -0.75rem;
+    }
+
+  }
+}
+
+@container (width < 23.4375em) {
+
+  iam-table:has([slot="before"]) {
+
+    iam-actionbar {
+      background-color: #e6eaec;
+    }
+    .actionbar__sticky + * {
+      margin-top: 0!important;
+    }
+  }
+
+  .table__wrapper.has-actionbar {
+    margin-top: calc(-100vh - -6.75rem)!important;
+  }
+}
+// #endregion

package/assets/sass/core.scss

@@ -2,5 +2,6 @@
 
 @use "_fonts";
 @use "_corefiles";
+@use '../../assets/sass/components/nav-global.scss';
 @use "_forms";
 @use "_print";

package/assets/sass/error.scss

@@ -2,4 +2,5 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
-@import "_corefiles";
+@import "_corefiles";
+@import '../../assets/sass/components/nav-global.scss';

package/assets/sass/foundations/root.scss

@@ -39,7 +39,7 @@
 }
 
 // Dark mode; functional colours get updated
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
   :root {
     
     @each $color, $value in $dark-mode-colors {
@@ -49,7 +49,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: light) {
+@include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
@@ -72,7 +72,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2) {

package/assets/sass/main.scss

@@ -2,6 +2,7 @@
 
 @use "_fonts";
 @use "_corefiles";
-@use "_forms";
-@use "_components";
-@use "_print";
+@import '../../assets/sass/components/nav-global.scss';
+@import "_forms";
+@import "_components";
+@import "_print";

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -132,6 +132,43 @@ class iamActionbar extends HTMLElement {
         });
       }
     }
+
+    // Wtach div for the select inputs
+    if(this.hasAttribute('data-select-watch')){
+
+      const element = document.getElementById(this.getAttribute('data-select-watch'));
+      element.setAttribute('data-select-container','true');
+      Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+        input.parentElement.setAttribute('slot','checkbox');
+      });
+      element.addEventListener('change',(event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('[type="checkbox"]')){
+
+          let count = element.querySelectorAll('input[type="checkbox"]').length;
+          let countChecked = element.querySelectorAll('input[type="checkbox"]:checked').length;
+          that.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          let input = event.target.closest('[type="checkbox"]');
+
+          if(countChecked){
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+              if(input.closest('iam-card'))
+                input.closest('iam-card').setAttribute('data-selected','true');
+            });
+          }
+          else {
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+
+              if(input.closest('iam-card'))
+                input.closest('iam-card').removeAttribute('data-selected');
+            });
+          }
+          
+        };
+      });
+    }
     // #endregion
 
     // #region switchviews
@@ -385,8 +422,36 @@ class iamActionbar extends HTMLElement {
         
         if(selectAll)
           setSelectAllInput(selectAll, newVal);
-          const event = new CustomEvent("selected", { detail: { selected: newVal } });
-          this.dispatchEvent(event);
+
+        const event = new CustomEvent("selected", { detail: { selected: newVal } });
+        this.dispatchEvent(event);
+
+        if(newVal == "all" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = true;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').setAttribute('data-selected','true');
+          });
+        }
+
+        if(newVal == "0" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = false;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').removeAttribute('data-selected','true');
+          });
+        }
+
         break;
       }
     }