@iamproperty/components 5.6.0 → 5.6.1-beta2

package/assets/sass/_components.scss

@@ -34,3 +34,10 @@ iam-search .optional-text {
   display: none!important;
 }
 
+// tabs
+
+@media screen and (prefers-color-scheme: dark) {
+  .tabs {
+    --tabs-gradient: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
+  }
+}

package/assets/sass/_functions/variables.scss

@@ -199,7 +199,7 @@ $dark-mode-colors: (
   "success": #B4E6A5,
   "danger": #E7727D,
   "dark": #B599B1,
-  "light": $light,
+  "light": #444444,
 );
 
 $dark-mode-functional-colors: (

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

@@ -3,6 +3,7 @@
 :host {
   --colour-border: #e9e9e9;
   --side-link-hover: var(--colour-canvas-2);
+  grid-column: full-width;
 
   @include light-mode() {
             
@@ -13,9 +14,14 @@
   min-height: calc(100vh - var(--nav-height));
   padding-top: 0!important;
   margin-inline: auto;
-  max-width: 80rem;
+  width: 100%;
   overflow: hidden;
   position: relative;
+ 
+  @include media-breakpoint-up(md) {
+    max-height: calc(100vh - var(--nav-height));
+    overflow: auto;
+  }
 }
 
 .container {
@@ -28,8 +34,7 @@
   @include media-breakpoint-up(md) {
 
     padding-left: 5.25rem!important;
-    overflow: hidden;
-  }  
+  }
 }
 
 // #region Side menu
@@ -40,7 +45,7 @@
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
   width: rem(30);
-  height: 100%;
+  height: calc(100% - var(--nav-height));
   background-color: var(--colour-canvas);
   transition: width 1s;
 
@@ -61,25 +66,13 @@
 
   @include media-breakpoint-up(md) {
 
-    left: calc(50% - #{rem(556)});
+    left: rem(84);
     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);
-    }
+    position: fixed;
+    top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(344);
+      width: rem(304);
 
       .btn[class*=fa-]:before {
         content: "\f023" !important;
@@ -88,6 +81,7 @@
   }
 
   .btn {
+    display: var(--btn-display, block);
     position: absolute;
     top: rem(32);
     right: 0;
@@ -96,7 +90,8 @@
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
-    
+    color: var(--colour-primary-theme);
+
     &[aria-expanded]{
        // Change icon
       &[class*=fa-]:before {
@@ -105,15 +100,20 @@
 
       @include media-breakpoint-up(md) {
         opacity: 0;
-        transition: opacity 0.5s;
-
-        &:is(:hover,:focus,:active) {
-          opacity: 1;
-        }
       }
     }
   }
 
+  &:is(:hover,:focus-within,:active) .btn {
+    
+    border: 2px solid var(--colour-border);
+    color: var(--colour-primary-theme);
+
+    @include media-breakpoint-up(md) {
+      opacity: 1;
+    }
+  }
+
   &:is(.open) {
 
     width: calc(100% - var(--container-padding-x));
@@ -124,7 +124,7 @@
     }  
     @include media-breakpoint-up(md) {
 
-      width: rem(344);
+      width: rem(304);
     }  
   }
 
@@ -142,9 +142,6 @@
     overflow: auto;
     max-height: 100%;
 
-    &.closed {
-    }
-
     .h3 {
       padding-left: rem(24);
     }
@@ -161,6 +158,9 @@
 
       width: rem(304);
 
+      .h3{
+        padding-left: var(--container-padding-x-md);
+      }
     }  
   }
 
@@ -186,7 +186,7 @@
   padding-left: rem(24);
 
   @include media-breakpoint-up(sm) {
-    padding-left: rem(40)!important;
+    padding-left: var(--container-padding-x-md);
   }
 }
 
@@ -215,24 +215,15 @@
     padding-left: rem(40)!important;
   }
 
