@progress/kendo-vue-dateinputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/virtualization/Virtualization.js

@@ -0,0 +1,367 @@
+var _a, _b, _c; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
+import { RowHeightService, ScrollerService } from './services.js';
+/**
+ * @hidden
+ */
+
+export var ScrollDirection;
+
+(function (ScrollDirection) {
+  ScrollDirection[ScrollDirection["Backward"] = 0] = "Backward";
+  ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
+
+var differenceToScroll = function differenceToScroll(scrollTop, staticOffset, maxScrollDifference) {
+  return Math.min(Math.abs(staticOffset - scrollTop), maxScrollDifference);
+};
+
+var FRAME_DURATION = 17;
+var scrollModifiers = (_a = {}, _a[ScrollDirection.Forward] = function (step) {
+  return function (value) {
+    return value + step;
+  };
+}, _a[ScrollDirection.Backward] = function (step) {
+  return function (value) {
+    return value - step;
+  };
+}, _a);
+var scrollNormalizers = (_b = {}, _b[ScrollDirection.Forward] = function (end) {
+  return function (value) {
+    return Math.min(value, end);
+  };
+}, _b[ScrollDirection.Backward] = function (end) {
+  return function (value) {
+    return Math.max(value, end);
+  };
+}, _b);
+var scrollValidators = (_c = {}, _c[ScrollDirection.Forward] = function (end) {
+  return function (start) {
+    return start < end;
+  };
+}, _c[ScrollDirection.Backward] = function (end) {
+  return function (start) {
+    return start > end;
+  };
+}, _c);
+/**
+ * @hidden
+ */
+
+var VirtualizationVue2 = {
+  name: 'Virtualization',
+  // @ts-ignore
+  emits: {
+    scroll: null,
+    scrollaction: null
+  },
+  props: {
+    bottomOffset: {
+      type: Number,
+      required: true
+    },
+    direction: {
+      type: String,
+      default: function _default() {
+        return 'vertical';
+      }
+    },
+    forceScroll: {
+      type: Boolean,
+      default: false
+    },
+    itemHeight: Number,
+    itemWidth: Number,
+    maxScrollDifference: {
+      type: Number,
+      default: 100
+    },
+    scrollDuration: {
+      type: Number,
+      default: 100
+    },
+    scrollOffsetSize: {
+      type: Number,
+      default: 0
+    },
+    skip: {
+      type: Number,
+      required: true
+    },
+    tabIndex: Number,
+    take: {
+      type: Number,
+      required: true
+    },
+    topOffset: {
+      type: Number,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    role: String
+  },
+  created: function created() {
+    this.animationInProgress = false;
+    this.lastTotal = undefined;
+    this.scrollerService = new ScrollerService(this.handleScrollAction, this.handlePageAction);
+  },
+  mounted: function mounted() {
+    this.scrollContainer = this.$refs.scrollContainer;
+  },
+  computed: {
+    element: function element() {
+      return this.scrollContainer;
+    }
+  },
+  methods: {
+    containerOffsetSize: function containerOffsetSize() {
+      return this.getContainerProperty(this.$props.direction === 'vertical' ? 'offsetHeight' : 'offsetWidth');
+    },
+    containerScrollSize: function containerScrollSize() {
+      return this.getContainerProperty(this.$props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth');
+    },
+    containerScrollPosition: function containerScrollPosition() {
+      return this.getContainerProperty(this.$props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft');
+    },
+    activeIndex: function activeIndex() {
+      return this.itemIndex(Math.ceil(this.containerScrollPosition()));
+    },
+    itemIndex: function itemIndex(offset) {
+      if (!this.rowHeightService) {
+        return 0;
+      }
+
+      return this.rowHeightService.index(offset);
+    },
+    itemOffset: function itemOffset(index) {
+      if (!this.rowHeightService) {
+        return 0;
+      }
+
+      return this.rowHeightService.offset(index);
+    },
+    isIndexVisible: function isIndexVisible(index) {
+      if (!this.rowHeightService) {
+        return false;
+      }
+
+      var containerTop = this.containerScrollPosition();
+      var containerBottom = containerTop + this.containerOffsetSize();
+      var top = this.rowHeightService.offset(index);
+      var bottom = top + this.rowHeightService.height(index);
+      return top >= containerTop && bottom <= containerBottom;
+    },
+    isListScrolled: function isListScrolled(index) {
+      if (!this.rowHeightService) {
+        return false;
+      }
+
+      return this.containerScrollPosition() !== this.rowHeightService.offset(index);
+    },
+    scrollTo: function scrollTo(value) {
+      var scrollProperty = this.$props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+
+      if (!this.scrollContainer) {
+        return;
+      }
+
+      this.scrollContainer[scrollProperty] = value;
+    },
+    scrollToIndex: function scrollToIndex(index) {
+      if (!this.rowHeightService) {
+        return;
+      }
+
+      this.animationInProgress = false;
+      this.scrollTo(this.rowHeightService.offset(index));
+    },
+    animateToIndex: function animateToIndex(index) {
+      var _this = this;
+
+      if (!this.rowHeightService || !window) {
+        return;
+      }
+
+      window.cancelAnimationFrame(this.cancelAnimation);
+      var indexOffset = this.rowHeightService.offset(index);
+      var direction = this.getContainerScrollDirection(indexOffset);
+
+      var _a = this.scrollRange(indexOffset, direction),
+          start = _a.start,
+          end = _a.end;
+
+      if (start === end) {
+        return;
+      }
+
+      var step = this.scrollStep(start, end);
+      var modifyScroll = scrollModifiers[direction](step);
+      var normalizeScroll = scrollNormalizers[direction](end);
+      var isScrollValid = scrollValidators[direction](modifyScroll(end));
+
+      var animate = function animate(progress) {
+        _this.animationInProgress = true;
+        var next = modifyScroll(progress);
+
+        _this.scrollTo(normalizeScroll(next));
+
+        isScrollValid(next) ? _this.cancelAnimation = window.requestAnimationFrame(function () {
+          animate(next);
+        }) : _this.animationInProgress = false;
+      };
+
+      this.cancelAnimation = window.requestAnimationFrame(function () {
+        animate(start);
+      });
+    },
+    scrollToBottom: function scrollToBottom() {
+      if (!this.rowHeightService) {
+        return;
+      }
+
+      this.scrollTo(this.rowHeightService.totalHeight() + this.$props.bottomOffset);
+    },
+    scrollStep: function scrollStep(start, end) {
+      var duration = this.$props.scrollDuration;
+      return Math.abs(end - start) / (duration / FRAME_DURATION);
+    },
+    scrollRange: function scrollRange(indexOffset, direction) {
+      var containerScroll = this.containerScrollPosition();
+
+      if (parseInt("".concat(indexOffset), 10) === parseInt("".concat(containerScroll), 10)) {
+        return {
+          start: indexOffset,
+          end: indexOffset
+        };
+      }
+
+      var maxScroll = this.containerMaxScroll();
+      var sign = direction === ScrollDirection.Backward ? 1 : -1;
+      var difference = differenceToScroll(containerScroll, indexOffset, this.$props.maxScrollDifference);
+      var end = Math.min(indexOffset, maxScroll);
+      var start = Math.min(Math.max(end + sign * difference, 0), maxScroll);
+      return {
+        start: start,
+        end: end
+      };
+    },
+    containerMaxScroll: function containerMaxScroll() {
+      return this.containerScrollSize() - this.containerOffsetSize();
+    },
+    getContainerScrollDirection: function getContainerScrollDirection(indexOffset) {
+      return indexOffset < this.containerScrollPosition() ? ScrollDirection.Backward : ScrollDirection.Forward;
+    },
+    initServices: function initServices(newProps) {
+      var props = newProps || this.$props;
+      var dimension = props.direction === 'vertical' ? props.itemHeight : props.itemWidth;
+
+      if (dimension === undefined) {
+        return;
+      }
+
+      this.rowHeightService = new RowHeightService(props.total, dimension, 0);
+      this.scrollerService.create(this.rowHeightService, props.skip, props.take, props.total, props.topOffset, this.$props.scrollOffsetSize, this.$props.direction);
+    },
+    getContainerProperty: function getContainerProperty(propertyName) {
+      if (!this.scrollContainer) {
+        return 0;
+      }
+
+      return this.scrollContainer[propertyName];
+    },
+    handleScroll: function handleScroll(event) {
+      if (!this.scrollContainer || !this.rowHeightService) {
+        return;
+      }
+
+      var target = event.target;
+      this.scrollerService.onScroll({
+        scrollLeft: target.scrollLeft,
+        scrollTop: target.scrollTop,
+        offsetHeight: target.offsetHeight,
+        offsetWidth: target.offsetWidth
+      });
+      var index = this.rowHeightService.index(this.containerScrollPosition() - this.$props.topOffset);
+      var args = {
+        index: index,
+        target: target,
+        scrollAction: this.scrollAction,
+        pageAction: this.pageAction,
+        animationInProgress: this.animationInProgress
+      };
+      this.$emit('scrollaction', args);
+      this.scrollAction = undefined;
+      this.pageAction = undefined;
+    },
+    handleScrollAction: function handleScrollAction(action) {
+      this.scrollAction = action;
+    },
+    handlePageAction: function handlePageAction(action) {
+      this.pageAction = action;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+
+    if (this.lastTotal !== this.$props.total || this.lastDirection !== this.$props.direction || this.lastTake !== this.$props.take) {
+      this.initServices();
+      this.lastTotal = this.$props.total;
+      this.lastDirection = this.$props.direction;
+      this.lastTake = this.$props.take;
+    }
+
+    var vertexLength = "".concat((this.rowHeightService ? this.rowHeightService.totalHeight() : 0) + this.$props.bottomOffset);
+    var placeholderStyle = this.$props.direction === 'vertical' ? {
+      height: "".concat(vertexLength, "px")
+    } : {
+      width: "".concat(vertexLength, "px")
+    };
+    var rootClassNames = classNames('k-content k-scrollable', {
+      'k-scrollable-horizontal': this.$props.direction === 'horizontal'
+    });
+    var scrollableClassNames = classNames('k-scrollable-placeholder', {
+      'k-scrollable-horizontal-placeholder': this.$props.direction === 'horizontal'
+    });
+    return h("div", {
+      ref: 'scrollContainer',
+      onScroll: this.handleScroll,
+      on: this.v3 ? undefined : {
+        "scroll": this.handleScroll
+      },
+      "class": rootClassNames,
+      tabindex: this.$props.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabindex: this.$props.tabIndex,
+        role: this.$props.role
+      },
+      role: this.$props.role
+    }, [defaultSlot, h("div", {
+      style: placeholderStyle,
+      "class": scrollableClassNames
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var Virtualization = VirtualizationVue2;
+export { Virtualization, VirtualizationVue2 };

package/dist/esm/virtualization/services/RowHeightService.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @hidden
+ */
+export declare class RowHeightService {
+    private total;
+    private rowHeight;
+    private detailRowHeight;
+    private offsets;
+    private heights;
+    constructor(total: number, rowHeight: number, detailRowHeight: number);
+    height(rowIndex: number): number;
+    expandDetail(rowIndex: number): void;
+    collapseDetail(rowIndex: number): void;
+    index(position: number): number;
+    offset(rowIndex: number): number;
+    totalHeight(): number;
+    private updateRowHeight;
+}

package/dist/esm/virtualization/services/RowHeightService.js

@@ -0,0 +1,68 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * @hidden
+ */
+var update = function (arr, idx, value) { return (__spreadArray(__spreadArray([], arr.slice(0, idx + 1), true), (arr.slice(idx + 1).map(function (x) { return x + value; })), true)); };
+/**
+ * @hidden
+ */
+var RowHeightService = /** @class */ (function () {
+    function RowHeightService(total, rowHeight, detailRowHeight) {
+        if (total === void 0) { total = 0; }
+        this.total = total;
+        this.rowHeight = rowHeight;
+        this.detailRowHeight = detailRowHeight;
+        this.offsets = [];
+        this.heights = [];
+        var agg = 0;
+        for (var idx = 0; idx < total; idx++) {
+            this.offsets.push(agg);
+            agg += rowHeight;
+            this.heights.push(rowHeight);
+        }
+    }
+    RowHeightService.prototype.height = function (rowIndex) {
+        return this.heights[rowIndex];
+    };
+    RowHeightService.prototype.expandDetail = function (rowIndex) {
+        if (this.height(rowIndex) === this.rowHeight) {
+            this.updateRowHeight(rowIndex, this.detailRowHeight);
+        }
+    };
+    RowHeightService.prototype.collapseDetail = function (rowIndex) {
+        if (this.height(rowIndex) > this.rowHeight) {
+            this.updateRowHeight(rowIndex, this.detailRowHeight * -1);
+        }
+    };
+    RowHeightService.prototype.index = function (position) {
+        for (var i = 0; i < this.offsets.length; i++) {
+            if (position === this.offsets[i]) {
+                return i;
+            }
+            if (position < this.offsets[i]) {
+                return i - 1;
+            }
+        }
+        return this.total - 1;
+    };
+    RowHeightService.prototype.offset = function (rowIndex) {
+        return this.offsets[rowIndex];
+    };
+    RowHeightService.prototype.totalHeight = function () {
+        return this.heights.reduce(function (prev, curr) { return prev + curr; }, 0);
+    };
+    RowHeightService.prototype.updateRowHeight = function (rowIndex, value) {
+        this.heights[rowIndex] += value;
+        this.offsets = update(this.offsets, rowIndex, value);
+    };
+    return RowHeightService;
+}());
+export { RowHeightService };

package/dist/esm/virtualization/services/ScrollerService.d.ts

@@ -0,0 +1,49 @@
+import { RowHeightService } from './RowHeightService';
+/**
+ * @hidden
+ */
+export declare class ScrollAction {
+    offset: number;
+    constructor(offset: number);
+}
+/**
+ * @hidden
+ */
+export declare class PageAction {
+    skip: number;
+    constructor(skip: number);
+}
+/**
+ * @hidden
+ */
+export declare type ScrollElement = {
+    offsetHeight: number;
+    offsetWidth: number;
+    scrollLeft: number;
+    scrollTop: number;
+};
+/**
+ * @hidden
+ */
+export declare type Action = ScrollAction | PageAction;
+/**
+ * @hidden
+ */
+export declare class ScrollerService {
+    private onScrollAction;
+    private onPageAction;
+    private direction;
+    private firstLoaded;
+    private lastLoaded;
+    private lastScrollTop;
+    private take;
+    private total;
+    private rowHeightService;
+    private bottomOffset;
+    private topOffset;
+    constructor(onScrollAction: (action: ScrollAction) => void, onPageAction: (action: PageAction) => void);
+    create(rowHeightService: RowHeightService, skip: number, take: number, total: number, topOffset?: number, bottomOffset?: number, direction?: 'horizontal' | 'vertical'): void;
+    onScroll({ scrollLeft, scrollTop, offsetHeight, offsetWidth }: ScrollElement): void;
+    rowOffset(index: number): number;
+    private rowsForHeight;
+}

package/dist/esm/virtualization/services/ScrollerService.js

@@ -0,0 +1,84 @@
+var normalize = function (x) { return Math.max(x, 0); };
+/**
+ * @hidden
+ */
+var ScrollAction = /** @class */ (function () {
+    function ScrollAction(offset) {
+        this.offset = offset;
+    }
+    return ScrollAction;
+}());
+export { ScrollAction };
+/**
+ * @hidden
+ */
+var PageAction = /** @class */ (function () {
+    function PageAction(skip) {
+        this.skip = skip;
+    }
+    return PageAction;
+}());
+export { PageAction };
+/**
+ * @hidden
+ */
+var ScrollerService = /** @class */ (function () {
+    function ScrollerService(onScrollAction, onPageAction) {
+        this.onScrollAction = onScrollAction;
+        this.onPageAction = onPageAction;
+        this.firstLoaded = 0;
+        this.bottomOffset = 0;
+        this.topOffset = 0;
+    }
+    ScrollerService.prototype.create = function (rowHeightService, skip, take, total, topOffset, bottomOffset, direction) {
+        if (topOffset === void 0) { topOffset = 0; }
+        if (bottomOffset === void 0) { bottomOffset = 0; }
+        if (direction === void 0) { direction = 'vertical'; }
+        this.rowHeightService = rowHeightService;
+        this.firstLoaded = skip;
+        this.lastLoaded = skip + take;
+        this.take = take;
+        this.total = total;
+        this.lastScrollTop = 0;
+        this.topOffset = topOffset;
+        this.bottomOffset = bottomOffset;
+        this.direction = direction;
+        var offsetBufferRows = this.rowsForHeight(topOffset);
+        var skipWithOffset = normalize(skip - offsetBufferRows);
+        this.onScrollAction(new ScrollAction(this.rowOffset(skipWithOffset)));
+        this.onPageAction(new PageAction(skipWithOffset));
+    };
+    ScrollerService.prototype.onScroll = function (_a) {
+        var scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
+        var scrollPosition = this.direction === 'vertical' ? scrollTop : scrollLeft;
+        var offsetSize = this.direction === 'vertical' ? offsetHeight : offsetWidth;
+        if (this.lastScrollTop === scrollPosition) {
+            return;
+        }
+        var up = this.lastScrollTop >= scrollPosition;
+        this.lastScrollTop = scrollPosition;
+        var firstItemIndex = this.rowHeightService.index(normalize(scrollPosition - this.topOffset));
+        var lastItemIndex = this.rowHeightService.index(normalize(scrollPosition + offsetSize - this.bottomOffset));
+        if (!up && lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total) {
+            this.firstLoaded = firstItemIndex;
+            this.onScrollAction(new ScrollAction(this.rowOffset(firstItemIndex)));
+            this.lastLoaded = Math.min(this.firstLoaded + this.take, this.total);
+            this.onPageAction(new PageAction(this.firstLoaded));
+        }
+        if (up && firstItemIndex <= this.firstLoaded) {
+            var nonVisibleBuffer = Math.floor(this.take * 0.3);
+            this.firstLoaded = normalize(firstItemIndex - nonVisibleBuffer);
+            this.onScrollAction(new ScrollAction(this.rowOffset(this.firstLoaded)));
+            this.lastLoaded = Math.min(this.firstLoaded + this.take, this.total);
+            this.onPageAction(new PageAction(this.firstLoaded));
+        }
+    };
+    ScrollerService.prototype.rowOffset = function (index) {
+        return this.rowHeightService.offset(index) + this.topOffset;
+    };
+    ScrollerService.prototype.rowsForHeight = function (height) {
+        return Math.ceil(height / this.rowHeightService.height(0));
+    };
+    return ScrollerService;
+}());
+export { ScrollerService };

package/dist/esm/virtualization/services/index.d.ts

@@ -0,0 +1,3 @@
+import { RowHeightService } from './RowHeightService';
+import { PageAction, ScrollAction, ScrollElement, ScrollerService } from './ScrollerService';
+export { PageAction, ScrollElement, RowHeightService, ScrollAction, ScrollerService };

package/dist/esm/virtualization/services/index.js

@@ -0,0 +1,3 @@
+import { RowHeightService } from './RowHeightService.js';
+import { PageAction, ScrollAction, ScrollerService } from './ScrollerService.js';
+export { PageAction, RowHeightService, ScrollAction, ScrollerService };