@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/ts/components/_PasswordMeterComponent.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultPasswordMeterQueires = exports.defaultPasswordMeterOptions = exports.PasswordMeterComponent = void 0;
 /* eslint-disable no-useless-escape */
-var index_1 = require("../_utils/index");
-var defaultPasswordMeterOptions = {
+import { DataUtil } from '../_utils/index';
+const defaultPasswordMeterOptions = {
     minLength: 8,
     checkUppercase: true,
     checkLowercase: true,
@@ -11,25 +8,23 @@ var defaultPasswordMeterOptions = {
     checkChar: true,
     scoreHighlightClass: 'active',
 };
-exports.defaultPasswordMeterOptions = defaultPasswordMeterOptions;
-var defaultPasswordMeterQueires = {
+const defaultPasswordMeterQueires = {
     componentName: 'password-meter',
     instanseQuery: '[data-kt-password-meter]',
     inputQuery: 'input[type]',
     visibilityQuery: '[data-kt-password-meter-control="visibility"]',
     highlightQuery: '[data-kt-password-meter-control="highlight"]',
 };
-exports.defaultPasswordMeterQueires = defaultPasswordMeterQueires;
-var PasswordMeterComponent = /** @class */ (function () {
-    function PasswordMeterComponent(_element, _options, _queries) {
-        var _this = this;
-        ///////////////////////
-        // ** Public API  ** //
-        ///////////////////////
-        this.reset = function () {
-            _this.score = 0;
-            _this.highlight();
-        };
+class PasswordMeterComponent {
+    element;
+    inputElement;
+    visibilityElement;
+    highlightElement;
+    options;
+    queries;
+    score;
+    checkSteps;
+    constructor(_element, _options, _queries) {
         this.element = _element;
         this.options = Object.assign(defaultPasswordMeterOptions, _options);
         this.queries = _queries;
@@ -41,64 +36,63 @@ var PasswordMeterComponent = /** @class */ (function () {
         this.highlightElement = this.element.querySelector(this.queries.highlightQuery);
         // Event Handlers
         this.handlers();
-        index_1.DataUtil.set(this.element, this.queries.componentName, this);
+        DataUtil.set(this.element, this.queries.componentName, this);
     }
-    PasswordMeterComponent.prototype.handlers = function () {
-        var _this = this;
+    handlers() {
         if (this.inputElement) {
-            this.inputElement.addEventListener('input', function () {
-                _this.check();
+            this.inputElement.addEventListener('input', () => {
+                this.check();
             });
         }
         if (this.visibilityElement) {
-            this.visibilityElement.addEventListener('click', function () {
-                _this.visitbility();
+            this.visibilityElement.addEventListener('click', () => {
+                this.visitbility();
             });
         }
-    };
-    PasswordMeterComponent.prototype.visitbility = function () {
+    }
+    visitbility() {
         if (this.visibilityElement && this.inputElement) {
-            var visibleIcon = this.visibilityElement.querySelector('i:not(.d-none), .:not(.d-none)');
-            var hiddenIcon = this.visibilityElement.querySelector('i.d-none, ..d-none');
-            var typeAttr = this.inputElement.getAttribute('type') || '';
+            const visibleIcon = this.visibilityElement.querySelector('i:not(.d-none), .:not(.d-none)');
+            const hiddenIcon = this.visibilityElement.querySelector('i.d-none, ..d-none');
+            const typeAttr = this.inputElement.getAttribute('type') || '';
             if (typeAttr === 'password') {
                 this.inputElement.setAttribute('type', 'text');
             }
             else {
                 this.inputElement.setAttribute('type', 'password');
             }
-            visibleIcon === null || visibleIcon === void 0 ? void 0 : visibleIcon.classList.add('d-none');
-            hiddenIcon === null || hiddenIcon === void 0 ? void 0 : hiddenIcon.classList.remove('d-none');
+            visibleIcon?.classList.add('d-none');
+            hiddenIcon?.classList.remove('d-none');
             this.inputElement.focus();
         }
-    };
-    PasswordMeterComponent.prototype.checkScore = function () {
+    }
+    checkScore() {
         return 0;
-    };
-    PasswordMeterComponent.prototype.checkLength = function () {
+    }
+    checkLength() {
         if (this.inputElement) {
             return this.inputElement.value.length >= this.options.minLength; // 20 score
         }
         return false;
-    };
-    PasswordMeterComponent.prototype.checkLowerCase = function () {
-        var val = this.inputElement ? this.inputElement.value : '';
+    }
+    checkLowerCase() {
+        const val = this.inputElement ? this.inputElement.value : '';
         return /[a-z]/.test(val); // 20 score
-    };
-    PasswordMeterComponent.prototype.checkUppercase = function () {
-        var val = this.inputElement ? this.inputElement.value : '';
+    }
+    checkUppercase() {
+        const val = this.inputElement ? this.inputElement.value : '';
         return /[A-Z]/.test(val); // 20 score
-    };
-    PasswordMeterComponent.prototype.checkDigit = function () {
-        var val = this.inputElement ? this.inputElement.value : '';
+    }
+    checkDigit() {
+        const val = this.inputElement ? this.inputElement.value : '';
         return /[0-9]/.test(val); // 20 score
-    };
-    PasswordMeterComponent.prototype.checkChar = function () {
-        var val = this.inputElement ? this.inputElement.value : '';
+    }
+    checkChar() {
+        const val = this.inputElement ? this.inputElement.value : '';
         return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(val); // 20 score
-    };
-    PasswordMeterComponent.prototype.getCheckScore = function () {
-        var count = 1;
+    }
+    getCheckScore() {
+        let count = 1;
         if (this.options.checkUppercase) {
             count++;
         }
@@ -113,32 +107,38 @@ var PasswordMeterComponent = /** @class */ (function () {
         }
         this.checkSteps = count;
         return 100 / this.checkSteps;
-    };
-    PasswordMeterComponent.prototype.highlight = function () {
-        var _this = this;
-        var items = this.highlightElement
+    }
+    highlight() {
+        const items = this.highlightElement
             ? [].slice.call(this.highlightElement.querySelectorAll('div'))
             : [];
-        var total = items.length;
-        var index = 0;
-        var checkScore = this.getCheckScore();
-        var score = this.getScore();
-        items.map(function (item) {
+        const total = items.length;
+        let index = 0;
+        const checkScore = this.getCheckScore();
+        const score = this.getScore();
+        items.map((item) => {
             index++;
-            if (checkScore * index * (_this.checkSteps / total) <= score) {
+            if (checkScore * index * (this.checkSteps / total) <= score) {
                 item.classList.add('active');
             }
             else {
                 item.classList.remove('active');
             }
         });
+    }
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    reset = () => {
+        this.score = 0;
+        this.highlight();
     };
-    PasswordMeterComponent.prototype.getScore = function () {
+    getScore() {
         return this.score;
-    };
-    PasswordMeterComponent.prototype.check = function () {
-        var score = 0;
-        var checkScore = this.getCheckScore();
+    }
+    check() {
+        let score = 0;
+        const checkScore = this.getCheckScore();
         if (this.checkLength()) {
             score = score + checkScore;
         }
@@ -156,51 +156,41 @@ var PasswordMeterComponent = /** @class */ (function () {
         }
         this.score = score;
         this.highlight();
-    };
+    }
     // Static methods
-    PasswordMeterComponent.getInstance = function (el, componentName) {
-        if (componentName === void 0) { componentName = defaultPasswordMeterQueires.componentName; }
-        var passwordMeter = index_1.DataUtil.get(el, componentName);
+    static getInstance = (el, componentName = defaultPasswordMeterQueires.componentName) => {
+        const passwordMeter = DataUtil.get(el, componentName);
         if (passwordMeter) {
             return passwordMeter;
         }
     };
-    PasswordMeterComponent.createInstances = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
-        if (options === void 0) { options = defaultPasswordMeterOptions; }
-        if (queries === void 0) { queries = defaultPasswordMeterQueires; }
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (el) {
-            var item = el;
-            var passwordMeter = PasswordMeterComponent.getInstance(item);
+    static createInstances = (selector = defaultPasswordMeterQueires.instanseQuery, options = defaultPasswordMeterOptions, queries = defaultPasswordMeterQueires) => {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((el) => {
+            const item = el;
+            let passwordMeter = PasswordMeterComponent.getInstance(item);
             if (!passwordMeter) {
                 passwordMeter = new PasswordMeterComponent(item, options, queries);
             }
         });
     };
-    PasswordMeterComponent.createInsance = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
-        if (options === void 0) { options = defaultPasswordMeterOptions; }
-        if (queries === void 0) { queries = defaultPasswordMeterQueires; }
-        var element = document.body.querySelector(selector);
+    static createInsance = (selector = defaultPasswordMeterQueires.instanseQuery, options = defaultPasswordMeterOptions, queries = defaultPasswordMeterQueires) => {
+        const element = document.body.querySelector(selector);
         if (!element) {
             return;
         }
-        var item = element;
-        var passwordMeter = PasswordMeterComponent.getInstance(item);
+        const item = element;
+        let passwordMeter = PasswordMeterComponent.getInstance(item);
         if (!passwordMeter) {
             passwordMeter = new PasswordMeterComponent(item, options, queries);
         }
         return passwordMeter;
     };
-    PasswordMeterComponent.bootstrap = function (selector) {
-        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+    static bootstrap = (selector = defaultPasswordMeterQueires.instanseQuery) => {
         PasswordMeterComponent.createInstances(selector);
     };
-    PasswordMeterComponent.reinitialization = function (selector) {
-        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+    static reinitialization = (selector = defaultPasswordMeterQueires.instanseQuery) => {
         PasswordMeterComponent.createInstances(selector);
     };
-    return PasswordMeterComponent;
-}());
-exports.PasswordMeterComponent = PasswordMeterComponent;
+}
+export { PasswordMeterComponent, defaultPasswordMeterOptions, defaultPasswordMeterQueires };

package/dist/assets/ts/components/_PasswordMeterComponent.ts

@@ -0,0 +1,271 @@
+ 
+/* eslint-disable no-useless-escape */
+import {DataUtil} from '../_utils/index'
+
+export interface IPasswordMeterOptions {
+  minLength: number
+  checkUppercase: boolean
+  checkLowercase: boolean
+  checkDigit: boolean
+  checkChar: boolean
+  scoreHighlightClass: string
+}
+
+export interface IPasswordMeterQueries {
+  componentName: string
+  instanseQuery: string
+  inputQuery: string
+  visibilityQuery: string
+  highlightQuery: string
+}
+
+const defaultPasswordMeterOptions = {
+  minLength: 8,
+  checkUppercase: true,
+  checkLowercase: true,
+  checkDigit: true,
+  checkChar: true,
+  scoreHighlightClass: 'active',
+}
+
+const defaultPasswordMeterQueires: IPasswordMeterQueries = {
+  componentName: 'password-meter',
+  instanseQuery: '[data-kt-password-meter]',
+  inputQuery: 'input[type]',
+  visibilityQuery: '[data-kt-password-meter-control="visibility"]',
+  highlightQuery: '[data-kt-password-meter-control="highlight"]',
+}
+
+class PasswordMeterComponent {
+  element: HTMLElement
+  inputElement: HTMLInputElement | null
+  visibilityElement: HTMLElement | null
+  highlightElement: HTMLElement | null
+  options: IPasswordMeterOptions
+  queries: IPasswordMeterQueries
+  score: number
+  checkSteps: number
+
+  constructor(
+    _element: HTMLElement,
+    _options: IPasswordMeterOptions,
+    _queries: IPasswordMeterQueries
+  ) {
+    this.element = _element
+    this.options = Object.assign(defaultPasswordMeterOptions, _options)
+    this.queries = _queries
+    this.score = 0
+    this.checkSteps = 5
+
+    // Elements
+    this.inputElement = this.element.querySelector(this.queries.inputQuery)
+    this.visibilityElement = this.element.querySelector(this.queries.visibilityQuery)
+    this.highlightElement = this.element.querySelector(this.queries.highlightQuery)
+
+    // Event Handlers
+    this.handlers()
+
+    DataUtil.set(this.element, this.queries.componentName, this)
+  }
+
+  private handlers(): void {
+    if (this.inputElement) {
+      this.inputElement.addEventListener('input', () => {
+        this.check()
+      })
+    }
+
+    if (this.visibilityElement) {
+      this.visibilityElement.addEventListener('click', () => {
+        this.visitbility()
+      })
+    }
+  }
+
+  private visitbility() {
+    if (this.visibilityElement && this.inputElement) {
+      const visibleIcon = this.visibilityElement.querySelector('i:not(.d-none), .:not(.d-none)')
+
+      const hiddenIcon = this.visibilityElement.querySelector('i.d-none, ..d-none')
+
+      const typeAttr = this.inputElement.getAttribute('type') || ''
+
+      if (typeAttr === 'password') {
+        this.inputElement.setAttribute('type', 'text')
+      } else {
+        this.inputElement.setAttribute('type', 'password')
+      }
+
+      visibleIcon?.classList.add('d-none')
+      hiddenIcon?.classList.remove('d-none')
+
+      this.inputElement.focus()
+    }
+  }
+
+  private checkScore(): number {
+    return 0
+  }
+
+  private checkLength(): boolean {
+    if (this.inputElement) {
+      return this.inputElement.value.length >= this.options.minLength // 20 score
+    }
+
+    return false
+  }
+
+  private checkLowerCase(): boolean {
+    const val = this.inputElement ? this.inputElement.value : ''
+    return /[a-z]/.test(val) // 20 score
+  }
+
+  private checkUppercase(): boolean {
+    const val = this.inputElement ? this.inputElement.value : ''
+    return /[A-Z]/.test(val) // 20 score
+  }
+
+  private checkDigit(): boolean {
+    const val = this.inputElement ? this.inputElement.value : ''
+    return /[0-9]/.test(val) // 20 score
+  }
+
+  private checkChar(): boolean {
+    const val = this.inputElement ? this.inputElement.value : ''
+    return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(val) // 20 score
+  }
+
+  private getCheckScore(): number {
+    let count = 1
+    if (this.options.checkUppercase) {
+      count++
+    }
+
+    if (this.options.checkLowercase) {
+      count++
+    }
+
+    if (this.options.checkDigit) {
+      count++
+    }
+
+    if (this.options.checkChar) {
+      count++
+    }
+
+    this.checkSteps = count
+    return 100 / this.checkSteps
+  }
+
+  private highlight() {
+    const items = this.highlightElement
+      ? [].slice.call(this.highlightElement.querySelectorAll('div'))
+      : []
+    const total = items.length
+    let index = 0
+    const checkScore = this.getCheckScore()
+    const score = this.getScore()
+
+    items.map((item: HTMLElement) => {
+      index++
+      if (checkScore * index * (this.checkSteps / total) <= score) {
+        item.classList.add('active')
+      } else {
+        item.classList.remove('active')
+      }
+    })
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public reset = () => {
+    this.score = 0
+    this.highlight()
+  }
+
+  public getScore() {
+    return this.score
+  }
+
+  public check() {
+    let score = 0
+    const checkScore = this.getCheckScore()
+    if (this.checkLength()) {
+      score = score + checkScore
+    }
+
+    if (this.options.checkUppercase && this.checkLowerCase()) {
+      score = score + checkScore
+    }
+
+    if (this.options.checkLowercase && this.checkUppercase()) {
+      score = score + checkScore
+    }
+
+    if (this.options.checkDigit && this.checkDigit()) {
+      score = score + checkScore
+    }
+
+    if (this.options.checkChar && this.checkChar()) {
+      score = score + checkScore
+    }
+
+    this.score = score
+    this.highlight()
+  }
+
+  // Static methods
+  public static getInstance = (
+    el: HTMLElement,
+    componentName: string = defaultPasswordMeterQueires.componentName
+  ): PasswordMeterComponent | undefined => {
+    const passwordMeter = DataUtil.get(el, componentName)
+    if (passwordMeter) {
+      return passwordMeter as PasswordMeterComponent
+    }
+  }
+
+  public static createInstances = (
+    selector: string = defaultPasswordMeterQueires.instanseQuery,
+    options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+    queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+  ) => {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((el) => {
+      const item = el as HTMLElement
+      let passwordMeter = PasswordMeterComponent.getInstance(item)
+      if (!passwordMeter) {
+        passwordMeter = new PasswordMeterComponent(item, options, queries)
+      }
+    })
+  }
+
+  public static createInsance = (
+    selector: string = defaultPasswordMeterQueires.instanseQuery,
+    options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+    queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+  ): PasswordMeterComponent | undefined => {
+    const element = document.body.querySelector(selector)
+    if (!element) {
+      return
+    }
+    const item = element as HTMLElement
+    let passwordMeter = PasswordMeterComponent.getInstance(item)
+    if (!passwordMeter) {
+      passwordMeter = new PasswordMeterComponent(item, options, queries)
+    }
+    return passwordMeter
+  }
+
+  public static bootstrap = (selector: string = defaultPasswordMeterQueires.instanseQuery) => {
+    PasswordMeterComponent.createInstances(selector)
+  }
+
+  public static reinitialization = (
+    selector: string = defaultPasswordMeterQueires.instanseQuery
+  ) => {
+    PasswordMeterComponent.createInstances(selector)
+  }
+}
+export {PasswordMeterComponent, defaultPasswordMeterOptions, defaultPasswordMeterQueires}