+  @include media-breakpoint-up(sm) {
+    padding-left: var(--container-padding-x-md)!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,[aria-expanded])) {
@@ -317,13 +308,30 @@
 
 @include media-breakpoint-up(md) {
 
-  .side-menu.open + .main-content {
-
-    padding-left: rem(300);
-  }
-
   ::slotted(.main-content__title){ 
     display: none;
   }
 }
+
 // #endregion
+
+// #region Desktop open state
+@include media-breakpoint-up(md) {
+
+
+  .container:has(.side-menu.open) {
+    padding-left: 2rem!important;
+    margin-left: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
+    margin-right: 0;
+    max-width: min(var(--container-max-width), 100% - 19rem);
+  }
+}
+// #endregion
+
+
+@include media-breakpoint-up(md) {
+
+:host([open-always]){
+  --btn-display: none;
+}
+}

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

@@ -14,8 +14,8 @@ iam-inline-edit {
 
 
 iam-inline-edit:focus-within {
-
-
+  position: relative;
+  z-index: 99;
   --display-status: none;
 }
 
@@ -95,4 +95,58 @@ iam-inline-edit.was-validated label:has(:is(input:not([type=radio]):not([type=ch
     border-radius: 0.5rem;
     margin: 0 0 -1rem 0;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-}
+}
+
+
+// #region preview element
+
+iam-inline-edit:has(.preview) {
+
+  position: relative;
+
+  label {
+    opacity: 0;
+    margin-top: -0.75rem;
+  }
+
+  .preview {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    pointer-events: none;
+    padding: 0.75rem;
+    margin-top: -0.75rem;
+    margin-left: -0.75rem;
+  }
+
+  .preview:empty {
+    &:before {
+      content: attr(data-placeholder);
+    }
+  }
+
+  &:hover, &:focus {
+
+
+    .preview {
+        
+      border: none;
+      background: var(--colour-light);
+
+    }
+  }
+
+  &:focus-within {
+    label {
+      opacity: 1;
+    }
+    .preview {
+      opacity: 0;
+    }
+  }
+}
+
+
+// #endregion

package/assets/sass/components/multiselect.scss

@@ -128,7 +128,7 @@ button {
 
 
 
-.wrapper:is(:hover, :focus-within) .dropdown {
+.wrapper:is(:focus-within) .dropdown {
 
   display: var(--display-panel, none);
 }

package/assets/sass/components/tabs.scss

@@ -16,7 +16,7 @@
       top: 0;
       bottom: 1px;
       width: 2.5rem;
-      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
+      background: var(--tabs-gradient, linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)));
       z-index: 1000;
       pointer-events: none;
     }
@@ -33,11 +33,6 @@
       clear: both;
     }
 
-    @media screen and (prefers-color-scheme: dark) {
-      &:before {
-        background: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
-      }
-    }
   }
 }
 

package/assets/sass/elements/buttons.scss

@@ -280,7 +280,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     }
   }
 
-  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]) {
+  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]):not(.btn-collapse) {
     background-color: var(--colour);
     color: var(--colour-primary-theme);
     border-color: transparent!important;

package/assets/sass/elements/dialog.scss

@@ -527,6 +527,15 @@ dialog::backdrop {
   margin-bottom: calc(var(--btn-margin) - 0.25rem);
 
 
+  &:has(dialog[open]) > button {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+    filter: brightness(85%);
+    transition: background 0.1s, color 0.1s;
+    //color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
   > .btn:first-child {
 
     margin-bottom: 0.25rem;
@@ -749,4 +758,23 @@ dialog::backdrop {
     }
   }
 }
-// #endregion
+// #endregion
+
+// #region admin panel dialog
+dialog:has(> .admin-panel) {
+
+  .dialog__close {
+    margin-top: -0.8rem;
+  }
+}
+dialog > .admin-panel {
+  margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1)!important;
+  padding-top: 0;
+
+  &:last-child {
+    
+    margin-bottom: calc(var(--dialog-padding) * -1);
+  }
+}
+
+// #endregion

package/assets/sass/elements/forms.scss

@@ -50,6 +50,10 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   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);
 
