lsp-grid 1.0.0

package/standalone/revogr-scroll-virtual2.js

@@ -0,0 +1,184 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as LocalScrollTimer, a as LocalScrollService, g as getContentSize } from './local.scroll.timer.js';
+import { g as getScrollbarSize } from './index2.js';
+
+/**
+ * Autohide scroll for MacOS when scroll is visible only for 1 sec
+ */
+class AutohideScrollPlugin {
+    constructor(element) {
+        this.element = element;
+        this.autohideScrollTimeout = 0;
+    }
+    /**
+     * When scroll size updates set it up for autohide
+     */
+    setScrollSize(s) {
+        if (!s) {
+            this.element.setAttribute('autohide', 'true');
+        }
+        else {
+            this.element.removeAttribute('autohide');
+        }
+    }
+    /**
+     * On each scroll check if it's time to show
+     */
+    checkScroll({ scrollSize, contentSize, virtualSize, }) {
+        const hasScroll = contentSize > virtualSize;
+        const isHidden = !scrollSize && hasScroll;
+        if (isHidden) {
+            this.element.setAttribute('visible', 'true');
+            this.autohideScrollTimeout = this.show(this.element, this.autohideScrollTimeout);
+        }
+    }
+    show(element, timeout) {
+        clearTimeout(timeout);
+        return Number(setTimeout(() => {
+            element === null || element === void 0 ? void 0 : element.removeAttribute('visible');
+        }, 1000));
+    }
+    clear() {
+        clearTimeout(this.autohideScrollTimeout);
+    }
+}
+
+const revogrScrollStyleCss = "revogr-scroll-virtual[autohide]{position:absolute;z-index:100 !important}revogr-scroll-virtual[autohide].vertical{top:0;right:0}revogr-scroll-virtual[autohide].vertical[visible]{min-width:20px !important}revogr-scroll-virtual[autohide].horizontal{bottom:0;left:0}revogr-scroll-virtual[autohide].horizontal[visible]{min-height:20px !important}revogr-scroll-virtual.vertical{overflow-y:auto;overflow-x:hidden;height:100%}revogr-scroll-virtual.vertical>div{width:1px}revogr-scroll-virtual.horizontal{overflow-x:auto;overflow-y:hidden;width:100%}revogr-scroll-virtual.horizontal>div{height:1px}";
+
+const RevogrScrollVirtual = /*@__PURE__*/ proxyCustomElement(class RevogrScrollVirtual extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.scrollVirtual = createEvent(this, "scrollvirtual", 7);
+        /**
+         * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
+         */
+        this.dimension = 'rgRow';
+        this.scrollSize = 0;
+    }
+    async setScroll(e) {
+        var _a;
+        if (this.dimension !== e.dimension) {
+            return;
+        }
+        this.localScrollTimer.latestScrollUpdate(e.dimension);
+        (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.setScroll(e);
+        if (e.coordinate) {
+            this.autohideScrollPlugin.checkScroll({
+                scrollSize: this.scrollSize,
+                contentSize: this.realSize,
+                virtualSize: this.virtualSize,
+            });
+        }
+    }
+    /**
+     * Update if `delta` exists in case we don't know current position or if it's external change
+     */
+    async changeScroll(e) {
+        if (e.delta) {
+            switch (e.dimension) {
+                case 'rgCol':
+                    e.coordinate = this.element.scrollLeft + e.delta;
+                    break;
+                case 'rgRow':
+                    e.coordinate = this.element.scrollTop + e.delta;
+                    break;
+            }
+            this.setScroll(e);
+        }
+        return e;
+    }
+    connectedCallback() {
+        this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);
+        this.localScrollTimer = new LocalScrollTimer('ontouchstart' in document.documentElement ? 0 : 10);
+        this.localScrollService = new LocalScrollService({
+            runScroll: e => this.scrollVirtual.emit(e),
+            applyScroll: e => {
+                this.localScrollTimer.setCoordinate(e);
+                const type = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';
+                // this will trigger on scroll event
+                this.element[type] = e.coordinate;
+            },
+        });
+    }
+    disconnectedCallback() {
+        this.autohideScrollPlugin.clear();
+    }
+    componentWillLoad() {
+        this.scrollSize = getScrollbarSize(document);
+    }
+    componentDidRender() {
+        let scrollSize = 0;
+        if (this.dimension === 'rgRow') {
+            scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;
+            this.element.style.minWidth = `${scrollSize}px`;
+        }
+        else {
+            scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;
+            this.element.style.minHeight = `${scrollSize}px`;
+        }
+        this.autohideScrollPlugin.setScrollSize(scrollSize);
+        this.localScrollService.setParams({
+            contentSize: this.realSize,
+            clientSize: this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth,
+            virtualSize: this.clientSize,
+        }, this.dimension);
+    }
+    onScroll(e) {
+        if (!(e.target instanceof Element)) {
+            return;
+        }
+        const target = e.target;
+        let type = 'scrollLeft';
+        if (this.dimension === 'rgRow') {
+            type = 'scrollTop';
+        }
+        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 size = getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
+        return (h(Host, { key: '4860fd23ab394219bdd75e206016e464ca228691', onScroll: (e) => this.onScroll(e) }, h("div", { key: '3e622a835e5717cfde81948d22ee64f2582001e7', style: {
+                [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
+            } })));
+    }
+    get element() { return this; }
+    static get style() { return revogrScrollStyleCss; }
+}, [256, "revogr-scroll-virtual", {
+        "dimension": [1],
+        "realSize": [2, "real-size"],
+        "virtualSize": [2, "virtual-size"],
+        "clientSize": [2, "client-size"],
+        "setScroll": [64],
+        "changeScroll": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["revogr-scroll-virtual"];
+    components.forEach(tagName => { switch (tagName) {
+        case "revogr-scroll-virtual":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RevogrScrollVirtual);
+            }
+            break;
+    } });
+}
+
+export { RevogrScrollVirtual as R, defineCustomElement as d };
+//# sourceMappingURL=revogr-scroll-virtual2.js.map
+
+//# sourceMappingURL=revogr-scroll-virtual2.js.map

