@hitsoft/e-donusum 1.0.5 → 1.0.7

package/_metronic/kt/components/_StickyComponent.ts

@@ -1,293 +0,0 @@
-import {
-  getElementOffset,
-  getScrollTop,
-  getAttributeValueByBreakpoint,
-  getUniqueIdWithPrefix,
-  getObjectPropertyValueByKey,
-  stringSnakeToCamel,
-  getCSS,
-  DataUtil,
-  ElementAnimateUtil,
-  ElementStyleUtil,
-  EventHandlerUtil,
-} from '../_utils/index'
-
-export interface StickyOptions {
-  offset: number
-  reverse: boolean
-  animation: boolean
-  animationSpeed: string
-  animationClass: string
-}
-
-const defaultStickyOptions: StickyOptions = {
-  offset: 200,
-  reverse: false,
-  animation: true,
-  animationSpeed: '0.3s',
-  animationClass: 'animation-slide-in-down',
-}
-
-class StickyComponent {
-  element: HTMLElement
-  options: StickyOptions
-  instanceUid: string
-  instanceName: string | null = ''
-  attributeName: string
-  attributeName2: string
-  eventTriggerState: boolean
-  lastScrollTop: number
-
-  constructor(_element: HTMLElement, options: StickyOptions) {
-    this.element = _element
-    this.options = Object.assign(defaultStickyOptions, options)
-    this.instanceUid = getUniqueIdWithPrefix('sticky')
-    this.instanceName = this.element.getAttribute('data-kt-sticky-name')
-    this.attributeName = 'data-kt-sticky-' + this.instanceName
-    this.attributeName2 = 'data-kt-' + this.instanceName
-    this.eventTriggerState = true
-    this.lastScrollTop = 0
-
-    // Event Handlers
-    window.addEventListener('scroll', this.scroll)
-
-    // Initial Launch
-    this.scroll()
-
-    DataUtil.set(this.element, 'sticky', this)
-  }
-
-  private scroll = () => {
-    let offset = this.getOption('offset')
-    let reverse = this.getOption('reverse')
-
-    // Exit if false
-    if (offset === false) {
-      return
-    }
-
-    let offsetNum = 0
-    if (typeof offset === 'string') {
-      offsetNum = parseInt(offset)
-    }
-
-    const st = getScrollTop()
-
-    // Reverse scroll mode
-    if (reverse === true) {
-      // Release on reverse scroll mode
-      if (st > offsetNum && this.lastScrollTop < st) {
-        if (document.body.hasAttribute(this.attributeName) === false) {
-          this.enable()
-          document.body.setAttribute(this.attributeName, 'on')
-          document.body.setAttribute(this.attributeName2, 'on')
-        }
-
-        if (this.eventTriggerState === true) {
-          EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
-          EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
-
-          this.eventTriggerState = false
-        }
-      } else {
-        // Back scroll mode
-        if (document.body.hasAttribute(this.attributeName)) {
-          this.disable()
-          document.body.removeAttribute(this.attributeName)
-          document.body.removeAttribute(this.attributeName2)
-        }
-
-        if (this.eventTriggerState === false) {
-          EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
-          EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
-
-          this.eventTriggerState = true
-        }
-      }
-
-      this.lastScrollTop = st
-      return
-    }
-
-    // Classic scroll mode
-    if (st > offsetNum) {
-      if (document.body.hasAttribute(this.attributeName) === false) {
-        this.enable()
-        document.body.setAttribute(this.attributeName, 'on')
-        document.body.setAttribute(this.attributeName2, 'on')
-      }
-
-      if (this.eventTriggerState === true) {
-        EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
-        EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
-        this.eventTriggerState = false
-      }
-    } else {
-      // back scroll mode
-      if (document.body.hasAttribute(this.attributeName) === true) {
-        this.disable()
-        document.body.removeAttribute(this.attributeName)
-        document.body.removeAttribute(this.attributeName2)
-      }
-
-      if (this.eventTriggerState === false) {
-        EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
-        EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
-        this.eventTriggerState = true
-      }
-    }
-  }
-
-  private getOption = (name: string) => {
-    const dataStickyAttr = 'data-kt-sticky-' + name
-    if (this.element.hasAttribute(dataStickyAttr) === true) {
-      const attrValueInStr = this.element.getAttribute(dataStickyAttr)
-      const attrValue = getAttributeValueByBreakpoint(attrValueInStr || '')
-      if (attrValue !== null && String(attrValue) === 'true') {
-        return true
-      } else if (attrValue !== null && String(attrValue) === 'false') {
-        return false
-      }
-
-      return attrValue
-    } else {
-      const optionName = stringSnakeToCamel(name)
-      const option = getObjectPropertyValueByKey(this.options, optionName)
-      if (option) {
-        return getAttributeValueByBreakpoint(option)
-      }
-    }
-  }
-
-  private disable = () => {
-    ElementStyleUtil.remove(this.element, 'top')
-    ElementStyleUtil.remove(this.element, 'width')
-    ElementStyleUtil.remove(this.element, 'left')
-    ElementStyleUtil.remove(this.element, 'right')
-    ElementStyleUtil.remove(this.element, 'z-index')
-    ElementStyleUtil.remove(this.element, 'position')
-  }
-
-  private enable = (update: boolean = false) => {
-    const top = this.getOption('top')
-    const left = this.getOption('left')
-    // const right = this.getOption("right");
-    let width = this.getOption('width')
-    const zindex = this.getOption('zindex')
-
-    if (update !== true && this.getOption('animation') === true) {
-      ElementStyleUtil.set(this.element, 'animationDuration', this.getOption('animationSpeed'))
-      ElementAnimateUtil.animateClass(this.element, 'animation ' + this.getOption('animationClass'))
-    }
-
-    if (zindex !== null) {
-      ElementStyleUtil.set(this.element, 'z-index', zindex)
-      ElementStyleUtil.set(this.element, 'position', 'fixed')
-    }
-
-    if (top !== null) {
-      ElementStyleUtil.set(this.element, 'top', top)
-    }
-
-    if (width !== null && width !== undefined) {
-      const widthTarget = getObjectPropertyValueByKey(width, 'target')
-      if (widthTarget) {
-        const targetElement = document.querySelector(widthTarget)
-        if (targetElement) {
-          width = getCSS(targetElement, 'width')
-        }
-      }
-      ElementStyleUtil.set(this.element, 'width', width)
-    }
-
-    if (left !== null) {
-      if (String(left).toLowerCase() === 'auto') {
-        var offsetLeft = getElementOffset(this.element).left
-
-        if (offsetLeft > 0) {
-          ElementStyleUtil.set(this.element, 'left', String(offsetLeft) + 'px')
-        }
-      }
-    }
-  }
-
-  public update = () => {
-    if (document.body.hasAttribute(this.attributeName) === true) {
-      this.disable()
-      document.body.removeAttribute(this.attributeName)
-      document.body.removeAttribute(this.attributeName2)
-      this.enable(true)
-      document.body.setAttribute(this.attributeName, 'on')
-      document.body.setAttribute(this.attributeName2, 'on')
-    }
-  }
-
-  // Event API
-  public on = (name: string, callBack: Function) => {
-    return EventHandlerUtil.on(this.element, name, callBack)
-  }
-
-  public one = (name: string, callback: Function) => {
-    return EventHandlerUtil.one(this.element, name, callback)
-  }
-
-  public off = (name: string, handlerId: string) => {
-    return EventHandlerUtil.off(this.element, name, handlerId)
-  }
-
-  public trigger = (name: string) => {
-    return EventHandlerUtil.trigger(this.element, name)
-  }
-
-  // Static methods
-  public static hasInstace(element: HTMLElement) {
-    return DataUtil.has(element, 'sticky')
-  }
-
-  public static getInstance(element: HTMLElement): StickyComponent | undefined {
-    if (element !== null && StickyComponent.hasInstace(element)) {
-      const data = DataUtil.get(element, 'sticky')
-      if (data) {
-        return data as StickyComponent
-      }
-    }
-  }
-
-  // Create Instances
-  public static createInstances(selector: string) {
-    const elements = document.body.querySelectorAll(selector)
-    elements.forEach((element) => {
-      const item = element as HTMLElement
-      let sticky = StickyComponent.getInstance(item)
-      if (!sticky) {
-        sticky = new StickyComponent(item, defaultStickyOptions)
-      }
-    })
-  }
-
-  public static createInsance = (
-    selector: string,
-    options: StickyOptions = defaultStickyOptions
-  ): StickyComponent | undefined => {
-    const element = document.body.querySelector(selector)
-    if (!element) {
-      return
-    }
-    const item = element as HTMLElement
-    let sticky = StickyComponent.getInstance(item)
-    if (!sticky) {
-      sticky = new StickyComponent(item, options)
-    }
-    return sticky
-  }
-
-  public static bootstrap(attr: string = '[data-kt-sticky="true"]') {
-    StickyComponent.createInstances(attr)
-  }
-
-  public static reInitialization(attr: string = '[data-kt-sticky="true"]') {
-    StickyComponent.createInstances(attr)
-  }
-}
-
-export {StickyComponent, defaultStickyOptions}

