@operato/utils 8.0.0-alpha.37 → 8.0.0-beta.1

package/src/longpressable.ts

@@ -1,101 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-/* Inspired by https://github.com/john-doherty/long-press-event */
-
-var timer = null as any
-
-// check if we're using a touch screen
-//@ts-ignore
-const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
-
-// switch to touch events if using a touch screen
-const mouseDown = isTouch ? 'touchstart' : 'mousedown'
-const mouseOut = isTouch ? 'touchcancel' : 'mouseout'
-const mouseUp = isTouch ? 'touchend' : 'mouseup'
-const mouseMove = isTouch ? 'touchmove' : 'mousemove'
-
-/*
- * Fires the 'long-press' event on element
- * @returns {void}
- */
-function fireLongPressEvent(this: HTMLElement) {
-  clearLongPressTimer()
-
-  // fire the long-press event
-  var suppressClickEvent = this.dispatchEvent(new CustomEvent('long-press', { bubbles: true, cancelable: true }))
-
-  if (suppressClickEvent) {
-    // temporarily intercept and clear the next click
-    this.addEventListener(
-      mouseUp,
-      function clearMouseUp(e) {
-        this.removeEventListener(mouseUp, clearMouseUp, true)
-        cancelEvent(e)
-      },
-      true
-    )
-  }
-}
-
-/*
- * method responsible for starting the long press timer
- * @param {event} e - event object
- * @returns {void}
- */
-function startLongPressTimer(e: Event) {
-  clearLongPressTimer(e)
-
-  var el = e.target as HTMLElement
-
-  // get delay from html attribute if it exists, otherwise default to 1500
-  var longPressDelayInMs = parseInt(el.getAttribute('data-long-press-delay') || '600', 10)
-
-  // start the timer
-  timer = setTimeout(fireLongPressEvent.bind(el), longPressDelayInMs)
-}
-
-/*
- * method responsible for clearing a pending long press timer
- * @param {event} e - event object
- * @returns {void}
- */
-function clearLongPressTimer(e?: Event) {
-  clearTimeout(timer)
-  timer = null
-}
-
-/*
- * Cancels the current event
- * @param {object} e - browser event object
- * @returns {void}
- */
-function cancelEvent(e: Event) {
-  e.stopImmediatePropagation()
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-/**
- * method set target element to be able to respond longpress event
- * @param {HTMLElement} element target element
- */
-export const longpressable = (element: HTMLElement) => {
-  // hook events that clear a pending long press event
-  element.addEventListener(mouseOut, clearLongPressTimer, true)
-  element.addEventListener(mouseUp, clearLongPressTimer, true)
-  element.addEventListener(mouseMove, clearLongPressTimer, true)
-  element.addEventListener('wheel', clearLongPressTimer, true)
-  element.addEventListener('scroll', clearLongPressTimer, true)
-
-  // hook events that can trigger a long press event
-  element.addEventListener(mouseDown, startLongPressTimer, true) // <- start
-
-  // cancel context for touch display
-  if (mouseDown.indexOf('touch') === 0) {
-    element.addEventListener('contextmenu', cancelEvent, true)
-  } else {
-    element.addEventListener('contextmenu', clearLongPressTimer, true)
-  }
-}

package/src/mixins/gesture-mixin.ts

@@ -1,157 +0,0 @@
-interface CustomElement extends HTMLElement {
-  connectedCallback?(): void
-  disconnectedCallback?(): void
-}
-
-type Constructor<T = CustomElement> = new (...args: any[]) => T
-
-export type GestureEventPinch = CustomEvent<{ scale: number; centerX: number; centerY: number }>
-export type GestureEventDrag = CustomEvent<{
-  deltaX: number
-  deltaY: number
-  clientX: number
-  clientY: number
-  end: boolean
-}>
-export type GestureEventDoubleTap = CustomEvent<{ x: number; y: number }>
-
-export function gesture<TBase extends Constructor>(Base: TBase) {
-  return class extends Base {
-    __pointers = new Map<number, { x: number; y: number }>()
-    __lastTapTime = 0
-    __lastPinchDistance = 0
-    __dragStart: { x: number; y: number } | null = null
-
-    connectedCallback(): void {
-      if (super.connectedCallback) {
-        super.connectedCallback()
-      }
-      this.addEventListener('pointerdown', this.handlePointerDown as EventListener)
-    }
-
-    disconnectedCallback(): void {
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback()
-      }
-      this.removeEventListener('pointerdown', this.handlePointerDown as EventListener)
-      this.removeGlobalListeners()
-    }
-
-    handlePointerDown = (e: PointerEvent) => {
-      e.preventDefault()
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.set(e.pointerId, point)
-
-      this.addGlobalListeners()
-    }
-
-    handlePointerMove = (e: PointerEvent) => {
-      e.preventDefault()
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.set(e.pointerId, point)
-
-      if (this.__pointers.size === 2) {
-        this.handlePinch()
-      } else if (this.__pointers.size === 1) {
-        this.handleDrag(point, false)
-      }
-    }
-
-    handlePointerUp = (e: PointerEvent) => {
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.delete(e.pointerId)
-
-      if (this.__dragStart) {
-        this.handleDrag(point, true)
-      }
-
-      if (this.__pointers.size === 0) {
-        this.removeGlobalListeners()
-        this.__dragStart = null
-        this.__lastPinchDistance = 0
-        this.handleTap(point)
-      }
-    }
-
-    handlePinch() {
-      const pointers = Array.from(this.__pointers.values()) as { x: number; y: number }[]
-      const currentDistance = this.getDistance(pointers[0], pointers[1])
-
-      if (this.__lastPinchDistance) {
-        const scale = currentDistance / this.__lastPinchDistance
-        const center = {
-          x: (pointers[0].x + pointers[1].x) / 2,
-          y: (pointers[0].y + pointers[1].y) / 2
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('pinch', {
-            detail: { scale, centerX: center.x, centerY: center.y }
-          })
-        )
-      }
-
-      this.__lastPinchDistance = currentDistance
-    }
-
-    handleDrag(point: { x: number; y: number }, end: boolean) {
-      if (this.__dragStart) {
-        const deltaX = point.x - this.__dragStart.x
-        const deltaY = point.y - this.__dragStart.y
-
-        this.dispatchEvent(
-          new CustomEvent('drag', {
-            detail: { deltaX, deltaY, clientX: point.x, clientY: point.y, end }
-          })
-        )
-
-        if (end) {
-          this.__dragStart = null
-        } else {
-          this.__dragStart = point
-        }
-      } else if (!end && this.__pointers.size === 1) {
-        /* dragging을 시작하려면, pointer 개수가 1개인 것을 (지연)확인해야한다. */
-        setTimeout(() => {
-          if (this.__pointers.size === 1 && !this.__dragStart) {
-            this.__dragStart = point
-          }
-        }, 30)
-      }
-    }
-
-    handleTap(point: { x: number; y: number }) {
-      const currentTime = performance.now()
-      const timeSinceLastTap = currentTime - this.__lastTapTime
-
-      if (timeSinceLastTap < 300) {
-        // 300ms is a common double-tap threshold
-        this.dispatchEvent(
-          new CustomEvent('doubletap', {
-            detail: { x: point.x, y: point.y }
-          })
-        )
-      }
-
-      this.__lastTapTime = currentTime
-    }
-
-    getDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
-      const dx = p1.x - p2.x
-      const dy = p1.y - p2.y
-      return Math.sqrt(dx * dx + dy * dy)
-    }
-
-    addGlobalListeners() {
-      document.addEventListener('pointermove', this.handlePointerMove as EventListener)
-      document.addEventListener('pointerup', this.handlePointerUp as EventListener)
-      document.addEventListener('pointercancel', this.handlePointerUp as EventListener)
-    }
-
-    removeGlobalListeners() {
-      document.removeEventListener('pointermove', this.handlePointerMove as EventListener)
-      document.removeEventListener('pointerup', this.handlePointerUp as EventListener)
-      document.removeEventListener('pointercancel', this.handlePointerUp as EventListener)
-    }
-  }
-}

