@iamproperty/components 5.5.1-beta-1 → 5.5.1-beta-4

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

@@ -0,0 +1,211 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "inline edit"
+});
+
+class iamInlineEdit 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/inline-edit.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">
+    
+    <slot></slot>
+    <div class="btns">
+      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+    </div>
+    <div class="status pe-none">
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>
+    </div>
+    `;
+
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    let inlineEdit = this;
+    let saveButton = this.shadowRoot.querySelector('#save');
+    let cancelButton = this.shadowRoot.querySelector('#cancel');
+    
+    let label = this.querySelector('label');
+    let input = this.querySelector('input, textarea, select');
+
+    let statusSaving = this.shadowRoot.querySelector('#saving');
+    let statusSaved = this.shadowRoot.querySelector('#saved');
+    let statusNotSaved = this.shadowRoot.querySelector('#notsaved');
+
+    // Save the original value for later
+    let originalValue = input.value;
+
+    // cancel
+    cancelButton.addEventListener('click', (event) => {
+
+
+      console.log(originalValue)
+
+      input.value = originalValue;
+
+
+      input.blur();
+      inlineEdit.blur();
+
+      inlineEdit.classList.remove('was-validated');
+      statusNotSaved.classList.add('d-none');
+      
+      const cancelEvent = new CustomEvent("inline-edit-cancel", { detail: { name: input.getAttribute('name')} });
+      inlineEdit.dispatchEvent(cancelEvent);
+    });
+
+    // Save
+    saveButton.addEventListener('click', (event) => {
+
+      if(inlineEdit.querySelector(':invalid')){
+        
+        inlineEdit.classList.add('was-validated');
+
+        return false;
+      }
+
+      originalValue = input.value;
+
+      // dispatch save event
+      const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+      inlineEdit.dispatchEvent(saveEvent);
+
+      //inlineEdit.setAttribute('data-saving','true');
+      input.disabled = true;
+
+      input.blur();
+      inlineEdit.blur();
+
+
+      statusSaving.classList.remove('d-none');
+    });
+
+    // Save
+    if(input.tagName === 'input'){
+      input.addEventListener('keydown', (event) => {
+
+        switch (event.key) { // change to event.key to key to use the above variable
+          case "Enter":
+              
+            event.stopPropagation();
+            event.preventDefault();
+
+            saveButton.click();
+
+            break;
+        }
+      });
+    }
+
+    // Saved
+    inlineEdit.addEventListener('inline-edit-saved', (event) => {
+
+      setTimeout(() => {
+
+        statusSaving.classList.add('d-none');
+        statusSaved.classList.remove('d-none');
+            
+        const confirmEvent = new CustomEvent("inline-edit-confirmed", { detail: { name: input.getAttribute('name') } });
+        inlineEdit.dispatchEvent(confirmEvent);
+      }, 100);
+
+      // Reset to normal
+      setTimeout(() => {
+
+        input.disabled = false;
+        inlineEdit.removeAttribute('data-saving');
+        
+        statusSaving.classList.add('d-none');
+        statusSaved.classList.add('d-none');
+        statusNotSaved.classList.add('d-none');
+      }, 1000);
+    });
+
+    // enter key saves
+    if(input.tagName === 'SELECT'){
+
+      input.addEventListener('change',(event) => {
+
+        originalValue = input.value;
+        
+        const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+        inlineEdit.dispatchEvent(saveEvent);
+
+        inlineEdit.setAttribute('data-saving','true');
+        input.disabled = true;
+
+        input.blur();
+      });
+    }
+
+    if(input.tagName != 'SELECT'){
+      input.addEventListener('focus',(event) => {
+
+        input.select();
+      });
+    }
+
+    //blur it should autosave
+    inlineEdit.addEventListener('blur',(event) => {
+
+      if(input.value != originalValue){
+
+        let feedbackText = '(Unsaved)';
+
+        if(inlineEdit.hasAttribute('data-autosave')) {
+
+          originalValue = input.value;
+          
+          const saveEvent = new CustomEvent("inline-edit-autosave", { detail: { name: input.getAttribute('name'), value: input.value } });
+          inlineEdit.dispatchEvent(saveEvent);
+
+          statusSaving.classList.remove('d-none');
+        }
+        else if(!inlineEdit.querySelector('.inline-feedback')){
+          statusNotSaved.classList.remove('d-none');
+        }
+      }
+    });
+
+    // checkboxes
+    inlineEdit.addEventListener('change', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')){
+        
+        let saveValue = "";
+
+        Array.from(inlineEdit.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
+
+          if(index != 0)
+            saveValue += ", ";
+
+          saveValue += checkbox.value;
+        });
+        
+        const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: event.target.closest('input[type="checkbox"]').getAttribute('name'), value: saveValue } });
+        inlineEdit.dispatchEvent(saveEvent);
+      }
+    });
+  }
+}
+
+export default iamInlineEdit;

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

@@ -0,0 +1,35 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-fileupload`))
+    window.customElements.define(`iam-fileupload`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-multiselect>
+  <span class="label" slot="label">Users</span>
+  <label class="tag"><input type="checkbox" name="tags" value="IT James Lambert" />James Lambert</label>
+  <label class="tag"><input type="checkbox" name="tags" value="IT Amanda Knight"/>Amanda Knight</label>
+  <label class="tag"><input type="checkbox" name="tags" value="IT Brian Lord"/>Brian Lord</label>
+  <label class="tag"><input type="checkbox" name="tags" value="Claire Lane"/>Claire Lane</label>
+  <label class="tag"><input type="checkbox" name="tags" value="John Smith"/>John Smith</label>
+  <label class="tag"><input type="checkbox" name="tags" value="James Brown"/>James Brown</label>
+  <label class="tag"><input type="checkbox" name="tags" value="Sarah Brown"/>Sarah Brown</label>
+</iam-multiselect>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-min | Int | - | Set's the minimum amout of tags needed for the input field to validate |
+| data-min | Int | - | Set's the maximum amout of tags allowed to be added |
+| data-is-required | flag | - | Makes it so at least one tag must be added for the it to be valid and allow the outer form to be sumitted |

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -0,0 +1,304 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "mutliselect"
+});
+
+class iamMultiselect 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/multiselect.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <label for="search"> <slot name="feedback"></slot></label>
+    <div class="outer">
+    <div class="wrapper">
+      
+      <slot name="checked"></slot>
+      <input name="search" id="search" autocomplete="off" required />
+      <span class="admin-panel feedback">This field is required</span>
+      <div class="admin-panel dropdown">
+        <slot></slot>
+      </div>
+      <button id="clear"><span class="visually-hidden">Clear</span></button>
+    </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    let multiselect = this;
+    let form = this.closest('form');
+    let wrapper = this.shadowRoot.querySelector('.wrapper');
+    let search = multiselect.shadowRoot.querySelector('#search');
+    let button = multiselect.shadowRoot.querySelector('#clear');
+    let order = 0;
+    let label = multiselect.shadowRoot.querySelector('label');
+
+    
+    label.innerHTML = multiselect.getAttribute('data-label');
+
+    if(multiselect.hasAttribute('placeholder')){
+
+      search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
+    }
+
+    multiselect.setAttribute('data-error','true');
+
+    // If in form and is required lets watch for the form being submitted
+    if(form && multiselect.hasAttribute('data-is-required')){
+
+      let observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutationRecord) {
+          const targetElement = mutationRecord.target as HTMLElement;
+
+          console.log(targetElement);
+
+          if (targetElement.classList.contains("was-validated")) {
+            wrapper.classList.add('was-validated');
+          } else {
+            wrapper.classList.remove('was-validated');
+          };
+        })
+      });
+
+      if (form.classList.contains("was-validated")) {
+        wrapper.classList.add('was-validated');
+      } else {
+        wrapper.classList.remove('was-validated');
+      };
+
+      observer.observe(form, {
+        attributes : true,
+        attributeFilter : ['style', 'class']
+       });
+    }
+
+    // Set the correct attributes
+    function setItem(inputToSet){
+
+      if(inputToSet.checked == false){
+
+        inputToSet.closest('label').removeAttribute('slot');
+        inputToSet.closest('label').removeAttribute('style');
+        inputToSet.closest('label').removeAttribute('data-order');
+      }
+      else {
+
+        order++;
+        
+        inputToSet.closest('label').setAttribute('slot','checked');
+        inputToSet.closest('label').setAttribute('style',`--order:${order};`);
+        inputToSet.closest('label').setAttribute('data-order',order);
+      }
+
+      // check for errors
+      if(multiselect.querySelector('label[slot="checked"]')){
+        wrapper.classList.add('filled');
+        multiselect.removeAttribute('data-error');
+
+        search.removeAttribute('placeholder');
+      }
+      else {
+        wrapper.classList.remove('filled');
+        multiselect.setAttribute('data-error','true');
+
+        if(multiselect.hasAttribute('placeholder')){
+
+          search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
+        }
+      }
+
+
+    }
+
+    // Set on load
+    Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
+
+      setItem(checkbox);
+    });
+
+
+    // Filter list
+    search.addEventListener('input', (event) => {
+
+      Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label, index) => {
+
+        let checkbox = label.querySelector('input');
+        let searchValue = checkbox.value;
+        
+        if(searchValue.toLowerCase().includes(search.value.toLowerCase())){
+          label.removeAttribute('slot')
+        }
+        else {
+          label.setAttribute('slot','notmatched');
+        }
+      });
+    });
+
+    // Set items
+    multiselect.addEventListener('change', (event) => {
+
+      if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')){
+        let checkbox = event.target.closest('input[type="checkbox"]');
+
+        setItem(checkbox);
+
+        search.focus();
+      }
+    });
+
+    // Clear all
+    button.addEventListener("click", function(event) {
+
+      Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox, index) => {
+
+        checkbox.checked = false;
+        
+        setItem(checkbox);
+      });
+
+      search.focus();
+    });
+
+    // Add some keyboard features to keep it accessible
+    multiselect.addEventListener("keydown", function(event) {
+
+      const activeElement = document.activeElement;
+
+      switch (event.key) { // change to event.key to key to use the above variable
+        case "ArrowUp":
+          // Up pressed
+          event.preventDefault();
+
+          if(activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox"){
+
+            let arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
+
+            let activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
+            let prevCheckbox =  Array.from(arrCheckboxes)[activeIndex-1];
+            
+            if(prevCheckbox)
+              prevCheckbox.focus();
+            else
+              search.focus();
+          }
+
+          break;
+        case "ArrowDown":
+          // Down pressed
+          event.preventDefault();
+
+          if(activeElement == multiselect){
+
+            multiselect.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();
+          }
+          else if(activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox"){
+
+            let activeValue = activeElement.value;
+
+            let nextCheckbox = multiselect.querySelector(`label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);
+
+            if(nextCheckbox)
+              nextCheckbox.focus();
+          }
+        
+          break;
+        case "Enter":
+            
+          event.stopPropagation();
+          event.preventDefault();
+
+          if(activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox"){
+            
+            if(activeElement.checked == false)
+              activeElement.checked = true;
+            else
+              activeElement.checked = false;
+          }
+          
+          setItem(activeElement);
+          search.focus();
+
+          break;
+      }
+    });
+
+    function checkLastTag(){
+
+      if(order == 0)
+        return false;
+
+      let lastTag = multiselect.querySelector(`label[data-order="${order}"]`);
+
+      if(!lastTag){
+        lastTag = checkLastTag(order--);
+      }
+
+      return lastTag;
+    }
+
+    search.addEventListener("keydown", function(event) {
+
+      switch (event.key) { // change to event.key to key to use the above variable
+        case "Enter":
+          
+          let match = multiselect.querySelector(`input[value="${search.value}"]:not(:checked)`);
+
+          if(!match)
+            search.value = "";
+
+          search.focus();
+
+          break;
+        case "Backspace":
+
+          if(!search.value){
+
+            let lastTag = checkLastTag(order);
+
+            if(lastTag){
+                
+              let lastTagInput = lastTag.querySelector('input');
+              lastTagInput.checked = false;
+              setItem(lastTagInput);
+            }
+            
+            search.focus();
+          }
+
+          break;
+      }
+    });
+
+
+    // Fix for the inline edit multiselect
+    multiselect.addEventListener("mousedown", (event) => {
+
+      wrapper.setAttribute('data-mousedown','true');
+    });
+
+    multiselect.addEventListener("mouseup", (event) => {
+
+      wrapper.removeAttribute('data-mousedown');
+    });
+  }
+}
+
+export default iamMultiselect;

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

@@ -0,0 +1,36 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-fileupload`))
+    window.customElements.define(`iam-fileupload`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-search>
+<label>Search existing transactions
+  <span>
+    <input type="text" name="client" autocomplete="off" aria-autocomplete="none" required />
+    <span class="suffix fa-regular fa-search"></span>
+  </span>
+</label>
+<datalist id="properties"></datalist>
+</iam-search>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-url | String | - | Optional value that populates the datalist with extra results from an API |
+| data-schema | String | - | Tells the JavaScript where to look for the array of values in the API JSON |
+| data-value-schema | String | - | Tells the JavaScript where to look for the value within the API JSON |
+| data-display-schema | String | - | Tells the JavaScript where to look for the title within the API JSON |
+

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

@@ -122,10 +122,10 @@ class iamTable extends HTMLElement {
     tableModule.createSearchDataList(this.table, this.form);
 
     if(!this.form.querySelector('[data-pagination]')){
-      this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
+      this.form.insertAdjacentHTML('beforeend',`<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`);
     }
     if(!this.form.querySelector('[data-show]')){
-      this.form.innerHTML += `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
+      this.form.insertAdjacentHTML('beforeend',`<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`);
     }
 
     // Event listeners