@hitsoft/e-donusum 1.0.8 → 1.0.9

package/_metronic/kt/components/_StickyComponent.ts

@@ -0,0 +1,293 @@
+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

@@ -0,0 +1,208 @@
+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

@@ -0,0 +1,218 @@
+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};