@iamproperty/components 3.8.0 → 4.0.0

package/assets/sass/_corefiles.scss

@@ -20,10 +20,12 @@
 @use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
+@use "components/nav-global.scss";
 @use "components/pagination.scss";
 @use "components/accordion.scss";
 
 @use "components/card-global.scss";
+@use "components/actionbar-global.scss";
 
 // Bootstrap elements
 @import "../bootstrap/scss/_transitions.scss";

package/assets/sass/_functions/mixins.scss

@@ -18,6 +18,31 @@
   }
 }
 
+@mixin container-up($name) {
+  
+  @if $name == 'sm' {
+    
+    @container (width > 23.4375em) {
+      @content;
+    }
+  }
+  @else if $name == 'md' {
+    
+    @container (width > 48em) {
+      @content;
+    }
+  }
+  @else if $name =='xs' {
+    @content;
+  } 
+  @else {
+    @if $mobileOnly != "true" {
+    @content;
+    }
+  }
+}
+
+
 // Example: @include prefix(transition, transform 1.5s, webkit ms o);
 @mixin prefix($property, $value, $prefixes: (webkit ms o))
 {

package/assets/sass/_functions/variables.scss

@@ -160,7 +160,7 @@ $non-theme-colors: map-merge((
   "body":       $body-color,
   "border":     $colour-border,
   "link":       var(--colour-primary-theme),
-  "brand":      var(--colour-primary),
+  "brand":      var(--colour-primary-theme),
   "underline":  var(--colour-secondary),
   "heading":    var(--colour-primary),
   "focus":      var(--colour-primary-theme),

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

@@ -0,0 +1,89 @@
+@use "../_func.scss" as *;
+
+// #region Default view
+iam-actionbar {
+
+  background-color: #FCFCFC;
+  display: block;
+  border-top-left-radius: rem(10);
+  border-top-right-radius: rem(10);
+}
+// #endregion
+
+// #region As part of the iam-table component
+iam-table iam-actionbar {
+
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+@container (width < 23.4375em) {
+
+  iam-table iam-actionbar {
+
+    display: block;
+    position: sticky;
+    left: 0;
+    top: calc(var(--nav-height) + #{rem(24)});
+    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) {
+
+  iam-table iam-actionbar {
+
+    margin-left: -2rem;
+    margin-right: -2rem;
+    margin-top: -2rem;
+    margin-bottom: 1rem;
+  }
+}
+// #endregion
+
+// #region Switchview
+iam-actionbar ~ :is([data-view="square"],[data-view="list"],[data-view="small"]) {
+  display: none;
+}
+
+iam-actionbar[data-view="square"] ~ [data-view="square"] {
+  display: block;
+}
+iam-actionbar[data-view="list"] ~ [data-view="list"] {
+  display: block;
+}
+iam-actionbar[data-view="small"] ~ [data-view="small"] {
+  display: block;
+}
+// #endregion 
+
+// #region Child elements
+.actionbar__text {
+
+  font-size: rem(18);
+  line-height: rem(40);
+  color: var(--colour-heading);
+  display: inline-block;
+}
+
+// Dialog wrapper
+.dialog__wrapper[slot="selected-overflow"] > button,
+.dialog__wrapper[slot="overflow"] > button {
+
+  background: none;
+  border: none;
+}
+.dialog__wrapper[slot="selected-overflow"] dialog[open],
+.dialog__wrapper[slot="overflow"] dialog[open] {
+
+  display: contents;
+}
+// #endregion

package/assets/sass/components/actionbar.scss

@@ -0,0 +1,254 @@
+@use "../_func.scss" as *;
+
+.actionbar__wrapper {
+  position: relative;
+  z-index: 10;
+  height: rem(68);
+  container-type: inline-size;
+}
+
+// #region View states (Default, search, selected)
+.views,
+.selectall {
+  position: absolute!important;
+  top: 50%;
+  left: rem(24);
+  
+  @include media-breakpoint-up(sm) {
+    left: rem(32);
+  }
+
+  transform: translate(0,-50%);
+  z-index: 10;
+
+  .btn-action:not(:last-child){
+    margin-right: rem(4)!important;
+  }
+}
+
+.selectall {
+  
+  width: rem(40);
+  overflow: hidden;
+
+  label {
+    height: rem(40);
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    width: auto;
+    overflow: visible;
+  }
+}
+
+.actionbar [data-search] {
+  display: none;
+}
+
+:host([data-search]) .actionbar [data-search] {
+  display: block;
+  margin-left: rem(16)!important;
+}
+
+:is(.actionbar,.actionbar--selected,.actionbar--search){
+  
+  border-top-left-radius: rem(10);
+  border-top-right-radius: rem(10);
+  padding: 0 rem(24);
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: rem(68);
+  position: absolute;
+  inset: 0;
+
+  @include container-up(sm) {
+    padding: 0 rem(32);
+  }
+}
+
+.actionbar {
+
+  display: flex;
+}
+
+.actionbar--selected {
+
+  background-color: #E6EAEC;
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.actionbar--search {
+
+  background-color: #E6EAEC;
+  display: flex;
+  z-index: 2;
+  position: relative;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// Show selected bar
+.selectall:has(input:checked) ~ .actionbar,
+.selectall:has(input:indeterminate) ~ .actionbar {
+  
+  opacity: 0;
+  pointer-events: none;
+}
+.selectall:has(input:checked) ~ .actionbar--selected,
+.selectall:has(input:indeterminate) ~ .actionbar--selected {
+  
+  opacity: 1;
+  pointer-events: all;
+}
+
+// Show search bar
+.actionbar--search.show {
+  
+  opacity: 1;
+  pointer-events: all;
+}
+
+.actionbar__wrapper:has(.actionbar--search.show) > *:not(.actionbar--search.show) {
+  opacity: 0;
+  pointer-events: none;
+}
+// #endregion
+
+// #region Slotted elements
+::slotted(*:not([slot="overflow"])){
+  margin-top: 0!important;
+  margin-bottom: 0!important;
+  margin-left: rem(16)!important;
+  margin-right: 0!important;
+}
+
+::slotted(.btn:not(.btn-action)){
+  order: 2;
+}
+
+// buttons only for single items
+::slotted([data-single]){
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+:host([data-selected="1"]) ::slotted([data-single]){
+  pointer-events: all;
+  opacity: 1;
+}
+
+::slotted(hr){
+  height: rem(32);
+  color: #9D9D9D!important;
+  width: 1px;
+  display: none;
+  
+  @include container-up(md) {
+
+    display: block;
+  }
+}
+// #endregion
+
+// #region safe area
+.safe-area {
+
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  width: rem(210);
+
+  @include container-up(sm) {
+
+    width: rem(450);
+  }
+
+  @include container-up(md) {
+
+    width: rem(750);
+  }
+
+  overflow: visible;
+  position: relative;
+
+  .body {
+    display: contents;
+  }
+}
+
+:host([data-switchviews]) .safe-area {
+  
+  width: rem(144);
+}
+// #endregion
+
+// #region overflow dialog 
+::slotted(.btn-compact[slot="selected-overflow"]),
+::slotted(.btn-compact[slot="overflow"]) {
+
+  max-width: none!important;
+  text-indent: 0!important;
+  width: auto!important;
+  text-align: left!important;
+  padding-left: 0!important;
+  background: none!important;
+  border: none!important;
+
+  &:before {
+    position: static!important;
+    line-height: inherit!important;
+  }
+}
+
+::slotted(.dialog__wrapper[slot="overflow"]) dialog[open]{
+
+  background: red;
+}
+
+.dialog__wrapper.dialog-overflow {
+  margin-left: 0.5rem;
+  margin-right: -0.5rem;
+}
+// #endregion
+
+// #region Search bar
+.actionbar--search .btn{
+
+  margin-left: rem(-12)!important;
+  margin-right: auto!important;
+}
+
+.search-wrapper {
+  width: calc(100% - #{rem(44 + 8)});
+  max-width: rem(350)!important;
+  margin: 0!important;
+
+  @include container-up(md) {
+
+    max-width: rem(450)!important;
+  }
+
+  input {
+    padding-top: rem(8);
+    padding-bottom: rem(8);
+
+    min-height: rem(40)!important;
+    max-height: rem(40)!important;
+  }
+
+  :is(.prefix,.suffix) {
+    
+    padding: rem(8)!important;
+    min-height: rem(40)!important;
+    max-height: rem(40)!important;
+    min-width: rem(40)!important;
+    max-width: rem(40)!important;
+    line-height: rem(40 - 8 - 8)!important;
+  }
+}
+// #endregion

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

@@ -0,0 +1,327 @@
+@use "../_func" as *;
+// Host
+:host {
+  --colour-border: #e9e9e9;
+  --side-link-hover: var(--colour-canvas-2);
+
+  @media screen and (prefers-color-scheme: light) {
+            
+    --side-link-hover: #eeeeee;
+  }
+
+  display: block;
+  min-height: calc(100vh - var(--nav-height));
+  padding-top: 0!important;
+  margin-inline: auto;
+  max-width: 80rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.container {
+  position: static;
+  min-height: 100%;
+  padding-top: 0!important;
+  padding-bottom: 0!important;
+  padding-left: 0!important;
+
+  @include media-breakpoint-up(md) {
+
+    padding-left: 5.25rem!important;
+    overflow: hidden;
+  }  
+}
+
+// #region Side menu
+.side-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  min-height: calc(100vh - var(--nav-height));
+  width: rem(30);
+  height: 100%;
+  background-color: var(--colour-canvas);
+  transition: width 1s;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    border-right: 2px solid var(--colour-border);
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    left: 0;
+    width: rem(40);
+  }  
+
+  @include media-breakpoint-up(md) {
+
+    left: calc(50% - #{rem(556)});
+    margin-left: #{rem(-84)};
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 100%;
+      border-right: 2px solid var(--colour-border);
+      left: 0;
+      opacity: 1;
+      transition: all 1s;
+      //margin-left: rem(-260);
+      width: rem(40);
+      background: var(--colour-canvas);
+    }
+
+    &:not(.open).hover {
+      width: rem(344);
+
+      .btn[class*=fa-]:before {
+        content: "\f023" !important;
+      }
+    }
+  }
+
+  .btn {
+    position: absolute;
+    top: rem(32);
+    right: 0;
+    margin-bottom: 0;
+    margin-right: rem(-20);
+    background-color: var(--colour-canvas-2);
+    border: 2px solid var(--colour-border);
+    z-index: 99;
+  }
+
+  &:is(.open) {
+
+    width: calc(100% - var(--container-padding-x));
+
+    // Change icon
+    .btn[class*=fa-]:before {
+      content: "\f053"!important;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      width: rem(382);
+    }  
+    @include media-breakpoint-up(md) {
+
+      width: rem(344);
+
+      .btn {
+        opacity: 0;
+        transition: opacity 0.5s;
+
+        &:is(:hover,:focus,:active) {
+          opacity: 1;
+        }
+      }
+    }  
+  }
+
+  // Content
+
+  .side-menu-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: rem(32) rem(40) 0 0;
+    width: rem(351);
+    opacity: 0;
+    transition: opacity 1s;
+    min-height: 100%;
+    overflow: auto;
+    max-height: 100%;
+
+    &.closed {
+    }
+
+    .h3 {
+      padding-left: rem(24);
+    }
+      
+    @include media-breakpoint-up(sm) {
+
+      .h3 {
+        padding-left: rem(40);
+      }
+
+      width: rem(382);
+    }  
+    @include media-breakpoint-up(md) {
+
+      width: rem(304);
+
+    }  
+  }
+
+  &:not(.hover):not(.open) .side-menu-content.closed {
+    
+      display: none;
+  }
+
+  &.open .side-menu-content {
+    opacity: 1;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    &.hover .side-menu-content {
+      opacity: 1;
+    }
+  }  
+}
+
+// Links
+::slotted(*[slot="menu"]) {
+  padding-left: rem(24);
+
+  @include media-breakpoint-up(sm) {
+    padding-left: rem(40)!important;
+  }
+}
+
+::slotted(hr) {
+  border-bottom: 2px solid var(--colour-border)!important;
+  margin-right: rem(-40)!important;
+}
+
+::slotted(a[slot="menu"]) {
+  display: block;
+
+  display: block!important;
+  line-height: rem(20)!important;
+  padding: rem(16) rem(40) rem(16) rem(24)!important;
+  margin: 0!important;
+  flex-shrink: 0;
+  font-size: 1rem!important;
+  font-weight: normal!important;
+  text-decoration: none;
+
+  border-bottom: 2px solid var(--colour-border)!important;
+
+  margin-right: rem(-40)!important;
+  
+  @include media-breakpoint-up(sm) {
+    padding-left: rem(40)!important;
+  }
+
+  &:after {
+    display: none;
+  }
+
+  
+  border-right: 2px solid var(--colour-border)!important;
+/*
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: calc(100%);
+    margin-top: 0;
+    width: 2px;
+    background-color: var(--colour-border);
+  }
+  */
+}
+
+::slotted(a[slot="menu"]:where(:hover,:focus,.selected)) {
+
+  background-color: var(--side-link-hover)!important;
+}
+
+::slotted(a[slot="menu"]:active) {
+
+  background-color: var(--side-link-hover)!important;
+  font-weight: bold!important;
+}
+
+::slotted(a[slot="menu"].selected) {
+
+  background-color: var(--side-link-hover)!important;
+  font-weight: bold!important;
+  margin-right: #{rem(-40)}!important;
+  position: relative;
+
+  border-right: 2px solid var(--colour-info)!important;
+
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: calc(100% + 4px);
+    margin-top: -2px;
+    width: 2px;
+    border-right: 2px solid var(--colour-info);
+    margin-right: -2px;
+
+        
+    @media (forced-colors: active) {
+
+      border-right: 10px solid var(--colour-info);
+    }
+  }
+}
+// #endregion
+
+// #region main content
+.main-content {
+
+  padding-top: rem(24);
+  padding-left: rem(60);
+
+  
+  @include media-breakpoint-up(sm) {
+
+    padding-left: rem(80);
+  }  
+
+  @include media-breakpoint-up(md) {
+
+    padding-top: rem(40)!important;
+    padding-left: 0;
+  }  
+
+  > span.h3 {
+    padding-top: 0.75rem;
+
+    border-bottom: 2px solid var(--colour-border);
+    margin-bottom: rem(40)!important;
+
+    @include media-breakpoint-up(md) {
+
+      display: none;
+    }  
+  }
+}
+
+::slotted(.main-content__title){
+
+  border-bottom: 2px solid var(--colour-border);
+  margin-bottom: rem(40)!important;
+  max-width: 100%!important;
+  display: block;
+}
+
+@include media-breakpoint-up(md) {
+
+  .side-menu.open + .main-content {
+
+    padding-left: rem(300);
+  }
+
+  ::slotted(.main-content__title){ 
+    display: none;
+  }
+}
+// #endregion