@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/ts/components/pagination/pagination.component.ts

@@ -1,213 +1,213 @@
-class iamPagination extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-      
-    const loadCSS = `@import "${assetLocation}/css/components/pagination.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="pagination d-none">
-  
-      <div class="minimal" part="minimal">
-        <div class="page-jump">
-          <div><select class="select--minimal"></select></div>
-          <span class="total-pages"></span>
-        </div>
-        
-        <button class="prev" disabled>Prev</button>
-        <button class="next" disabled>Next</button>
-      </div>
-
-      <div class="item-count" part="item-count"></div>
-      <div class="per-page" part="per-page">
-        <div>
-          <select class="select--minimal">
-            <option value="15">15</option>
-            <option value="25">25</option>
-            <option value="40">40</option>
-            <option value="50">50</option>
-          </select>
-        </div>
-        <span> / page</span>
-      </div>
-      <div class="mobile-controls m-auto text-center">
-        <i class="fa-solid fa-spinner fa-spin"></i>
-        <button class="load-more btn btn-primary m-auto">Load more</a>
-      </div>
-    </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    // Set default attributes
-    const params = new URLSearchParams(window.location.search);
-
-    if (!this.hasAttribute('data-total')) this.setAttribute('data-total', 15);
-
-    if (!this.hasAttribute('data-page')) this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);
-
-    if (!this.hasAttribute('data-show')) this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);
-
-    if (!this.hasAttribute('data-increment')) this.setAttribute('data-increment', this.getAttribute('data-show'));
-
-    // Elements
-    const select = this.shadowRoot.querySelector('.page-jump select');
-    const prev = this.shadowRoot.querySelector('.prev');
-    const next = this.shadowRoot.querySelector('.next');
-    const perPage = this.shadowRoot.querySelector('.per-page select');
-    const loadMore = this.shadowRoot.querySelector('.load-more');
-
-    // Add the select inputs, enable or disable buttons, update the helper text
-    this.setup();
-
-    // Select on change will update the data-page attr which will dispatch an event
-    select.addEventListener('change', (event) => {
-      this.setAttribute('data-show', this.getAttribute('data-increment'));
-      this.setAttribute('data-page', event.target.value);
-    });
-
-    // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
-    next.addEventListener('click', () => {
-
-      console.log(parseInt(this.getAttribute('data-page')))
-
-      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) + 1);
-    });
-
-    prev.addEventListener('click', () => {
-      
-      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) - 1);
-    });
-
-    // Update how many is shown
-    perPage.addEventListener('change', (event) => {
-      this.setAttribute('data-increment', event.target.value);
-    });
-
-    // Load more button
-
-    const increment = parseInt(this.getAttribute('data-increment'));
-    const show = parseInt(this.getAttribute('data-show'));
-
-    if (show >= parseInt(this.getAttribute('data-total'))) {
-      loadMore.remove();
-    }
-
-    loadMore.addEventListener('click', () => {
-      const newValue = show + increment;
-      this.setAttribute('data-show', newValue);
-
-      if (newValue > parseInt(this.getAttribute('data-total'))) {
-        loadMore.remove();
-      }
-    });
-  }
-
-  setup(): void {
-    // Elements
-    const wrapper = this.shadowRoot.querySelector('.pagination');
-    const select = this.shadowRoot.querySelector('.page-jump select');
-    const prev = this.shadowRoot.querySelector('.prev');
-    const next = this.shadowRoot.querySelector('.next');
-    const itemCount = this.shadowRoot.querySelector('.item-count');
-    const perPage = this.shadowRoot.querySelector('.per-page select');
-    const totalPages = this.shadowRoot.querySelector('.total-pages');
-
-    // Values
-    const currentPage = parseInt(this.getAttribute('data-page'));
-    const total = parseInt(this.getAttribute('data-total'));
-    const show = parseInt(this.getAttribute('data-show'));
-    const increment = parseInt(this.getAttribute('data-increment'));
-    const numberPages = Math.ceil(total / increment);
-
-    if (total > show) wrapper.classList.remove('d-none');
-
-    // Populate the select input with the number of pages
-    let strOptions = '';
-    for (let i = 1; i <= numberPages; i++) {
-      strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
-    }
-    select.innerHTML = strOptions;
-
-    totalPages.innerHTML = `of ${numberPages}`;
-
-    // Next button
-    if (currentPage == numberPages) next.setAttribute('disabled', 'disabled');
-    else next.removeAttribute('disabled');
-
-    if (currentPage == 1) prev.setAttribute('disabled', 'disabled');
-    else prev.removeAttribute('disabled');
-
-    // Update the item count text
-    const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;
-    const endPoint = currentPage == 1 ? show : currentPage * show;
-    itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;
-
-    const defaultValues = [15, 25, 40, 50];
-
-    // Update the per page options if needed
-    if (increment && perPage.value != increment && !defaultValues.includes(increment)) {
-      perPage.innerHTML = `<option value="${increment}">${increment}</option>
-      <option value="${increment * 2}">${increment * 2}</option>
-      <option value="${increment * 3}">${increment * 3}</option>
-      <option value="${increment * 4}">${increment * 4}</option>`;
-    }
-
-    perPage.value = increment;
-  }
-
-  static get observedAttributes(): any {
-    return ['data-total', 'data-increment', 'data-page', 'data-show'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    switch (attrName) {
-      case 'data-total': {
-        if (oldVal != newVal) {
-          //this.setAttribute('data-page', 1);
-          this.setup();
-        }
-        break;
-      }
-      case 'data-show': {
-        if (oldVal != newVal) {
-          //this.setAttribute('data-page', 1);
-          this.setup();
-          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
-        }
-        break;
-      }
-      case 'data-increment': {
-        if (oldVal != newVal) {
-          this.setAttribute('data-show', newVal);
-          //this.setAttribute('data-page', 1);
-          this.setup();
-          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
-        }
-        break;
-      }
-      case 'data-page': {
-        if (oldVal && oldVal != newVal) {
-          this.setup();
-
-          // Dispact the event for other components to use as triggers
-          this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
-        }
-        break;
-      }
-    }
-  }
-}
-
-export default iamPagination;
+class iamPagination extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+      
+    const loadCSS = `@import "${assetLocation}/css/components/pagination.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="pagination d-none">
+  
+      <div class="minimal" part="minimal">
+        <div class="page-jump">
+          <div><select class="select--minimal"></select></div>
+          <span class="total-pages"></span>
+        </div>
+        
+        <button class="prev" disabled>Prev</button>
+        <button class="next" disabled>Next</button>
+      </div>
+
+      <div class="item-count" part="item-count"></div>
+      <div class="per-page" part="per-page">
+        <div>
+          <select class="select--minimal">
+            <option value="15">15</option>
+            <option value="25">25</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+        <span> / page</span>
+      </div>
+      <div class="mobile-controls m-auto text-center">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+        <button class="load-more btn btn-primary m-auto">Load more</a>
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // Set default attributes
+    const params = new URLSearchParams(window.location.search);
+
+    if (!this.hasAttribute('data-total')) this.setAttribute('data-total', 15);
+
+    if (!this.hasAttribute('data-page')) this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);
+
+    if (!this.hasAttribute('data-show')) this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);
+
+    if (!this.hasAttribute('data-increment')) this.setAttribute('data-increment', this.getAttribute('data-show'));
+
+    // Elements
+    const select = this.shadowRoot.querySelector('.page-jump select');
+    const prev = this.shadowRoot.querySelector('.prev');
+    const next = this.shadowRoot.querySelector('.next');
+    const perPage = this.shadowRoot.querySelector('.per-page select');
+    const loadMore = this.shadowRoot.querySelector('.load-more');
+
+    // Add the select inputs, enable or disable buttons, update the helper text
+    this.setup();
+
+    // Select on change will update the data-page attr which will dispatch an event
+    select.addEventListener('change', (event) => {
+      this.setAttribute('data-show', this.getAttribute('data-increment'));
+      this.setAttribute('data-page', event.target.value);
+    });
+
+    // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
+    next.addEventListener('click', () => {
+
+      console.log(parseInt(this.getAttribute('data-page')))
+
+      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) + 1);
+    });
+
+    prev.addEventListener('click', () => {
+      
+      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) - 1);
+    });
+
+    // Update how many is shown
+    perPage.addEventListener('change', (event) => {
+      this.setAttribute('data-increment', event.target.value);
+    });
+
+    // Load more button
+
+    const increment = parseInt(this.getAttribute('data-increment'));
+    const show = parseInt(this.getAttribute('data-show'));
+
+    if (show >= parseInt(this.getAttribute('data-total'))) {
+      loadMore.remove();
+    }
+
+    loadMore.addEventListener('click', () => {
+      const newValue = show + increment;
+      this.setAttribute('data-show', newValue);
+
+      if (newValue > parseInt(this.getAttribute('data-total'))) {
+        loadMore.remove();
+      }
+    });
+  }
+
+  setup(): void {
+    // Elements
+    const wrapper = this.shadowRoot.querySelector('.pagination');
+    const select = this.shadowRoot.querySelector('.page-jump select');
+    const prev = this.shadowRoot.querySelector('.prev');
+    const next = this.shadowRoot.querySelector('.next');
+    const itemCount = this.shadowRoot.querySelector('.item-count');
+    const perPage = this.shadowRoot.querySelector('.per-page select');
+    const totalPages = this.shadowRoot.querySelector('.total-pages');
+
+    // Values
+    const currentPage = parseInt(this.getAttribute('data-page'));
+    const total = parseInt(this.getAttribute('data-total'));
+    const show = parseInt(this.getAttribute('data-show'));
+    const increment = parseInt(this.getAttribute('data-increment'));
+    const numberPages = Math.ceil(total / increment);
+
+    if (total > show) wrapper.classList.remove('d-none');
+
+    // Populate the select input with the number of pages
+    let strOptions = '';
+    for (let i = 1; i <= numberPages; i++) {
+      strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
+    }
+    select.innerHTML = strOptions;
+
+    totalPages.innerHTML = `of ${numberPages}`;
+
+    // Next button
+    if (currentPage == numberPages) next.setAttribute('disabled', 'disabled');
+    else next.removeAttribute('disabled');
+
+    if (currentPage == 1) prev.setAttribute('disabled', 'disabled');
+    else prev.removeAttribute('disabled');
+
+    // Update the item count text
+    const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;
+    const endPoint = currentPage == 1 ? show : currentPage * show;
+    itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;
+
+    const defaultValues = [15, 25, 40, 50];
+
+    // Update the per page options if needed
+    if (increment && perPage.value != increment && !defaultValues.includes(increment)) {
+      perPage.innerHTML = `<option value="${increment}">${increment}</option>
+      <option value="${increment * 2}">${increment * 2}</option>
+      <option value="${increment * 3}">${increment * 3}</option>
+      <option value="${increment * 4}">${increment * 4}</option>`;
+    }
+
+    perPage.value = increment;
+  }
+
+  static get observedAttributes(): any {
+    return ['data-total', 'data-increment', 'data-page', 'data-show'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    switch (attrName) {
+      case 'data-total': {
+        if (oldVal != newVal) {
+          //this.setAttribute('data-page', 1);
+          this.setup();
+        }
+        break;
+      }
+      case 'data-show': {
+        if (oldVal != newVal) {
+          //this.setAttribute('data-page', 1);
+          this.setup();
+          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+        }
+        break;
+      }
+      case 'data-increment': {
+        if (oldVal != newVal) {
+          this.setAttribute('data-show', newVal);
+          //this.setAttribute('data-page', 1);
+          this.setup();
+          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+        }
+        break;
+      }
+      case 'data-page': {
+        if (oldVal && oldVal != newVal) {
+          this.setup();
+
+          // Dispact the event for other components to use as triggers
+          this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
+        }
+        break;
+      }
+    }
+  }
+}
+
+export default iamPagination;