package/src/mixins/index.ts

@@ -1,2 +0,0 @@
-export { default as InfiniteScrollable } from './infinite-scrollable.js'
-export * from './gesture-mixin.js'

package/src/mixins/infinite-scrollable.ts

@@ -1,67 +0,0 @@
-import debounce from 'lodash-es/debounce'
-
-type Constructor = new (...args: any[]) => {}
-
-/**
- * A higher-order function that enhances a base class with infinite scrolling functionality.
- *
- * @template TBase - The base class constructor type.
- * @param {TBase} Base - The base class to enhance with infinite scrolling.
- * @returns {TBase & InfiniteScrollable} - The extended class with infinite scrolling capabilities.
- */
-export default function InfiniteScrollable<TBase extends Constructor>(Base: TBase) {
-  return class Scrolling extends Base {
-    /**
-     * Default options for infinite scrolling.
-     *
-     * @type {object}
-     * @property {number} threshold - The threshold value to trigger loading more items.
-     * @property {number} limit - The limit of items to load per page.
-     * @property {string} totalProp - The property name for the total number of items.
-     * @property {string} pageProp - The property name for the current page number.
-     */
-    _infiniteScrollOptions = {
-      threshold: 20,
-      limit: 30,
-      totalProp: '_total',
-      pageProp: '_page'
-    }
-
-    /**
-     * Event handler for the scroll event with debouncing.
-     *
-     * @param {Event} e - The scroll event object.
-     */
-    onScroll = debounce(e => {
-      //@ts-ignore inheritted class should have scrollTargetEl property
-      var el = this.scrollTargetEl
-      if (!el) {
-        console.warn('scroll target element is not defined.')
-        return
-      }
-
-      var { threshold = 0, limit, totalProp, pageProp } = this._infiniteScrollOptions
-
-      if (
-        (this as any)[pageProp] < (this as any)[totalProp] / limit &&
-        el.scrollHeight - el.clientHeight <= el.scrollTop + threshold
-      ) {
-        this.scrollAction()
-      }
-    }, 300)
-
-    // commented due to TS2611 error
-    // get scrollTargetEl(): HTMLElement | null {
-    //   console.warn('scroll target element is not defined.')
-
-    //   return null
-    // }
-
-    /**
-     * An async function to handle scroll action when the threshold is reached.
-     */
-    async scrollAction() {
-      console.warn('scroll action not implemented.')
-    }
-  }
-}

