@iamproperty/components 3.8.0 → 4.0.0

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/components/nav/README.md

@@ -0,0 +1,68 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-nav`))
+    window.customElements.define(`iam-nav`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<nav>
+<iam-nav>
+  <a href="/" class="brand brand--property" slot="logo">
+    <svg>
+      <title>iamproperty</title>
+      <use xlink:href="/svg/logo.svg#logo-property"></use>
+    </svg>
+  </a>
+
+  <a href="/" class="selected">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+
+  <button class="btn btn-primary">Lorem ipsum</button>
+</iam-nav>
+</nav>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-search  | String | - | Optional, displays a search button and form. The value passed through is used for the forms action attribute. |
+| data-list  | String | - | Optional string with an ID of a datalist, note this list needs to be added as an element in the component |
+| data-prevent-search  | String | - | Flag that prevents the search form submitting allowing it to used purely with JavaScript |
+| data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
+
+**Slots**
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Populates the main nav area |
+| logo | - | A place to add the logo to the site |
+| secondary | - | Moves the link upto the top of the navbar on desktop |
+| actions | - | A place to add buttons |
+| dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+
+**Class modifiers**
+
+- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
+- Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
+- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.
+
+**Dispatched events**
+
+| Event | Dispatched when | Details passed|
+| ------ | ------------- | ----------- |
+| search-keydown | When a user uses the search input field and triggers the keydown event. | { search: $inputValue } |
+| search-keyup | When a user uses the search input field and triggers the keyup event. | { search: $inputValue } |
+| search-change | When a user uses the search input field and triggers the change event. | { search: $inputValue } |
+| search-submit | When a user uses the search form and triggers the submit event. | { search: $inputValue } |

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

@@ -0,0 +1,370 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "nav"
+});
+
+class iamNav extends HTMLElement {
+
+  constructor(){
+    super();
+    const shadowRoot = 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/nav.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="container">
+      <slot name="logo"></slot>
+      <div class="buttons-holder"></div>
+      <button class="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
+
+      <div class="menu__outer">
+        <div class="menu closed">
+            
+          <div class="menu__primary">
+            <slot></slot>
+            <slot name="dual"></slot>
+          </div>
+          <div class="dialog__wrapper d-none" id="search-wrapper"></div>
+          <slot name="actions"></slot>
+          <div class="menu__secondary">
+            <div class="container">
+            <slot name="secondary"></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="menus"></slot>
+      </div>      
+    </div>
+    <div class="lists"></div>
+    <div class="backdrop" part="backdrop"></div>
+    `;
+
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    // Load external CSS if needed
+    if(this.hasAttribute('data-css'))
+      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+    
+    const menuButton = this.shadowRoot.querySelector('.btn-menu');
+    const menu = this.shadowRoot.querySelector('.menu');
+    const iamNav = this;
+    const backdrop = this.shadowRoot.querySelector('.backdrop');
+    const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
+
+    // Check the content 
+    this.querySelectorAll(':scope > *').forEach(function(element){
+      let tagname = element.tagName;
+
+      switch(tagname){
+        case "BUTTON":
+          element.setAttribute('slot','actions');
+          menu.classList.add('has-actions')
+          break;
+      }
+
+      // Create menu button
+      if(element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')){
+
+        const title = element.getAttribute('data-title');
+        const iconClass = element.getAttribute('data-icon');
+
+        // Create the menu button that sits seperately to the menu
+        const button = document.createElement('button');
+        button.setAttribute('slot',title);
+        button.classList.add('btn-menu');
+        button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
+        buttonsHolder.insertAdjacentElement('beforeend',button);
+
+        const mdButton = button.querySelector('.btn-primary');
+
+        // Make sure the menu is added to the right part of the component
+        element.setAttribute('slot','menus');
+
+        // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown
+        if(element.classList.contains('open')){
+          button.classList.add('selected');
+          mdButton.classList.toggle('active');
+          iamNav.classList.add('open');
+          backdrop.classList.add('show');
+        }
+        else {
+          element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
+        }
+
+        // Click event
+        button.addEventListener('click', function(e){
+      
+          e.preventDefault();
+          button.classList.toggle('selected');
+          element.classList.toggle('open');
+          mdButton.classList.toggle('active');
+
+          // Close desktop menus
+          let openMenu = iamNav.querySelector(':scope > details[open]');
+
+          if(openMenu)
+            openMenu.removeAttribute('open')
+
+          // Close the main menu and fix states on the button, iamNav component and backdrop
+          if(element.classList.contains('open')){
+            
+            menu.classList.remove('open');
+            menuButton.classList.remove('selected');
+            setTimeout(function(){ menu.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+            iamNav.classList.add('open');
+            backdrop.classList.add('show');
+            element.classList.remove('closed');
+          }
+          else{
+            iamNav.classList.remove('open');
+            backdrop.classList.remove('show');
+            setTimeout(function(){ element.classList.add('closed') }, 1000);
+          }
+
+          // Close any open menus
+          iamNav.querySelectorAll('.nav--menu.open').forEach(function(openmenu){
+            if(openmenu != element) {
+              openmenu.classList.remove('open');
+            }
+          });
+
+          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(selectedButton){
+
+            if(selectedButton != button){
+
+              selectedButton.classList.remove('selected');
+              let innerBtn = selectedButton.querySelector('.btn-primary');
+              innerBtn.classList.remove('active');
+            }
+          });
+
+        }, false);
+      }
+    });
+    
+    // Has secondary link
+    if(this.querySelector('a[slot="secondary"]')){
+      menu.classList.add('has-secondary');
+    }
+
+    // Create a scroll width variable to help with the sizing of the menu with in the CSS
+    document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');
+
+    // Open and close the menu
+    menuButton.addEventListener('click', function(e){
+      
+      e.preventDefault();
+      menuButton.classList.toggle('selected');
+      menu.classList.toggle('open');
+
+      // Close any other menus
+      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+        element.classList.remove('open');
+        setTimeout(function(){ element.classList.add('closed') }, 1000);
+      });
+      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+        element.classList.remove('selected');
+        let innerBtn = element.querySelector('.btn-primary');
+        innerBtn.classList.remove('active');
+      });
+
+      if(menu.classList.contains('open')){
+        iamNav.classList.add('open');
+        menu.classList.remove('closed');
+      }
+      else {
+        iamNav.classList.remove('open');
+        setTimeout(function(){ menu.classList.add('closed') }, 1000);
+      }
+
+    }, false);
+
+    // Allow outside JS to close the menu
+    this.addEventListener("request-close", (event) => {
+
+      menuButton.classList.remove('selected');
+      menu.classList.remove('open');
+      iamNav.classList.remove('open');
+    });
+
+    // Close the menu on the click of the backdrop on desktop
+    backdrop.addEventListener("click", (event) => {
+
+      let openMenu = this.querySelector('details[open] summary');
+
+      if(openMenu)
+        openMenu.click();
+
+      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+        element.classList.remove('open');
+      });
+      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+        element.classList.remove('selected');
+        let innerBtn = element.querySelector('.btn-primary');
+        innerBtn.classList.remove('active');
+      });
+
+      backdrop.classList.remove('show');
+    });
+
+    // On desktop close other menu's (details) when one is clicked
+    this.addEventListener("click", (event) => {
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
+
+        if(window.innerWidth > 992){
+
+          let summary = event.target.closest('summary');
+          let details = summary.closest('details');
+          let wrapper = details.parentNode;
+
+          if(details.hasAttribute('open'))
+            details.removeAttribute('open');
+          else
+            details.setAttribute('open','true');
+
+          // Close any bespoke menus
+          iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+            element.classList.remove('open');
+            setTimeout(function(){ menu.classList.add('closed') }, 1000);
+          });
+          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function(element){
+            element.classList.remove('selected');
+            let innerBtn = element.querySelector('.btn-primary');
+            innerBtn.classList.remove('active');
+          });
+
+          // Close any other dropdowns on the same level
+          Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
+            
+            if(detailsArrayElement != details)
+              detailsArrayElement.removeAttribute('open')
+          });
+
+          if(this.querySelectorAll(':scope > details[open]').length){
+            backdrop.classList.add('show');
+            iamNav.classList.add('open');
+          }
+          else {
+            backdrop.classList.remove('show');
+            iamNav.classList.remove('open');
+          }
+
+          event.preventDefault();
+        }
+      };
+    });
+
+    // Mega menu title
+    this.querySelectorAll('details').forEach((detailsElement) => {
+
+      let summary = detailsElement.querySelector('summary');
+      let containerDiv = detailsElement.querySelector(':Scope > div');
+
+      containerDiv.setAttribute('data-title', summary.textContent);
+    });
+
+    // Search 
+    if(this.hasAttribute('data-search')){
+      menu.classList.add('has-search');
+      let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
+
+      searchWrapper.classList.remove('d-none');
+      searchWrapper.insertAdjacentHTML('afterbegin',`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button">Open Search field</button>
+      <dialog id="search-dialog">
+      <div class="container">
+        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+          <div class="col mb-0 ms-auto col-md-7">
+            <label for="search" class="visually-hidden">Search</label>
+            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
+            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+          </div>
+          <div class="col d-none d-md-block mw-fit-content ms-3">
+            <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close"></button>
+          </div>
+        </form>
+      </div>
+      </dialog>`);
+      
+      let searchButton = this.shadowRoot.querySelector('#search-button');
+      let searchClose = this.shadowRoot.querySelector('#search-close');
+      let searchDialog = this.shadowRoot.querySelector('#search-dialog');
+      let searchInput = this.shadowRoot.querySelector('#search');
+      let searchForm = this.shadowRoot.querySelector('#search-form');
+
+      if(this.hasAttribute('data-search-open')){
+        
+        searchDialog.setAttribute('open','open');
+        this.classList.add('search-open');
+      }
+
+      searchButton.addEventListener("click", (event) => {
+
+        searchDialog.setAttribute('open','open');
+        this.classList.add('search-open');
+      });
+
+      searchClose.addEventListener("click", (event) => {
+
+        searchDialog.removeAttribute('open');
+        this.classList.remove('search-open');
+      });
+
+      // Search events
+      searchInput.addEventListener('keydown', (event) => {
+
+        const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
+        this.dispatchEvent(keyupEvent);
+      });
+
+      searchInput.addEventListener('keyup', (event) => {
+
+        if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list')) 
+          searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
+        else
+          searchInput.removeAttribute("list");
+
+        const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
+        this.dispatchEvent(keyupEvent);
+      });
+  
+      searchInput.addEventListener('change', (event) => {
+  
+        const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
+        this.dispatchEvent(changeEvent);
+      });
+
+      searchForm.addEventListener('submit', (event) => {
+        
+        if(this.hasAttribute('data-prevent-search'))
+          event.preventDefault();
+
+        const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
+        this.dispatchEvent(submitEvent);
+      });
+
+      // Make sure any child lists are available to the search input
+      this.querySelectorAll('datalist').forEach((list) => {
+
+        iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend',list);
+      });
+    }
+  }
+}
+
+export default iamNav;