package/assets/ts/components/password/password.component.ts

@@ -1,118 +1,118 @@
-import { trackComponentRegistered } from '../_global';
-import hibpCheck from '../../vendor/hibp.js';
-
-trackComponentRegistered('iam-password');
-
-class iamPassword extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-
-    const loadCSS = `@import "${assetLocation}/css/components/password.component.css";`;
-
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-      <style>
-      ${loadCSS}
-      </style>
-      <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-      <div class="wrapper">
-        <slot></slot>
-        <button type="button" class="suffix fa-solid fa-eye-slash" data-alt-class="suffix fa-solid fa-eye" aria-hidden="true"><span class="visually-hidden">Show password</span></button>
-      </div>
-      <span class="pwd-checker"></span>
-    `;
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-
-  
-    const input = this.querySelector('input');
-
-    const buttonEle = this.shadowRoot.querySelector('button')
-    const pwdChecker = this.shadowRoot?.querySelector('.pwd-checker')
-
-    // Switch icon and input type
-    buttonEle.addEventListener('click', (event) => {
-      const currentType = input.type;
-
-      const newType = currentType === 'password' ? 'text' : 'password';
-      const isPasswordType = currentType === 'password';
-
-      input.setAttribute('type', newType);
-      input.setAttribute('data-password-type', isPasswordType);
-
-      if (buttonEle.hasAttribute('data-alt-class')) {
-        const newClass = buttonEle.getAttribute('data-alt-class');
-        buttonEle.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
-        buttonEle.setAttribute('class', newClass);
-      }
-    });
-
-
-    
-    input.addEventListener('input', (event) => {
-    
-
-      const password = input.value;
-      const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
-
-      let strength = 1;
-      const strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
-      let extraMsg = '';
-
-      //has number
-      if (password.match(/(?=.*[0-9])/)) strength += 1;
-      // has special character
-      if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/)) strength += 1;
-      // has lowercase alpha
-      if (password.match(/(?=.*[a-z])/)) strength += 1;
-      // has uppercase alpha
-      if (password.match(/(?=.*[A-Z])/)) strength += 1;
-
-      if (password.length < minChars) {
-        strength = 1;
-        extraMsg = `(must be at least ${minChars} characters.)`;
-      }
-
-      // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
-
-      if (strength >= 3) {
-        hibpCheck(password, input);
-
-        input.addEventListener('hibpCheck', function (event) {
-          checkhibpCheck(event, input);
-        });
-
-        function checkhibpCheck(event, input): void {
-          console.log(event.detail);
-          if (event.detail) {
-            // found
-            strength = 3;
-            extraMsg = `(this password is very common)`;
-            
-            pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
-          } 
-
-          input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
-        } 
-      }
-      
-      if (strength <= 3) pwdChecker.classList.add('invalid-feedback');
-      else pwdChecker.classList.remove('invalid-feedback');
-
-      pwdChecker.setAttribute('data-strength', strength);
-      pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
-      
-    });
-    
-  }
-}
-
-export default iamPassword;
+import { trackComponentRegistered } from '../_global';
+import hibpCheck from '../../vendor/hibp.js';
+
+trackComponentRegistered('iam-password');
+
+class iamPassword extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/password.component.css";`;
+
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <style>
+      ${loadCSS}
+      </style>
+      <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+      <div class="wrapper">
+        <slot></slot>
+        <button type="button" class="suffix fa-solid fa-eye-slash" data-alt-class="suffix fa-solid fa-eye" aria-hidden="true"><span class="visually-hidden">Show password</span></button>
+      </div>
+      <span class="pwd-checker"></span>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+  
+    const input = this.querySelector('input');
+
+    const buttonEle = this.shadowRoot.querySelector('button')
+    const pwdChecker = this.shadowRoot?.querySelector('.pwd-checker')
+
+    // Switch icon and input type
+    buttonEle.addEventListener('click', (event) => {
+      const currentType = input.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      input.setAttribute('type', newType);
+      input.setAttribute('data-password-type', isPasswordType);
+
+      if (buttonEle.hasAttribute('data-alt-class')) {
+        const newClass = buttonEle.getAttribute('data-alt-class');
+        buttonEle.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    });
+
+
+    
+    input.addEventListener('input', (event) => {
+    
+
+      const password = input.value;
+      const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
+
+      let strength = 1;
+      const strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+      let extraMsg = '';
+
+      //has number
+      if (password.match(/(?=.*[0-9])/)) strength += 1;
+      // has special character
+      if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/)) strength += 1;
+      // has lowercase alpha
+      if (password.match(/(?=.*[a-z])/)) strength += 1;
+      // has uppercase alpha
+      if (password.match(/(?=.*[A-Z])/)) strength += 1;
+
+      if (password.length < minChars) {
+        strength = 1;
+        extraMsg = `(must be at least ${minChars} characters.)`;
+      }
+
+      // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
+
+      if (strength >= 3) {
+        hibpCheck(password, input);
+
+        input.addEventListener('hibpCheck', function (event) {
+          checkhibpCheck(event, input);
+        });
+
+        function checkhibpCheck(event, input): void {
+          console.log(event.detail);
+          if (event.detail) {
+            // found
+            strength = 3;
+            extraMsg = `(this password is very common)`;
+            
+            pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+          } 
+
+          input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
+        } 
+      }
+      
+      if (strength <= 3) pwdChecker.classList.add('invalid-feedback');
+      else pwdChecker.classList.remove('invalid-feedback');
+
+      pwdChecker.setAttribute('data-strength', strength);
+      pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+      
+    });
+    
+  }
+}
+
+export default iamPassword;