package/src/number-parser.ts

@@ -1,24 +0,0 @@
-// 숫자라면 숫자값을, 아니면 null을 반환
-// 0         = true
-// '0'       = true
-// 123       = true
-// "123"     = true
-// -123      = true
-// "-123"    = true
-// true      = false
-// false     = false
-// ""        = false
-// null      = false
-// undefined = false
-// {}        = false
-// []        = false
-export function parseToNumberOrNull(value: any): number | null {
-  let result: number | null = null
-
-  // 숫자나 스트링이면서 NaN이 아니면 숫자로 변환
-  if ((typeof value === 'string' || typeof value === 'number') && value !== '' && !isNaN(value as number)) {
-    result = Number(value)
-  }
-
-  return result
-}

package/src/os.ts

@@ -1,48 +0,0 @@
-/**
- * method to tell if platform of running browser is kind of touch device
- * @returns {boolean}
- */
-export function isTouchDevice() {
-  return window.matchMedia('(pointer:none), (pointer:coarse)').matches
-}
-
-/**
- * method to tell if platform of running browser is kind of mobile device
- * @returns {boolean}
- */
-export function isHandheldDevice() {
-  return window.matchMedia('(max-width: 460px)').matches
-}
-
-/**
- * method to tell if platform of running browser is kind of mobile device
- * @returns {boolean}
- */
-export function isMobileDevice() {
-  return window.matchMedia('(max-width: 767px)').matches
-}
-
-/**
- * method to tell if operating system of running browser is iOS
- * @returns {boolean}
- */
-export function isIOS() {
-  //@ts-ignore
-  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
-}
-
-/**
- * method to tell if operating system of running browser is MacOS
- * @returns {boolean}
- */
-export function isMacOS() {
-  return navigator.userAgent.indexOf('Mac') !== -1
-}
-
-/**
- * method to tell if platform of running browser is Safari
- * @returns {boolean}
- */
-export function isSafari() {
-  return !navigator.userAgent.match(/chrome|chromium|crios/i) && navigator.userAgent.match(/safari/i)
-}