package/_metronic/kt/components/_SwapperComponent.ts

@@ -1,208 +0,0 @@
-import {
-  getAttributeValueByBreakpoint,
-  stringSnakeToCamel,
-  getObjectPropertyValueByKey,
-  EventHandlerUtil,
-  throttle,
-} from '../_utils/index'
-
-export class SwapperStore {
-  static store: Map<string, SwapperComponent> = new Map()
-
-  public static set(instanceId: string, drawerComponentObj: SwapperComponent): void {
-    if (SwapperStore.has(instanceId)) {
-      return
-    }
-
-    SwapperStore.store.set(instanceId, drawerComponentObj)
-  }
-
-  public static get(instanceId: string): SwapperComponent | undefined {
-    if (!SwapperStore.has(instanceId)) {
-      return
-    }
-    return SwapperStore.store.get(instanceId)
-  }
-
-  public static remove(instanceId: string): void {
-    if (!SwapperStore.has(instanceId)) {
-      return
-    }
-
-    SwapperStore.store.delete(instanceId)
-  }
-
-  public static has(instanceId: string): boolean {
-    return SwapperStore.store.has(instanceId)
-  }
-
-  public static getAllInstances() {
-    return SwapperStore.store
-  }
-}
-
-export interface ISwapperOptions {
-  mode: string
-}
-
-export interface ISwapperQueries {
-  componentName: string
-  instanseQuery: string
-  attrQuery: string
-}
-
-const defaultSwapperOptions: ISwapperOptions = {
-  mode: 'append',
-}
-
-const defaultSwapperQueires: ISwapperQueries = {
-  componentName: 'swapper',
-  instanseQuery: '[data-kt-swapper="true"]',
-  attrQuery: 'data-kt-swapper-',
-}
-
-class SwapperComponent {
-  element: HTMLElement
-  options: ISwapperOptions
-  queries: ISwapperQueries
-
-  constructor(_element: HTMLElement, _options: ISwapperOptions, _queries: ISwapperQueries) {
-    this.element = _element
-    this.options = Object.assign(defaultSwapperOptions, _options)
-    this.queries = _queries
-
-    // Initial update
-    this.update()
-
-    SwapperStore.set(this.element.id, this)
-  }
-
-  private getOption(name: string) {
-    const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
-    if (attr) {
-      let value = getAttributeValueByBreakpoint(attr)
-      if (attr != 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
-      }
-    }
-  }
-
-  ///////////////////////
-  // ** Public API  ** //
-  ///////////////////////
-  public update = () => {
-    const parentSelector = this.getOption('parent')?.toString()
-    const mode = this.getOption('mode')
-    const parentElement = parentSelector ? document.querySelector(parentSelector) : null
-
-    if (parentElement && this.element.parentNode !== parentElement) {
-      if (mode === 'prepend') {
-        parentElement.prepend(this.element)
-      } else if (mode === 'append') {
-        parentElement.append(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, handlerId: string) => {
-    return EventHandlerUtil.off(this.element, name, handlerId)
-  }
-
-  public trigger = (name: string, event: Event) => {
-    return EventHandlerUtil.trigger(this.element, name, event)
-  }
-
-  // Static methods
-  public static getInstance = (
-    el: HTMLElement,
-    componentName: string = defaultSwapperQueires.componentName
-  ): SwapperComponent | null => {
-    const place = SwapperStore.get(el.id)
-    if (place) {
-      return place as SwapperComponent
-    }
-
-    return null
-  }
-
-  public static createInstances = (
-    selector: string = defaultSwapperQueires.instanseQuery,
-    options: ISwapperOptions = defaultSwapperOptions,
-    queries: ISwapperQueries = defaultSwapperQueires
-  ) => {
-    const elements = document.body.querySelectorAll(selector)
-    elements.forEach((el) => {
-      const item = el as HTMLElement
-      let place = SwapperComponent.getInstance(item)
-      if (!place) {
-        place = new SwapperComponent(item, options, queries)
-      }
-    })
-  }
-
-  public static createInsance = (
-    selector: string = defaultSwapperQueires.instanseQuery,
-    options: ISwapperOptions = defaultSwapperOptions,
-    queries: ISwapperQueries = defaultSwapperQueires
-  ): SwapperComponent | undefined => {
-    const element = document.body.querySelector(selector)
-    if (!element) {
-      return
-    }
-    const item = element as HTMLElement
-    let place = SwapperComponent.getInstance(item)
-    if (!place) {
-      place = new SwapperComponent(item, options, queries)
-    }
-    return place
-  }
-
-  public static bootstrap = (selector: string = defaultSwapperQueires.instanseQuery) => {
-    SwapperComponent.createInstances(selector)
-  }
-
-  public static reinitialization = (selector: string = defaultSwapperQueires.instanseQuery) => {
-    SwapperComponent.createInstances(selector)
-  }
-}
-
-// Window resize handler
-window.addEventListener('resize', function () {
-  let timer
-  throttle(
-    timer,
-    () => {
-      // Locate and update Offcanvas instances on window resize
-      const elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery)
-      elements.forEach((el) => {
-        const place = SwapperComponent.getInstance(el as HTMLElement)
-        if (place) {
-          place.update()
-        }
-      })
-    },
-    200
-  )
-})
-
-export {SwapperComponent, defaultSwapperOptions, defaultSwapperQueires}

package/_metronic/kt/components/_ToggleComponent.ts

@@ -1,218 +0,0 @@
-import {DataUtil, EventHandlerUtil, getUniqueIdWithPrefix,} from '../_utils/index';
-// Helpers
-import {CookieComponent} from './_CookieComponent';
-
-export interface ToggleOptions {
-  saveState: boolean;
-  targetState?: string;
-  toggleState?: string;
-  targetToggleMode?: string;
-}
-
-const defaultToggleOptions: ToggleOptions = {
-  saveState: false,
-};
-
-class ToggleComponent {
-  element: HTMLElement;
-  instanceUid: string;
-  options: ToggleOptions;
-  state: string = '';
-  mode: string = '';
-  target: HTMLElement | null = null;
-  attribute: string = '';
-
-  constructor(_element: HTMLElement, options: ToggleOptions) {
-    this.options = Object.assign(defaultToggleOptions, options);
-    this.instanceUid = getUniqueIdWithPrefix('toggle');
-    this.element = _element;
-
-    const elementTargetAttr = this.element.getAttribute(
-      'data-kt-toggle-target'
-    );
-    if (elementTargetAttr) {
-      this.target = document.querySelector(elementTargetAttr);
-    }
-    const elementToggleAttr = this.element.getAttribute('data-kt-toggle-state');
-    this.state = elementToggleAttr || '';
-    const elementModeAttr = this.element.getAttribute('data-kt-toggle-mode');
-    this.mode = elementModeAttr || '';
-    this.attribute =
-      'data-kt-' + this.element.getAttribute('data-kt-toggle-name');
-
-    // Event Handlers
-    this._handlers();
-
-    // Update Instance
-    // Bind Instance
-    DataUtil.set(this.element, 'toggle', this);
-  }
-
-  private _handlers = () => {
-    this.element.addEventListener('click', (e: Event) => {
-      e.preventDefault();
-
-      if (this.mode === '') {
-        this._toggle();
-        return;
-      }
-
-      if (this.mode === 'off' && !this._isEnabled()) {
-        this._toggle();
-      } else if (this.mode === 'on' && this._isEnabled()) {
-        this._toggle();
-      }
-    });
-  };
-
-  // Event handlers
-  private _toggle = () => {
-    // Trigger "after.toggle" event
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.change');
-
-    if (this._isEnabled()) {
-      this._disable();
-    } else {
-      this._enable();
-    }
-
-    // Trigger "before.toggle" event
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.changed');
-    return this;
-  };
-
-  private _enable = () => {
-    if (this._isEnabled()) {
-      return;
-    }
-
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.enable');
-    this.target?.setAttribute(this.attribute, 'on');
-    if (this.state.length > 0) {
-      this.element.classList.add(this.state);
-    }
-
-    if (this.options.saveState) {
-      CookieComponent.set(this.attribute, 'on', {});
-    }
-
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.enabled');
-    return this;
-  };
-
-  private _disable = () => {
-    if (!this._isEnabled()) {
-      return false;
-    }
-
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.disable');
-    this.target?.removeAttribute(this.attribute);
-
-    if (this.state.length > 0) {
-      this.element.classList.remove(this.state);
-    }
-
-    if (this.options.saveState) {
-      CookieComponent.delete(this.attribute);
-    }
-
-    EventHandlerUtil.trigger(this.element, 'kt.toggle.disabled');
-    return this;
-  };
-
-  private _isEnabled = () => {
-    if (!this.target) {
-      return false;
-    }
-
-    return (
-      String(this.target.getAttribute(this.attribute)).toLowerCase() === 'on'
-    );
-  };
-
-  ///////////////////////
-  // ** Public API  ** //
-  ///////////////////////
-
-  // Plugin API
-  // Plugin API
-  public toggle = () => {
-    return this._toggle();
-  };
-
-  public enable = () => {
-    return this._enable();
-  };
-
-  public disable = () => {
-    return this._disable();
-  };
-
-  public isEnabled = () => {
-    return this._isEnabled();
-  };
-
-  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, handlerId: string) => {
-    return EventHandlerUtil.off(this.element, name, handlerId);
-  };
-
-  public trigger = (name: string, event?: Event) => {
-    return EventHandlerUtil.trigger(this.element, name, event);
-  };
-
-  // Static methods
-  public static getInstance = (el: HTMLElement) => {
-    const toggleElement = DataUtil.get(el, 'toggle');
-    if (toggleElement) {
-      return toggleElement;
-    }
-
-    return null;
-  };
-
-  public static createInstances = (selector: string) => {
-    const elements = document.body.querySelectorAll<HTMLElement>(selector);
-    elements.forEach((el) => {
-      let toggleObj = ToggleComponent.getInstance(el);
-      if (!toggleObj) {
-        toggleObj = new ToggleComponent(el, defaultToggleOptions);
-
-        // Add a class to prevent sidebar hover effect after toggle click
-        // @ts-ignore
-        toggleObj.on("kt.toggle.change", function () {
-          // Set animation state
-          el.closest('#kt_app_sidebar')?.classList.add("animating");
-
-          // Wait till animation finishes
-          setTimeout(function () {
-            // Remove animation state
-            el.closest('#kt_app_sidebar')?.classList.remove("animating");
-          }, 300);
-        });
-      }
-    });
-  };
-
-  public static reinitialization = () => {
-    ToggleComponent.createInstances('[data-kt-toggle]');
-  };
-
-  public static bootstrap = () => {
-    ToggleComponent.createInstances('[data-kt-toggle]');
-  };
-}
-
-export {ToggleComponent, defaultToggleOptions};