@revolist/revogrid 4.14.7 → 4.14.8

package/dist/collection/components/scroll/revogr-viewport-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"revogr-viewport-scroll.js","sourceRoot":"","sources":["../../../src/components/scroll/revogr-viewport-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Element,\n  Prop,\n  Host,\n  Listen,\n} from '@stencil/core';\n\nimport GridResizeService from '../revoGrid/viewport.resize.service';\nimport LocalScrollService from '../../services/local.scroll.service';\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\nimport {\n  CONTENT_SLOT,\n  FOOTER_SLOT,\n  HEADER_SLOT,\n} from '../revoGrid/viewport.helpers';\nimport type {\n  DimensionCols,\n  DimensionType,\n  ElementScroll,\n  ScrollCoordinateEvent,\n  ViewPortResizeEvent,\n  ViewPortScrollEvent,\n} from '@type';\n\ntype Delta = 'deltaX' | 'deltaY';\ntype LocalScrollEvent = {\n  preventDefault(): void;\n} & { [x in Delta]: number };\n\n/**\n * Viewport scroll component for RevoGrid\n * @slot - content\n * @slot header - header\n * @slot footer - footer\n */\n@Component({\n  tag: 'revogr-viewport-scroll',\n  styleUrl: 'revogr-viewport-scroll-style.scss',\n})\nexport class RevogrViewportScroll implements ElementScroll {\n  /**\n   * Enable row header\n   */\n  @Prop() readonly rowHeader: boolean;\n\n  /**\n   * Width of inner content\n   */\n  @Prop() contentWidth = 0;\n  /**\n   * Height of inner content\n   */\n  @Prop() contentHeight = 0;\n\n  @Prop() colType!: DimensionCols | 'rowHeaders';\n\n  /**\n   * Before scroll event\n   */\n  @Event({ eventName: 'scrollviewport', bubbles: true })\n  scrollViewport: EventEmitter<ViewPortScrollEvent>;\n  /**\n   * Viewport resize\n   */\n  @Event({ eventName: 'resizeviewport' })\n  resizeViewport: EventEmitter<ViewPortResizeEvent>;\n\n  /**\n   * Triggered on scroll change, can be used to get information about scroll visibility\n   */\n  @Event() scrollchange: EventEmitter<{\n    type: DimensionType;\n    hasScroll: boolean;\n  }>;\n\n  /**\n   * Silently scroll to coordinate\n   * Made to align negative coordinates for mobile devices\n   */\n  @Event({ eventName: 'scrollviewportsilent' })\n  silentScroll: EventEmitter<ViewPortScrollEvent>;\n\n  @Element() horizontalScroll: HTMLElement;\n\n  private verticalScroll?: HTMLElement;\n  private header?: HTMLElement;\n  private footer?: HTMLElement;\n\n  /**\n   * Static functions to bind wheel change\n   */\n  private horizontalMouseWheel: (e: Partial<LocalScrollEvent>) => void;\n  private verticalMouseWheel: (e: Partial<LocalScrollEvent>) => void;\n\n  private resizeService?: GridResizeService;\n  private localScrollService: LocalScrollService;\n  private localScrollTimer: LocalScrollTimer;\n\n  @Method() async setScroll(e: ViewPortScrollEvent) {\n    this.localScrollTimer.latestScrollUpdate(e.dimension);\n    this.localScrollService?.setScroll(e);\n  }\n\n  /**\n   * update on delta in case we don't know existing position or external change\n   * @param e\n   */\n  @Method() async changeScroll(e: ViewPortScrollEvent, silent = false) {\n    if (silent) {\n      if (e.coordinate && this.verticalScroll) {\n        switch (e.dimension) {\n          // for mobile devices to skip negative scroll loop. only on vertical scroll\n          case 'rgRow':\n            this.verticalScroll.style.transform = `translateY(${-1 * e.coordinate}px)`;\n            break;\n        }\n      }\n      return;\n    }\n    if (e.delta) {\n      switch (e.dimension) {\n        case 'rgCol':\n          e.coordinate = this.horizontalScroll.scrollLeft + e.delta;\n          break;\n        case 'rgRow':\n          e.coordinate = (this.verticalScroll?.scrollTop ?? 0) + e.delta;\n          break;\n      }\n      this.setScroll(e);\n    }\n    return e;\n  }\n\n  /**\n   * Dispatch this event to trigger vertical mouse wheel from plugins\n   */\n  @Listen('mousewheel-vertical') mousewheelVertical({\n    detail: e,\n  }: CustomEvent<LocalScrollEvent>) {\n    this.verticalMouseWheel(e);\n  }\n  /**\n   * Dispatch this event to trigger horizontal mouse wheel from plugins\n   */\n  @Listen('mousewheel-horizontal') mousewheelHorizontal({\n    detail: e,\n  }: CustomEvent<LocalScrollEvent>) {\n    this.horizontalMouseWheel(e);\n  }\n  /**\n   * Allows to use outside listener\n   */\n  @Listen('scroll-coordinate') scrollApply({\n    detail: { type, coordinate },\n  }: CustomEvent<ScrollCoordinateEvent>) {\n    this.applyOnScroll(type, coordinate, true);\n  }\n\n  connectedCallback() {\n    /**\n     * Bind scroll functions for farther usage\n     */\n    // allow mousewheel for all devices including mobile\n    this.verticalMouseWheel = this.onVerticalMouseWheel.bind(\n      this,\n      'rgRow',\n      'deltaY',\n    );\n    this.horizontalMouseWheel = this.onHorizontalMouseWheel.bind(\n      this,\n      'rgCol',\n      'deltaX',\n    );\n    this.localScrollTimer = new LocalScrollTimer(\n      'ontouchstart' in document.documentElement ? 0 : 10,\n    );\n    /**\n     * Create local scroll service\n     */\n    this.localScrollService = new LocalScrollService({\n      // to improve safari smoothnes on scroll\n      // skipAnimationFrame: isSafariDesktop(),\n      runScroll: e => this.scrollViewport.emit(e),\n      applyScroll: e => {\n        this.localScrollTimer.setCoordinate(e);\n        switch (e.dimension) {\n          case 'rgCol':\n            // this will trigger on scroll event\n            this.horizontalScroll.scrollLeft = e.coordinate;\n            break;\n          case 'rgRow':\n            if (this.verticalScroll) {\n              // this will trigger on scroll event\n              this.verticalScroll.scrollTop = e.coordinate;\n              // for mobile devices to skip negative scroll loop. only on vertical scroll\n              if (this.verticalScroll.style.transform) {\n                this.verticalScroll.style.transform = '';\n              }\n            }\n            break;\n        }\n      },\n    });\n  }\n\n  componentDidLoad() {\n    // track horizontal viewport resize\n    this.resizeService = new GridResizeService(\n      this.horizontalScroll,\n      (entry, previousSize) => {\n        const els: Partial<\n          Record<\n            DimensionType,\n            {\n              size: number;\n              contentSize: number;\n              scroll: number;\n              noScroll: boolean;\n            }\n          >\n        > = {};\n        if (entry.height !== previousSize.height) {\n          let height = entry.height || 0;\n          if (height) {\n            height -=\n              (this.header?.clientHeight ?? 0) +\n              (this.footer?.clientHeight ?? 0);\n          }\n          els.rgRow = {\n            size: height,\n            contentSize: this.contentHeight,\n            scroll: this.verticalScroll?.scrollTop ?? 0,\n            noScroll: false,\n          };\n        }\n        if (entry.width !== previousSize.width) {\n          els.rgCol = {\n            size: entry.width || 0,\n            contentSize: this.contentWidth,\n            scroll: this.horizontalScroll.scrollLeft,\n            noScroll: this.colType !== 'rgCol',\n          };\n        }\n\n        for (const [dim, item] of Object.entries(els)) {\n          const dimension = dim as DimensionType;\n          this.resizeViewport.emit({\n            dimension,\n            size: item.size,\n            rowHeader: this.rowHeader,\n          });\n          if (item.noScroll) {\n            continue;\n          }\n          this.localScrollService?.scroll(item.scroll ?? 0, dimension, true);\n          // track scroll visibility on outer element change\n          this.setScrollVisibility(dimension, item.size, item.contentSize);\n        }\n      },\n    );\n  }\n\n  /**\n   * Check if scroll present or not per type\n   * Trigger this method on inner content size change or on outer element size change\n   * If inner content bigger then outer size then scroll is present and mousewheel binding required\n   * @param type - dimension type 'rgRow/y' or 'rgCol/x'\n   * @param size - outer content size\n   * @param innerContentSize - inner content size\n   */\n  setScrollVisibility(\n    type: DimensionType,\n    size: number,\n    innerContentSize: number,\n  ) {\n    // test if scroll present\n    const hasScroll = size < innerContentSize;\n    let el: HTMLElement | undefined;\n    // event reference for binding\n    switch (type) {\n      case 'rgCol':\n        el = this.horizontalScroll;\n        break;\n      case 'rgRow':\n        el = this.verticalScroll;\n        break;\n    }\n    // based on scroll visibility assign or remove class and event\n    if (hasScroll) {\n      el?.classList.add(`scroll-${type}`);\n    } else {\n      el?.classList.remove(`scroll-${type}`);\n    }\n    this.scrollchange.emit({ type, hasScroll });\n  }\n\n  disconnectedCallback() {\n    this.resizeService?.destroy();\n  }\n\n  async componentDidRender() {\n    this.localScrollService.setParams(\n      {\n        contentSize: this.contentHeight,\n        clientSize: this.verticalScroll?.clientHeight ?? 0,\n        virtualSize: 0,\n      },\n      'rgRow',\n    );\n\n    this.localScrollService.setParams(\n      {\n        contentSize: this.contentWidth,\n        clientSize: this.horizontalScroll.clientWidth,\n        virtualSize: 0,\n      },\n      'rgCol',\n    );\n    this.setScrollVisibility(\n      'rgRow',\n      this.verticalScroll?.clientHeight ?? 0,\n      this.contentHeight,\n    );\n    this.setScrollVisibility(\n      'rgCol',\n      this.horizontalScroll.clientWidth,\n      this.contentWidth,\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        onWheel={this.horizontalMouseWheel}\n        onScroll={(e: UIEvent) => this.applyScroll('rgCol', e)}\n      >\n        <div\n          class=\"inner-content-table\"\n          style={{ width: `${this.contentWidth}px` }}\n        >\n          <div class=\"header-wrapper\" ref={e => (this.header = e)}>\n            <slot name={HEADER_SLOT} />\n          </div>\n          <div\n            class=\"vertical-inner\"\n            ref={el => (this.verticalScroll = el)}\n            onWheel={this.verticalMouseWheel}\n            onScroll={(e: MouseEvent) => this.applyScroll('rgRow', e)}\n          >\n            <div\n              class=\"content-wrapper\"\n              style={{ height: `${this.contentHeight}px` }}\n            >\n              <slot name={CONTENT_SLOT} />\n            </div>\n          </div>\n          <div class=\"footer-wrapper\" ref={e => (this.footer = e)}>\n            <slot name={FOOTER_SLOT} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  /**\n   * Extra layer for scroll event monitoring, where MouseWheel event is not passing\n   * We need to trigger scroll event in case there is no mousewheel event\n   */\n  @Method() async applyScroll(type: DimensionType, e: UIEvent) {\n    if (!(e.target instanceof HTMLElement)) {\n      return;\n    }\n    let scroll = 0;\n    switch (type) {\n      case 'rgCol':\n        scroll = e.target.scrollLeft;\n        break;\n      case 'rgRow':\n        scroll = e.target.scrollTop;\n        break;\n    }\n\n    // for mobile devices to skip negative scroll loop\n    if (scroll < 0) {\n      this.silentScroll.emit({ dimension: type, coordinate: scroll });\n      return;\n    }\n    this.applyOnScroll(type, scroll);\n  }\n\n  /**\n   * Applies change on scroll event only if mousewheel event happened some time ago\n   */\n  private applyOnScroll(\n    type: DimensionType,\n    coordinate: number,\n    outside = false,\n  ) {\n    // apply after throttling\n    if (this.localScrollTimer.isReady(type, coordinate)) {\n      this.localScrollService?.scroll(\n        coordinate,\n        type,\n        undefined,\n        undefined,\n        outside,\n      );\n    }\n  }\n\n  /**\n   * On vertical mousewheel event\n   * @param type\n   * @param delta\n   * @param e\n   */\n  private onVerticalMouseWheel(\n    type: DimensionType,\n    delta: Delta,\n    e: LocalScrollEvent,\n  ) {\n    const scrollTop = this.verticalScroll?.scrollTop ?? 0;\n    const clientHeight = this.verticalScroll?.clientHeight ?? 0;\n    const scrollHeight = this.verticalScroll?.scrollHeight ?? 0;\n\n    // Detect if the user has reached the bottom\n    const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;\n    const atTop = scrollTop === 0 && e.deltaY < 0;\n    if (!atBottom && !atTop) {\n      e.preventDefault?.();\n    }\n    const pos = scrollTop + e[delta];\n    this.localScrollService?.scroll(pos, type, undefined, e[delta]);\n    this.localScrollTimer.latestScrollUpdate(type);\n  }\n\n  /**\n   * On horizontal mousewheel event\n   * @param type\n   * @param delta\n   * @param e\n   */\n  private onHorizontalMouseWheel(\n    type: DimensionType,\n    delta: Delta,\n    e: LocalScrollEvent,\n  ) {\n    if (!e.deltaX) {\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;\n\n    // Detect if the user has reached the right end\n    const atRight = scrollLeft + clientWidth >= scrollWidth && e.deltaX > 0;\n\n    // Detect if the user has reached the left end\n    const atLeft = scrollLeft === 0 && e.deltaX < 0;\n    if (!atRight && !atLeft) {\n      e.preventDefault?.();\n    }\n    const pos = scrollLeft + e[delta];\n    this.localScrollService?.scroll(pos, type, undefined, e[delta]);\n    this.localScrollTimer.latestScrollUpdate(type);\n  }\n}\n"]}
+{"version":3,"file":"revogr-viewport-scroll.js","sourceRoot":"","sources":["../../../src/components/scroll/revogr-viewport-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Element,\n  Prop,\n  Host,\n  Listen,\n} from '@stencil/core';\n\nimport GridResizeService from '../revoGrid/viewport.resize.service';\nimport LocalScrollService from '../../services/local.scroll.service';\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\nimport {\n  CONTENT_SLOT,\n  FOOTER_SLOT,\n  HEADER_SLOT,\n} from '../revoGrid/viewport.helpers';\nimport type {\n  DimensionCols,\n  DimensionType,\n  ElementScroll,\n  ScrollCoordinateEvent,\n  ViewPortResizeEvent,\n  ViewPortScrollEvent,\n} from '@type';\n\ntype Delta = 'deltaX' | 'deltaY';\ntype LocalScrollEvent = {\n  preventDefault(): void;\n} & { [x in Delta]: number };\n\n/**\n * Viewport scroll component for RevoGrid\n * @slot - content\n * @slot header - header\n * @slot footer - footer\n */\n@Component({\n  tag: 'revogr-viewport-scroll',\n  styleUrl: 'revogr-viewport-scroll-style.scss',\n})\nexport class RevogrViewportScroll implements ElementScroll {\n  /**\n   * Enable row header\n   */\n  @Prop() readonly rowHeader: boolean;\n\n  /**\n   * Width of inner content\n   */\n  @Prop() contentWidth = 0;\n  /**\n   * Height of inner content\n   */\n  @Prop() contentHeight = 0;\n\n  @Prop() colType!: DimensionCols | 'rowHeaders';\n\n  /**\n   * Before scroll event\n   */\n  @Event({ eventName: 'scrollviewport', bubbles: true })\n  scrollViewport: EventEmitter<ViewPortScrollEvent>;\n  /**\n   * Viewport resize\n   */\n  @Event({ eventName: 'resizeviewport' })\n  resizeViewport: EventEmitter<ViewPortResizeEvent>;\n\n  /**\n   * Triggered on scroll change, can be used to get information about scroll visibility\n   */\n  @Event() scrollchange: EventEmitter<{\n    type: DimensionType;\n    hasScroll: boolean;\n  }>;\n\n  /**\n   * Silently scroll to coordinate\n   * Made to align negative coordinates for mobile devices\n   */\n  @Event({ eventName: 'scrollviewportsilent' })\n  silentScroll: EventEmitter<ViewPortScrollEvent>;\n\n  @Element() horizontalScroll: HTMLElement;\n\n  private verticalScroll?: HTMLElement;\n  private header?: HTMLElement;\n  private footer?: HTMLElement;\n\n  /**\n   * Static functions to bind wheel change\n   */\n  private horizontalMouseWheel: (e: Partial<LocalScrollEvent>) => void;\n  private verticalMouseWheel: (e: Partial<LocalScrollEvent>) => void;\n\n  private resizeService?: GridResizeService;\n  private localScrollService: LocalScrollService;\n  private localScrollTimer: LocalScrollTimer;\n\n  @Method() async setScroll(e: ViewPortScrollEvent) {\n    this.localScrollTimer.latestScrollUpdate(e.dimension);\n    this.localScrollService?.setScroll(e);\n  }\n\n  /**\n   * update on delta in case we don't know existing position or external change\n   * @param e\n   */\n  @Method() async changeScroll(e: ViewPortScrollEvent, silent = false) {\n    if (silent) {\n      if (e.coordinate && this.verticalScroll) {\n        switch (e.dimension) {\n          // for mobile devices to skip negative scroll loop. only on vertical scroll\n          case 'rgRow':\n            this.verticalScroll.style.transform = `translateY(${-1 * e.coordinate}px)`;\n            break;\n        }\n      }\n      return;\n    }\n    if (e.delta) {\n      switch (e.dimension) {\n        case 'rgCol':\n          e.coordinate = this.horizontalScroll.scrollLeft + e.delta;\n          break;\n        case 'rgRow':\n          e.coordinate = (this.verticalScroll?.scrollTop ?? 0) + e.delta;\n          break;\n      }\n      this.setScroll(e);\n    }\n    return e;\n  }\n\n  /**\n   * Dispatch this event to trigger vertical mouse wheel from plugins\n   */\n  @Listen('mousewheel-vertical') mousewheelVertical({\n    detail: e,\n  }: CustomEvent<LocalScrollEvent>) {\n    this.verticalMouseWheel(e);\n  }\n  /**\n   * Dispatch this event to trigger horizontal mouse wheel from plugins\n   */\n  @Listen('mousewheel-horizontal') mousewheelHorizontal({\n    detail: e,\n  }: CustomEvent<LocalScrollEvent>) {\n    this.horizontalMouseWheel(e);\n  }\n  /**\n   * Allows to use outside listener\n   */\n  @Listen('scroll-coordinate') scrollApply({\n    detail: { type, coordinate },\n  }: CustomEvent<ScrollCoordinateEvent>) {\n    this.applyOnScroll(type, coordinate, true);\n  }\n\n  connectedCallback() {\n    /**\n     * Bind scroll functions for farther usage\n     */\n    // allow mousewheel for all devices including mobile\n    this.verticalMouseWheel = this.onVerticalMouseWheel.bind(\n      this,\n      'rgRow',\n      'deltaY',\n    );\n    this.horizontalMouseWheel = this.onHorizontalMouseWheel.bind(\n      this,\n      'rgCol',\n      'deltaX',\n    );\n    this.localScrollTimer = new LocalScrollTimer(\n      'ontouchstart' in document.documentElement ? 0 : 10,\n    );\n    /**\n     * Create local scroll service\n     */\n    this.localScrollService = new LocalScrollService({\n      // to improve safari smoothnes on scroll\n      // skipAnimationFrame: isSafariDesktop(),\n      runScroll: e => this.scrollViewport.emit(e),\n      applyScroll: e => {\n        this.localScrollTimer.setCoordinate(e);\n        switch (e.dimension) {\n          case 'rgCol':\n            // this will trigger on scroll event\n            this.horizontalScroll.scrollLeft = e.coordinate;\n            break;\n          case 'rgRow':\n            if (this.verticalScroll) {\n              // this will trigger on scroll event\n              this.verticalScroll.scrollTop = e.coordinate;\n              // for mobile devices to skip negative scroll loop. only on vertical scroll\n              if (this.verticalScroll.style.transform) {\n                this.verticalScroll.style.transform = '';\n              }\n            }\n            break;\n        }\n      },\n    });\n  }\n\n  componentDidLoad() {\n    // track horizontal viewport resize\n    this.resizeService = new GridResizeService(\n      this.horizontalScroll,\n      (entry, previousSize) => {\n        const els: Partial<\n          Record<\n            DimensionType,\n            {\n              size: number;\n              contentSize: number;\n              scroll: number;\n              noScroll: boolean;\n            }\n          >\n        > = {};\n\n        let calculatedHeight = 0;\n        if (entry.height !== previousSize.height) {\n          calculatedHeight = entry.height || 0;\n          if (calculatedHeight) {\n            calculatedHeight -=\n              (this.header?.clientHeight ?? 0) +\n              (this.footer?.clientHeight ?? 0);\n          }\n\n          els.rgRow = {\n            size: calculatedHeight,\n            contentSize: this.contentHeight,\n            scroll: this.verticalScroll?.scrollTop ?? 0,\n            noScroll: false,\n          };\n        }\n        let calculatedWidth = 0;\n        if (entry.width !== previousSize.width) {\n          calculatedWidth = entry.width || 0;\n          els.rgCol = {\n            size: calculatedWidth,\n            contentSize: this.contentWidth,\n            scroll: this.horizontalScroll.scrollLeft,\n            noScroll: this.colType !== 'rgCol',\n          };\n        }\n\n        // Process changes in order: width first, then height\n        const dimensions: DimensionType[] = ['rgCol', 'rgRow'];\n        for (const dimension of dimensions) {\n          const item = els[dimension];\n          if (!item) continue;\n          this.resizeViewport.emit({\n            dimension,\n            size: item.size,\n            rowHeader: this.rowHeader,\n          });\n          if (item.noScroll) {\n            continue;\n          }\n          this.localScrollService?.scroll(item.scroll ?? 0, dimension, true);\n          // track scroll visibility on outer element change\n          this.setScrollVisibility(dimension, item.size, item.contentSize);\n        }\n      },\n    );\n  }\n\n  /**\n   * Check if scroll present or not per type\n   * Trigger this method on inner content size change or on outer element size change\n   * If inner content bigger then outer size then scroll is present and mousewheel binding required\n   * @param type - dimension type 'rgRow/y' or 'rgCol/x'\n   * @param size - outer content size\n   * @param innerContentSize - inner content size\n   */\n  setScrollVisibility(\n    type: DimensionType,\n    size: number,\n    innerContentSize: number,\n  ) {\n    // test if scroll present\n    const hasScroll = size < innerContentSize;\n    let el: HTMLElement | undefined;\n    // event reference for binding\n    switch (type) {\n      case 'rgCol':\n        el = this.horizontalScroll;\n        break;\n      case 'rgRow':\n        el = this.verticalScroll;\n        break;\n    }\n    // based on scroll visibility assign or remove class and event\n    if (hasScroll) {\n      el?.classList.add(`scroll-${type}`);\n    } else {\n      el?.classList.remove(`scroll-${type}`);\n    }\n    this.scrollchange.emit({ type, hasScroll });\n  }\n\n  disconnectedCallback() {\n    this.resizeService?.destroy();\n  }\n\n  async componentDidRender() {\n    this.localScrollService.setParams(\n      {\n        contentSize: this.contentHeight,\n        clientSize: this.verticalScroll?.clientHeight ?? 0,\n        virtualSize: 0,\n      },\n      'rgRow',\n    );\n\n    this.localScrollService.setParams(\n      {\n        contentSize: this.contentWidth,\n        clientSize: this.horizontalScroll.clientWidth,\n        virtualSize: 0,\n      },\n      'rgCol',\n    );\n    this.setScrollVisibility(\n      'rgRow',\n      this.verticalScroll?.clientHeight ?? 0,\n      this.contentHeight,\n    );\n    this.setScrollVisibility(\n      'rgCol',\n      this.horizontalScroll.clientWidth,\n      this.contentWidth,\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        onWheel={this.horizontalMouseWheel}\n        onScroll={(e: UIEvent) => this.applyScroll('rgCol', e)}\n      >\n        <div\n          class=\"inner-content-table\"\n          style={{ width: `${this.contentWidth}px` }}\n        >\n          <div class=\"header-wrapper\" ref={e => (this.header = e)}>\n            <slot name={HEADER_SLOT} />\n          </div>\n          <div\n            class=\"vertical-inner\"\n            ref={el => (this.verticalScroll = el)}\n            onWheel={this.verticalMouseWheel}\n            onScroll={(e: MouseEvent) => this.applyScroll('rgRow', e)}\n          >\n            <div\n              class=\"content-wrapper\"\n              style={{ height: `${this.contentHeight}px` }}\n            >\n              <slot name={CONTENT_SLOT} />\n            </div>\n          </div>\n          <div class=\"footer-wrapper\" ref={e => (this.footer = e)}>\n            <slot name={FOOTER_SLOT} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  /**\n   * Extra layer for scroll event monitoring, where MouseWheel event is not passing\n   * We need to trigger scroll event in case there is no mousewheel event\n   */\n  @Method() async applyScroll(type: DimensionType, e: UIEvent) {\n    if (!(e.target instanceof HTMLElement)) {\n      return;\n    }\n    let scroll = 0;\n    switch (type) {\n      case 'rgCol':\n        scroll = e.target.scrollLeft;\n        break;\n      case 'rgRow':\n        scroll = e.target.scrollTop;\n        break;\n    }\n\n    // for mobile devices to skip negative scroll loop\n    if (scroll < 0) {\n      this.silentScroll.emit({ dimension: type, coordinate: scroll });\n      return;\n    }\n    this.applyOnScroll(type, scroll);\n  }\n\n  /**\n   * Applies change on scroll event only if mousewheel event happened some time ago\n   */\n  private applyOnScroll(\n    type: DimensionType,\n    coordinate: number,\n    outside = false,\n  ) {\n    const lastScrollUpdate = () => {\n      this.localScrollService?.scroll(\n        coordinate,\n        type,\n        undefined,\n        undefined,\n        outside,\n      );\n    };\n    // apply after throttling\n    if (this.localScrollTimer.isReady(type, coordinate)) {\n      lastScrollUpdate();\n    } else {\n      this.localScrollTimer.throttleLastScrollUpdate(type, coordinate, () => lastScrollUpdate());\n    }\n  }\n\n  /**\n   * On vertical mousewheel event\n   * @param type\n   * @param delta\n   * @param e\n   */\n  private onVerticalMouseWheel(\n    type: DimensionType,\n    delta: Delta,\n    e: LocalScrollEvent,\n  ) {\n    const scrollTop = this.verticalScroll?.scrollTop ?? 0;\n    const clientHeight = this.verticalScroll?.clientHeight ?? 0;\n    const scrollHeight = this.verticalScroll?.scrollHeight ?? 0;\n\n    // Detect if the user has reached the bottom\n    const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;\n    const atTop = scrollTop === 0 && e.deltaY < 0;\n    if (!atBottom && !atTop) {\n      e.preventDefault?.();\n    }\n    const pos = scrollTop + e[delta];\n    this.localScrollService?.scroll(pos, type, undefined, e[delta]);\n    this.localScrollTimer.latestScrollUpdate(type);\n  }\n\n  /**\n   * On horizontal mousewheel event\n   * @param type\n   * @param delta\n   * @param e\n   */\n  private onHorizontalMouseWheel(\n    type: DimensionType,\n    delta: Delta,\n    e: LocalScrollEvent,\n  ) {\n    if (!e.deltaX) {\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;\n\n    // Detect if the user has reached the right end\n    const atRight = scrollLeft + clientWidth >= scrollWidth && e.deltaX > 0;\n\n    // Detect if the user has reached the left end\n    const atLeft = scrollLeft === 0 && e.deltaX < 0;\n    if (!atRight && !atLeft) {\n      e.preventDefault?.();\n    }\n    const pos = scrollLeft + e[delta];\n    this.localScrollService?.scroll(pos, type, undefined, e[delta]);\n    this.localScrollTimer.latestScrollUpdate(type);\n  }\n}\n"]}