package/standalone/revogr-scroll-virtual2.js.map

@@ -0,0 +1 @@
+{"file":"revogr-scroll-virtual2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/scrollable/autohide-scroll.plugin.ts","src/components/scrollable/revogr-scroll-style.scss?tag=revogr-scroll-virtual","src/components/scrollable/revogr-scroll-virtual.tsx"],"sourcesContent":["\r\n\r\n/**\r\n * Autohide scroll for MacOS when scroll is visible only for 1 sec\r\n */\r\nexport class AutohideScrollPlugin {\r\n  private autohideScrollTimeout = 0;\r\n  constructor(private element: HTMLElement) {\r\n  }\r\n\r\n  /**\r\n   * When scroll size updates set it up for autohide\r\n   */\r\n  setScrollSize(s: number) {\r\n    if (!s) {\r\n      this.element.setAttribute('autohide', 'true');\r\n    } else {\r\n      this.element.removeAttribute('autohide');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On each scroll check if it's time to show\r\n   */\r\n  checkScroll({\r\n    scrollSize,\r\n    contentSize,\r\n    virtualSize,\r\n  }: {\r\n    scrollSize: number;\r\n    contentSize: number;\r\n    virtualSize: number;\r\n  }) {\r\n    const hasScroll = contentSize > virtualSize;\r\n    const isHidden = !scrollSize && hasScroll;\r\n    if (isHidden) {\r\n      this.element.setAttribute('visible', 'true');\r\n      this.autohideScrollTimeout = this.show(\r\n        this.element,\r\n        this.autohideScrollTimeout,\r\n      );\r\n    }\r\n  }\r\n\r\n  private show(element?: HTMLElement, timeout?: number): number {\r\n    clearTimeout(timeout);\r\n    return Number(\r\n      setTimeout(() => {\r\n        element?.removeAttribute('visible');\r\n      }, 1000),\r\n    );\r\n  }\r\n  clear() {\r\n    clearTimeout(this.autohideScrollTimeout);\r\n  }\r\n}\r\n","revogr-scroll-virtual {\r\n  $min-size: 20px;\r\n\r\n  // show scroll only for 1 sec\r\n  &[autohide] {\r\n    position: absolute;\r\n    z-index: 100 !important;\r\n\r\n    &.vertical {\r\n      top: 0;\r\n      right: 0;\r\n\r\n      &[visible] {\r\n        min-width: $min-size !important;\r\n      }\r\n    }\r\n\r\n    &.horizontal {\r\n      bottom: 0;\r\n      left: 0;\r\n\r\n      &[visible] {\r\n        min-height: $min-size !important;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.vertical {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    height: 100%;\r\n\r\n    > div {\r\n      width: 1px;\r\n    }\r\n  }\r\n\r\n  &.horizontal {\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    width: 100%;\r\n\r\n    > div {\r\n      height: 1px;\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  Element as StencilElement,\r\n  Event,\r\n  EventEmitter,\r\n  h,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n} from '@stencil/core';\r\nimport LocalScrollService, {\r\n  getContentSize,\r\n} from '../../services/local.scroll.service';\r\nimport type {\r\n  DimensionType,\r\n  ViewPortScrollEvent,\r\n} from '@type';\r\nimport { AutohideScrollPlugin } from './autohide-scroll.plugin';\r\nimport { LocalScrollTimer } from '../../services/local.scroll.timer';\r\nimport { getScrollbarSize } from '../../utils';\r\n\r\n/**\r\n * Virtual scroll component\r\n */\r\n@Component({\r\n  tag: 'revogr-scroll-virtual',\r\n  styleUrl: 'revogr-scroll-style.scss',\r\n})\r\nexport class RevogrScrollVirtual {\r\n  /**\r\n   * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)\r\n   */\r\n  @Prop() dimension: DimensionType = 'rgRow';\r\n\r\n  /**\r\n   * Dimensions\r\n   */\r\n  @Prop() realSize!: number;\r\n\r\n  /**\r\n   * Virtual size\r\n   */\r\n  @Prop() virtualSize!: number;\r\n\r\n  /**\r\n   * Client size\r\n   */\r\n  @Prop() clientSize!: number;\r\n\r\n  /**\r\n   * Scroll event\r\n   */\r\n  @Event({ eventName: 'scrollvirtual' })\r\n  scrollVirtual: EventEmitter<ViewPortScrollEvent>;\r\n\r\n  @StencilElement() element: HTMLElement;\r\n  private autohideScrollPlugin: AutohideScrollPlugin;\r\n  private scrollSize = 0;\r\n  private localScrollService: LocalScrollService;\r\n  private localScrollTimer: LocalScrollTimer;\r\n\r\n  @Method()\r\n  async setScroll(e: ViewPortScrollEvent): Promise<void> {\r\n    if (this.dimension !== e.dimension) {\r\n      return;\r\n    }\r\n    this.localScrollTimer.latestScrollUpdate(e.dimension);\r\n    this.localScrollService?.setScroll(e);\r\n    if (e.coordinate) {\r\n      this.autohideScrollPlugin.checkScroll({\r\n        scrollSize: this.scrollSize,\r\n        contentSize: this.realSize,\r\n        virtualSize: this.virtualSize,\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Update if `delta` exists in case we don't know current position or if it's external change\r\n   */\r\n  @Method()\r\n  async changeScroll(e: ViewPortScrollEvent): Promise<ViewPortScrollEvent> {\r\n    if (e.delta) {\r\n      switch (e.dimension) {\r\n        case 'rgCol':\r\n          e.coordinate = this.element.scrollLeft + e.delta;\r\n          break;\r\n        case 'rgRow':\r\n          e.coordinate = this.element.scrollTop + e.delta;\r\n          break;\r\n      }\r\n      this.setScroll(e);\r\n    }\r\n    return e;\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);\r\n    this.localScrollTimer = new LocalScrollTimer(\r\n      'ontouchstart' in document.documentElement ? 0 : 10,\r\n    );\r\n    this.localScrollService = new LocalScrollService({\r\n      runScroll: e => this.scrollVirtual.emit(e),\r\n      applyScroll: e => {\r\n        this.localScrollTimer.setCoordinate(e);\r\n        const type = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';\r\n        // this will trigger on scroll event\r\n        this.element[type] = e.coordinate;\r\n      },\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.autohideScrollPlugin.clear();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.scrollSize = getScrollbarSize(document);\r\n  }\r\n\r\n  componentDidRender() {\r\n    let scrollSize = 0;\r\n    if (this.dimension === 'rgRow') {\r\n      scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;\r\n      this.element.style.minWidth = `${scrollSize}px`;\r\n    } else {\r\n      scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;\r\n      this.element.style.minHeight = `${scrollSize}px`;\r\n    }\r\n    this.autohideScrollPlugin.setScrollSize(scrollSize);\r\n    this.localScrollService.setParams(\r\n      {\r\n        contentSize: this.realSize,\r\n        clientSize: this.dimension === 'rgRow' ?  this.element.clientHeight : this.element.clientWidth,\r\n        virtualSize: this.clientSize,\r\n      },\r\n      this.dimension,\r\n    );\r\n  }\r\n\r\n  onScroll(e: MouseEvent) {\r\n    if (!(e.target instanceof Element)) {\r\n      return;\r\n    }\r\n    const target = e.target;\r\n    let type: 'scrollLeft' | 'scrollTop' = 'scrollLeft';\r\n    if (this.dimension === 'rgRow') {\r\n      type = 'scrollTop';\r\n    }\r\n\r\n    const setScroll = () => {\r\n      this.localScrollService?.scroll(target[type] || 0, this.dimension);\r\n    };\r\n    // apply after throttling\r\n    if (this.localScrollTimer.isReady(this.dimension, target[type])) {\r\n      setScroll();\r\n    } else {\r\n      this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const size = getContentSize(\r\n      this.realSize,\r\n      this.dimension === 'rgRow' ?  this.element.clientHeight : this.element.clientWidth,\r\n      this.clientSize, // content viewport size\r\n    );\r\n    return (\r\n      <Host onScroll={(e: MouseEvent) => this.onScroll(e)}>\r\n        <div\r\n          style={{\r\n            [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,\r\n          }}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/standalone/revogr-temp-range.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface RevogrTempRange extends Components.RevogrTempRange, HTMLElement {}
+export const RevogrTempRange: {
+    prototype: RevogrTempRange;
+    new (): RevogrTempRange;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/standalone/revogr-temp-range.js

@@ -0,0 +1,12 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { R as RevogrFocus, d as defineCustomElement$1 } from './revogr-temp-range2.js';
+
+const RevogrTempRange = RevogrFocus;
+const defineCustomElement = defineCustomElement$1;
+
+export { RevogrTempRange, defineCustomElement };
+//# sourceMappingURL=revogr-temp-range.js.map
+
+//# sourceMappingURL=revogr-temp-range.js.map

package/standalone/revogr-temp-range.js.map

@@ -0,0 +1 @@
+{"file":"revogr-temp-range.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/standalone/revogr-temp-range2.js

@@ -0,0 +1,93 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { t as throttle } from './throttle.js';
+import { T as TMP_SELECTION_BG_CLASS } from './consts.js';
+import { a as getCell, s as styleByCellProps } from './selection.utils.js';
+
+const revogrTempRangeStyleCss = ".temp-bg-range{display:block !important;position:absolute;pointer-events:none;z-index:9;border:1px solid rgb(255, 94, 0);box-sizing:border-box}.temp-bg-range.Selection{border:1px dashed gray}.temp-bg-range>div{width:1px;height:1px;position:absolute}.temp-bg-range>div.top{top:-1px}.temp-bg-range>div.bottom{bottom:-1px}.temp-bg-range>div.left{left:-1px}.temp-bg-range>div.right{right:-1px}";
+
+const RevogrFocus = /*@__PURE__*/ proxyCustomElement(class RevogrFocus extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.onChange = throttle((e) => this.doChange(e), 300);
+    }
+    doChange(e) {
+        e === null || e === void 0 ? void 0 : e.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    componentDidRender() {
+        if (this.el) {
+            this.onChange(this.el);
+        }
+    }
+    render() {
+        const data = this.selectionStore.get('tempRange');
+        const type = this.selectionStore.get('tempRangeType');
+        if (!data) {
+            return;
+        }
+        let directionY = 'bottom';
+        let derectionX = 'right';
+        const range = this.getRange();
+        if (!range) {
+            return;
+        }
+        if (data.y < range.y) {
+            directionY = 'top';
+        }
+        if (data.x < range.x) {
+            derectionX = 'left';
+        }
+        const directionClass = `${derectionX} ${directionY}`;
+        const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
+        const styles = styleByCellProps(cell);
+        const props = {
+            class: {
+                [TMP_SELECTION_BG_CLASS]: true,
+                [type || '']: true,
+            },
+            style: styles,
+            hidden: false
+        };
+        return (h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => (this.el = e) })));
+    }
+    getRange() {
+        const range = this.selectionStore.get('range');
+        if (range) {
+            return range;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
+    }
+    static get style() { return revogrTempRangeStyleCss; }
+}, [256, "revogr-temp-range", {
+        "selectionStore": [16, "selection-store"],
+        "dimensionRow": [16, "dimension-row"],
+        "dimensionCol": [16, "dimension-col"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["revogr-temp-range"];
+    components.forEach(tagName => { switch (tagName) {
+        case "revogr-temp-range":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RevogrFocus);
+            }
+            break;
+    } });
+}
+
+export { RevogrFocus as R, defineCustomElement as d };
+//# sourceMappingURL=revogr-temp-range2.js.map
+
+//# sourceMappingURL=revogr-temp-range2.js.map

package/standalone/revogr-temp-range2.js.map

@@ -0,0 +1 @@
+{"file":"revogr-temp-range2.js","mappings":";;;;;;;;AAAA,MAAM,uBAAuB,GAAG,uYAAuY;;MCc1Z,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AAJxB,IAAA,WAAA,GAAA;;;AAwBmB,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAc,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;AAqEhF;AAnES,IAAA,QAAQ,CAAC,CAAc,EAAA;AAC7B,QAAA,CAAC,aAAD,CAAC,KAAA,MAAA,GAAA,MAAA,GAAD,CAAC,CAAE,cAAc,CAAC;AAChB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAC;;IAGJ,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,EAAE,EAAE;AACX,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;;IAI1B,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;QACjD,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;QACrD,IAAI,CAAC,IAAI,EAAE;YACT;;QAEF,IAAI,UAAU,GAAG,QAAQ;QACzB,IAAI,UAAU,GAAG,OAAO;AACxB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,IAAI,CAAC,KAAK,EAAE;YACV;;QAEF,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE;YACpB,UAAU,GAAG,KAAK;;QAEpB,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE;YACpB,UAAU,GAAG,MAAM;;AAErB,QAAA,MAAM,cAAc,GAAG,CAAA,EAAG,UAAU,CAAI,CAAA,EAAA,UAAU,EAAE;AACpD,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,EACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EACvB,IAAI,CAAC,YAAY,CAAC,KAAK,CACxB;AACD,QAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC;AACrC,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,KAAK,EAAE;gBACL,CAAC,sBAAsB,GAAG,IAAI;AAC9B,gBAAA,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI;AACnB,aAAA;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE;SACT;AACD,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,CAAA,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAI,CACpD;;IAIH,QAAQ,GAAA;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAC9C,IAAI,KAAK,EAAE;AACT,YAAA,OAAO,KAAK;;QAEd,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAC9C,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;;QAEb,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,KAAK,CAAA,EAAA,EACR,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,CAAA;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/selectionTempRange/revogr-temp-range-style.scss?tag=revogr-temp-range","src/components/selectionTempRange/revogr-temp-range.tsx"],"sourcesContent":[".temp-bg-range {\r\n  display: block !important;\r\n  position: absolute;\r\n  pointer-events: none;\r\n  z-index: 9;\r\n  border: 1px solid rgb(255, 94, 0);\r\n  box-sizing: border-box;\r\n\r\n  &.Selection {\r\n    border: 1px dashed gray;\r\n  }\r\n\r\n  > div {\r\n    width: 1px;\r\n    height: 1px;\r\n    position: absolute;\r\n\r\n    &.top {\r\n      top: -1px;\r\n    }\r\n\r\n    &.bottom {\r\n      bottom: -1px;\r\n    }\r\n\r\n    &.left {\r\n      left: -1px;\r\n    }\r\n\r\n    &.right {\r\n      right: -1px;\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\nimport throttle from 'lodash/throttle';\r\nimport { TMP_SELECTION_BG_CLASS } from '../../utils/consts';\r\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\r\nimport { DimensionSettingsState, SelectionStoreState, RangeArea } from '@type';\r\nimport type { Observable } from '../../utils';\r\n\r\n/**\r\n * Temporary range selection component. Shows temporary range selection.\r\n */\r\n@Component({\r\n  tag: 'revogr-temp-range',\r\n  styleUrl: 'revogr-temp-range-style.scss',\r\n})\r\nexport class RevogrFocus {\r\n  /**\r\n   * Dynamic stores\r\n   */\r\n\r\n  /**\r\n   * Selection store, shows current selection and focus\r\n   */\r\n  @Prop() selectionStore: Observable<SelectionStoreState>;\r\n\r\n  /**\r\n   * Dimension row store\r\n   */\r\n  @Prop() dimensionRow: Observable<DimensionSettingsState>;\r\n  /**\r\n   * Dimension column store\r\n   */\r\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\r\n\r\n  el?: HTMLElement;\r\n  private readonly onChange = throttle((e: HTMLElement) => this.doChange(e), 300);\r\n\r\n  private doChange(e: HTMLElement) {\r\n    e?.scrollIntoView({\r\n      block: 'nearest',\r\n      inline: 'nearest',\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.el) {\r\n      this.onChange(this.el);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const data = this.selectionStore.get('tempRange');\r\n    const type = this.selectionStore.get('tempRangeType');\r\n    if (!data) {\r\n      return;\r\n    }\r\n    let directionY = 'bottom';\r\n    let derectionX = 'right';\r\n    const range = this.getRange();\r\n    if (!range) {\r\n      return;\r\n    }\r\n    if (data.y < range.y) {\r\n      directionY = 'top';\r\n    }\r\n    if (data.x < range.x) {\r\n      derectionX = 'left';\r\n    }\r\n    const directionClass = `${derectionX} ${directionY}`;\r\n    const cell = getCell(data,\r\n      this.dimensionRow.state,\r\n      this.dimensionCol.state\r\n    );\r\n    const styles = styleByCellProps(cell);\r\n    const props = {\r\n      class: {\r\n        [TMP_SELECTION_BG_CLASS]: true,\r\n        [type || '']: true,\r\n      },\r\n      style: styles,\r\n      hidden: false\r\n    };\r\n    return (\r\n      <Host {...props}>\r\n        <div class={directionClass} ref={(e) => (this.el = e)} />\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private getRange(): RangeArea | null {\r\n    const range = this.selectionStore.get('range');\r\n    if (range) {\r\n      return range;\r\n    }\r\n    const focus = this.selectionStore.get('focus');\r\n    if (!focus) {\r\n      return null;\r\n    }\r\n    return {\r\n      ...focus,\r\n      x1: focus.x,\r\n      y1: focus.y,\r\n    };\r\n  }\r\n}\r\n"],"version":3}

package/standalone/revogr-viewport-scroll.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface RevogrViewportScroll extends Components.RevogrViewportScroll, HTMLElement {}
+export const RevogrViewportScroll: {
+    prototype: RevogrViewportScroll;
+    new (): RevogrViewportScroll;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/standalone/revogr-viewport-scroll.js

@@ -0,0 +1,12 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { R as RevogrViewportScroll$1, d as defineCustomElement$1 } from './revogr-viewport-scroll2.js';
+
+const RevogrViewportScroll = RevogrViewportScroll$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RevogrViewportScroll, defineCustomElement };
+//# sourceMappingURL=revogr-viewport-scroll.js.map
+
+//# sourceMappingURL=revogr-viewport-scroll.js.map

package/standalone/revogr-viewport-scroll.js.map

@@ -0,0 +1 @@
+{"file":"revogr-viewport-scroll.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}