@hitsoft/e-donusum 1.0.8 → 1.0.9

package/_metronic/kt/components/_CookieComponent.ts

@@ -0,0 +1,60 @@
+/* eslint-disable no-useless-escape */
+// DOCS: https://javascript.info/cookie
+export class CookieComponent {
+  /**
+   * Returns the cookie with the given name, or undefined if not found
+   *
+   * @param  {string} name - cookie name
+   * @returns string | null
+   */
+  public static get(name: string): string | undefined {
+    let matches = document.cookie.match(
+      new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
+    )
+    return matches ? decodeURIComponent(matches[1]) : undefined
+  }
+
+  /**
+   * Please note that a cookie value is encoded,
+   * so getCookie uses a built-in decodeURIComponent function to decode it.
+   *
+   * @param  {string} name - cookie name
+   * @param  {string | number | boolean} value - cookie value
+   * @param  {any} cookieOptions - cookie options
+   * @returns void
+   */
+  public static set(name: string, value: string | number | boolean, cookieOptions: any): void {
+    const options = {
+      path: '/',
+      // add other defaults here if necessary
+      ...cookieOptions,
+    }
+
+    if (options.expires instanceof Date) {
+      options.expires = options.expires.toUTCString()
+    }
+
+    let updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+
+    for (let optionKey in options) {
+      updatedCookie += '; ' + optionKey
+      let optionValue = options[optionKey]
+      if (optionValue !== true) {
+        updatedCookie += '=' + optionValue
+      }
+    }
+
+    document.cookie = updatedCookie
+  }
+
+  /**
+   * To delete a cookie, we can call it with a negative expiration date
+   *
+   * @param  {string} name
+   */
+  public static delete(name: string): void {
+    CookieComponent.set(name, '', {
+      'max-age': -1,
+    })
+  }
+}

package/_metronic/kt/components/_DrawerComponent.ts