package/src/parse-jwt.ts

@@ -1,21 +0,0 @@
-var atob: any =
-  typeof atob !== 'undefined'
-    ? atob
-    : (base64: string) => {
-        return Buffer.from(base64, 'base64').toString()
-      }
-
-export function parseJwt(token: string): any {
-  var base64Url = token.split('.')[1]
-  var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-  var jsonPayload = decodeURIComponent(
-    atob(base64)
-      .split('')
-      .map(function (c: string) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-      })
-      .join('')
-  )
-
-  return JSON.parse(jsonPayload)
-}

package/src/password-pattern.ts

@@ -1,63 +0,0 @@
-/**
- * Generates a regular expression pattern for validating passwords based on specified criteria.
- *
- * @param {object} options - An object containing options for generating the pattern.
- * @param {boolean} options.lowerCase - Indicates whether the password should contain at least one lowercase character.
- * @param {boolean} options.upperCase - Indicates whether the password should contain at least one uppercase character.
- * @param {boolean} options.digit - Indicates whether the password should contain at least one digit.
- * @param {boolean} options.specialCharacter - Indicates whether the password should contain at least one special character.
- * @param {boolean} options.allowRepeat - Indicates whether repeated characters are allowed in the password.
- * @param {boolean} options.useTightPattern - Indicates whether to use a tight pattern for password length.
- * @param {boolean} options.useLoosePattern - Indicates whether to use a loose pattern for password length.
- * @param {number} options.tightCharacterLength - The minimum length of the password for the tight pattern.
- * @param {number} options.looseCharacterLength - The minimum length of the password for the loose pattern.
- * @returns {RegExp} - A regular expression pattern for validating passwords based on the specified criteria.
- */
-export function generatePasswordPatternRegExp({
-  lowerCase = true,
-  upperCase = true,
-  digit = true,
-  specialCharacter = true,
-  allowRepeat = false,
-  useTightPattern = true,
-  useLoosePattern = false,
-  tightCharacterLength = 8,
-  looseCharacterLength = 15
-}: {
-  lowerCase?: boolean
-  upperCase?: boolean
-  digit?: boolean
-  specialCharacter?: boolean
-  allowRepeat?: boolean
-  useTightPattern?: boolean
-  useLoosePattern?: boolean
-  tightCharacterLength?: Number
-  looseCharacterLength?: Number
-} = {}) {
-  var tightChecklist = useTightPattern
-    ? [
-        lowerCase ? '(?=.*[a-z])' : '', // has at least one lower case character
-        upperCase ? '(?=.*[A-Z])' : '', // has at least one upper case character
-        digit ? '(?=.*\\d)' : '', // has at least one digit
-        specialCharacter ? '(?=.*[!@#$%^&*()])' : '', // has at least one special character
-        !allowRepeat ? '(?!.*(.)\\1(?=\\1{1,}))' : '', // has not an repeated character more than twice
-        `.{${tightCharacterLength},}` // has a length of 8 and more
-      ]
-    : []
-
-  var looseChecklist = useLoosePattern
-    ? [
-        `.{${looseCharacterLength},}` // has a length of 15 and more
-      ]
-    : []
-
-  var checkList = [
-    '^', // from start
-    ...tightChecklist,
-    tightChecklist.length && looseChecklist.length ? '|' : '',
-    ...looseChecklist,
-    '$' //to the end"
-  ]
-
-  return new RegExp(checkList.join(''))
-}

package/src/reactive-controllers/index.ts

@@ -1 +0,0 @@
-export * from './tooltip-reactive-controller.js'

package/src/reactive-controllers/tooltip-reactive-controller.ts