package/dist/collection/components/scrollable/revogr-scroll-virtual.js

@@ -13,8 +13,9 @@ export class RevogrScrollVirtual {
     constructor() {
         this.scrollSize = 0;
         this.dimension = 'rgRow';
-        this.viewportStore = undefined;
-        this.dimensionStore = undefined;
+        this.realSize = undefined;
+        this.virtualSize = undefined;
+        this.clientSize = undefined;
     }
     async setScroll(e) {
         var _a;
@@ -26,8 +27,8 @@ export class RevogrScrollVirtual {
         if (e.coordinate) {
             this.autohideScrollPlugin.checkScroll({
                 scrollSize: this.scrollSize,
-                contentSize: this.dimensionStore.get('realSize'),
-                virtualSize: this.viewportStore.get('virtualSize'),
+                contentSize: this.realSize,
+                virtualSize: this.virtualSize,
             });
         }
     }
@@ -48,20 +49,6 @@ export class RevogrScrollVirtual {
         }
         return e;
     }
-    set size(s) {
-        this.autohideScrollPlugin.setScrollSize(s);
-        if (this.dimension === 'rgRow') {
-            this.element.style.minWidth = `${s}px`;
-            return;
-        }
-        this.element.style.minHeight = `${s}px`;
-    }
-    get size() {
-        if (this.dimension === 'rgRow') {
-            return this.element.clientHeight;
-        }
-        return this.element.clientWidth;
-    }
     connectedCallback() {
         this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);
         this.localScrollTimer = new LocalScrollTimer('ontouchstart' in document.documentElement ? 0 : 10);
@@ -82,37 +69,23 @@ export class RevogrScrollVirtual {
         this.scrollSize = getScrollbarSize(document);
     }
     componentDidRender() {
-        const type = this.dimension === 'rgRow' ? 'scrollHeight' : 'scrollWidth';
-        // Get scrollbar size once during component initialization
-        const scrollbarSize = this.scrollSize;
-        // Calculate if content exceeds viewport size
-        // Add scrollbar size to the comparison to account for other dimension's scrollbar
-        const hasScroll = this.element[type] > this.size + scrollbarSize;
-        // Set scroll size based on whether scroll is needed
-        this.size = hasScroll ? this.scrollSize : 0;
-        let additionalScrollbarSize = 0;
+        let scrollSize = 0;
         if (this.dimension === 'rgRow') {
-            additionalScrollbarSize =
-                this.element.scrollWidth > this.element.clientWidth
-                    ? scrollbarSize
-                    : 0;
+            scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;
+            this.element.style.minWidth = `${scrollSize}px`;
         }
         else {
-            additionalScrollbarSize =
-                this.element.scrollHeight > this.element.clientHeight
-                    ? scrollbarSize
-                    : 0;
+            scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;
+            this.element.style.minHeight = `${scrollSize}px`;
         }
-        const clientSize = this.size + additionalScrollbarSize;
+        this.autohideScrollPlugin.setScrollSize(scrollSize);
         this.localScrollService.setParams({
-            contentSize: this.dimensionStore.get('realSize'),
-            // Add scrollbar size to clientSize if other dimension has scroll
-            clientSize,
-            virtualSize: this.viewportStore.get('clientSize'),
+            contentSize: this.realSize,
+            clientSize: this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth,
+            virtualSize: this.clientSize,
         }, this.dimension);
     }
     onScroll(e) {
-        var _a;
         if (!(e.target instanceof Element)) {
             return;
         }
@@ -121,16 +94,22 @@ export class RevogrScrollVirtual {
         if (this.dimension === 'rgRow') {
             type = 'scrollTop';
         }
-        // apply after throttling
-        if (this.localScrollTimer.isReady(this.dimension, target[type] || 0)) {
+        const setScroll = () => {
+            var _a;
             (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(target[type] || 0, this.dimension);
+        };
+        // apply after throttling
+        if (this.localScrollTimer.isReady(this.dimension, target[type])) {
+            setScroll();
+        }
+        else {
+            this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());
         }
     }
     render() {
-        const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize'));
-        return (h(Host, { key: '94ccf82880ca9a3b0b1a87e94553f3c6ea6e885a', onScroll: (e) => this.onScroll(e) }, h("div", { key: '3518b4db297114195e4ef9bd3555d08bae08daa9', style: {
-                [sizeType]: `${size}px`,
+        const size = getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
+        return (h(Host, { key: '57f81ec9deb2395e96b283338c03b9ad44f1e929', onScroll: (e) => this.onScroll(e) }, h("div", { key: '1a8c869adab53b362c351dae8d53664f33c4212c', style: {
+                [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
             } })));
     }
     static get is() { return "revogr-scroll-virtual"; }
@@ -172,61 +151,62 @@ export class RevogrScrollVirtual {
                 "reflect": false,
                 "defaultValue": "'rgRow'"
             },
-            "viewportStore": {
-                "type": "unknown",
+            "realSize": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "Observable<ViewportState>",
-                    "resolved": "ObservableMap<ViewportState>",
-                    "references": {
-                        "Observable": {
-                            "location": "import",
-                            "path": "../../utils",
-                            "id": "src/utils/index.ts::Observable"
-                        },
-                        "ViewportState": {
-                            "location": "import",
-                            "path": "@type",
-                            "id": "src/types/index.ts::ViewportState"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimensions"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "real-size",
+                "reflect": false
+            },
+            "virtualSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Viewport"
+                    "text": "Virtual size"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "attribute": "virtual-size",
+                "reflect": false
             },
-            "dimensionStore": {
-                "type": "unknown",
+            "clientSize": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "Observable<DimensionSettingsState>",
-                    "resolved": "ObservableMap<DimensionSettingsState>",
-                    "references": {
-                        "Observable": {
-                            "location": "import",
-                            "path": "../../utils",
-                            "id": "src/utils/index.ts::Observable"
-                        },
-                        "DimensionSettingsState": {
-                            "location": "import",
-                            "path": "@type",
-                            "id": "src/types/index.ts::DimensionSettingsState"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Dimensions"
+                    "text": "Client size"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "attribute": "client-size",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/scrollable/revogr-scroll-virtual.js.map

@@ -1 +1 @@
-{"version":3,"file":"revogr-scroll-virtual.js","sourceRoot":"","sources":["../../../src/components/scrollable/revogr-scroll-virtual.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element as StencilElement,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport LocalScrollService, {\n  getContentSize,\n} from '../../services/local.scroll.service';\nimport type {\n  DimensionType,\n  ViewportState,\n  DimensionSettingsState,\n  ViewPortScrollEvent,\n} from '@type';\nimport { AutohideScrollPlugin } from './autohide-scroll.plugin';\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\nimport { type Observable, getScrollbarSize } from '../../utils';\n\n/**\n * Virtual scroll component\n */\n@Component({\n  tag: 'revogr-scroll-virtual',\n  styleUrl: 'revogr-scroll-style.scss',\n})\nexport class RevogrScrollVirtual {\n  /**\n   * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)\n   */\n  @Prop() dimension: DimensionType = 'rgRow';\n\n  /**\n   * Viewport\n   */\n  @Prop() viewportStore!: Observable<ViewportState>;\n  /**\n   * Dimensions\n   */\n  @Prop() dimensionStore!: Observable<DimensionSettingsState>;\n\n  /**\n   * Scroll event\n   */\n  @Event({ eventName: 'scrollvirtual' })\n  scrollVirtual: EventEmitter<ViewPortScrollEvent>;\n\n  @StencilElement() element: HTMLElement;\n  private autohideScrollPlugin: AutohideScrollPlugin;\n  private scrollSize = 0;\n  private localScrollService: LocalScrollService;\n  private localScrollTimer: LocalScrollTimer;\n\n  @Method()\n  async setScroll(e: ViewPortScrollEvent): Promise<void> {\n    if (this.dimension !== e.dimension) {\n      return;\n    }\n    this.localScrollTimer.latestScrollUpdate(e.dimension);\n    this.localScrollService?.setScroll(e);\n    if (e.coordinate) {\n      this.autohideScrollPlugin.checkScroll({\n        scrollSize: this.scrollSize,\n        contentSize: this.dimensionStore.get('realSize'),\n        virtualSize: this.viewportStore.get('virtualSize'),\n      });\n    }\n  }\n\n  /**\n   * Update if `delta` exists in case we don't know current position or if it's external change\n   */\n  @Method()\n  async changeScroll(e: ViewPortScrollEvent): Promise<ViewPortScrollEvent> {\n    if (e.delta) {\n      switch (e.dimension) {\n        case 'rgCol':\n          e.coordinate = this.element.scrollLeft + e.delta;\n          break;\n        case 'rgRow':\n          e.coordinate = this.element.scrollTop + e.delta;\n          break;\n      }\n      this.setScroll(e);\n    }\n    return e;\n  }\n\n  set size(s: number) {\n    this.autohideScrollPlugin.setScrollSize(s);\n    if (this.dimension === 'rgRow') {\n      this.element.style.minWidth = `${s}px`;\n      return;\n    }\n    this.element.style.minHeight = `${s}px`;\n  }\n\n  get size(): number {\n    if (this.dimension === 'rgRow') {\n      return this.element.clientHeight;\n    }\n    return this.element.clientWidth;\n  }\n\n  connectedCallback() {\n    this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);\n    this.localScrollTimer = new LocalScrollTimer(\n      'ontouchstart' in document.documentElement ? 0 : 10,\n    );\n    this.localScrollService = new LocalScrollService({\n      runScroll: e => this.scrollVirtual.emit(e),\n      applyScroll: e => {\n        this.localScrollTimer.setCoordinate(e);\n        const type = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';\n        // this will trigger on scroll event\n        this.element[type] = e.coordinate;\n      },\n    });\n  }\n\n  disconnectedCallback() {\n    this.autohideScrollPlugin.clear();\n  }\n\n  componentWillLoad() {\n    this.scrollSize = getScrollbarSize(document);\n  }\n\n  componentDidRender() {\n    const type = this.dimension === 'rgRow' ? 'scrollHeight' : 'scrollWidth';\n    // Get scrollbar size once during component initialization\n    const scrollbarSize = this.scrollSize;\n    // Calculate if content exceeds viewport size\n    // Add scrollbar size to the comparison to account for other dimension's scrollbar\n    const hasScroll = this.element[type] > this.size + scrollbarSize;\n    // Set scroll size based on whether scroll is needed\n    this.size = hasScroll ? this.scrollSize : 0;\n\n    let additionalScrollbarSize = 0;\n    if (this.dimension === 'rgRow') {\n      additionalScrollbarSize =\n        this.element.scrollWidth > this.element.clientWidth\n          ? scrollbarSize\n          : 0;\n    } else {\n      additionalScrollbarSize =\n        this.element.scrollHeight > this.element.clientHeight\n          ? scrollbarSize\n          : 0;\n    }\n\n    const clientSize = this.size + additionalScrollbarSize;\n\n    this.localScrollService.setParams(\n      {\n        contentSize: this.dimensionStore.get('realSize'),\n        // Add scrollbar size to clientSize if other dimension has scroll\n        clientSize,\n        virtualSize: this.viewportStore.get('clientSize'),\n      },\n      this.dimension,\n    );\n  }\n\n  onScroll(e: MouseEvent) {\n    if (!(e.target instanceof Element)) {\n      return;\n    }\n    const target = e.target;\n    let type: 'scrollLeft' | 'scrollTop' = 'scrollLeft';\n    if (this.dimension === 'rgRow') {\n      type = 'scrollTop';\n    }\n    // apply after throttling\n    if (this.localScrollTimer.isReady(this.dimension, target[type] || 0)) {\n      this.localScrollService?.scroll(target[type] || 0, this.dimension);\n    }\n  }\n\n  render() {\n    const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';\n    const size = getContentSize(\n      this.dimensionStore.get('realSize'),\n      this.size,\n      this.viewportStore.get('clientSize'), // content viewport size\n    );\n    return (\n      <Host onScroll={(e: MouseEvent) => this.onScroll(e)}>\n        <div\n          style={{\n            [sizeType]: `${size}px`,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"revogr-scroll-virtual.js","sourceRoot":"","sources":["../../../src/components/scrollable/revogr-scroll-virtual.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element as StencilElement,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport LocalScrollService, {\n  getContentSize,\n} from '../../services/local.scroll.service';\nimport type {\n  DimensionType,\n  ViewPortScrollEvent,\n} from '@type';\nimport { AutohideScrollPlugin } from './autohide-scroll.plugin';\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\nimport { getScrollbarSize } from '../../utils';\n\n/**\n * Virtual scroll component\n */\n@Component({\n  tag: 'revogr-scroll-virtual',\n  styleUrl: 'revogr-scroll-style.scss',\n})\nexport class RevogrScrollVirtual {\n  /**\n   * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)\n   */\n  @Prop() dimension: DimensionType = 'rgRow';\n\n  /**\n   * Dimensions\n   */\n  @Prop() realSize!: number;\n\n  /**\n   * Virtual size\n   */\n  @Prop() virtualSize!: number;\n\n  /**\n   * Client size\n   */\n  @Prop() clientSize!: number;\n\n  /**\n   * Scroll event\n   */\n  @Event({ eventName: 'scrollvirtual' })\n  scrollVirtual: EventEmitter<ViewPortScrollEvent>;\n\n  @StencilElement() element: HTMLElement;\n  private autohideScrollPlugin: AutohideScrollPlugin;\n  private scrollSize = 0;\n  private localScrollService: LocalScrollService;\n  private localScrollTimer: LocalScrollTimer;\n\n  @Method()\n  async setScroll(e: ViewPortScrollEvent): Promise<void> {\n    if (this.dimension !== e.dimension) {\n      return;\n    }\n    this.localScrollTimer.latestScrollUpdate(e.dimension);\n    this.localScrollService?.setScroll(e);\n    if (e.coordinate) {\n      this.autohideScrollPlugin.checkScroll({\n        scrollSize: this.scrollSize,\n        contentSize: this.realSize,\n        virtualSize: this.virtualSize,\n      });\n    }\n  }\n\n  /**\n   * Update if `delta` exists in case we don't know current position or if it's external change\n   */\n  @Method()\n  async changeScroll(e: ViewPortScrollEvent): Promise<ViewPortScrollEvent> {\n    if (e.delta) {\n      switch (e.dimension) {\n        case 'rgCol':\n          e.coordinate = this.element.scrollLeft + e.delta;\n          break;\n        case 'rgRow':\n          e.coordinate = this.element.scrollTop + e.delta;\n          break;\n      }\n      this.setScroll(e);\n    }\n    return e;\n  }\n\n  connectedCallback() {\n    this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);\n    this.localScrollTimer = new LocalScrollTimer(\n      'ontouchstart' in document.documentElement ? 0 : 10,\n    );\n    this.localScrollService = new LocalScrollService({\n      runScroll: e => this.scrollVirtual.emit(e),\n      applyScroll: e => {\n        this.localScrollTimer.setCoordinate(e);\n        const type = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';\n        // this will trigger on scroll event\n        this.element[type] = e.coordinate;\n      },\n    });\n  }\n\n  disconnectedCallback() {\n    this.autohideScrollPlugin.clear();\n  }\n\n  componentWillLoad() {\n    this.scrollSize = getScrollbarSize(document);\n  }\n\n  componentDidRender() {\n    let scrollSize = 0;\n    if (this.dimension === 'rgRow') {\n      scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;\n      this.element.style.minWidth = `${scrollSize}px`;\n    } else {\n      scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;\n      this.element.style.minHeight = `${scrollSize}px`;\n    }\n    this.autohideScrollPlugin.setScrollSize(scrollSize);\n    this.localScrollService.setParams(\n      {\n        contentSize: this.realSize,\n        clientSize: this.dimension === 'rgRow' ?  this.element.clientHeight : this.element.clientWidth,\n        virtualSize: this.clientSize,\n      },\n      this.dimension,\n    );\n  }\n\n  onScroll(e: MouseEvent) {\n    if (!(e.target instanceof Element)) {\n      return;\n    }\n    const target = e.target;\n    let type: 'scrollLeft' | 'scrollTop' = 'scrollLeft';\n    if (this.dimension === 'rgRow') {\n      type = 'scrollTop';\n    }\n\n    const setScroll = () => {\n      this.localScrollService?.scroll(target[type] || 0, this.dimension);\n    };\n    // apply after throttling\n    if (this.localScrollTimer.isReady(this.dimension, target[type])) {\n      setScroll();\n    } else {\n      this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());\n    }\n  }\n\n  render() {\n    const size = getContentSize(\n      this.realSize,\n      this.dimension === 'rgRow' ?  this.element.clientHeight : this.element.clientWidth,\n      this.clientSize, // content viewport size\n    );\n    return (\n      <Host onScroll={(e: MouseEvent) => this.onScroll(e)}>\n        <div\n          style={{\n            [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/services/local.scroll.timer.js

@@ -19,6 +19,12 @@ export class LocalScrollTimer {
             rgCol: 0,
             rgRow: 0,
         };
+        /**
+         * Check if scroll is ready to accept new value
+         * this is an edge case for scroll events
+         * when we need to apply scroll after throttling
+         */
+        this.lastScrollUpdateCallbacks = {};
     }
     setCoordinate(e) {
         this.lastKnownScrollCoordinate[e.dimension] = e.coordinate;
@@ -29,14 +35,47 @@ export class LocalScrollTimer {
     latestScrollUpdate(dimension) {
         this.mouseWheelScrollTimestamp[dimension] = new Date().getTime();
     }
-    /**
-     * Check if scroll is ready to accept new value
-     */
     isReady(type, coordinate) {
-        const change = new Date().getTime() - this.mouseWheelScrollTimestamp[type];
+        // if there is a callback, clear it
+        if (this.lastScrollUpdateCallbacks[type]) {
+            this.clearLastScrollUpdate(type);
+        }
         // apply after throttling
-        return (change > this.scrollThrottling &&
-            coordinate !== this.lastKnownScrollCoordinate[type]);
+        return this.verifyChange(type, coordinate);
+    }
+    verifyChange(type, coordinate) {
+        const now = new Date().getTime();
+        const change = now - this.mouseWheelScrollTimestamp[type];
+        return change > this.scrollThrottling &&
+            coordinate !== this.lastKnownScrollCoordinate[type];
+    }
+    clearLastScrollUpdate(type) {
+        var _a, _b;
+        clearTimeout((_b = (_a = this.lastScrollUpdateCallbacks[type]) === null || _a === void 0 ? void 0 : _a.timeout) !== null && _b !== void 0 ? _b : 0);
+        delete this.lastScrollUpdateCallbacks[type];
+    }
+    throttleLastScrollUpdate(type, coordinate, lastScrollUpdate) {
+        // if scrollThrottling is set
+        // we need to throttle the last scroll event
+        if (this.scrollThrottling) {
+            this.clearLastScrollUpdate(type);
+            // save lastScrollUpdate callback
+            const callback = this.lastScrollUpdateCallbacks[type] = {
+                callback: lastScrollUpdate,
+                timestamp: new Date().getTime(),
+                coordinate,
+                timeout: 0,
+            };
+            callback.timeout = setTimeout(() => {
+                // clear timeout
+                this.clearLastScrollUpdate(type);
+                // if scrollThrottling is set, and the last scroll event happened before the timeout started
+                // we need to throttle the last scroll event
+                if (this.mouseWheelScrollTimestamp[type] < callback.timestamp && this.verifyChange(type, callback.coordinate)) {
+                    callback.callback();
+                }
+            }, this.scrollThrottling + 50);
+        }
     }
 }
 //# sourceMappingURL=local.scroll.timer.js.map

package/dist/collection/services/local.scroll.timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"local.scroll.timer.js","sourceRoot":"","sources":["../../src/services/local.scroll.timer.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAc3B,YAAoB,mBAAmB,EAAE;QAArB,qBAAgB,GAAhB,gBAAgB,CAAK;QAbzC;;;WAGG;QACK,8BAAyB,GAAkC;YACjE,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;SACT,CAAC;QACM,8BAAyB,GAAkC;YACjE,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;SACT,CAAC;IAE0C,CAAC;IAE7C,aAAa,CAAC,CAAmD;QAC/D,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;IAC7D,CAAC;IAED;;OAEG;IACH,kBAAkB,CAAC,SAAwB;QACzC,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;IACnE,CAAC;IAED;;OAEG;IACH,OAAO,CAAC,IAAmB,EAAE,UAAkB;QAC7C,MAAM,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC3E,yBAAyB;QACzB,OAAO,CACL,MAAM,GAAG,IAAI,CAAC,gBAAgB;YAC9B,UAAU,KAAK,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CACpD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { DimensionType } from '@type';\n/**\n * Apply changes only if mousewheel event happened some time ago (scrollThrottling)\n */\nexport class LocalScrollTimer {\n  /**\n   * Last mw event time for trigger scroll function below\n   * If mousewheel function was ignored we still need to trigger render\n   */\n  private mouseWheelScrollTimestamp: Record<DimensionType, number> = {\n    rgCol: 0,\n    rgRow: 0,\n  };\n  private lastKnownScrollCoordinate: Record<DimensionType, number> = {\n    rgCol: 0,\n    rgRow: 0,\n  };\n\n  constructor(private scrollThrottling = 10) {}\n\n  setCoordinate(e: { dimension: DimensionType; coordinate: number }) {\n    this.lastKnownScrollCoordinate[e.dimension] = e.coordinate;\n  }\n\n  /**\n   * Remember last mw event time\n   */\n  latestScrollUpdate(dimension: DimensionType) {\n    this.mouseWheelScrollTimestamp[dimension] = new Date().getTime();\n  }\n\n  /**\n   * Check if scroll is ready to accept new value\n   */\n  isReady(type: DimensionType, coordinate: number) {\n    const change = new Date().getTime() - this.mouseWheelScrollTimestamp[type];\n    // apply after throttling\n    return (\n      change > this.scrollThrottling &&\n      coordinate !== this.lastKnownScrollCoordinate[type]\n    );\n  }\n}\n"]}
+{"version":3,"file":"local.scroll.timer.js","sourceRoot":"","sources":["../../src/services/local.scroll.timer.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAc3B,YAAoB,mBAAmB,EAAE;QAArB,qBAAgB,GAAhB,gBAAgB,CAAK;QAbzC;;;WAGG;QACK,8BAAyB,GAAkC;YACjE,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;SACT,CAAC;QACM,8BAAyB,GAAkC;YACjE,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;SACT,CAAC;QA+BF;;;;WAIG;QACK,8BAAyB,GAK3B,EAAE,CAAC;IAvCmC,CAAC;IAE7C,aAAa,CAAC,CAAmD;QAC/D,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;IAC7D,CAAC;IAED;;OAEG;IACH,kBAAkB,CAAC,SAAwB;QACzC,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;IACnE,CAAC;IAED,OAAO,CAAC,IAAmB,EAAE,UAAkB;QAC7C,mCAAmC;QACnC,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAClC,CAAC;QACD,yBAAyB;QACzB,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAC7C,CAAC;IAEO,YAAY,CAAC,IAAmB,EAAE,UAAkB;QAC1D,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;QACjC,MAAM,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC1D,OAAO,MAAM,GAAG,IAAI,CAAC,gBAAgB;YACrC,UAAU,KAAK,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC;IAcO,qBAAqB,CAAC,IAAmB;;QAC/C,YAAY,CAAC,MAAA,MAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,0CAAE,OAAO,mCAAI,CAAC,CAAC,CAAC;QACjE,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,wBAAwB,CAAC,IAAmB,EAAE,UAAkB,EAAE,gBAA4B;QAC5F,6BAA6B;QAC7B,4CAA4C;QAC5C,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;YAChC,iCAAiC;YACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,GAAG;gBACtD,QAAQ,EAAE,gBAAgB;gBAC1B,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE;gBAC/B,UAAU;gBACV,OAAO,EAAE,CAAQ;aAClB,CAAC;YACF,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACjC,gBAAgB;gBAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;gBAChC,4FAA4F;gBAC5F,4CAA4C;gBAC5C,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;oBAC9G,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC,EAAE,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["import type { DimensionType } from '@type';\n/**\n * Apply changes only if mousewheel event happened some time ago (scrollThrottling)\n */\nexport class LocalScrollTimer {\n  /**\n   * Last mw event time for trigger scroll function below\n   * If mousewheel function was ignored we still need to trigger render\n   */\n  private mouseWheelScrollTimestamp: Record<DimensionType, number> = {\n    rgCol: 0,\n    rgRow: 0,\n  };\n  private lastKnownScrollCoordinate: Record<DimensionType, number> = {\n    rgCol: 0,\n    rgRow: 0,\n  };\n\n  constructor(private scrollThrottling = 10) {}\n\n  setCoordinate(e: { dimension: DimensionType; coordinate: number }) {\n    this.lastKnownScrollCoordinate[e.dimension] = e.coordinate;\n  }\n\n  /**\n   * Remember last mw event time\n   */\n  latestScrollUpdate(dimension: DimensionType) {\n    this.mouseWheelScrollTimestamp[dimension] = new Date().getTime();\n  }\n\n  isReady(type: DimensionType, coordinate: number) {\n    // if there is a callback, clear it\n    if (this.lastScrollUpdateCallbacks[type]) {\n      this.clearLastScrollUpdate(type)\n    }\n    // apply after throttling\n    return this.verifyChange(type, coordinate);\n  }\n\n  private verifyChange(type: DimensionType, coordinate: number) {\n    const now = new Date().getTime();\n    const change = now - this.mouseWheelScrollTimestamp[type];\n    return change > this.scrollThrottling &&\n    coordinate !== this.lastKnownScrollCoordinate[type];\n  }\n\n  /**\n   * Check if scroll is ready to accept new value\n   * this is an edge case for scroll events\n   * when we need to apply scroll after throttling\n   */\n  private lastScrollUpdateCallbacks: Partial<Record<DimensionType, {\n    callback: () => void;\n    timestamp: number;\n    coordinate: number;\n    timeout: number;\n  }>> = {};\n\n  private clearLastScrollUpdate(type: DimensionType) {\n    clearTimeout(this.lastScrollUpdateCallbacks[type]?.timeout ?? 0);\n    delete this.lastScrollUpdateCallbacks[type];\n  }\n\n  throttleLastScrollUpdate(type: DimensionType, coordinate: number, lastScrollUpdate: () => void) {\n    // if scrollThrottling is set\n    // we need to throttle the last scroll event\n    if (this.scrollThrottling) {\n      this.clearLastScrollUpdate(type)\n      // save lastScrollUpdate callback\n      const callback = this.lastScrollUpdateCallbacks[type] = {\n        callback: lastScrollUpdate,\n        timestamp: new Date().getTime(),\n        coordinate,\n        timeout: 0 as any,\n      };\n      callback.timeout = setTimeout(() => {\n        // clear timeout\n        this.clearLastScrollUpdate(type)\n        // if scrollThrottling is set, and the last scroll event happened before the timeout started\n        // we need to throttle the last scroll event\n        if (this.mouseWheelScrollTimestamp[type] < callback.timestamp && this.verifyChange(type, callback.coordinate)) {\n          callback.callback();\n        }\n      }, this.scrollThrottling + 50);\n    }\n  }\n}\n"]}

package/dist/esm/loader.js

@@ -8,7 +8,7 @@ import { g as globalScripts } from './app-globals-6b929fd8.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["revo-grid",[[4,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyOnClose":[4,"apply-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"sorting":[16],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"additionalData":[16],"disableVirtualX":[4,"disable-virtual-x"],"disableVirtualY":[4,"disable-virtual-y"],"hideAttribution":[4,"hide-attribution"],"jobsBeforeRender":[16],"registerVNode":[16],"accessible":[4],"canDrag":[4,"can-drag"],"refresh":[64],"setDataAt":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64],"refreshExtraElements":[64]},[[5,"touchstart","mousedownHandle"],[5,"mousedown","mousedownHandle"],[5,"touchend","mouseupHandle"],[5,"mouseup","mouseupHandle"],[0,"rowdragstartinit","onRowDragStarted"],[0,"rowdragendinit","onRowDragEnd"],[0,"roworderchange","onRowOrderChange"],[0,"rowdragmoveinit","onRowDrag"],[0,"rowdragmousemove","onRowMouseMove"],[0,"celleditapply","onCellEdit"],[0,"rangeeditapply","onRangeEdit"],[0,"selectionchangeinit","onRangeChanged"],[0,"rowdropinit","onRowDropped"],[0,"beforeheaderclick","onHeaderClick"],[0,"beforecellfocusinit","onCellFocus"]],{"columnTypes":["columnTypesChanged"],"columns":["columnChanged"],"disableVirtualX":["disableVirtualXChanged"],"rowSize":["rowSizeChanged"],"theme":["themeChanged"],"source":["dataSourceChanged"],"pinnedBottomSource":["dataSourceChanged"],"pinnedTopSource":["dataSourceChanged"],"disableVirtualY":["disableVirtualYChanged"],"rowDefinitions":["rowDefChanged"],"trimmedRows":["trimmedRowsChanged"],"grouping":["groupingChanged"],"stretch":["applyStretch"],"filter":["applyFilter"],"sorting":["applySorting"],"rowHeaders":["rowHeadersChange"],"registerVNode":["registerOutsideVNodes"],"additionalData":["additionalDataChanged"],"plugins":["pluginsChanged"]}]]],["revogr-filter-panel",[[4,"revogr-filter-panel",{"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"closeOnOutsideClick":[4,"close-on-outside-click"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"filterItems":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revogr-clipboard_3",[[0,"revogr-clipboard",{"readonly":[4],"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"],[4,"cut","cutStarted"]]],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"additionalData":[8,"additional-data"],"cancelChanges":[64],"beforeDisconnect":[64]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"rowType":[1,"row-type"],"dragStart":[64],"endOrder":[64],"clearOrder":[64]}]]],["revogr-data_4",[[4,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"additionalData":[8,"additional-data"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[513],"colType":[513,"col-type"],"jobsBeforeRender":[16],"providers":[32],"updateCell":[64]},null,{"dataStore":["onDataStoreChange"],"colData":["onColDataChange"]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"groups":[16],"groupingDepth":[2,"grouping-depth"],"readonly":[4],"canResize":[4,"can-resize"],"resizeHandler":[16],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1],"additionalData":[8,"additional-data"]}],[4,"revogr-viewport-scroll",{"rowHeader":[4,"row-header"],"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"colType":[1,"col-type"],"setScroll":[64],"changeScroll":[64],"applyScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]],[0,"vnode-html",{"redraw":[16]}]]],["revogr-attribution_7",[[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16],"additionalData":[8,"additional-data"],"jobsBeforeRender":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"],"additionalData":[8,"additional-data"],"isMobileDevice":[4,"is-mobile-device"]},[[5,"touchmove","onMouseMove"],[5,"mousemove","onMouseMove"],[5,"touchend","onMouseUp"],[5,"mouseup","onMouseUp"],[5,"mouseleave","onMouseUp"],[0,"dragstartcell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]],{"selectionStore":["selectionServiceSet"],"dimensionRow":["createAutoFillService"],"dimensionCol":["createAutoFillService"],"dataStore":["columnServiceSet"],"colData":["columnServiceSet"]}],[0,"revogr-attribution"],[4,"revogr-focus",{"colType":[1,"col-type"],"rowType":[1,"row-type"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-extra",{"nodes":[16],"update":[32],"refresh":[64]}]]]], options);
+  return bootstrapLazy([["revo-grid",[[4,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyOnClose":[4,"apply-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"sorting":[16],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"additionalData":[16],"disableVirtualX":[4,"disable-virtual-x"],"disableVirtualY":[4,"disable-virtual-y"],"hideAttribution":[4,"hide-attribution"],"jobsBeforeRender":[16],"registerVNode":[16],"accessible":[4],"canDrag":[4,"can-drag"],"refresh":[64],"setDataAt":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64],"refreshExtraElements":[64]},[[5,"touchstart","mousedownHandle"],[5,"mousedown","mousedownHandle"],[5,"touchend","mouseupHandle"],[5,"mouseup","mouseupHandle"],[0,"rowdragstartinit","onRowDragStarted"],[0,"rowdragendinit","onRowDragEnd"],[0,"roworderchange","onRowOrderChange"],[0,"rowdragmoveinit","onRowDrag"],[0,"rowdragmousemove","onRowMouseMove"],[0,"celleditapply","onCellEdit"],[0,"rangeeditapply","onRangeEdit"],[0,"selectionchangeinit","onRangeChanged"],[0,"rowdropinit","onRowDropped"],[0,"beforeheaderclick","onHeaderClick"],[0,"beforecellfocusinit","onCellFocus"]],{"columnTypes":["columnTypesChanged"],"columns":["columnChanged"],"disableVirtualX":["disableVirtualXChanged"],"rowSize":["rowSizeChanged"],"theme":["themeChanged"],"source":["dataSourceChanged"],"pinnedBottomSource":["dataSourceChanged"],"pinnedTopSource":["dataSourceChanged"],"disableVirtualY":["disableVirtualYChanged"],"rowDefinitions":["rowDefChanged"],"trimmedRows":["trimmedRowsChanged"],"grouping":["groupingChanged"],"stretch":["applyStretch"],"filter":["applyFilter"],"sorting":["applySorting"],"rowHeaders":["rowHeadersChange"],"registerVNode":["registerOutsideVNodes"],"additionalData":["additionalDataChanged"],"plugins":["pluginsChanged"]}]]],["revogr-filter-panel",[[4,"revogr-filter-panel",{"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"closeOnOutsideClick":[4,"close-on-outside-click"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"filterItems":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revogr-clipboard_3",[[0,"revogr-clipboard",{"readonly":[4],"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"],[4,"cut","cutStarted"]]],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"additionalData":[8,"additional-data"],"cancelChanges":[64],"beforeDisconnect":[64]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"rowType":[1,"row-type"],"dragStart":[64],"endOrder":[64],"clearOrder":[64]}]]],["revogr-data_4",[[4,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"additionalData":[8,"additional-data"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[513],"colType":[513,"col-type"],"jobsBeforeRender":[16],"providers":[32],"updateCell":[64]},null,{"dataStore":["onDataStoreChange"],"colData":["onColDataChange"]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"groups":[16],"groupingDepth":[2,"grouping-depth"],"readonly":[4],"canResize":[4,"can-resize"],"resizeHandler":[16],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1],"additionalData":[8,"additional-data"]}],[4,"revogr-viewport-scroll",{"rowHeader":[4,"row-header"],"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"colType":[1,"col-type"],"setScroll":[64],"changeScroll":[64],"applyScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]],[0,"vnode-html",{"redraw":[16]}]]],["revogr-attribution_7",[[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16],"additionalData":[8,"additional-data"],"jobsBeforeRender":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"],"additionalData":[8,"additional-data"],"isMobileDevice":[4,"is-mobile-device"]},[[5,"touchmove","onMouseMove"],[5,"mousemove","onMouseMove"],[5,"touchend","onMouseUp"],[5,"mouseup","onMouseUp"],[5,"mouseleave","onMouseUp"],[0,"dragstartcell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]],{"selectionStore":["selectionServiceSet"],"dimensionRow":["createAutoFillService"],"dimensionCol":["createAutoFillService"],"dataStore":["columnServiceSet"],"colData":["columnServiceSet"]}],[0,"revogr-attribution"],[4,"revogr-focus",{"colType":[1,"col-type"],"rowType":[1,"row-type"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"realSize":[2,"real-size"],"virtualSize":[2,"virtual-size"],"clientSize":[2,"client-size"],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-extra",{"nodes":[16],"update":[32],"refresh":[64]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/revo-grid.entry.js

@@ -1875,12 +1875,14 @@ const RevoGridComponent = class {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
+        const verticalScroll = (h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get('clientSize'), virtualSize: viewports[typeRow].store.get('virtualSize'), realSize: dimensions[typeRow].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
+        const horizontalScroll = (h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get('clientSize'), virtualSize: viewports[typeCol].store.get('virtualSize'), realSize: dimensions[typeCol].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
         return (h(Host, null, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), h("slot", { name: "footer" })));
+            } }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, verticalScroll, h(OrderRenderer, { ref: e => (this.orderService = e) }))), horizontalScroll, h("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), h("slot", { name: "footer" })));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks