@iamproperty/components 3.8.0 → 4.0.0

package/assets/sass/components/table.scss

@@ -121,7 +121,7 @@ table.border-0 {
   --wrapper-padding: #{rem(32)};
   --bg-colour: #ffffff;
   display: block;
-  background: var(--colour-canvas-2);
+  background: white;
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
   border-radius: rem(8);
@@ -134,10 +134,17 @@ table.border-0 {
 
   table {
     margin-bottom: 0;
+
+    td:has(input[type="checkbox"]) {
+      width: rem(30);
+      min-width: rem(30);
+      max-width: rem(30);
+    }
   }
 
   @media (forced-colors: active) {
     --wrapper-padding: 0;
+    background: var(--colour-canvas-2);
   }
 }
 
@@ -162,6 +169,7 @@ table.border-0 {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
     margin-bottom: 0;
+    background: white;
   }
   
 

package/assets/sass/foundations/buttons.scss

@@ -4,6 +4,9 @@
 .btn {
 
   --btn-margin: #{rem(16)};
+  --btn-padding-block: #{rem(12)};
+  --btn-padding-inline: #{rem(40)};
+  --btn-border-width: 2px;
 
   @include media-breakpoint-up(sm) { 
 
@@ -29,12 +32,12 @@
   user-select: none;
 
   background: var(--colour-btn-bg);
-  border: 2px solid var(--colour-btn-border);
+  border: var(--btn-border-width) solid var(--colour-btn-border);
   color: var(--colour-btn);
 
   font-size: rem(18);
   line-height: rem(24);
-  padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
+  padding: calc(var(--btn-padding-block) - var(--btn-border-width)) calc(var(--btn-padding-inline) - var(--btn-border-width));
   border-radius: rem(24);
   margin-bottom: var(--btn-margin);
 
@@ -92,13 +95,18 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
 // #region Action button
 .btn-action {
+
+  --btn-border-width: 1px;
+  --btn-padding-block: #{rem(6)};
+  --btn-padding-inline: #{rem(6)};
+
   background-color: var(--colour-canvas-2);
-  border: 1px solid var(--colour-muted);
+  border: var(--btn-border-width) solid var(--colour-muted);
   border-radius: rem(4)!important;
   font-weight: 400!important;
   font-size: 1rem;
   line-height: rem(20);
-  padding: rem(6);
+  
   color: var(--colour-heading);
 
   &.btn[class*=fa-]:before {
@@ -128,14 +136,16 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
     font-family: "Font Awesome 6 Pro";
     margin-right: 1rem;
+    line-height: 1em;
   }
 
-  [class*="fa-"]{
+  i[class*="fa-"]{
     
     font-family: "Font Awesome 6 Pro";
     margin-right: 1rem;
-
+    line-height: 1em;
     font-style: inherit;
+    
     &:not(:first-child){
       margin-left: 1rem;
       margin-right: 0;
@@ -178,41 +188,37 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #region button small and tag
 .btn.btn-sm {
 
-  padding: em(8) em(32);
+  --btn-padding-block: #{rem(8)};
+  --btn-padding-inline: #{rem(32)};
 }
 // #endregion
 
 // #region btn compact
 .btn-compact {
-  padding: calc(rem(12) - 2px)!important;
-  margin-bottom: rem(8)!important;
-  margin-right: rem(8)!important;
 
+  --compact-size: #{rem(48)};
+
+  padding: 0!important;
+  margin-bottom: rem(8)!important;
+  
+  &:not(:last-child){
+    margin-right: rem(8);
+  }
   text-align: center;
-  width: calc(rem(48) - 4px);
-  min-width: calc(rem(48) - 4px);
-  max-width: calc(rem(48) - 4px);
-  height: calc(rem(48) - 4px)!important;
-  text-indent: -300px;
-  overflow: hidden;
-  position: relative;
-  font-size: rem(20);
 
-  &.btn-sm {
+  width: calc(var(--compact-size));
+  min-width: calc(var(--compact-size));
+  max-width: calc(var(--compact-size));
+  height: calc(var(--compact-size))!important;
+  min-height: calc(var(--compact-size))!important;
+  max-height: calc(var(--compact-size))!important;
 
-    font-size: 1rem; 
-    padding: rem(6)!important;
-    height: auto!important;
-    line-height: rem(20);
-    height: rem(20 + 6 + 6);
-    width: rem(20 + 6 + 6);
-    min-width: rem(20 + 6 + 6);
-
-    &:before {
-      line-height: rem(20 + 6 + 6);
-    }
-  }
+  line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width))!important;
 
+  text-indent: -500px;
+  overflow: hidden;
+  position: relative;
+  font-size: rem(20);
 
   &:before {
     position: absolute;
@@ -221,10 +227,29 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     width: 100%;
     height: 100%;
     text-indent: 0;
-    line-height: calc(3rem - 6px);
+    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width))!important;
     font-weight: 900;
   }
 
+  &.btn-sm {
+
+    --compact-size: #{rem(40)};
+
+    font-size: 1rem; 
+    padding: 0!important;
+  }
+
+  &.btn-action {
+      
+    --compact-size: #{rem(32)};
+    font-size: 1rem; 
+
+    &:before {
+      font-size: 1em;
+      font-weight: 400;
+    }
+  }
+
   &.btn-secondary {
     
     --colour-btn-border: transparent;

package/assets/sass/foundations/links.scss

@@ -15,7 +15,7 @@ a {
   }
 }
 
-a:where(:not(.btn):not(:has(.card)):not(:has(iam-card))),
+a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
 .link {
   background-color: transparent;
   text-decoration: none;

package/assets/sass/foundations/reboot.scss

@@ -51,7 +51,6 @@ body {
   width: 100%;
   line-height: 1.2;
   min-height: 100%;
-
 }
 
 // #region scrollbars
@@ -142,7 +141,7 @@ details {
 
 
 // #region Undefined web components
-:is(*):not(:defined) {
+:is(*):not(:defined):not(iam-nav) {
   display: block;
   padding: rem(24);
   margin-bottom: rem(24);
@@ -178,9 +177,12 @@ main > :is(*):not(:defined) {
 
 main {
   position: relative;
+  
+  > *:first-child {
+    padding-top: 2rem;
+  }
 }
 
-
 .container.notification__holder {
 
   position: fixed;

package/assets/ts/components/actionbar/README.md

@@ -0,0 +1,55 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/actionbar/actionbar.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-actionbar`))
+    window.customElements.define(`iam-actionbar`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-actionbar data-selectall data-search>
+  
+  <div class="dialog__wrapper">
+    <button class="btn btn-action mb-0 me-0">Quick filter</button>
+    <dialog class="dialog--list">
+      <div class="pb-0">
+        <input type="radio" name="sorta" data-sort="" id="follow-up-oldesta" value="follow-up-oldest">
+        <label for="follow-up-oldesta" class="radio--tick">Option 1</label>
+
+        <input type="radio" name="sorta" data-sort="" id="follow-up-newesta" value="follow-up-newest">
+        <label for="follow-up-newesta" class="radio--tick">Option 2</label>
+
+        <input type="radio" name="sorta" data-sort="" id="date-instructed-oldesta" value="date-instructed-oldest" checked="" autofocus="true">
+        <label for="date-instructed-oldesta" class="radio--tick">Option 3</label>
+
+        <input type="radio" name="sorta" data-sort="" id="date-instructed-newesta" value="date-instructed-newest">
+        <label for="date-instructed-newesta" class="radio--tick mb-0">Option 4</label>
+      </div>
+    </dialog>
+  </div>
+
+  <button class="btn btn-primary btn-sm fa-plus" id="uploadBtn">Upload document</button>
+
+  <button class="btn btn-action fa-pen-to-square" data-single slot="selected">Edit</button>
+  <button class="btn btn-action fa-box-archive" slot="selected">Archive</button>
+  <button class="btn btn-action fa-trash-can" slot="selected">Delete</button>
+  <hr slot="selected" />
+  <button class="btn btn-action" slot="selected">Cancel</button>
+
+</iam-actionbar>
+```
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-selectall | - | - | Optional flag to include the select all button |
+| data-search | - | - | Optional flag to include the search button and functionality |
+| data-switchviews | - | - | Optional flag to include the switch views buttons |
+| data-view | String | square | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -0,0 +1,396 @@
+// @ts-nocheck
+import extendDialogs from "../../modules/dialogs";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "action bar"
+});
+
+function setSelectAllInput(element, value){
+
+  if(element && value == "all"){
+            
+    element.querySelector('input').indeterminate = false;
+    element.querySelector('input').checked = true;
+    element.querySelector('label').textContent = `Select all`;
+  }
+  else if(element && value == 0){
+
+    element.querySelector('input').indeterminate = false;
+    element.querySelector('input').checked = false;
+    element.querySelector('label').textContent = `Select all`;
+  }
+  else if(element && value){
+
+    element.querySelector('input').indeterminate = true;
+    element.querySelector('input').checked = false;
+    element.querySelector('label').textContent = `${value} item${value > 1 ? 's' : ''} selected`;
+  }
+  else if(element){
+    
+    element.querySelector('input').checked = false;
+    element.querySelector('input').indeterminate = false;
+    element.querySelector('label').textContent = `Select all`;
+  }
+}
+
+class iamActionbar 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/actionbar.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @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="actionbar__wrapper">
+      <div class="actionbar">
+        <div class="safe-area">
+          <slot></slot>
+          <div class="body">
+            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <dialog class="dialog--list">
+                <slot name="overflow"></slot>
+                <slot name="menu"></slot>
+              </dialog>
+            </div>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search m-0" data-search="">Search</button>
+          </div>
+        </div>
+      </div>
+      <div class="actionbar--selected">
+        <div class="safe-area">
+          <slot name="selected"></slot>
+          <div class="body">
+            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <dialog class="dialog--list">
+                <slot name="selected-overflow"></slot>
+              </dialog>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="actionbar--search">
+        <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
+
+        <div class="search-wrapper">
+          <label for="search" class="visually-hidden">Input field label</label>
+          <button class="suffix"><i class="fa-regular fa-search"></i></button>
+          <input type="text" id="search" name="search" required="">
+        </div>
+
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    let that = this;
+    const actionbarWrapper = this.shadowRoot.querySelector('.actionbar__wrapper');
+
+    // #region select all
+    if(this.hasAttribute('data-selectall')){
+
+      actionbarWrapper.insertAdjacentHTML( 'afterbegin', `<div class="selectall pb-0"><input type="checkbox" name="selectall" id="selectall"><label for="selectall" class="m-0">Select all</label></div>` );
+      let selectAll = this.shadowRoot.querySelector('.selectall');
+
+      if(this.hasAttribute('data-selected')){
+        setSelectAllInput(selectAll, this.getAttribute('data-selected'));
+      }
+
+      selectAll.addEventListener('change', (event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('input')){
+          
+          if(event.target.closest('input').checked)
+            this.setAttribute('data-selected','all');
+          else 
+            this.setAttribute('data-selected',0);
+        }
+      });
+
+      let cancelButton = this.querySelector('button[data-cancel]');
+      if(cancelButton){
+        cancelButton.addEventListener('click', (event) => {
+
+          this.setAttribute('data-selected',0);
+        });
+      }
+    }
+    // #endregion
+
+    // #region switchviews
+    if(this.hasAttribute('data-switchviews')){
+
+      let btns = '';
+      let viewList = this.getAttribute('data-switchviews').split(',');
+
+      viewList.forEach((view,index) => {
+
+        let icon = 'fa-grid-2';
+
+        if(view == "list")
+          icon = 'fa-grip-lines';
+        else if(view == "small")
+          icon = 'fa-bars';
+
+        btns += `<button class="btn btn-action btn-compact mb-0 fa-regular ${icon}">${view}</button>`;
+      });
+
+      actionbarWrapper.insertAdjacentHTML( 'afterbegin', `<div class="views m-0">${btns}</div>` );
+      let views = this.shadowRoot.querySelector('.views');
+
+      views.addEventListener('click', (event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-action')){
+          
+          let btn = event.target.closest('.btn-action');
+
+          this.setAttribute('data-view',btn.textContent);
+
+          const switchEvent = new CustomEvent("switch-view", { detail: { view: btn.textContent} });
+          this.dispatchEvent(switchEvent);
+        }
+      });
+    }
+    // #endregion
+
+    // #region search
+    const searchBar = this.shadowRoot.querySelector('.actionbar--search');
+
+    if(this.hasAttribute('data-search') && this.getAttribute('data-search') == 'show')
+      searchBar.classList.add('show');
+
+    this.shadowRoot.addEventListener('click', (event) => {
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[data-search]')){
+        searchBar.classList.toggle('show');
+      }
+    });
+
+    searchBar.addEventListener('keyup', (event) => {
+
+      const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchBar.querySelector('input').value } });
+      this.dispatchEvent(keyupEvent);
+    });
+
+    searchBar.addEventListener('change', (event) => {
+
+      const changeEvent = new CustomEvent("search-change", { detail: { search: searchBar.querySelector('input').value } });
+      this.dispatchEvent(changeEvent);
+    });
+    searchBar.addEventListener('click', (event) => {
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('button.suffix')){
+          
+        const submitEvent = new CustomEvent("search-submit", { detail: { search: searchBar.querySelector('input').value } });
+        this.dispatchEvent(submitEvent);
+      }
+    });
+    // #endregion
+
+    // Make sure dialogs created in the shadow dom work
+    Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element,index) => {
+          
+      extendDialogs(element);
+    });
+
+    // #region Reponsive safe area
+    function hideButtons () {
+
+      const wrapperWidth = actionbarWrapper.scrollWidth;
+      const screenWidth = document.documentElement.scrollWidth;
+      let safeAreaWidth = 750;
+      let elementMargin = 16;
+      let mobileSafeWidth = that.hasAttribute('data-switchviews') ? 144 : 210;
+
+      // We need to modify the widths to mimic the CSS's scaling functionality
+      let modifier = 1;
+      if (screenWidth >= 992 && screenWidth <= 1280){
+        modifier = screenWidth/1280;
+      }
+      else if (screenWidth >= 576 && screenWidth <= 1280) {
+        modifier = screenWidth/768;
+      }
+      else if (screenWidth < 576) {
+        modifier = screenWidth/375;
+      }
+
+      // Work out the safe sapce width depending upon the wrappers width and modifier 
+      if (wrapperWidth >= 992 && wrapperWidth <= 1280){
+        safeAreaWidth = safeAreaWidth*modifier;
+      }
+      else if (wrapperWidth >= 576 && wrapperWidth <= 1280) {
+        safeAreaWidth = 450*modifier;
+      }
+      else if (wrapperWidth < 576) {
+        safeAreaWidth = mobileSafeWidth*modifier;
+      }
+
+      // Margin in between elements
+      elementMargin = elementMargin*modifier;
+
+      // If the wrapper width is small we want to reduce the btn sizes by adding or removing btn-compact classes
+      if (wrapperWidth < 576) {
+        
+        Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated)')).forEach((element,index) => {
+
+          element.className = element.className.replace(' btn-compact',' _btn-compact');
+          element.classList.add('btn-compact');
+          element.classList.add('js-updated');
+        });
+      }
+      else {
+
+        Array.from(that.querySelectorAll(':scope > .btn.js-updated')).forEach((element,index) => {
+          
+          element.classList.remove('btn-compact');
+          element.classList.remove('js-updated');
+          element.className = element.className.replace(' _btn-compact',' btn-compact');
+        });
+      }
+
+      // Reset the elements before we decide what elements become slotted into the overflow
+      Array.from(that.querySelectorAll('[slot]')).forEach((element,index) => {
+
+        if(element.getAttribute("slot") == "overflow")
+          element.removeAttribute('slot');
+
+        if(element.getAttribute("slot") == "selected-overflow")
+          element.setAttribute('slot','selected');
+      });
+
+      Array.from(that.querySelectorAll('.show')).forEach((element,index) => {
+
+       element.classList.remove('show');
+      });
+
+      // Foreach safe area lets check what elements are slotted in them and if they need an overflow
+      Array.from(that.shadowRoot.querySelectorAll('.safe-area')).forEach((element,index) => {
+      
+        // Decide on which overflow slot to use
+        let overflowSlot = "overflow"
+
+        if(element.querySelector('slot').hasAttribute('name') && element.querySelector('slot').getAttribute('name') == "selected")
+          overflowSlot = "selected-overflow";
+
+        // Get the slotted elements, remember they aren't children of the safe area
+        let elements = element.querySelector('slot').assignedElements();
+        let tempWidth = 44*modifier; // Allow space for the overflow button
+
+        // If search then allow for the search button width
+        if(that.hasAttribute('data-search'))
+          tempWidth += 44*modifier; 
+  
+        // Foreach element that isn't an action button or dialog wrapper add to the width, these will not be moved into the overflow slot
+        for (let i = 0; i < elements.length; i++) {
+
+          if(!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('dialog__wrapper')){
+  
+            tempWidth += elements[i].offsetWidth;
+            tempWidth += elementMargin;
+          }
+        }
+
+        // Foreach dialog wrapper decide if safe in safe area or move into the overflow slot, dialog wrappers have priority over the action buttons
+        for (let i = 0; i < elements.length; i++) {
+  
+          if(elements[i].classList.contains('dialog__wrapper')){
+  
+            elements[i].classList.add('show');
+            tempWidth += elements[i].offsetWidth;
+            tempWidth += (elementMargin/2);
+  
+            // If we have exceeded the safe area then lets break the loop
+            if(tempWidth - (elementMargin/2) > safeAreaWidth){
+                
+              elements[i].classList.remove('show');
+              break;
+            }
+          }
+        }
+
+        // Foreach action button 
+        for (let i = 0; i < elements.length; i++) {
+  
+          if(elements[i].classList.contains('btn-action')){
+  
+            elements[i].classList.add('show');
+            tempWidth += elements[i].offsetWidth;
+            tempWidth += (elementMargin/2);
+  
+            // If we have exceeded the safe area then lets break the loop
+            if(tempWidth - (elementMargin/2) > safeAreaWidth){
+                
+              elements[i].classList.remove('show');
+              break;
+            }
+          }
+        }
+
+        let overflowDialog = element.querySelector('.dialog-overflow');
+
+        if(overflowDialog)
+          overflowDialog.classList.add('d-none');
+
+        // Decide which elements go into the overflow slot
+        for (let i = 0; i < elements.length; i++) {
+  
+          if(elements[i].classList.contains('btn-action') || elements[i].classList.contains('dialog__wrapper')){
+            if (!elements[i].classList.contains('show')){
+
+              // Move to the slot by changing the attribute
+              elements[i].setAttribute('slot',overflowSlot);
+
+              // if an element has been added to overflow slot then make sure we show the overflow menu button
+              if(overflowDialog)
+                overflowDialog.classList.remove('d-none');
+            }
+          }
+        }
+      });
+    }
+
+    // Check buttons on load and when the wrapper element gets resized.
+    hideButtons();
+    new ResizeObserver(hideButtons).observe(actionbarWrapper);
+    // #endregion
+  }
+
+  static get observedAttributes() {
+    return ["data-selected"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+
+    switch (attrName) {
+      case "data-selected": {
+
+        let selectAll = this.shadowRoot.querySelector('.selectall');
+        
+        if(selectAll)
+          setSelectAllInput(selectAll, newVal);
+          const event = new CustomEvent("selected", { detail: { selected: newVal } });
+          this.dispatchEvent(event);
+        break;
+      }
+    }
+  }
+}
+
+export default iamActionbar;