@iamproperty/components 7.5.1--beta6 → 7.5.1--beta7

package/assets/js/modules/form.js

@@ -1,125 +0,0 @@
-// Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
-// The link between the two will prevent the max input field form setting a lower value than the min and vice versa
-function inputRange(inputWrapper) {
-    inputWrapper.addEventListener('change', function () {
-        const min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
-        const max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
-        // Set attributes for input fields
-        Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input) => {
-            input.setAttribute('max', max);
-        });
-        Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input) => {
-            input.setAttribute('min', min);
-        });
-        // Hide select options if they are higher or lower than the min and max values
-        Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option) => {
-            if (parseInt(option.getAttribute('value')) > max)
-                option.classList.add('d-none');
-            else
-                option.classList.remove('d-none');
-        });
-        Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option) => {
-            if (parseInt(option.getAttribute('value')) < min)
-                option.classList.add('d-none');
-            else
-                option.classList.remove('d-none');
-        });
-    }, false);
-}
-function inputRedirect(inputWrapper) {
-    inputWrapper.addEventListener('change', function () {
-        if (inputWrapper.matches('[data-value-if]')) {
-            const url = inputWrapper.getAttribute('data-redirect');
-            const desiredValue = inputWrapper.getAttribute('data-value-if');
-            if (inputWrapper.value == desiredValue)
-                document.location.href = url;
-        }
-        else {
-            if (typeof inputWrapper.value != 'undefined')
-                document.location.href = inputWrapper.value;
-        }
-    }, false);
-}
-//
-function multipleFileUploads(wrapper) {
-    const fileTenplate = wrapper.querySelector('.row');
-    const clone = fileTenplate.cloneNode(true);
-    const addButton = wrapper.querySelector('[data-add]');
-    wrapper.addEventListener('click', function (e) {
-        for (let target = e.target; target && target != this; target = target.parentNode) {
-            if (target.matches('[data-add]')) {
-                // Add a new row upload file input fields
-                const tempClone = clone.cloneNode(true);
-                wrapper.insertBefore(tempClone, target);
-                if (addButton.matches('[data-maxfiles]') &&
-                    Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles)
-                    addButton.setAttribute('disabled', 'disabled');
-                break;
-            }
-            if (target.matches('[data-delete]')) {
-                // Delete the current row
-                const row = target.closest('.row');
-                row.remove();
-                if (addButton.matches('[data-maxfiles]') &&
-                    Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles)
-                    addButton.removeAttribute('disabled');
-                break;
-            }
-        }
-    }, false);
-}
-// Acts as an overall initialise function to trigger other functions.
-function form(formElement) {
-    // Check for input range groups
-    Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement) => {
-        inputRange(arrayElement);
-    });
-    Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement) => {
-        inputRedirect(arrayElement);
-    });
-    Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement) => {
-        multipleFileUploads(arrayElement);
-    });
-    // Check the file size of a file when uploaded in case it exceeds the max file size set
-    formElement.addEventListener('change', function (e) {
-        for (let target = e.target; target && target != this; target = target.parentNode) {
-            if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
-                const maxAllowedSize = target.dataset.filesize;
-                if (target.files[0].size > maxAllowedSize) {
-                    target.value = '';
-                    alert('File too large');
-                }
-                break;
-            }
-        }
-    }, false);
-    // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
-    formElement.addEventListener('change', function () {
-        // Remove disabled attribute when a pre-selected input field equals a certain value
-        Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement) => {
-            const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-            const selector = arrayElement.dataset.activeif;
-            const value = arrayElement.dataset.equals;
-            const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-            if (testElement.value == value) {
-                arrayElement.removeAttribute('disabled');
-            }
-            else {
-                arrayElement.setAttribute('disabled', 'disabled');
-                arrayElement.value = '';
-            }
-        });
-        // Show this input wrapper when a pre-selected input field equals a certain value
-        Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement) => {
-            const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-            const selector = arrayElement.dataset.activeif;
-            const value = arrayElement.dataset.equals;
-            const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-            if (testElement.value == value)
-                arrayElement.classList.remove('d-none');
-            else
-                arrayElement.classList.add('d-none');
-        });
-    }, false);
-}
-export default form;

package/assets/js/modules/inputs.js