+  &:is(textarea) {
+    max-height: 100%
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
   &:is(:focus,.focus):not(:disabled) {
     border-color: var(--colour-info);
@@ -80,7 +84,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
 textarea {
   min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
 }
 // #endregion
 

package/assets/sass/foundations/reboot.scss

@@ -182,12 +182,12 @@ details {
   var(--padding-inline) [container-end]
   var(--full-width-start) [full-width-end];
 
-  &:not(:has(.container:last-child)){
+  &:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)){
     padding-bottom: 1rem;
   }
 }
 
-main > :not(.full-width, .container, iam-header, [class*="bg-"]) {
+main > :not(.full-width, .container, iam-header, iam-collapsible-side, [class*="bg-"]) {
   grid-column: content;
 }
 
@@ -196,7 +196,7 @@ main > :is(.full-width, .container, iam-header) {
   grid-column: container;
 }
 
-main > :is(.full-width, [class*="bg-"]) {
+main > :is(.full-width, [class*="bg-"], iam-collapsible-side) {
   grid-column: full-width;
 }
 

package/assets/sass/foundations/root.scss

@@ -97,7 +97,7 @@ $root: ':root'!default;
 @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-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
+  html:not(.dark-theme) [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
 
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
@@ -120,7 +120,7 @@ $root: ':root'!default;
 @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) {
+  [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
 
     @include reset-colours();
     --colour-body: #{$primary};

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -24,20 +24,20 @@ class iamCollapsibleSideMenu extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="container">
+      <div class="container" part="container">
 
-      <div class="side-menu">
-        <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm">Open or close Collapsible menu</button>
-        <div class="side-menu-content closed">
-          <slot name="menu"></slot>
+        <div class="side-menu">
+          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse">Open or close Collapsible menu</button>
+          <div class="side-menu-content closed">
+            <slot name="menu"></slot>
+          </div>
         </div>
-      </div>
 
-      <div class="main-content">
-        <slot></slot>
-      </div>
+        <div class="main-content">
+          <slot></slot>
+        </div>
 
-    </div>
+      </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -65,7 +65,13 @@ class iamCollapsibleSideMenu extends HTMLElement {
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
     }
-      
+    
+
+    if(this.hasAttribute('open')){
+      sideMenu.classList.add('open'); 
+      button.setAttribute('aria-expanded', true);
+    }
+
     // Open the menu
     button.addEventListener('click', (event) => {
 

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -47,6 +47,7 @@ class iamInlineEdit extends HTMLElement {
     
     let label = this.querySelector('label');
     let input = this.querySelector('input, textarea, select');
+    let preview = this.querySelector('.preview');
 
     let statusSaving = this.shadowRoot.querySelector('#saving');
     let statusSaved = this.shadowRoot.querySelector('#saved');
@@ -92,8 +93,14 @@ class iamInlineEdit extends HTMLElement {
       input.blur();
       inlineEdit.blur();
 
-
       statusSaving.classList.remove('d-none');
+
+      if(preview){
+
+        console.log(input.value)
+
+        preview.innerHTML = input.value;
+      }
     });
 
     // Save
@@ -174,6 +181,10 @@ class iamInlineEdit extends HTMLElement {
           inlineEdit.dispatchEvent(saveEvent);
 
           statusSaving.classList.remove('d-none');
+              
+          if(preview){
+            preview.innerHTML = input.value;
+          }
         }
         else if(!inlineEdit.querySelector('.inline-feedback')){
           statusNotSaved.classList.remove('d-none');

package/assets/ts/modules/dialogs.ts

@@ -130,12 +130,20 @@ const extendDialogs = (body) => {
     event.stopPropagation();
 
       let btn = event.target.closest('.dialog__wrapper > button');
-      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
+      let parent = btn.parentNode;
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-      if(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)
-        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+
+      // close open dialogs
+      if(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover){
+
+        // Check that the ope dialog isn't a parent of the dialog being opened
+        if(btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')){
+          document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+        }
+      }
+        
 
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
@@ -227,7 +235,7 @@ export const createDialog = (dialog) => {
   }
 
   // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-  if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
+  if(!dialog.querySelector(':scope .mh-lg') && !dialog.classList.contains('dialog--multi')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     let dialogContent = dialog.querySelector('.mh-lg');