@hitsoft/e-donusum 1.0.8 → 1.0.10

package/_metronic/kt/components/_PasswordMeterComponent.ts

@@ -0,0 +1,273 @@
+/* eslint-disable array-callback-return */
+/* 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), .svg-icon:not(.d-none)'
+      )
+
+      const hiddenIcon = this.visibilityElement.querySelector('i.d-none, .svg-icon.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}

package/_metronic/kt/components/_ScrollComponent.ts

@@ -0,0 +1,312 @@
+import {
+  DataUtil,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getAttributeValueByBreakpoint,
+  getViewPort,
+  isVisibleElement,
+  throttle,
+  getCSS,
+  ElementStyleUtil,
+} from '../_utils/index'
+import {CookieComponent} from './_CookieComponent'
+
+export interface ScrollOptions {
+  saveState?: boolean
+}
+
+const defaultScrollOptions: ScrollOptions = {
+  saveState: true,
+}
+
+class ScrollComponent {
+  element: HTMLElement
+  options: ScrollOptions
+  id: string
+
+  constructor(_element: HTMLElement, options: ScrollOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultScrollOptions, options)
+    this.id = this.element.getAttribute('id') || ''
+    this.update()
+    // this.element.setAttribute('data-kt-scrolltop', 'true')
+    DataUtil.set(this.element, 'scroll', this)
+  }
+
+  private getOption = (name: string) => {
+    if (this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+      const attr = this.element.getAttribute('data-kt-scroll-' + name) || ''
+      let value: string | JSON | boolean = getAttributeValueByBreakpoint(attr)
+      if (value !== null && String(value) === 'true') {
+        value = true
+      } else if (value !== null && String(value) === 'false') {
+        value = false
+      }
+
+      return value
+    } else {
+      const optionName = stringSnakeToCamel(name)
+      const option = getObjectPropertyValueByKey(this.options, optionName)
+      if (option) {
+        return getAttributeValueByBreakpoint(option)
+      } else {
+        return null
+      }
+    }
+  }
+
+  private getHeightType = () => {
+    if (this.getOption('height')) {
+      return 'height'
+    }
+    if (this.getOption('min-height')) {
+      return 'min-height'
+    }
+    if (this.getOption('max-height')) {
+      return 'max-height'
+    }
+  }
+
+  private getAutoHeight = () => {
+    let height: number | string = getViewPort().height
+    const dependencies = this.getOption('dependencies')
+    const wrappers = this.getOption('wrappers')
+    const offset = this.getOption('offset')
+
+    // Height dependencies
+    if (dependencies !== null) {
+      const elements = document.querySelectorAll(dependencies as string)
+      if (elements && elements.length > 0) {
+        for (let i = 0, len = elements.length; i < len; i++) {
+          const element = elements[i] as HTMLElement
+          if (isVisibleElement(element) === false) {
+            continue
+          }
+
+          height = height - parseInt(getCSS(element, 'height'))
+          height = height - parseInt(getCSS(element, 'margin-top'))
+          height = height - parseInt(getCSS(element, 'margin-bottom'))
+
+          const borderTop = getCSS(element, 'border-top')
+          if (borderTop) {
+            height = height - parseInt(borderTop)
+          }
+
+          const borderBottom = getCSS(element, 'border-bottom')
+          if (borderBottom) {
+            height = height - parseInt(borderBottom)
+          }
+        }
+      }
+    }
+
+    // Wrappers
+    if (wrappers !== null) {
+      var elements = document.querySelectorAll(wrappers as string)
+      if (elements && elements.length > 0) {
+        for (let i = 0, len = elements.length; i < len; i++) {
+          const element = elements[i] as HTMLElement
+
+          if (!isVisibleElement(element)) {
+            continue
+          }
+
+          height = height - parseInt(getCSS(element, 'margin-top'))
+          height = height - parseInt(getCSS(element, 'margin-bottom'))
+          height = height - parseInt(getCSS(element, 'padding-top'))
+          height = height - parseInt(getCSS(element, 'padding-bottom'))
+
+          const borderTop = getCSS(element, 'border-top')
+          if (borderTop) {
+            height = height - parseInt(borderTop)
+          }
+
+          const borderBottom = getCSS(element, 'border-bottom')
+          if (borderBottom) {
+            height = height - parseInt(borderBottom)
+          }
+        }
+      }
+    }
+
+    // Custom offset
+    if (offset !== null) {
+      height = height - parseInt(offset as string)
+    }
+
+    height = height - parseInt(getCSS(this.element, 'margin-top'))
+    height = height - parseInt(getCSS(this.element, 'margin-bottom'))
+
+    const borderTop = getCSS(this.element, 'border-top')
+    if (borderTop) {
+      height = height - parseInt(borderTop)
+    }
+
+    const borderBottom = getCSS(this.element, 'border-bottom')
+    if (borderBottom) {
+      height = height - parseInt(borderBottom)
+    }
+
+    height = String(height) + 'px'
+
+    return height
+  }
+
+  private setupHeight = () => {
+    let height = this.getHeight()
+    let heightType = this.getHeightType() as string
+
+    // Set height
+    if (height !== null && height.length > 0) {
+      ElementStyleUtil.set(this.element, heightType, height)
+    } else {
+      ElementStyleUtil.set(this.element, heightType, '')
+    }
+  }
+
+  private setupState = () => {
+    if (this.getOption('save-state') === true && this.id) {
+      const cookie = CookieComponent.get(this.id + 'st')
+      if (cookie) {
+        var pos = parseInt(cookie)
+
+        if (pos > 0) {
+          this.element.scrollTop = pos
+        }
+      }
+    }
+  }
+
+  private setupScrollHandler = () => {
+    if (this.getOption('save-state') === true && this.id) {
+      this.element.addEventListener('scroll', this.scrollHandler)
+    } else {
+      this.element.removeEventListener('scroll', this.scrollHandler)
+    }
+  }
+
+  private scrollHandler = () => {
+    const cookieId = this.id + 'st'
+    CookieComponent.set(cookieId, this.element.scrollTop, {})
+  }
+
+  private destroyScrollHandler = () => {
+    this.element.removeEventListener('scroll', this.scrollHandler)
+  }
+
+  private resetHeight = () => {
+    const heghtType = this.getHeightType()
+    if (heghtType) {
+      ElementStyleUtil.set(this.element, heghtType, '')
+    }
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public update = () => {
+    // Activate/deactivate
+    if (
+      this.getOption('activate') === true ||
+      !this.element.hasAttribute('data-kt-scroll-activate')
+    ) {
+      this.setupHeight()
+      this.setupScrollHandler()
+      this.setupState()
+    } else {
+      this.resetHeight()
+      this.destroyScrollHandler()
+    }
+  }
+
+  public getHeight = () => {
+    const heightType = this.getHeightType()
+    const height = this.getOption(heightType || '')
+    if (height instanceof Function) {
+      return height.call(height)
+    } else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
+      return this.getAutoHeight()
+    } else {
+      return height
+    }
+  }
+
+  public getElement = () => {
+    return this.element
+  }
+
+  // Static methods
+  public static hasInstace(element: HTMLElement) {
+    return DataUtil.has(element, 'scroll')
+  }
+
+  public static getInstance(element: HTMLElement): ScrollComponent | undefined {
+    if (element !== null && ScrollComponent.hasInstace(element)) {
+      const data = DataUtil.get(element, 'scroll')
+      if (data) {
+        return data as ScrollComponent
+      }
+    }
+  }
+
+  // Create Instances
+  public static createInstances(selector: string) {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((element: Element) => {
+      const item = element as HTMLElement
+      let scroll = ScrollComponent.getInstance(item)
+      if (!scroll) {
+        scroll = new ScrollComponent(item, defaultScrollOptions)
+      }
+    })
+  }
+
+  public static destroyAll(attr: string = '[data-kt-scroll="true"]') {}
+
+  public static bootstrap(attr: string = '[data-kt-scroll="true"]') {
+    ScrollComponent.createInstances(attr)
+    ScrollComponent.resize()
+  }
+
+  public static createInstance = (
+    element: HTMLElement,
+    options: ScrollOptions = defaultScrollOptions
+  ): ScrollComponent | undefined => {
+    let scroll = ScrollComponent.getInstance(element)
+    if (!scroll) {
+      scroll = new ScrollComponent(element, options)
+    }
+    return scroll
+  }
+
+  public static reinitialization(attr: string = '[data-kt-scroll="true"]') {
+    ScrollComponent.createInstances(attr)
+  }
+
+  public static updateAll() {
+    const elements = document.body.querySelectorAll('[data-kt-scroll="true"]')
+    elements.forEach((element: Element) => {
+      const instance = ScrollComponent.getInstance(element as HTMLElement)
+      if (instance) {
+        instance.update()
+      }
+    })
+  }
+
+  public static resize() {
+    // Window Resize Handling
+    window.addEventListener('resize', function () {
+      let timer
+      throttle(
+        timer,
+        () => {
+          // Locate and update Drawer instances on window resize
+          ScrollComponent.updateAll()
+        },
+        200
+      )
+    })
+  }
+}
+
+export {ScrollComponent, defaultScrollOptions}