@revolist/revogrid 4.9.41 → 4.9.42

package/dist/collection/components/scroll/revogr-viewport-scroll-style.css

@@ -37,7 +37,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -49,24 +49,27 @@
 }
 .revo-button.green {
   background-color: #009037;
-  border: 1px solid #00772d;
 }
 .revo-button.red {
   background-color: #E0662E;
-  border: 1px solid #d55920;
 }
 .revo-button:disabled, .revo-button[disabled] {
   cursor: not-allowed !important;
   filter: opacity(0.35) !important;
 }
-.revo-button.light {
-  border: 1px solid #cedefa;
+.revo-button.outline {
+  border: 1px solid #dbdbdb;
   line-height: 30px;
   background: none;
   color: #000;
   box-shadow: none;
 }
 
+revo-grid[theme^=dark] .revo-button.outline {
+  border: 1px solid #404040;
+  color: #d8d8d8;
+}
+
 .rowHeaders {
   z-index: 2;
   font-size: 10px;

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

@@ -14,8 +14,6 @@ import { CONTENT_SLOT, FOOTER_SLOT, HEADER_SLOT, } from "../revoGrid/viewport.he
  */
 export class RevogrViewportScroll {
     constructor() {
-        this.oldValY = this.contentHeight;
-        this.oldValX = this.contentWidth;
         this.rowHeader = undefined;
         this.contentWidth = 0;
         this.contentHeight = 0;
@@ -177,20 +175,11 @@ export class RevogrViewportScroll {
         this.scrollchange.emit({ type, hasScroll });
     }
     disconnectedCallback() {
-        this.resizeService.destroy();
+        var _a;
+        (_a = this.resizeService) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
-        // scroll update if number of rows changed
-        if (this.contentHeight < this.oldValY && this.verticalScroll) {
-            this.verticalScroll.scrollTop += this.contentHeight - this.oldValY;
-        }
-        this.oldValY = this.contentHeight;
-        // scroll update if number of cols changed
-        if (this.contentWidth < this.oldValX) {
-            this.horizontalScroll.scrollLeft += this.contentWidth - this.oldValX;
-        }
-        this.oldValX = this.contentWidth;
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
             clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
@@ -205,7 +194,7 @@ export class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (h(Host, { key: '5a7d07c999e59a8b96a99c87e50103acb4f18406', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '09ac58def608c3bc169ce12e09dd2dc2df1f90a2', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, h("div", { key: 'c370a3b8d5d2f4925b77020ac85d5f4d06b876e0', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: 'c5feeeaf90e42715bbf13619b2341d23257447fb', name: HEADER_SLOT })), h("div", { key: '7c04ffd6e7893db57f883a736d0a4932743863ea', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'da5db752025ddaaf626411b445b3b90b5b81cdc8', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, h("slot", { key: 'c5404f4628b68b4b18a6e9143c70e72c50616f9d', name: CONTENT_SLOT }))), h("div", { key: 'ee9e1b5dd297f220aed3efef4b53b4dd74a11837', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '5ff132da3009d959a6e87fbbe3d22930f322c486', name: FOOTER_SLOT })))));
+        return (h(Host, { key: '9727a9c83d740d8184e12acc06b72c3f28c3b5ac', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '44551981dda7401ac9290d003b1ac7e7f55ee006', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, h("div", { key: '8b4962c352e81c343aed7136b7f7a9d71b10ed70', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '789868b91507bc50c18dc99c6bec8f1e4699cbab', name: HEADER_SLOT })), h("div", { key: '0efb49db3fbcbe0bdfcfa24afad495c681de6218', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'eef434a04062b364805702d73c0b28c9e44a27c5', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, h("slot", { key: '8490b9f01abebeeaa46da811e9ecdc62090ecb00', name: CONTENT_SLOT }))), h("div", { key: 'c3c133d6e73816e9e3c33d5091fc00f959977874', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: 'e4aae0a9eb10c750306a6bd4c222bcab6d1050e3', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -248,11 +237,18 @@ export class RevogrViewportScroll {
      * @param e
      */
     onVerticalMouseWheel(type, delta, e) {
-        var _a, _b, _c, _d;
-        (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-        const scrollTop = (_c = (_b = this.verticalScroll) === null || _b === void 0 ? void 0 : _b.scrollTop) !== null && _c !== void 0 ? _c : 0;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const scrollTop = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        const clientHeight = (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+        const scrollHeight = (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollHeight) !== null && _f !== void 0 ? _f : 0;
+        // Detect if the user has reached the bottom
+        const atBottom = (scrollTop + clientHeight >= scrollHeight) && e.deltaY > 0;
+        const atTop = scrollTop === 0 && e.deltaY < 0;
+        if (!atBottom && !atTop) {
+            (_g = e.preventDefault) === null || _g === void 0 ? void 0 : _g.call(e);
+        }
         const pos = scrollTop + e[delta];
-        (_d = this.localScrollService) === null || _d === void 0 ? void 0 : _d.scroll(pos, type, undefined, e[delta]);
+        (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll(pos, type, undefined, e[delta]);
         this.localScrollTimer.latestScrollUpdate(type);
     }
     /**
@@ -263,8 +259,18 @@ export class RevogrViewportScroll {
      */
     onHorizontalMouseWheel(type, delta, e) {
         var _a, _b;
-        (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-        const pos = this.horizontalScroll.scrollLeft + e[delta];
+        if (!e.deltaX) {
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;
+        // Detect if the user has reached the right end
+        const atRight = (scrollLeft + clientWidth >= scrollWidth) && e.deltaX > 0;
+        // Detect if the user has reached the left end
+        const atLeft = scrollLeft === 0 && e.deltaX < 0;
+        if (!atRight && !atLeft) {
+            (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+        }
+        const pos = scrollLeft + e[delta];
         (_b = this.localScrollService) === null || _b === void 0 ? void 0 : _b.scroll(pos, type, undefined, e[delta]);
         this.localScrollTimer.latestScrollUpdate(type);
     }

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 { DimensionCols, DimensionType, ElementScroll } from '@type';\nimport { ScrollCoordinateEvent, ViewPortResizeEvent, ViewPortScrollEvent } 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 }) scrollViewport: EventEmitter<ViewPortScrollEvent>;\n  /**\n   * Viewport resize\n   */\n  @Event({ eventName: 'resizeviewport' }) 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' }) silentScroll: EventEmitter<ViewPortScrollEvent>;\n\n  @Element() horizontalScroll: HTMLElement;\n\n  private oldValY = this.contentHeight;\n  private oldValX = this.contentWidth;\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\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(\n    e: ViewPortScrollEvent,\n    silent = false,\n  ) {\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('ontouchstart' in document.documentElement ? 0 : 10);\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(this.horizontalScroll, {\n      resize: entries => {\n        let height = entries[0]?.contentRect.height || 0;\n        if (height) {\n          height -= (this.header?.clientHeight ?? 0) + (this.footer?.clientHeight ?? 0);\n        }\n        const els = {\n          rgRow: {\n            size: height,\n            contentSize: this.contentHeight,\n            scroll: this.verticalScroll?.scrollTop,\n            noScroll: false,\n          },\n          rgCol: {\n            size: entries[0]?.contentRect.width || 0,\n            contentSize: this.contentWidth,\n            scroll: this.horizontalScroll.scrollLeft,\n            noScroll: this.colType !== 'rgCol',\n          },\n        };\n        for (const [dim, item] of Object.entries(els)) {\n          const dimension = dim as DimensionType;\n          this.resizeViewport.emit({ dimension, size: item.size, rowHeader: this.rowHeader });\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    // scroll update if number of rows changed\n    if (this.contentHeight < this.oldValY && this.verticalScroll) {\n      this.verticalScroll.scrollTop += this.contentHeight - this.oldValY;\n    }\n    this.oldValY = this.contentHeight;\n\n    // scroll update if number of cols changed\n    if (this.contentWidth < this.oldValX) {\n      this.horizontalScroll.scrollLeft += this.contentWidth - this.oldValX;\n    }\n    this.oldValX = this.contentWidth;\n\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    e.preventDefault?.();\n    const scrollTop = this.verticalScroll?.scrollTop ?? 0;\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    e.preventDefault?.();\n    const pos = this.horizontalScroll.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 }) scrollViewport: EventEmitter<ViewPortScrollEvent>;\n  /**\n   * Viewport resize\n   */\n  @Event({ eventName: 'resizeviewport' }) 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' }) 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\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(\n    e: ViewPortScrollEvent,\n    silent = false,\n  ) {\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('ontouchstart' in document.documentElement ? 0 : 10);\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(this.horizontalScroll, {\n      resize: entries => {\n        let height = entries[0]?.contentRect.height || 0;\n        if (height) {\n          height -= (this.header?.clientHeight ?? 0) + (this.footer?.clientHeight ?? 0);\n        }\n        const els = {\n          rgRow: {\n            size: height,\n            contentSize: this.contentHeight,\n            scroll: this.verticalScroll?.scrollTop,\n            noScroll: false,\n          },\n          rgCol: {\n            size: entries[0]?.contentRect.width || 0,\n            contentSize: this.contentWidth,\n            scroll: this.horizontalScroll.scrollLeft,\n            noScroll: this.colType !== 'rgCol',\n          },\n        };\n        for (const [dim, item] of Object.entries(els)) {\n          const dimension = dim as DimensionType;\n          this.resizeViewport.emit({ dimension, size: item.size, rowHeader: this.rowHeader });\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"]}

package/dist/collection/components/scrollable/revogr-scroll-style.css

@@ -37,7 +37,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -49,24 +49,27 @@
 }
 .revo-button.green {
   background-color: #009037;
-  border: 1px solid #00772d;
 }
 .revo-button.red {
   background-color: #E0662E;
-  border: 1px solid #d55920;
 }
 .revo-button:disabled, .revo-button[disabled] {
   cursor: not-allowed !important;
   filter: opacity(0.35) !important;
 }
-.revo-button.light {
-  border: 1px solid #cedefa;
+.revo-button.outline {
+  border: 1px solid #dbdbdb;
   line-height: 30px;
   background: none;
   color: #000;
   box-shadow: none;
 }
 
+revo-grid[theme^=dark] .revo-button.outline {
+  border: 1px solid #404040;
+  color: #d8d8d8;
+}
+
 revogr-scroll-virtual[autohide] {
   position: absolute;
   z-index: 100 !important;
@@ -75,14 +78,14 @@ revogr-scroll-virtual[autohide].vertical {
   top: 0;
   right: 0;
 }
-revogr-scroll-virtual[autohide].vertical:hover, revogr-scroll-virtual[autohide].vertical[visible] {
+revogr-scroll-virtual[autohide].vertical[visible] {
   min-width: 20px !important;
 }
 revogr-scroll-virtual[autohide].horizontal {
   bottom: 0;
   left: 0;
 }
-revogr-scroll-virtual[autohide].horizontal:hover, revogr-scroll-virtual[autohide].horizontal[visible] {
+revogr-scroll-virtual[autohide].horizontal[visible] {
   min-height: 20px !important;
 }
 revogr-scroll-virtual.vertical {

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

@@ -3,9 +3,9 @@
  */
 import { h, Host, } from "@stencil/core";
 import LocalScrollService, { getContentSize } from "../../services/local.scroll.service";
-import { getScrollbarSize } from "../../utils";
 import { AutohideScrollPlugin } from "./autohide-scroll.plugin";
 import { LocalScrollTimer } from "../../services/local.scroll.timer";
+import { getScrollbarSize } from "../../utils";
 /**
  * Virtual scroll component
  */
@@ -92,7 +92,7 @@ export class RevogrScrollVirtual {
         this.localScrollService.setParams({
             contentSize: this.dimensionStore.get('realSize'),
             clientSize: this.size,
-            virtualSize: this.viewportStore.get('virtualSize'),
+            virtualSize: this.viewportStore.get('clientSize'),
         }, this.dimension);
     }
     onScroll(e) {
@@ -112,8 +112,10 @@ export class RevogrScrollVirtual {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        return (h(Host, { key: '73aa9ba5bd17eea4d37eaecd63326fca29e4e231', onScroll: (e) => this.onScroll(e) }, h("div", { key: 'c57e42d782f693dc2a93e98f157ef60ebe09398c', style: {
-                [sizeType]: `${getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('virtualSize'))}px`,
+        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize') // content viewport size
+        );
+        return (h(Host, { key: '2d11902403db45b805bde88b6fc40acff4b6b910', onScroll: (e) => this.onScroll(e) }, h("div", { key: '74978e90cbf66e3fb6dcc25bd5882346f1515c39', style: {
+                [sizeType]: `${size}px`,
             } })));
     }
     static get is() { return "revogr-scroll-virtual"; }
@@ -162,8 +164,8 @@ export class RevogrScrollVirtual {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "ViewportState": {
                             "location": "import",
@@ -188,8 +190,8 @@ export class RevogrScrollVirtual {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",

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, { getContentSize } from '../../services/local.scroll.service';\nimport { getScrollbarSize } from '../../utils';\nimport { DimensionType } from '@type';\nimport {\n  ViewportState,\n  DimensionSettingsState,\n  ViewPortScrollEvent,\n} from '@type';\nimport { AutohideScrollPlugin } from './autohide-scroll.plugin';\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\nimport { Observable } from '../../utils/store.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('ontouchstart' in document.documentElement ? 0 : 10);\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    if (this.element[type] > this.size) {\n      this.size = this.scrollSize;\n    } else {\n      this.size = 0;\n    }\n    this.localScrollService.setParams(\n      {\n        contentSize: this.dimensionStore.get('realSize'),\n        clientSize: this.size,\n        virtualSize: this.viewportStore.get('virtualSize'),\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    return (\n      <Host onScroll={(e: MouseEvent) => this.onScroll(e)}>\n        <div\n          style={{\n            [sizeType]: `${\n              getContentSize(\n                this.dimensionStore.get('realSize'),\n                this.size,\n                this.viewportStore.get('virtualSize')\n              )}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, { getContentSize } 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('ontouchstart' in document.documentElement ? 0 : 10);\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    if (this.element[type] > this.size) {\n      this.size = this.scrollSize;\n    } else {\n      this.size = 0;\n    }\n    this.localScrollService.setParams(\n      {\n        contentSize: this.dimensionStore.get('realSize'),\n        clientSize: this.size,\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"]}

package/dist/collection/components/selectionFocus/revogr-focus-style.css

@@ -37,7 +37,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -49,24 +49,27 @@
 }
 .revo-button.green {
   background-color: #009037;
-  border: 1px solid #00772d;
 }
 .revo-button.red {
   background-color: #E0662E;
-  border: 1px solid #d55920;
 }
 .revo-button:disabled, .revo-button[disabled] {
   cursor: not-allowed !important;
   filter: opacity(0.35) !important;
 }
-.revo-button.light {
-  border: 1px solid #cedefa;
+.revo-button.outline {
+  border: 1px solid #dbdbdb;
   line-height: 30px;
   background: none;
   color: #000;
   box-shadow: none;
 }
 
+revo-grid[theme^=dark] .revo-button.outline {
+  border: 1px solid #404040;
+  color: #d8d8d8;
+}
+
 revogr-focus.focused-cell {
   box-shadow: -1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset;
   position: absolute;

package/dist/collection/components/selectionFocus/revogr-focus.js

@@ -147,8 +147,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "SelectionStoreState": {
                             "location": "import",
@@ -173,8 +173,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -199,8 +199,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -225,8 +225,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DSourceState": {
                             "location": "import",
@@ -261,8 +261,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DSourceState": {
                             "location": "import",

package/dist/collection/components/selectionFocus/revogr-focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"revogr-focus.js","sourceRoot":"","sources":["../../../src/components/selectionFocus/revogr-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Event,\n  Element,\n  EventEmitter,\n} from '@stencil/core';\nimport { FOCUS_CLASS } from '../../utils/consts';\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\nimport { DSourceState, getSourceItem } from '@store';\nimport {\n  Cell,\n  SelectionStoreState,\n  ColumnRegular,\n  DataType,\n  DimensionSettingsState,\n  FocusRenderEvent,\n  FocusTemplateFunc,\n  DimensionCols,\n  DimensionRows,\n  FocusAfterRenderEvent,\n} from '@type';\nimport { Observable } from '../../utils/store.utils';\n\n/**\n * Focus component. Shows focus layer around the cell that is currently in focus.\n * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow\n */\n@Component({\n  tag: 'revogr-focus',\n  styleUrl: 'revogr-focus-style.scss',\n})\nexport class RevogrFocus {\n  /**\n   * Column type\n   */\n  @Prop() colType!: DimensionCols;\n  /**\n   * Row type\n   */\n  @Prop() rowType!: DimensionRows;\n\n  /** Dynamic stores */\n  /** Selection, range, focus for selection */\n  @Prop() selectionStore!: Observable<SelectionStoreState>;\n  /** Dimension settings Y */\n  @Prop() dimensionRow!: Observable<DimensionSettingsState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol!: Observable<DimensionSettingsState>;\n  /**\n   * Data rows source\n   */\n  @Prop() dataStore!: Observable<DSourceState<DataType, DimensionRows>>;\n  /**\n   * Column source\n   */\n  @Prop() colData!: Observable<DSourceState<ColumnRegular, DimensionCols>>;\n\n  /**\n   * Focus template custom function. Can be used to render custom focus layer.\n   */\n  @Prop() focusTemplate: FocusTemplateFunc | null = null;\n\n  /**\n   * Before focus render event.\n   * Can be prevented by event.preventDefault().\n   * If preventDefault used slot will be rendered.\n   */\n  @Event({ eventName: 'beforefocusrender' })\n  beforeFocusRender: EventEmitter<FocusRenderEvent>;\n\n  /**\n   * Before focus changed verify if it's in view and scroll viewport into this view\n   * Can be prevented by event.preventDefault()\n   */\n  @Event({ eventName: 'beforescrollintoview' })\n  beforeScrollIntoView: EventEmitter<{ el: HTMLElement }>;\n  /**\n   * Used to setup properties after focus was rendered\n   */\n  @Event({ eventName: 'afterfocus' })\n  afterFocus: EventEmitter<FocusAfterRenderEvent>;\n\n  @Element() el: HTMLElement;\n  private activeFocus: Cell | null = null;\n\n  componentDidRender() {\n    const currentFocus = this.selectionStore.get('focus');\n    if (\n      this.activeFocus?.x === currentFocus?.x &&\n      this.activeFocus?.y === currentFocus?.y\n    ) {\n      return;\n    }\n    this.activeFocus = currentFocus;\n    if (currentFocus && this.el) {\n      const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });\n      if (!beforeScrollIn.defaultPrevented) {\n        this.el.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n      const model = getSourceItem(this.dataStore, currentFocus.y);\n      const column = getSourceItem(this.colData, currentFocus.x);\n      this.afterFocus.emit({\n        model,\n        column,\n        rowType: this.rowType,\n        colType: this.colType,\n        rowIndex: currentFocus.y,\n        colIndex: currentFocus.x,\n      });\n    }\n  }\n\n  render() {\n    const editCell = this.selectionStore.get('edit');\n    if (editCell) {\n      return;\n    }\n    const focusCell = this.selectionStore.get('focus');\n    if (!focusCell) {\n      return;\n    }\n    const event = this.beforeFocusRender.emit({\n      range: {\n        ...focusCell,\n        x1: focusCell.x,\n        y1: focusCell.y,\n      },\n      rowType: this.rowType,\n      colType: this.colType,\n      rowDimension: { ...this.dimensionRow.state },\n      colDimension: { ...this.dimensionCol.state },\n    });\n    if (event.defaultPrevented) {\n      return <slot />;\n    }\n    const { detail } = event;\n\n    const cell = getCell(\n      detail.range,\n      event.detail.rowDimension,\n      event.detail.colDimension,\n    );\n    const styles = styleByCellProps(cell);\n    const extra = this.focusTemplate?.(h, detail);\n    const props = {\n      class: { [FOCUS_CLASS]: true },\n      style: styles,\n    };\n    return (\n      <Host {...props}>\n        <slot />\n        {extra}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"revogr-focus.js","sourceRoot":"","sources":["../../../src/components/selectionFocus/revogr-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Event,\n  Element,\n  EventEmitter,\n} from '@stencil/core';\nimport { FOCUS_CLASS } from '../../utils/consts';\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\nimport { DSourceState, getSourceItem } from '@store';\nimport type {\n  Cell,\n  SelectionStoreState,\n  ColumnRegular,\n  DataType,\n  DimensionSettingsState,\n  FocusRenderEvent,\n  FocusTemplateFunc,\n  DimensionCols,\n  DimensionRows,\n  FocusAfterRenderEvent,\n} from '@type';\nimport type { Observable } from '../../utils';\n\n/**\n * Focus component. Shows focus layer around the cell that is currently in focus.\n * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow\n */\n@Component({\n  tag: 'revogr-focus',\n  styleUrl: 'revogr-focus-style.scss',\n})\nexport class RevogrFocus {\n  /**\n   * Column type\n   */\n  @Prop() colType!: DimensionCols;\n  /**\n   * Row type\n   */\n  @Prop() rowType!: DimensionRows;\n\n  /** Dynamic stores */\n  /** Selection, range, focus for selection */\n  @Prop() selectionStore!: Observable<SelectionStoreState>;\n  /** Dimension settings Y */\n  @Prop() dimensionRow!: Observable<DimensionSettingsState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol!: Observable<DimensionSettingsState>;\n  /**\n   * Data rows source\n   */\n  @Prop() dataStore!: Observable<DSourceState<DataType, DimensionRows>>;\n  /**\n   * Column source\n   */\n  @Prop() colData!: Observable<DSourceState<ColumnRegular, DimensionCols>>;\n\n  /**\n   * Focus template custom function. Can be used to render custom focus layer.\n   */\n  @Prop() focusTemplate: FocusTemplateFunc | null = null;\n\n  /**\n   * Before focus render event.\n   * Can be prevented by event.preventDefault().\n   * If preventDefault used slot will be rendered.\n   */\n  @Event({ eventName: 'beforefocusrender' })\n  beforeFocusRender: EventEmitter<FocusRenderEvent>;\n\n  /**\n   * Before focus changed verify if it's in view and scroll viewport into this view\n   * Can be prevented by event.preventDefault()\n   */\n  @Event({ eventName: 'beforescrollintoview' })\n  beforeScrollIntoView: EventEmitter<{ el: HTMLElement }>;\n  /**\n   * Used to setup properties after focus was rendered\n   */\n  @Event({ eventName: 'afterfocus' })\n  afterFocus: EventEmitter<FocusAfterRenderEvent>;\n\n  @Element() el: HTMLElement;\n  private activeFocus: Cell | null = null;\n\n  componentDidRender() {\n    const currentFocus = this.selectionStore.get('focus');\n    if (\n      this.activeFocus?.x === currentFocus?.x &&\n      this.activeFocus?.y === currentFocus?.y\n    ) {\n      return;\n    }\n    this.activeFocus = currentFocus;\n    if (currentFocus && this.el) {\n      const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });\n      if (!beforeScrollIn.defaultPrevented) {\n        this.el.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n      const model = getSourceItem(this.dataStore, currentFocus.y);\n      const column = getSourceItem(this.colData, currentFocus.x);\n      this.afterFocus.emit({\n        model,\n        column,\n        rowType: this.rowType,\n        colType: this.colType,\n        rowIndex: currentFocus.y,\n        colIndex: currentFocus.x,\n      });\n    }\n  }\n\n  render() {\n    const editCell = this.selectionStore.get('edit');\n    if (editCell) {\n      return;\n    }\n    const focusCell = this.selectionStore.get('focus');\n    if (!focusCell) {\n      return;\n    }\n    const event = this.beforeFocusRender.emit({\n      range: {\n        ...focusCell,\n        x1: focusCell.x,\n        y1: focusCell.y,\n      },\n      rowType: this.rowType,\n      colType: this.colType,\n      rowDimension: { ...this.dimensionRow.state },\n      colDimension: { ...this.dimensionCol.state },\n    });\n    if (event.defaultPrevented) {\n      return <slot />;\n    }\n    const { detail } = event;\n\n    const cell = getCell(\n      detail.range,\n      event.detail.rowDimension,\n      event.detail.colDimension,\n    );\n    const styles = styleByCellProps(cell);\n    const extra = this.focusTemplate?.(h, detail);\n    const props = {\n      class: { [FOCUS_CLASS]: true },\n      style: styles,\n    };\n    return (\n      <Host {...props}>\n        <slot />\n        {extra}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/selectionTempRange/revogr-temp-range-style.css

@@ -37,7 +37,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -49,24 +49,27 @@
 }
 .revo-button.green {
   background-color: #009037;
-  border: 1px solid #00772d;
 }
 .revo-button.red {
   background-color: #E0662E;
-  border: 1px solid #d55920;
 }
 .revo-button:disabled, .revo-button[disabled] {
   cursor: not-allowed !important;
   filter: opacity(0.35) !important;
 }
-.revo-button.light {
-  border: 1px solid #cedefa;
+.revo-button.outline {
+  border: 1px solid #dbdbdb;
   line-height: 30px;
   background: none;
   color: #000;
   box-shadow: none;
 }
 
+revo-grid[theme^=dark] .revo-button.outline {
+  border: 1px solid #404040;
+  color: #d8d8d8;
+}
+
 .temp-bg-range {
   display: block !important;
   position: absolute;

package/dist/collection/components/selectionTempRange/revogr-temp-range.js

@@ -90,8 +90,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "SelectionStoreState": {
                             "location": "import",
@@ -116,8 +116,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -142,8 +142,8 @@ export class RevogrFocus {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",