@iamproperty/components 4.0.0 → 4.1.0-beta-2

package/assets/sass/_corefiles.scss

@@ -20,7 +20,6 @@
 @use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
-@use "components/nav-global.scss";
 @use "components/pagination.scss";
 @use "components/accordion.scss";
 

package/assets/sass/_func.scss

@@ -1,5 +1,6 @@
 $compatible: 'false'!default;
 $mobileOnly: 'false'!default;
+$darkMode: 'true'!default;
 
 // Declare global vars variable
 $vars: ()!default;

package/assets/sass/_functions/mixins.scss

@@ -18,6 +18,28 @@
   }
 }
 
+@mixin dark-mode(){
+  @media screen and (prefers-color-scheme: dark) {
+    @if $darkMode == "true" {
+        
+      @content;
+    }
+  }
+}
+
+@mixin light-mode(){
+
+  @if $darkMode == "true" {
+    @media screen and (prefers-color-scheme: light) {
+    
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
 @mixin container-up($name) {
   
   @if $name == 'sm' {

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

@@ -7,6 +7,34 @@ iam-actionbar {
   display: block;
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
+
+}
+// #endregion
+
+// #region at the top
+main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
+
+  background-color: #e6eaec;
+  border-radius: rem(8);
+  margin: var(--container-padding);
+  margin-bottom: 2rem;
+  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+
+  &:first-child {
+      
+    padding-top: 0;
+  }
+
+  @include media-breakpoint-up(sm) {
+    box-shadow: none;
+    margin-inline: 0;
+    border-radius: 0;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    padding-inline: calc(50% - #{rem(556)} - 2rem);
+  }
 }
 // #endregion
 
@@ -17,24 +45,50 @@ iam-table iam-actionbar {
   margin-right: 1.5rem;
 }
 
+.actionbar__sticky-wrapper {
+  
+  container-type: inline-size;
+
+  @include media-breakpoint-up(sm) {
+
+    padding: 0!important;
+  }
+}
+
 @container (width < 23.4375em) {
 
-  iam-table iam-actionbar {
+  :is(iam-table, .actionbar__sticky-wrapper) > .actionbar__sticky {
 
     display: block;
     position: sticky;
     left: 0;
-    top: calc(var(--nav-height) + #{rem(24)});
+    top: calc(var(--sticky-padding) + #{rem(16)});
+    z-index: var(--index-menu);
+    pointer-events: none;
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: calc(100vh - #{rem(68 + 24 + 16)});
+      pointer-events: none;
+    }
+
+    & + * {
+      margin-top: calc(-100vh - -6.75rem);
+    }
+  }
+
+  :is(iam-table, .actionbar__sticky) > iam-actionbar {
+
+    pointer-events: all!important;
+    display: block;
     border: none;
     background: var(--colour-canvas-2);
-    
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
     margin-bottom: rem(24);
-
-    z-index: var(--index-menu);
   }  
-  
 }
 
 @include media-breakpoint-up(sm) {
@@ -66,6 +120,7 @@ iam-actionbar[data-view="small"] ~ [data-view="small"] {
 // #endregion 
 
 // #region Child elements
+
 .actionbar__text {
 
   font-size: rem(18);
@@ -81,9 +136,16 @@ iam-actionbar[data-view="small"] ~ [data-view="small"] {
   background: none;
   border: none;
 }
+button[slot="overflow"],
+button[slot="selected-overflow"] {
+  
+  background: none;
+  border: none;
+  margin: 0!important;
+}
 .dialog__wrapper[slot="selected-overflow"] dialog[open],
 .dialog__wrapper[slot="overflow"] dialog[open] {
 
   display: contents;
 }
-// #endregion
+// #endregion

package/assets/sass/components/actionbar.scss

@@ -60,7 +60,10 @@
   justify-content: flex-end;
   align-items: center;
   height: rem(68);
-  position: absolute;
+  
+  @supports selector(:has(*)) {
+    position: absolute;
+  }
   inset: 0;
 
   @include container-up(sm) {
@@ -75,15 +78,29 @@
 
 .actionbar--selected {
 
-  background-color: #E6EAEC;
+  background-color: var(--colour-canvas);
+
+  @include light-mode {
+    
+    background-color: #E6EAEC;
+  }
+
   display: flex;
+  
+  @supports selector(:has(*)) {
   opacity: 0;
+  }
   pointer-events: none;
 }
 
 .actionbar--search {
 
-  background-color: #E6EAEC;
+  background-color: var(--colour-canvas);
+  
+  @include light-mode {
+
+    background-color: #E6EAEC;
+  }
   display: flex;
   z-index: 2;
   position: relative;
@@ -205,11 +222,6 @@
   }
 }
 
-::slotted(.dialog__wrapper[slot="overflow"]) dialog[open]{
-
-  background: red;
-}
-
 .dialog__wrapper.dialog-overflow {
   margin-left: 0.5rem;
   margin-right: -0.5rem;

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

@@ -12,7 +12,7 @@
   margin-bottom: rem(24);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  @media screen and (prefers-color-scheme: dark) {
+  @include dark-mode() {
     
     background-color: var(--colour-canvas-2);
     color: var(--colour-body);
@@ -161,4 +161,49 @@
     pointer-events: none;
   }
 }
-// #endregion
+// #endregion
+
+// #region Has actionbar
+.admin-panel:has(iam-actionbar) {
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    margin-bottom: 0;
+  }
+
+  iam-actionbar {
+    
+    background: var(--colour-canvas);
+    
+    @include light-mode {
+        
+      background: #eeeeee;
+    }
+      
+    margin-inline: calc(var(--padding-x) * -1);
+    margin-bottom: var(--padding-top);
+
+    &:first-child {
+      margin-top: calc(var(--padding-top) * -1);
+    }
+    &:not(:first-child){
+      
+      border-radius: 0;
+    }
+  }
+
+  > iam-table {
+    overflow: visible;
+    
+    &:first-child {
+      margin-top: calc(var(--padding-top) * -1);
+    }
+
+    iam-actionbar {
+      
+      margin-top: 0!important;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  } 
+}
+// #endregion

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

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // #region card with a flag 
 iam-card.card--flag {
   position: relative;
@@ -17,4 +19,54 @@ iam-card.card--flag {
     color: var(--colour, var(--colour-primary));
   }
 }
-// #endregion
+// #endregion
+
+// #region cards with an added checkbox for actionbars
+
+iam-card {
+
+
+  @supports not selector(:has(*)) {
+      
+    margin-bottom: 2rem;
+    display: block;
+  }
+
+  > div:has([type="checkbox"]) {
+    display: contents;
+
+    > input:is([type=radio], [type=checkbox]) + label {
+        
+      position: absolute!important;
+      top: 0;
+      right: 0;
+      width: rem(32);
+      padding-left: rem(32);
+      margin: rem(4) rem(8)!important;
+      height: rem(40);
+      overflow: hidden;
+    }
+  }
+}
+
+
+[data-select-container]:has([type="checkbox"]:checked) iam-card {
+
+  > div:has([type="checkbox"]) {
+
+    > input:is([type=radio], [type=checkbox]) {
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+      cursor: pointer;
+      pointer-events: all;
+      inset: 0;
+      border-radius: 0;
+      z-index: 10;
+    }
+  }
+}
+
+
+// #endregion

package/assets/sass/components/card.scss

@@ -175,19 +175,12 @@
     }
   }
 
-  &:is(:active, .active){
-    
-    .card__body {
-      background: #E0E0E0;
-    }
-  }
-
-  &:is(:checked, .checked){
-    outline: 2px solid var(--colour,var(--colour-info));
+  &:is(:checked, .checked,:active, .active){
+    outline: 2px solid var(--colour,var(--colour-primary));
     outline-offset: -2px;
 
     .card__body {
-      background: #E0E0E0;
+      background: none;
     }
   }
 
@@ -211,7 +204,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
   .card--filter {
 
     .card__body {
@@ -221,7 +214,6 @@
     &:is(:hover,:focus,.hover, :active, .active):not(:checked,.checked){ 
       outline: 2px solid var(--colour, var(--colour-primary))!important;
       outline-offset: -2px;
-
     }
   }
 }
@@ -276,3 +268,13 @@
   }
 }
 //#endregion
+
+
+:host([data-selected]) .card {
+  //background-color: yellow!important;
+
+  &:before,
+  &:after {
+    display: none!important;
+  }
+}

package/assets/sass/components/charts.scss

@@ -22,7 +22,7 @@ $chart-colors: map-merge((
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
 
   :root {
     --colour-chart-1: var(--colour-dark);

package/assets/sass/components/collapsible-side.scss

@@ -4,7 +4,7 @@
   --colour-border: #e9e9e9;
   --side-link-hover: var(--colour-canvas-2);
 
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
             
     --side-link-hover: #eeeeee;
   }

package/assets/sass/components/dialog.scss

@@ -279,10 +279,11 @@ dialog::backdrop {
     top: calc(var(--dialog-padding) * 4);
   }
 
+  @supports selector(:has(*)) {
   fieldset:not(.active) {
     display: none;
   }
-
+  }
   &:not(:has(fieldset.active)) fieldset:first-of-type{
     display: flex;
     flex-direction: column;
@@ -374,7 +375,7 @@ dialog::backdrop {
       }
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       button {
         
@@ -440,36 +441,49 @@ dialog::backdrop {
       margin-top: auto;
       text-align: right;
     }
-    > form {
-      display: contents
-    }
-    fieldset {    
-      display: flex; 
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
-
-      overflow: auto;
-      margin-bottom: calc(var(--dialog-padding) * -1);
-      padding-bottom: var(--dialog-padding);
-
-        
-      padding-right: calc(var(--dialog-padding) - 10px);
-      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+    
+    
+    @supports not selector(:has(*)) {
+      > form {
+        overflow: auto;
 
-      &::before {
-        content: "";
-        top: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: var(--dialog-padding);
-        min-height: var(--dialog-padding);
-        position: sticky;
-        display: block;
-        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-        z-index: 2;
-        margin-bottom: calc(var(--dialog-padding) * -1);;
+        button:not([type="submit"]){
+          display: none;
+        }
+      }
+    }
+    @supports selector(:has(*)) {
+      > form {
+        display: contents
+      }
+      fieldset {    
+        display: flex; 
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+
+        overflow: auto;
+        margin-bottom: calc(var(--dialog-padding) * -1);
+        padding-bottom: var(--dialog-padding);
+
+          
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        &::before {
+          content: "";
+          top: 100%;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--dialog-padding);
+          min-height: var(--dialog-padding);
+          position: sticky;
+          display: block;
+          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+          z-index: 2;
+          margin-bottom: calc(var(--dialog-padding) * -1);;
+        }
       }
     }
   }
@@ -561,36 +575,19 @@ dialog::backdrop {
       width: rem(360);
     }
 
-
     &.dialog--list {
       
       width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
       min-width: rem(140)!important;
       max-width: rem(280)!important;
       padding: rem(16);
       margin: 0;
 
-      .btn-action {
-        border: none;
-        padding: 0;
-        margin: 0;
-        padding-block: rem(6);
-        line-height: rem(20);
-        background: none;
-        white-space: inherit;
-        max-width: 100%;
-        min-width: 100%;
-
-        &:before {
-          min-width: rem(20);
-          display: inline-block;
-        }
-
-        &::after {
-          float: right;
-        }
-      }
-
       hr {
         height: 2px;
         background: var(--colour-border);

package/assets/sass/components/fileupload.scss

@@ -53,7 +53,7 @@
 
 
     
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       background: var(--colour-canvas-2);
       border-color: var(--colour-canvas-2);