@@ -0,0 +1,385 @@
+import {
+  EventHandlerUtil,
+  getUniqueIdWithPrefix,
+  getObjectPropertyValueByKey,
+  stringSnakeToCamel,
+  getAttributeValueByBreakpoint,
+  throttle,
+  getCSS,
+  DOMEventHandlerUtil,
+  ElementStyleUtil,
+} from '../_utils/index'
+
+export class DrawerStore {
+  static store: Map<string, DrawerComponent> = new Map()
+
+  public static set(instanceId: string, drawerComponentObj: DrawerComponent): void {
+    if (DrawerStore.has(instanceId)) {
+      return
+    }
+
+    DrawerStore.store.set(instanceId, drawerComponentObj)
+  }
+
+  public static get(instanceId: string): DrawerComponent | undefined {
+    if (!DrawerStore.has(instanceId)) {
+      return
+    }
+    return DrawerStore.store.get(instanceId)
+  }
+
+  public static remove(instanceId: string): void {
+    if (!DrawerStore.has(instanceId)) {
+      return
+    }
+
+    DrawerStore.store.delete(instanceId)
+  }
+
+  public static has(instanceId: string): boolean {
+    return DrawerStore.store.has(instanceId)
+  }
+
+  public static getAllInstances() {
+    return DrawerStore.store
+  }
+}
+
+export interface DrawerOptions {
+  overlay: boolean
+  baseClass: string
+  overlayClass: string
+  direction: string
+}
+
+const defaultDrawerOptions: DrawerOptions = {
+  overlay: true,
+  baseClass: 'drawer',
+  overlayClass: 'drawer-overlay',
+  direction: 'end',
+}
+
+class DrawerComponent {
+  element: HTMLElement
+  overlayElement: HTMLElement | null = null
+  toggleElement: HTMLElement | null = null
+  options: DrawerOptions
+  instanceUid: string
+  name: string = ''
+  shown: boolean = false
+  lastWidth: number = 0
+  closeElement: HTMLElement | null = null
+
+  constructor(_element: HTMLElement, options: DrawerOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultDrawerOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('drawer')
+    this.overlayElement = null
+    this.name = this.element.getAttribute('data-kt-drawer-name') || ''
+    this.shown = false
+    this.toggleElement = null
+    // Event Handlers
+    this._handlers()
+    // Update Instance
+    this._update()
+    // Bind Instance
+    DrawerStore.set(this.element.id, this)
+  }
+
+  private _handlers = () => {
+    const togglers = this._getOption('toggle') as string
+    const closers = this._getOption('close') as string
+
+    if (togglers !== null && togglers.length > 0) {
+      DOMEventHandlerUtil.on(document.body, togglers, 'click', (e: Event) => {
+        e.preventDefault()
+        this.toggleElement = document.getElementById(togglers)
+        this._toggle()
+      })
+    }
+
+    if (closers !== null && closers.length > 0) {
+      DOMEventHandlerUtil.on(document.body, closers, 'click', (e: Event) => {
+        e.preventDefault()
+        this.closeElement = document.getElementById(closers)
+
+        this._hide()
+      })
+    }
+  }
+
+  private _update = () => {
+    const width = String(this._getOption('width'))
+    const direction = String(this._getOption('direction'))
+
+    // Reset state
+    const hasBaseClass = this.element.classList.contains(`${this.options.baseClass}-on`)
+    const bodyCanvasAttr = String(document.body.getAttribute(`data-kt-drawer-${this.name}-`))
+
+    if (hasBaseClass === true && bodyCanvasAttr === 'on') {
+      this.shown = true
+    } else {
+      this.shown = false
+    }
+
+    // Activate/deactivate
+    if (this._getOption('activate') === true) {
+      this.element.classList.add(this.options.baseClass)
+      this.element.classList.add(`${this.options.baseClass}-${direction}`)
+      ElementStyleUtil.set(this.element, 'width', width, true)
+
+      this.lastWidth = parseInt(width)
+    } else {
+      ElementStyleUtil.set(this.element, 'width', '')
+      this.element.classList.remove(this.options.baseClass)
+      this.element.classList.remove(`${this.options.baseClass}-${direction}`)
+      this._hide()
+    }
+  }
+
+  private _getOption = (name: string) => {
+    const attr = this.element.getAttribute(`data-kt-drawer-${name}`)
+    if (attr) {
+      let value = getAttributeValueByBreakpoint(attr)
+      if (value !== null && String(value) === 'true') {
+        return true
+      } else {
+        if (value !== null && String(value) === 'false') {
+          return false
+        }
+      }
+
+      return value
+    } else {
+      const optionName = stringSnakeToCamel(name)
+      const option = getObjectPropertyValueByKey(this.options, optionName)
+      if (option) {
+        return getAttributeValueByBreakpoint(option)
+      } else {
+        return null
+      }
+    }
+  }
+
+  private _toggle = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.toggle') === false) {
+      return
+    }
+
+    if (this.shown) {
+      this._hide()
+    } else {
+      this._show()
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.toggled')
+  }
+
+  private _hide = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.hide') === false) {
+      return
+    }
+
+    this.shown = false
+    this._deleteOverlay()
+    document.body.removeAttribute(`data-kt-drawer-${this.name}`)
+    document.body.removeAttribute(`data-kt-drawer`)
+    this.element.classList.remove(`${this.options.baseClass}-on`)
+    if (this.toggleElement != null) {
+      this.toggleElement.classList.remove('active')
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.after.hidden')
+  }
+
+  private _show = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.drawer.show') === false) {
+      return
+    }
+
+    this.shown = true
+    this._createOverlay()
+    document.body.setAttribute(`data-kt-drawer-${this.name}`, 'on')
+    document.body.setAttribute('data-kt-drawer', 'on')
+    this.element.classList.add(`${this.options.baseClass}-on`)
+    if (this.toggleElement !== null) {
+      this.toggleElement.classList.add('active')
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.drawer.shown')
+  }
+
+  private _createOverlay = () => {
+    if (this._getOption('overlay') === true) {
+      this.overlayElement = document.createElement('DIV')
+      const elementZIndex = getCSS(this.element, 'z-index')
+      if (elementZIndex) {
+        const overlayZindex = parseInt(elementZIndex) - 1
+        ElementStyleUtil.set(this.overlayElement, 'z-index', overlayZindex) // update
+      }
+      document.body.append(this.overlayElement)
+      const overlayClassOption = this._getOption('overlay-class')
+      if (overlayClassOption) {
+        this.overlayElement.classList.add(overlayClassOption.toString())
+      }
+      this.overlayElement.addEventListener('click', (e) => {
+        e.preventDefault()
+        this._hide()
+      })
+    }
+  }
+
+  private _deleteOverlay = () => {
+    if (this.overlayElement !== null && this.overlayElement.parentNode) {
+      this.overlayElement.parentNode.removeChild(this.overlayElement)
+    }
+  }
+
+  private _getDirection = () => {
+    return String(this._getOption('direction')) === 'left' ? 'left' : 'right'
+  }
+
+  private _getWidth = () => {
+    let width = this._getOption('width')
+    if (width && width === 'auto') {
+      width = getCSS(this.element, 'width')
+    }
+
+    return width
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public toggle = () => {
+    this._toggle()
+  }
+
+  public show = () => {
+    this._show()
+  }
+
+  public hide = () => {
+    this._hide()
+  }
+
+  public isShown = () => {
+    return this.shown
+  }
+
+  public update = () => {
+    this._update()
+  }
+
+  public goElement = () => {
+    return this.element
+  }
+
+  // Event API
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Static methods
+  public static hasInstace = (elementId: string): boolean => {
+    return DrawerStore.has(elementId)
+  }
+
+  public static getInstance = (elementId: string) => {
+    return DrawerStore.get(elementId)
+  }
+
+  public static hideAll = () => {
+    const oldInstances = DrawerStore.getAllInstances()
+    oldInstances.forEach((dr) => {
+      dr.hide()
+    })
+  }
+
+  public static updateAll = () => {
+    const oldInstances = DrawerStore.getAllInstances()
+    oldInstances.forEach((dr) => {
+      dr.update()
+    })
+  }
+
+  // Create Instances
+  public static createInstances(selector: string): void {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((element) => {
+      const item = element as HTMLElement
+      let drawer = DrawerComponent.getInstance(item.id)
+      if (!drawer) {
+        drawer = new DrawerComponent(item, defaultDrawerOptions)
+      }
+      drawer.element = item
+      drawer.hide()
+    })
+  }
+
+  // Dismiss instances
+  public static handleDismiss = () => {
+    // External drawer toggle handler
+    DOMEventHandlerUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', () => {
+      /* @ts-ignore */
+      const element = this.closest('[data-kt-drawer="true"]')
+      if (element) {
+        const drawer = DrawerComponent.getInstance(element)
+        if (drawer && drawer.isShown()) {
+          drawer.hide()
+        }
+      }
+    })
+  }
+
+  // Global Initialization
+  public static initGlobalHandlers(): void {
+    // Window Resize Handling
+    window.addEventListener('resize', function () {
+      let timer: number | undefined
+      throttle(
+        timer,
+        () => {
+          // Locate and update Drawer instances on window resize
+          const elements = document.body.querySelectorAll('[data-kt-drawer="true"]')
+          elements.forEach((el) => {
+            const item = el as HTMLElement
+            const instance = DrawerComponent.getInstance(item.id)
+            if (instance) {
+              instance.element = item
+              instance.update()
+            }
+          })
+        },
+        200
+      )
+    })
+  }
+
+  public static bootstrap = () => {
+    DrawerComponent.createInstances('[data-kt-drawer="true"]')
+    DrawerComponent.initGlobalHandlers()
+    DrawerComponent.handleDismiss()
+  }
+
+  public static reinitialization = () => {
+    DrawerComponent.createInstances('[data-kt-drawer="true"]')
+    DrawerComponent.hideAll()
+    DrawerComponent.updateAll()
+    DrawerComponent.handleDismiss()
+  }
+}
+
+export {DrawerComponent, defaultDrawerOptions}

