@iamproperty/components 5.3.0-beta6 → 5.4.0

package/assets/sass/_components.scss

@@ -1,9 +1,31 @@
-@use "components/header.scss";
-@use "components/testimonial.scss";
-@use "components/carousel.scss";
-@use "components/property-searchbar.scss";
-@use "components/charts.scss";
-@use "components/timeline.scss";
-@use "components/snapshot.scss";
-@use "components/stepper.scss";
+@use 'sass:math';
+@use "_func" as *;
+
+@use 'components/nav.preload';
+@use 'components/card.preload';
+@use 'components/carousel.preload';
+
+// #region Undefined web components
+main > :is(*):not(:defined):not(iam-carousel) {
+
+  padding: var(--container-padding);
+  padding-top: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+      
+  main > :is(*):not(:defined):not(iam-carousel) {
+    max-width: 100%!important;
+    padding-inline: calc(50% - #{rem(math.div(1112,2))});
+  }
+
+  iam-header:not(:defined) {
+    min-height: rem(470);
+  }
+}
+
+// Search
+iam-search input:not(.is-invalid):not(:invalid) {
+  background: none!important;
+}
 

package/assets/sass/_corefiles.scss

@@ -26,7 +26,7 @@
   }
 
   // Deal with preloaded state of native components
-  @import "components/component.native.scss";
+  @import "_components.scss";
 }
 
 @include layer('templates') {

package/assets/sass/components/card.preload.scss

@@ -0,0 +1,8 @@
+@use "../_func.scss" as *;
+
+iam-card:not(:defined) {
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+}
+

package/assets/sass/components/{component.native.scss → carousel.preload.scss}

@@ -1,80 +1,5 @@
-@use 'sass:math';
-@use "../_func" as *;
+@use "../_func.scss" as *;
 
-iam-nav {
-  display: block;
-  padding: var(--container-padding);
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  max-width: 80rem;
-  margin-inline: auto;
-  
-  .brand {
-    font-size: rem(48);
-    height: rem(48);
-    padding: 0;
-    text-decoration: none;
-    min-width: min(var(--svg-width), 14rem);
-  }
-}
-
-@media (scripting: enabled) {
-
-  iam-nav:not(:defined) {
-
-    > *:not([slot="logo"]) {
-      display: none;
-    }
-    
-    &:not(:target) > *:not(.brand) {
-      display: none;
-    }
-
-    @include media-breakpoint-up(md) {
-      &:has([slot="secondary"]){
-        padding-top: rem(64);
-      }
-    }
-  }
-}
-
-
-// #region Undefined web components
-:is(*):not(:defined):not(iam-nav):not(iam-pagination):not(iam-carousel) {
-  display: block;
-  padding: rem(24);
-  margin-bottom: rem(24);
-  border-radius: rem(8);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 80rem;
-}
-
-main > :is(*):not(:defined):not(iam-carousel) {
-
-  padding: var(--container-padding);
-  padding-top: 1rem;
-}
-
-@include media-breakpoint-up(md) {
-      
-  main > :is(*):not(:defined):not(iam-carousel) {
-    max-width: 100%!important;
-    padding-inline: calc(50% - #{rem(math.div(1112,2))});
-  }
-
-  iam-header:not(:defined) {
-    min-height: rem(470);
-  }
-}
-
-:is(iam-notification,iam-card):not(:defined) {
-  box-shadow: var(--card-box-shadow);
-  border-radius: var(--card-border-radius);
-  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-}
-
-// carousel
 iam-carousel {
 
   margin-inline: calc(var(--container-padding-x) * -1);
@@ -110,18 +35,12 @@ iam-carousel {
   }
 }
 
-// Search
-iam-search input:not(.is-invalid):not(:invalid) {
-  background: none!important;
-}
-
-
-
 // For extra file
 iam-carousel:defined {
   
   overflow: visible;
 }
+
 iam-carousel > .row .col {
   scroll-snap-align: start;
   scroll-margin-left: calc(var(--container-padding-x) - calc(0.5 * $grid-gutter-width));
@@ -159,4 +78,5 @@ iam-carousel > .row .col {
     scroll-snap-align: start;
 
   }
-}
+}
+

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

@@ -1,5 +1,11 @@
 @use "../_func" as *;
 
+
+:host {
+  background: red;
+}
+
+
 @media screen and (max-width: 62em) {
   :host {
 

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

@@ -95,7 +95,7 @@ iam-nav {
   padding-top: rem(24);
   padding-bottom: rem(24);
   width: 100%;
-  max-width: rem(1280);
+  //max-width: rem(1280);
 
   .brand {
     font-size: rem(48);
@@ -146,6 +146,14 @@ iam-nav details {
 
   &[open] > summary {
     
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--colour-success);
+  }
+
+  &:has([aria-current="page"]:not([data-duplicate])) > summary {
+    
     text-decoration: underline;
     text-underline-offset: 0.3em;
     text-decoration-thickness: 2px;
@@ -400,7 +408,7 @@ iam-nav details {
       top: 100%;
       left: 0;
       width: 100%;
-      padding-inline: calc(50% - #{rem(556)});
+      padding-inline: max(var(--padding-inline), calc((100% - var(--container-max-width)) / 2 + var(--padding-inline)))!important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
       
@@ -422,13 +430,18 @@ iam-nav details {
       @include light-mode() {
         background: #EEEEEE;
       }
-      a {
-        display: inline-block;
-        margin-right: 2rem;
+      
+      > a {
+        display: inline-block!important;
+        margin-right: 2rem!important;
 
         &:first-child {
           margin-right: 0;
         }
+
+        &:after {
+          display: none!important;
+        }
       }
 
       a:has(iam-card) {
@@ -484,7 +497,7 @@ iam-nav details {
         left: 0;
         width: 100%;
         color: var(--colour-white);
-        padding-inline: calc(50% - #{rem(556)});
+        padding-inline: max(var(--padding-inline), calc((100% - var(--container-max-width)) / 2 + var(--padding-inline)))!important;
         font-size: rem(32);
         font-weight: bold;
         line-height: rem(88);
@@ -564,7 +577,33 @@ iam-nav details {
       margin-left: rem(32);
     }
   }
+
+  nav:has(iam-nav.open){
+    min-height: 100vh!important;
+    max-height: 100vh;
+    overflow: auto;
+
+    margin-bottom: calc((100vh - var(--nav-height)) * -1);
+  }
+
+  html:has(iam-nav.open:not(.demo-open)) {
+    overflow: hidden;
+  }
+}
+
+// 4 columns on large screens
+@media screen and (min-width: 80em) { // 1280
+  iam-nav.nav--large *:not(.nav--menu) > details {
+
+    &[open] > div:not(:has(details)) {
+
+      columns: 4;
+      column-gap: rem(110);
+    }
+  }
 }
+
+
 // #endregion
 
 // #region Search
@@ -614,7 +653,7 @@ iam-nav > .dialog__wrapper {
   }
 }
 
-@media screen and (max-width: 64em) {
+@media screen and (max-width: 62em) {
 
 
   iam-nav > .dialog__wrapper {
@@ -715,7 +754,12 @@ iam-nav .nav--menu {
     display: block !important;
     line-height: 1.25rem !important;
     padding: 1.5rem 0 !important;
-    margin: 0 0 rem(36) 0!important;
+    margin: 0!important;
+
+    &:not(.mb-0):not(:has(+a)){
+      margin: 0 0 rem(36) 0!important;
+    }
+    
     flex-shrink: 0;
     font-size: 1rem !important;
     font-weight: normal !important;

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

@@ -0,0 +1,44 @@
+@use "sass:math";
+@use "../_func" as *;
+
+iam-nav {
+
+  display: block;
+  padding: var(--container-padding);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  max-width: 100%;
+  margin-inline: auto;
+  
+  .brand {
+    font-size: rem(48);
+    height: rem(48);
+    padding: 0;
+    text-decoration: none;
+    min-width: min(var(--svg-width), 14rem);
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-inline: max(var(--padding-inline), calc((100% - var(--container-max-width)) / 2 + var(--padding-inline)))!important;
+  }
+}
+
+@media (scripting: enabled) {
+
+  iam-nav:not(:defined) {
+
+    > *:not([slot="logo"]) {
+      display: none;
+    }
+    
+    &:not(:target) > *:not(.brand) {
+      display: none;
+    }
+
+    @include media-breakpoint-up(md) {
+      &:has([slot="secondary"]){
+        padding-top: rem(64);
+      }
+    }
+  }
+}

package/assets/sass/components/nav.scss

@@ -342,12 +342,14 @@
 @include media-breakpoint-up(md) {
 
   :host {
-    max-width: 100%!important;
-    padding: 0!important;
+    //max-width: 100%!important;
+    padding-block: 0!important;
   }
 
   :host > .container {
     padding-block: rem(24)!important;
+    padding-inline: 0!important;
+    max-width: 100%;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -444,7 +446,7 @@
     margin-left: rem(32)!important;
   }
 
-  ::slotted(button) {
+  ::slotted(.btn-primary) {
 
     margin-left: rem(48)!important;
   }
@@ -547,6 +549,7 @@
 
 // #region Menus
 ::slotted(.nav--menu) {
+  pointer-events: all;
   overscroll-behavior: contain;
   width: calc(#{rem(375)} - var(--scrollbar-width));
   background-color: var(--colour-canvas-2);
@@ -609,9 +612,6 @@
     }
   }
 
-  &:before {
-    content: attr(data-title);
-  }
 
   @include media-breakpoint-up(sm) {
 
@@ -621,10 +621,22 @@
   @include media-breakpoint-up(md) {
   
     height: calc(100vh - var(--nav-height));
-    top: 100%;
+    top: var(--nav-height);
   }
 }
 
+slot[name="menus"]{
+
+  position: absolute;
+  top: 0;
+  right: 0;
+display: block;
+  height: 100vh;
+overflow: hidden;
+pointer-events: none;
+  width: calc(#{rem(375)} - var(--scrollbar-width));
+}
+
 ::slotted(.nav--menu[data-open-title]){
 
   &:before {
@@ -668,3 +680,36 @@
   }
 }
 // #endregion
+
+
+// #region Compact button
+@media screen and (min-width: 62em) {
+  :host(.nav--btn-compact:not(.nav--large)) {
+    .btn-menu .btn {
+      padding: 0.5rem!important;
+
+      i {
+        margin-right: 0!important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 62em) and (max-width: 90em) {
+  :host(.nav--btn-compact.nav--large) {
+    .btn-menu .btn {
+      padding: 0.5rem!important;
+
+      i {
+        margin-right: 0!important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+// #endregion

package/assets/sass/{components/component.reset.scss → components.reset.scss}

@@ -1,10 +1,10 @@
 $darkModeLocal: 'false'!default;
 
-@use "../_func.scss" as * with (
+@use "_func.scss" as * with (
   $darkMode: $darkModeLocal
 );
 
-@use "../foundations/root.scss" with (
+@use "foundations/root.scss" with (
   $root: ":is(iam-card,iam-nav,iam-table,.iamkey)" // copied directory from iamkey repo
 );
 
@@ -15,7 +15,7 @@ a:has(iam-card) {
 
 :is(iam-card,iam-nav, iam-table, .iamkey) {
 
-  @import "../foundations/reboot.scss";
+  @import "foundations/reboot.scss";
   
   @include var(font-family,--font-body);
   @include var(color,--colour-body);
@@ -23,7 +23,7 @@ a:has(iam-card) {
   line-height: 1.2;
   min-height: 100%;
 
-  @import "../_elements.scss";
+  @import "_elements.scss";
 }
 
 :is(iam-table) {
@@ -34,7 +34,7 @@ a:has(iam-card) {
 
 
 :is(iam-card,iam-nav, iam-table, .iamkey) {
-  @import "../_utilities.scss";
+  @import "_utilities.scss";
 }
 
 body.js-enabled .js-hide {

package/assets/sass/elements/buttons.scss

@@ -133,12 +133,14 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #region button with icon
 .btn {
   &[class*="fa-"]:before {
-
     font-family: "Font Awesome 6 Pro";
-    margin-right: 1rem;
     line-height: 1em;
   }
 
+  &:not(.btn-compact):before{
+    margin-right: 1rem;
+  }
+
   i[class*="fa-"]{
     
     font-family: "Font Awesome 6 Pro";

package/assets/sass/elements/container.scss

@@ -12,7 +12,7 @@
   width: 100%;
 
   &:not(.container-fluid) {
-    max-width: rem(1280);
+    max-width: var(--container-max-width);
   }
   
   .container:not(.container-xs-breakout) {

package/assets/sass/elements/dialog.scss

@@ -178,7 +178,7 @@ dialog::backdrop {
 // #endregion
 
 // #region Transactional 
-*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)):not(:has(.youtube-embed)) {
+*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
 
   text-align: center;
 
@@ -551,7 +551,7 @@ dialog::backdrop {
       transform: rotate(90deg);
     }
 
-    &[aria-expanded]:after {
+    &[aria-expanded]:not([data-number]):after {
 
       transform: rotate(270deg);
     }

package/assets/sass/foundations/reboot.scss

@@ -25,10 +25,18 @@ html {
     @media (min-width: #{em(1280)}) {
       font-size: 100%;
       font-size: vw(1280);
+
+      &:has(.nav--large) {
+        font-size: 100%;
+      }
     }
 
     @media (min-width: #{em(1440)}) {
       font-size: 112.5%;
+
+      &:has(.nav--large) {
+        font-size: 100%;
+      }
     }
 
     @media (min-width: #{em(1680)}) {
@@ -38,6 +46,15 @@ html {
     @media print {
       font-size: 16px;
     }
+
+    @media screen and (min-width: 120em) { // 1920
+
+      &:has(.nav--large) {
+  
+        font-size: vw(1920);
+      }
+    }
+
   }
 }
 
@@ -143,15 +160,9 @@ details {
 // Main grid setup to avoid having to use continaer divs
 
 *:not(.row) > main {
-  --padding-inline: 1.5rem;
-  --container-max-width: #{rem(1280)};
   --full-width-start: 0;
 
-  @include media-breakpoint-up(sm) {
-    --padding-inline: 2.5rem;
-  }
   @include media-breakpoint-up(md) {
-    --padding-inline: 5.25rem;
     --full-width-start: calc((100% - var(--container-max-width)) / 2);
   }
 

package/assets/sass/foundations/root.scss

@@ -44,6 +44,24 @@ $root: ':root'!default;
   --border-width: 1px;
   --border-style: solid;
   --border-color: var(--colour-border);
+
+  --container-max-width: #{rem(1280)};
+  --padding-inline: 1.5rem;
+
+  @include media-breakpoint-up(sm) {
+    --padding-inline: 2.5rem;
+  }
+  @include media-breakpoint-up(md) {
+    --padding-inline: 5.25rem;
+
+    &:has(.nav--large) {
+      --container-max-width: #{rem(1920)}!important;
+      --padding-inline: #{rem(56)}!important;
+      --container-padding-x-md: #{rem(56)}!important;
+      --container-padding-md: var(--container-padding-top) var(--container-padding-x-md) var(--container-padding-bottom) var(--container-padding-x-md);
+      --container-padding: var(--container-padding-md);
+    }
+  }
 }
 
 .reset-colours {

package/assets/ts/components/nav/nav.component.ts

@@ -24,6 +24,8 @@ class iamNav extends HTMLElement {
     @import "${coreCSS}";
     ${loadCSS}
     </style>
+    <style class="doc-styles">
+    </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="container">
       <slot name="logo"></slot>
@@ -62,7 +64,7 @@ class iamNav extends HTMLElement {
 
     // Load external CSS if needed
     if(this.hasAttribute('data-css'))
-      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+      this.shadowRoot.querySelector('.doc-styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
     
     const menuButton = this.shadowRoot.querySelector('.btn-menu');
     const menu = this.shadowRoot.querySelector('.menu');
@@ -76,8 +78,10 @@ class iamNav extends HTMLElement {
 
       switch(tagname){
         case "BUTTON":
-          element.setAttribute('slot','actions');
-          menu.classList.add('has-actions')
+          if(!element.hasAttribute('slot')){
+            element.setAttribute('slot','actions');
+            menu.classList.add('has-actions')
+          }
           break;
       }
 

package/assets/ts/modules/dialogs.ts

@@ -105,7 +105,7 @@ const extendDialogs = (body) => {
         dialog = dialog.parentNode.closest('dialog[open]');
       
       // Dont allow the backdrop to be clicked when transactional
-      if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
+      if(!dialog.classList.contains('dialog--transactional') && !dialog.classList.contains('dialog--acknowledgement')){
 
         const dialogDimensions = dialog.getBoundingClientRect()
 
@@ -213,14 +213,7 @@ const extendDialogs = (body) => {
   return null
 }
 
-export const createDialog = (dialog) => {
-
-  // Prevent the user from escaping the model when transactional
-  if(dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') && !dialog.classList.contains('dialog--multi')) {
-    dialog.addEventListener("cancel", (e) => {
-      e.preventDefault();
-    });        
-  }
+export const createDialog = (dialog) => { 
 
   // Create the video embed
   let videoButton = dialog.querySelector('.youtube-embed a');

package/assets/ts/modules/helpers.ts

@@ -80,6 +80,17 @@ export const addGlobalEvents = (body) => {
 
   });
 
+  document.addEventListener("keydown", (e) => {
+
+    if(e.key === "Escape") {
+      
+      if(document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')){
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  });
+
   return null
 }