package/assets/ts/components/table/table.component.ts

@@ -27,6 +27,7 @@ class iamTable extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
+    <slot name="before"></slot>
     <div class="table--cta">
     <div class="table__wrapper">
       <slot></slot>
@@ -124,6 +125,70 @@ class iamTable extends HTMLElement {
       }
 
     });
+
+
+    // Add in the checkboxes
+
+    if(this.querySelector('iam-actionbar[data-selectall]')){
+      
+      const actionbar = this.querySelector('iam-actionbar[data-selectall]');
+
+      Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
+            
+        row.insertAdjacentHTML(
+          'afterbegin',
+          "<th></th>"
+        );
+      });
+
+      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
+            
+        row.insertAdjacentHTML(
+          'afterbegin',
+          `<td class="selectrow"><input type="checkbox" name="row" id="row${index}"/><label for="row${index}"><span class="visually-hidden">Select row</span></label></td>`
+        );
+      });
+
+      this.table.addEventListener('change',(event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')){
+
+        
+          let count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
+          let countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
+
+          actionbar.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          console.log(countChecked);
+        };
+
+      });
+
+      actionbar.addEventListener('selected', (event) => {
+
+        console.log(event.detail.selected);
+
+
+        if(event.detail.selected == '0'){
+
+          Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = false;
+          });
+
+        }
+        else if(event.detail.selected == 'all'){
+          
+          Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = true;
+          });
+
+        }
+        
+      });
+
+    }
   }