package/_metronic/kt/components/_FeedbackComponent.ts

@@ -0,0 +1,152 @@
+import {
+  DataUtil,
+  ElementStyleUtil,
+  EventHandlerUtil,
+  getUniqueIdWithPrefix,
+  getAttributeValueByBreakpoint,
+} from '../_utils/index'
+
+export interface FeedbackOptions {
+  width?: number
+  placement?: string
+  content?: string
+  type?: string
+}
+
+const defaultFeedbackOptions: FeedbackOptions = {
+  width: 100,
+  placement: 'top-center',
+  content: '',
+  type: 'popup',
+}
+
+class FeedbackComponent {
+  element: HTMLElement
+  options: FeedbackOptions
+  instanceUid: string
+  shown: boolean
+
+  constructor(_element: HTMLElement, options: FeedbackOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultFeedbackOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('feedback')
+    this.shown = false
+
+    // Event handlers
+    this._handlers() // will add in the show popup
+    DataUtil.set(this.element, 'feedback', this)
+  }
+
+  private _handlers = () => {
+    this.element.addEventListener('click', (e: Event) => {
+      e.preventDefault()
+      this._go()
+    })
+  }
+
+  private _go = () => {}
+
+  private showPopup = () => {
+    this.element = document.createElement('DIV')
+
+    this.element.classList.add('feedback feedback-popup')
+    this.element.innerHTML = this.options.content || ''
+
+    if (this.options.placement === 'top-center') {
+      this.setPopupTopCenterPosition()
+    }
+
+    document.body.appendChild(this.element)
+    this.element.classList.add('feedback-shown')
+    this.shown = true
+  }
+
+  private setPopupTopCenterPosition = () => {
+    const width = getAttributeValueByBreakpoint(this.options.width?.toString() || '0')
+    const height = ElementStyleUtil.get(this.element, 'height')
+    this.element.classList.add('feedback-top-center')
+    ElementStyleUtil.set(this.element, 'width', width)
+    ElementStyleUtil.set(this.element, 'left', '50%')
+    ElementStyleUtil.set(this.element, 'top', '-' + height)
+  }
+
+  private hidePopup = () => {
+    this.element.remove()
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public show = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.feedback.show') === false) {
+      return
+    }
+
+    if (this.options.type === 'popup') {
+      this.showPopup()
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.feedback.shown')
+
+    return this
+  }
+
+  public hide = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.feedback.hide') === false) {
+      return
+    }
+
+    if (this.options.type === 'popup') {
+      this.hidePopup()
+    }
+
+    this.shown = false
+    EventHandlerUtil.trigger(this.element, 'kt.feedback.hidden')
+    return this
+  }
+
+  public isShown = () => {
+    return this.isShown
+  }
+
+  public getElement = () => {
+    return this.element
+  }
+
+  // Event API
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Create Instances
+  public static createInstances(selector: string) {
+    throw new Error('not implemented')
+  }
+
+  // Static methods
+  public static hasInstace(element: HTMLElement) {
+    throw new Error('not implemented')
+  }
+
+  public static getInstance(element: HTMLElement) {
+    throw new Error('not implemented')
+  }
+
+  public static bootstrap(attr: string = '[data-Feedback]') {
+    throw new Error('not implemented')
+  }
+}
+
+export {FeedbackComponent, defaultFeedbackOptions}