@@ -1,88 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit'
-import { hasOverflow } from '../has-overflow'
-
-export class TooltipReactiveController implements ReactiveController {
-  private host: ReactiveControllerHost & HTMLElement
-  private attributeName: string
-  private content?: string | ((element: HTMLElement) => string)
-  private static tooltipContainer: HTMLElement | null = null
-
-  constructor(
-    host: ReactiveControllerHost & HTMLElement,
-    options?: {
-      content?: string | ((element: HTMLElement) => string)
-      attributeName?: string
-    }
-  ) {
-    const { attributeName, content } = options || {}
-
-    this.host = host
-    this.attributeName = attributeName || 'data-reactive-tooltip'
-    this.content = content
-
-    host.addController(this)
-
-    // Create a tooltip container element if it doesn't exist
-    if (!TooltipReactiveController.tooltipContainer) {
-      TooltipReactiveController.tooltipContainer = document.createElement('div')
-      TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'
-      TooltipReactiveController.tooltipContainer.style.position = 'fixed'
-      TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'
-      TooltipReactiveController.tooltipContainer.style.zIndex = '1000'
-      // Set default styles using CSS variables
-      TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'
-      TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'
-      TooltipReactiveController.tooltipContainer.style.backgroundColor =
-        'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'
-      TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'
-      TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'
-      TooltipReactiveController.tooltipContainer.style.boxShadow =
-        'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'
-      TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'
-      TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'
-      TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'
-      TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'
-      document.body.appendChild(TooltipReactiveController.tooltipContainer)
-    }
-  }
-
-  hostConnected() {
-    const target = this.host.shadowRoot ?? this.host
-    target.addEventListener('mouseover', this.handleMouseOver)
-    target.addEventListener('mouseout', this.handleMouseOut)
-  }
-
-  hostDisconnected() {
-    const target = this.host.shadowRoot ?? this.host
-    target.removeEventListener('mouseover', this.handleMouseOver)
-    target.removeEventListener('mouseout', this.handleMouseOut)
-  }
-
-  private handleMouseOver = (e: Event) => {
-    const element = e.target as HTMLElement
-    if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {
-      const tooltipContent =
-        typeof this.content === 'function'
-          ? this.content.call(this, element)
-          : this.content || element.textContent?.trim() || ''
-
-      const rect = element.getBoundingClientRect()
-
-      // Calculate the fixed position
-      const fixedTop = rect.top + rect.height
-      const fixedLeft = rect.left
-
-      // Set tooltip container position and content
-      TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px`
-      TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px`
-      TooltipReactiveController.tooltipContainer!.style.display = 'block'
-      TooltipReactiveController.tooltipContainer!.textContent = tooltipContent
-    }
-  }
-
-  private handleMouseOut = (e: Event) => {
-    if (TooltipReactiveController.tooltipContainer) {
-      TooltipReactiveController.tooltipContainer.style.display = 'none'
-    }
-  }
-}

package/src/sleep.ts

@@ -1,10 +0,0 @@
-/**
- * async method to implement sleep
- * @param {number} ms milli-seconds to sleep
- * @example
- * await sleep(1000) // pending for 1 second
- */
-
-export function sleep(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}

package/src/stringify-bignum.ts

@@ -1,35 +0,0 @@
-/**
- * Converts a large number into a human-readable string representation with SI unit prefixes (K, M, B, T, P, E).
- *
- * This function takes a large number as input and converts it into a human-readable string representation using SI unit prefixes
- * (K for thousand, M for million, B for billion, T for trillion, P for quadrillion, E for quintillion, etc.).
- * It checks the magnitude of the input number and selects the appropriate SI unit,
- * then formats the number with two decimal places and appends the corresponding SI unit symbol to create the readable string.
- *
- * @param {number} n - The number to be converted.
- * @returns {string} - A human-readable string representation of the number with SI unit prefixes.
- */
-
-export function stringifyBigNumber(n: number) {
-  if (n < 1000) {
-    return n
-  }
-
-  var si = [
-    { v: 1e3, s: 'K' },
-    { v: 1e6, s: 'M' },
-    { v: 1e9, s: 'B' },
-    { v: 1e12, s: 'T' },
-    { v: 1e15, s: 'P' },
-    { v: 1e18, s: 'E' }
-  ]
-
-  var index
-  for (index = si.length - 1; index > 0; index--) {
-    if (n >= si[index].v) {
-      break
-    }
-  }
-
-  return (n / si[index].v).toFixed(2).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[index].s
-}