@@ -1,151 +0,0 @@
-import hibpCheck from '../vendor/hibp.js';
-const extendInputs = (body) => {
-    function loadInput() {
-        // Date restrictions
-        if (document.querySelector('input[type="date"]')) {
-            const today = new Date();
-            function formatDate(date) {
-                const year = date.getFullYear();
-                const month = String(date.getMonth() + 1).padStart(2, '0');
-                const day = String(date.getDate()).padStart(2, '0');
-                return `${year}-${month}-${day}`;
-            }
-            Array.from(document.querySelectorAll('input[type="date"]')).forEach((input) => {
-                const startDate = today;
-                if (input.hasAttribute('data-start')) {
-                    startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
-                    input.setAttribute('min', formatDate(startDate));
-                }
-                if (input.hasAttribute('data-period')) {
-                    const timePeriod = parseInt(input.getAttribute('data-period'));
-                    const endDate = new Date();
-                    endDate.setDate(startDate.getDate() + timePeriod);
-                    input.setAttribute('max', formatDate(endDate));
-                }
-                if (input.hasAttribute('data-allowed-days')) {
-                    const allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
-                    input.addEventListener('input', function () {
-                        const day = new Date(this.value).getUTCDay();
-                        if (allowedDays.includes(day))
-                            input.setCustomValidity('');
-                        else
-                            input.setCustomValidity('That day of the week is not allowed');
-                    });
-                }
-            });
-        }
-    }
-    if (document.readyState === 'complete') {
-        loadInput();
-    }
-    document.onreadystatechange = () => {
-        if (document.readyState === 'complete') {
-            loadInput();
-        }
-    };
-    body.addEventListener('input', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')) {
-            const input = event.target.closest('input,textarea,select');
-            // Output the color hex
-            if (input.hasAttribute('type') && input.getAttribute('type') == 'color')
-                input.nextElementSibling.value = input.value;
-            if (input.hasAttribute('data-strength-checker'))
-                checkPWDStrength(input);
-        }
-    });
-    body.addEventListener('change', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('select')) {
-            const select = event.target.closest('select');
-            if (select.hasAttribute('data-change-type') && select.hasAttribute('data-input')) {
-                const input = document.getElementById(select.getAttribute('data-input'));
-                const newType = select.value;
-                changeType(input, newType);
-            }
-        }
-        if (event && event.target instanceof HTMLElement && event.target.closest('dialog [type="radio"]')) {
-            const dialog = event.target.closest('dialog');
-            Array.from(dialog.querySelectorAll('[type="radio"][autofocus]')).forEach((input) => {
-                input.removeAttribute('autofocus');
-            });
-            Array.from(dialog.querySelectorAll('[type="radio"]:checked')).forEach((input) => {
-                input.setAttribute('autofocus', true);
-            });
-        }
-    });
-    body.addEventListener('click', (event) => {
-        if (event &&
-            event.target instanceof HTMLElement &&
-            event.target.closest('[data-change-type][data-input]:not(select)')) {
-            const button = event.target.closest('[data-change-type]');
-            const input = document.getElementById(button.getAttribute('data-input'));
-            const newType = button.getAttribute('data-change-type');
-            button.setAttribute('data-change-type', input.getAttribute('type'));
-            changeType(input, newType);
-            if (button.hasAttribute('data-alt-class')) {
-                const newClass = button.getAttribute('data-alt-class');
-                button.setAttribute('data-alt-class', button.getAttribute('class'));
-                button.setAttribute('class', newClass);
-            }
-        }
-    });
-};
-export const changeType = (input, type) => {
-    if (input.hasAttribute('type') && input.getAttribute('type') == 'password')
-        input.setAttribute('data-password-type', true);
-    input.setAttribute('type', type);
-};
-export const checkPWDStrength = (input, check = 'no') => {
-    const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'));
-    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 && check == 'no') {
-        hibpCheck(password, input);
-        input.addEventListener('hibpCheck', function (event) {
-            checkhibpCheck(event, input);
-        });
-        function checkhibpCheck(event, input) {
-            if (event.detail) {
-                // found
-                checkPWDStrength(input, 'danger');
-            }
-            else {
-                // not found
-                checkPWDStrength(input, 'success');
-            }
-            input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
-        }
-    }
-    else if (strength >= 3 && check == 'danger') {
-        strength = 3;
-        extraMsg = `(this password is very common)`;
-    }
-    if (pwdChecker) {
-        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 extendInputs;

package/assets/js/modules/password-indicator.js

@@ -1,21 +0,0 @@
-export const changeType = function (element) {
-    var _a;
-    const buttonEle = element.querySelector('button');
-    const associatedInput = (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-    element.addEventListener('click', (event) => {
-        const currentType = associatedInput.type;
-        const newType = currentType === 'password' ? 'text' : 'password';
-        const isPasswordType = currentType === 'password';
-        associatedInput.setAttribute('type', newType);
-        associatedInput.setAttribute('data-password-type', isPasswordType);
-        if (element.hasAttribute('data-alt-class')) {
-            const newClass = element.getAttribute('data-alt-class');
-            element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
-            buttonEle.setAttribute('class', newClass);
-        }
-    });
-};
-const passwordIndicator = function (element) {
-    changeType(element);
-};
-export default passwordIndicator;

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

@@ -1,24 +0,0 @@
-import { trackComponentRegistered } from '../_global';
-import passwordIndicator from '../../modules/password-indicator';
-
-trackComponentRegistered('iam-password-indicator');
-
-class iamPasswordIndicator extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-     <slot></slot>
-    `;
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-  
-    passwordIndicator(this);
-  }
-}
-
-export default iamPasswordIndicator;

package/assets/ts/modules/form.ts

@@ -1,166 +0,0 @@
-// Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
-// The link between the two will prevent the max input field form setting a lower value than the min and vice versa
-function inputRange(inputWrapper): void {
-  inputWrapper.addEventListener(
-    'change',
-    function () {
-      const min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
-      const max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
-
-      // Set attributes for input fields
-      Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input) => {
-        input.setAttribute('max', max);
-      });
-
-      Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input) => {
-        input.setAttribute('min', min);
-      });
-
-      // Hide select options if they are higher or lower than the min and max values
-      Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option) => {
-        if (parseInt(option.getAttribute('value')) > max) option.classList.add('d-none');
-        else option.classList.remove('d-none');
-      });
-
-      Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option) => {
-        if (parseInt(option.getAttribute('value')) < min) option.classList.add('d-none');
-        else option.classList.remove('d-none');
-      });
-    },
-    false
-  );
-}
-
-function inputRedirect(inputWrapper): void {
-  inputWrapper.addEventListener(
-    'change',
-    function () {
-      if (inputWrapper.matches('[data-value-if]')) {
-        const url = inputWrapper.getAttribute('data-redirect');
-        const desiredValue = inputWrapper.getAttribute('data-value-if');
-
-        if (inputWrapper.value == desiredValue) document.location.href = url;
-      } else {
-        if (typeof inputWrapper.value != 'undefined') document.location.href = inputWrapper.value;
-      }
-    },
-    false
-  );
-}
-
-//
-function multipleFileUploads(wrapper): void {
-  const fileTenplate = wrapper.querySelector('.row');
-  const clone = fileTenplate.cloneNode(true);
-  const addButton = wrapper.querySelector('[data-add]');
-
-  wrapper.addEventListener(
-    'click',
-    function (e) {
-      for (let target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-add]')) {
-          // Add a new row upload file input fields
-
-          const tempClone = clone.cloneNode(true);
-          wrapper.insertBefore(tempClone, target);
-
-          if (
-            addButton.matches('[data-maxfiles]') &&
-            Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles
-          )
-            addButton.setAttribute('disabled', 'disabled');
-
-          break;
-        }
-        if (target.matches('[data-delete]')) {
-          // Delete the current row
-
-          const row = target.closest('.row');
-          row.remove();
-
-          if (
-            addButton.matches('[data-maxfiles]') &&
-            Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles
-          )
-            addButton.removeAttribute('disabled');
-
-          break;
-        }
-      }
-    },
-    false
-  );
-}
-
-// Acts as an overall initialise function to trigger other functions.
-function form(formElement): void {
-  // Check for input range groups
-  Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement) => {
-    inputRange(arrayElement);
-  });
-
-  Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement) => {
-    inputRedirect(arrayElement);
-  });
-
-  Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement) => {
-    multipleFileUploads(arrayElement);
-  });
-
-  // Check the file size of a file when uploaded in case it exceeds the max file size set
-  formElement.addEventListener(
-    'change',
-    function (e) {
-      for (let target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
-          const maxAllowedSize = target.dataset.filesize;
-          if (target.files[0].size > maxAllowedSize) {
-            target.value = '';
-            alert('File too large');
-          }
-          break;
-        }
-      }
-    },
-    false
-  );
-
-  // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
-  formElement.addEventListener(
-    'change',
-    function () {
-      // Remove disabled attribute when a pre-selected input field equals a certain value
-      Array.from(
-        formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')
-      ).forEach((arrayElement) => {
-        const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-        const selector = arrayElement.dataset.activeif;
-        const value = arrayElement.dataset.equals;
-        const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-
-        if (testElement.value == value) {
-          arrayElement.removeAttribute('disabled');
-        } else {
-          arrayElement.setAttribute('disabled', 'disabled');
-          arrayElement.value = '';
-        }
-      });
-
-      // Show this input wrapper when a pre-selected input field equals a certain value
-      Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach(
-        (arrayElement) => {
-          const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-          const selector = arrayElement.dataset.activeif;
-          const value = arrayElement.dataset.equals;
-          const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-
-          if (testElement.value == value) arrayElement.classList.remove('d-none');
-          else arrayElement.classList.add('d-none');
-        }
-      );
-    },
-    false
-  );
-}
-
-export default form;

package/assets/ts/modules/inputs.ts

@@ -1,181 +0,0 @@
-import hibpCheck from '../vendor/hibp.js';
-
-const extendInputs = (body): void => {
-  function loadInput(): void {
-
-
-    // Date restrictions
-    if (document.querySelector('input[type="date"]')) {
-      const today = new Date();
-
-      function formatDate(date): string {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
-      }
-
-      Array.from(document.querySelectorAll('input[type="date"]')).forEach((input) => {
-        const startDate = today;
-
-        if (input.hasAttribute('data-start')) {
-          startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
-          input.setAttribute('min', formatDate(startDate));
-        }
-
-        if (input.hasAttribute('data-period')) {
-          const timePeriod = parseInt(input.getAttribute('data-period'));
-
-          const endDate = new Date();
-          endDate.setDate(startDate.getDate() + timePeriod);
-
-          input.setAttribute('max', formatDate(endDate));
-        }
-
-        if (input.hasAttribute('data-allowed-days')) {
-          const allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
-
-          input.addEventListener('input', function () {
-            const day = new Date(this.value).getUTCDay();
-
-            if (allowedDays.includes(day)) input.setCustomValidity('');
-            else input.setCustomValidity('That day of the week is not allowed');
-          });
-        }
-      });
-    }
-  }
-
-  if (document.readyState === 'complete') {
-    loadInput();
-  }
-
-  document.onreadystatechange = (): void => {
-    if (document.readyState === 'complete') {
-      loadInput();
-    }
-  };
-
-  body.addEventListener('input', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')) {
-      const input = event.target.closest('input,textarea,select');
-
-      // Output the color hex
-      if (input.hasAttribute('type') && input.getAttribute('type') == 'color')
-        input.nextElementSibling.value = input.value;
-
-      if (input.hasAttribute('data-strength-checker')) checkPWDStrength(input);
-    }
-  });
-
-  body.addEventListener('change', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('select')) {
-      const select = event.target.closest('select');
-
-      if (select.hasAttribute('data-change-type') && select.hasAttribute('data-input')) {
-        const input = document.getElementById(select.getAttribute('data-input'));
-        const newType = select.value;
-        changeType(input, newType);
-      }
-    }
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('dialog [type="radio"]')) {
-      const dialog = event.target.closest('dialog');
-
-      Array.from(dialog.querySelectorAll('[type="radio"][autofocus]')).forEach((input) => {
-        input.removeAttribute('autofocus');
-      });
-
-      Array.from(dialog.querySelectorAll('[type="radio"]:checked')).forEach((input) => {
-        input.setAttribute('autofocus', true);
-      });
-    }
-  });
-
-  body.addEventListener('click', (event) => {
-    if (
-      event &&
-      event.target instanceof HTMLElement &&
-      event.target.closest('[data-change-type][data-input]:not(select)')
-    ) {
-      const button = event.target.closest('[data-change-type]');
-      const input = document.getElementById(button.getAttribute('data-input'));
-      const newType = button.getAttribute('data-change-type');
-      button.setAttribute('data-change-type', input.getAttribute('type'));
-
-      changeType(input, newType);
-
-      if (button.hasAttribute('data-alt-class')) {
-        const newClass = button.getAttribute('data-alt-class');
-        button.setAttribute('data-alt-class', button.getAttribute('class'));
-        button.setAttribute('class', newClass);
-      }
-    }
-  });
-};
-
-export const changeType = (input, type): void => {
-  if (input.hasAttribute('type') && input.getAttribute('type') == 'password')
-    input.setAttribute('data-password-type', true);
-
-  input.setAttribute('type', type);
-};
-
-export const checkPWDStrength = (input, check = 'no'): void => {
-  const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'));
-  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 && check == 'no') {
-    hibpCheck(password, input);
-
-    input.addEventListener('hibpCheck', function (event) {
-      checkhibpCheck(event, input);
-    });
-
-    function checkhibpCheck(event, input): void {
-      if (event.detail) {
-        // found
-        checkPWDStrength(input, 'danger');
-      } else {
-        // not found
-        checkPWDStrength(input, 'success');
-      }
-
-      input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
-    }
-  } else if (strength >= 3 && check == 'danger') {
-    strength = 3;
-    extraMsg = `(this password is very common)`;
-  }
-
-  if (pwdChecker) {
-    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 extendInputs;