@iamproperty/components 3.9.0-beta-1 → 4.0.0

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

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

@@ -4,6 +4,17 @@
 body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
+
+}
+
+body {
+  
+  --nav-height: #{rem(96)};
+
+  &:has(iam-nav a[slot="secondary"]){
+    
+    --nav-height: #{rem(96 + 40)};
+  }
 }
 
 // #region Create the correct padding top of the page

package/assets/ts/components/collapsible-side/README.md

@@ -0,0 +1,38 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/collapsible-side/collapsible-side.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-collapsible-side`))
+    window.customElements.define(`iam-collapsible-side`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-collapsible-side data-title="Configuration">
+        
+  <div slot="menu">
+    <label for="test1">Active branch</label>
+    <select class="form-select" name="test1" id="test1">
+      <option value="1" selected>Newcastle</option>
+      <option value="2">Two</option>
+      <option value="2">Three</option>
+      <option value="2">Four</option>
+    </select>
+  </div>
+
+  <hr slot="menu"/>
+  <a href="/" slot="menu">Agency settings</a>
+  <a href="/" slot="menu">Control panel</a>
+  <a href="/" slot="menu" class="selected">Contact us</a>
+
+  <h1>Inspections</h1>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
+</iam-collapsible-side>
+```

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

@@ -0,0 +1,134 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "collapsible side menu"
+});
+
+class iamCollapsibleSideMenu extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/collapsible-side.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${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="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>
+      </div>
+
+      <div class="main-content">
+        <slot></slot>
+      </div>
+
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const sideMenu = this.shadowRoot.querySelector('.side-menu');
+    const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
+    const mainContent = this.shadowRoot.querySelector('.main-content')
+    const button = this.shadowRoot.querySelector('.side-menu > .btn');
+
+    // Load external CSS if needed
+    if(this.hasAttribute('data-css'))
+      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+
+    // Set sde nav title
+    if(!this.hasAttribute('data-title'))
+      this.setAttribute('data-title','configuration')
+
+    sideMenuContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    mainContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    
+
+    if(this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')){
+      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');
+    }
+      
+    // Open the menu
+    button.addEventListener('click', (event) => {
+
+
+      if(!sideMenu.classList.contains('open')){
+
+        sideMenuContent.classList.remove('closed');
+
+
+        setTimeout(function(){ 
+          sideMenu.classList.add('open'); 
+        }, 100);
+
+
+      }
+      else {
+          
+        sideMenu.classList.remove('open');
+        setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      
+        // While the menu is closing dont allow the hover to re-open it until its fully closed.
+        sideMenu.classList.add('pe-none');
+        setTimeout(function(){ sideMenu.classList.remove('pe-none')}, 1000);
+      }
+    });
+
+    // Mimic hover event on desktop so that we can control when classes are set and which order
+    sideMenu.addEventListener('mouseenter', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+
+        sideMenu.classList.add('hover');
+        
+      }
+    });
+
+    sideMenu.addEventListener('mousemove', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+      }
+    });
+
+    sideMenu.addEventListener('mouseleave', (event) => {
+
+      if(window.innerWidth > 992){
+
+        sideMenu.classList.remove('hover');
+
+        if(!sideMenu.classList.contains('open'))
+          setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      }
+    });
+
+
+
+  }
+
+}
+
+export default iamCollapsibleSideMenu;

package/assets/ts/modules/helpers.ts

@@ -17,23 +17,6 @@ export const addBodyClasses = (body) => {
     body.classList.add("ie");
   }
 
-  let nav = document.querySelector('nav');
-  if(nav) {
-    let navHeight = nav.offsetHeight;
-    document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-
-    function outputsize() {
-
-      navHeight = nav.offsetHeight;
-      document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-    }
-    
-    new ResizeObserver(outputsize).observe(nav);
-  }
-  else {
-    document.querySelector('body').style.setProperty("--nav-height", `0px`);
-  }
-
   return null
 }