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

package/dist/esm/common/SearchBar.js

@@ -0,0 +1,177 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { canUseDOM, getRef, setRef } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var SearchBarVue2 = {
+  name: 'search-bar',
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'keydown': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    value: String,
+    id: String,
+    placeholder: String,
+    tabIndex: Number,
+    size: {
+      type: Number,
+      default: undefined
+    },
+    suggestedText: String,
+    focused: Boolean,
+    disabled: Boolean,
+    readOnly: Boolean,
+    expanded: Boolean,
+    owns: String,
+    name: String,
+    activedescendant: String,
+    describedby: String,
+    clearButton: Boolean,
+    accessKey: String,
+    ariaLabelledBy: String
+  },
+  data: function data() {
+    return {
+      prevValue: undefined,
+      prevSuggestedText: undefined
+    };
+  },
+  watch: {
+    suggestedText: function suggestedText(_, oldValue) {
+      this.prevSuggestedText = oldValue;
+    },
+    value: function value(_, oldValue) {
+      this.prevValue = oldValue;
+    }
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        value = _a.value,
+        suggestedText = _a.suggestedText,
+        focused = _a.focused;
+
+    if (!this.input) {
+      this.input = this.$refs.input;
+    }
+
+    var input = this.input;
+    var valueChanged = this.$data.prevValue !== value || suggestedText !== this.prevSuggestedText;
+    var deleting = valueChanged && this.$data.prevValue && this.$data.prevValue.startsWith(value) && !(this.$data.prevSuggestedText && suggestedText && this.$data.prevSuggestedText.endsWith(suggestedText));
+
+    if (focused && input && canUseDOM && document.activeElement !== input) {
+      input.focus();
+    }
+
+    if (suggestedText && valueChanged && !deleting && input) {
+      input.setSelectionRange(value.length - suggestedText.length, value.length);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  mounted: function mounted() {
+    this.input = getRef(this, 'input');
+  },
+  methods: {
+    onChange: function onChange(e) {
+      this.$emit('change', e);
+    },
+    onBlur: function onBlur(e) {
+      this.$emit('blur', e);
+    },
+    onFocus: function onFocus(e) {
+      this.$emit('focus', e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      this.$emit('keydown', e);
+    },
+    clearButtonClick: function clearButtonClick(e) {
+      this.$emit('clearbuttonclick', e);
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("input", {
+      autocomplete: "off",
+      attrs: this.v3 ? undefined : {
+        autocomplete: "off",
+        id: this.$props.id,
+        type: "text",
+        placeholder: this.$props.placeholder,
+        tabindex: this.$props.tabIndex,
+        accesskey: this.$props.accessKey,
+        role: "combobox",
+        name: this.$props.name,
+        size: this.$props.size ? this.$props.size : 20,
+        "aria-disabled": this.$props.disabled || undefined,
+        disabled: this.$props.disabled || undefined,
+        readonly: this.$props.readOnly || undefined,
+        "aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
+        "aria-haspopup": "listbox",
+        "aria-expanded": this.$props.expanded || false,
+        "aria-controls": this.$props.owns,
+        "aria-activedescendant": this.$props.activedescendant,
+        "aria-describedby": this.$props.describedby,
+        "aria-labelledby": this.$props.ariaLabelledBy
+      },
+      id: this.$props.id,
+      type: "text",
+      key: "searchbar",
+      placeholder: this.$props.placeholder,
+      "class": "k-input-inner",
+      tabindex: this.$props.tabIndex,
+      accesskey: this.$props.accessKey,
+      role: "combobox",
+      name: this.$props.name,
+      value: this.v3 ? this.$props.value : null,
+      domProps: this.v3 ? undefined : {
+        "value": this.$props.value
+      },
+      size: this.$props.size ? this.$props.size : 20,
+      onInput: this.onChange,
+      on: this.v3 ? undefined : {
+        "input": this.onChange,
+        "keydown": this.onKeyDown,
+        "focusin": this.onFocus,
+        "blur": this.onBlur
+      },
+      ref: setRef(this, 'input'),
+      onKeydown: this.onKeyDown,
+      onFocusin: this.onFocus,
+      onBlur: this.onBlur,
+      "aria-disabled": this.$props.disabled || undefined,
+      disabled: this.$props.disabled || undefined,
+      readonly: this.$props.readOnly || undefined,
+      "aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
+      "aria-haspopup": "listbox",
+      "aria-expanded": this.$props.expanded || false,
+      "aria-controls": this.$props.owns,
+      "aria-activedescendant": this.$props.activedescendant,
+      "aria-describedby": this.$props.describedby,
+      "aria-labelledby": this.$props.ariaLabelledBy
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var SearchBar = SearchBarVue2;
+export { SearchBar, SearchBarVue2 };

package/dist/esm/common/VirtualScroll.d.ts

@@ -0,0 +1,42 @@
+import { Page } from './settings';
+/**
+ * @hidden
+ */
+export interface ComponentState {
+    skip?: number;
+    selectedIndex?: number;
+    opened?: boolean;
+    event?: any;
+}
+/**
+ * @hidden
+ */
+export default class VirtualScroll {
+    container: HTMLDivElement | null;
+    scrollElement: HTMLDivElement | null;
+    list: any;
+    containerHeight: number;
+    skip: number;
+    total: number;
+    enabled: boolean;
+    pageSize: number;
+    itemHeight: number;
+    PageChange: (event: Page, syntheticEvent: any) => void;
+    ScrollChange: (Event: any) => void;
+    private prevScrollPos;
+    private listTranslate;
+    private scrollSyncing;
+    constructor();
+    get translate(): number;
+    scrollerRef: (element: HTMLDivElement | null) => void;
+    calcScrollElementHeight: () => boolean;
+    changePage(skip: number, e: any): void;
+    translateTo(dY: number): void;
+    reset(): void;
+    scrollToEnd(): void;
+    localScrollUp(e: any): void;
+    localScrollDown(e: any): void;
+    scrollNonStrict(e: any): void;
+    scrollHandler(this: any, e: any): void;
+    validateTranslate(translate: number): number;
+}

package/dist/esm/common/VirtualScroll.js

@@ -0,0 +1,196 @@
+var maxHeightIE = 1533915;
+/**
+ * @hidden
+ */
+
+var VirtualScroll =
+/** @class */
+function () {
+  function VirtualScroll() {
+    var _this = this;
+
+    this.containerHeight = 0;
+    this.skip = 0;
+    this.total = 0;
+    this.enabled = false;
+    this.pageSize = 0;
+    this.itemHeight = 0;
+    this.prevScrollPos = 0;
+    this.listTranslate = 0;
+    this.scrollSyncing = false;
+
+    this.scrollerRef = function (element) {
+      var vs = _this;
+      vs.container = element;
+
+      if (element) {
+        element.setAttribute('unselectable', 'on');
+        setTimeout(vs.calcScrollElementHeight.bind(vs), 0);
+      }
+    };
+
+    this.calcScrollElementHeight = function () {
+      _this.scrollSyncing = true;
+      var heightChanged = false;
+      _this.itemHeight = _this.list ? _this.list.children[0].offsetHeight : _this.itemHeight;
+      _this.containerHeight = Math.min(maxHeightIE, _this.itemHeight * _this.total);
+      var newHeight = _this.containerHeight;
+
+      if (_this.scrollElement) {
+        heightChanged = _this.scrollElement.style.height !== newHeight + 'px';
+
+        if (heightChanged) {
+          _this.scrollElement.style.height = newHeight + 'px';
+        }
+      }
+
+      _this.scrollSyncing = false;
+      return heightChanged;
+    };
+
+    this.scrollHandler = this.scrollHandler.bind(this);
+  }
+
+  Object.defineProperty(VirtualScroll.prototype, "translate", {
+    get: function get() {
+      return this.listTranslate;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  VirtualScroll.prototype.changePage = function (skip, e) {
+    var newSkip = Math.min(Math.max(0, skip), this.total - this.pageSize);
+
+    if (newSkip !== this.skip) {
+      this.PageChange({
+        skip: newSkip,
+        take: this.pageSize
+      }, e);
+    }
+  };
+
+  VirtualScroll.prototype.translateTo = function (dY) {
+    this.listTranslate = dY;
+
+    if (this.list) {
+      this.list.style.transform = 'translateY(' + dY + 'px)';
+    }
+  };
+
+  VirtualScroll.prototype.reset = function () {
+    if (this.container) {
+      this.calcScrollElementHeight();
+      this.container.scrollTop = 0;
+      this.translateTo(0);
+    }
+  };
+
+  VirtualScroll.prototype.scrollToEnd = function () {
+    if (this.container && this.list) {
+      this.calcScrollElementHeight();
+      this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight; //   this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
+
+      this.translateTo(this.container.scrollHeight); // - this.list.offsetHeight
+    }
+  };
+
+  VirtualScroll.prototype.localScrollUp = function (e) {
+    var height = this.itemHeight;
+    var scrollTop = this.container.scrollTop;
+    var targetTranslate = this.listTranslate;
+    var items;
+    var additionalOnTop = scrollTop - targetTranslate;
+
+    if (additionalOnTop > height) {
+      return;
+    }
+
+    for (items = 0; items < this.skip; items++) {
+      if (targetTranslate + height + additionalOnTop <= scrollTop) {
+        break;
+      }
+
+      targetTranslate -= height;
+    }
+
+    targetTranslate = this.validateTranslate(targetTranslate);
+
+    if (this.skip - items <= 0 && targetTranslate >= scrollTop) {
+      this.translateTo(0);
+      this.changePage(0, e);
+      this.container.scrollTop = 0;
+      return;
+    }
+
+    if (targetTranslate !== this.listTranslate) {
+      this.translateTo(targetTranslate);
+      this.changePage(this.skip - items, e);
+    }
+  };
+
+  VirtualScroll.prototype.localScrollDown = function (e) {
+    var height = this.itemHeight;
+    var scrollTop = this.container.scrollTop;
+    var targetTranslate = this.listTranslate;
+    var itemsLenght = this.list.children.length;
+    var items;
+
+    for (items = 0; items < itemsLenght; items++) {
+      if (targetTranslate + height >= scrollTop) {
+        break;
+      }
+
+      targetTranslate += height;
+    }
+
+    targetTranslate = this.validateTranslate(targetTranslate);
+
+    if (items >= itemsLenght && this.skip + items >= this.total) {
+      this.translateTo(targetTranslate);
+      this.changePage(this.total - 1, e);
+    } else if (targetTranslate !== this.listTranslate) {
+      this.translateTo(targetTranslate);
+      this.changePage(this.skip + items, e);
+    }
+  };
+
+  VirtualScroll.prototype.scrollNonStrict = function (e) {
+    var floatItemIndex = this.total * this.prevScrollPos / this.containerHeight;
+    var itemIndex = Math.min(Math.floor(floatItemIndex), this.total - 1);
+    var targetTranslate = this.containerHeight * floatItemIndex / this.total;
+    targetTranslate = this.validateTranslate(targetTranslate);
+    this.translateTo(targetTranslate);
+    this.changePage(itemIndex, e);
+  };
+
+  VirtualScroll.prototype.scrollHandler = function (e) {
+    var scrollTop = this.container ? this.container.scrollTop : 0;
+    var prev = this.prevScrollPos;
+    this.prevScrollPos = scrollTop;
+    this.ScrollChange(e);
+
+    if (!this.enabled || !this.list || !this.container || this.scrollSyncing) {
+      return;
+    }
+
+    if (scrollTop - prev <= 0 && scrollTop > this.listTranslate - this.list.scrollHeight / 10) {
+      this.localScrollUp(e);
+    } else if (scrollTop - prev > 0 && scrollTop < this.listTranslate + this.list.scrollHeight * 2 / 3) {
+      this.localScrollDown(e);
+    } else {
+      this.scrollNonStrict(e);
+    }
+  };
+
+  VirtualScroll.prototype.validateTranslate = function (translate) {
+    translate = Math.max(0, translate); // translate = Math.min(this.containerHeight - this.list!.offsetHeight, translate);
+
+    translate = Math.min(this.containerHeight, translate);
+    return translate;
+  };
+
+  return VirtualScroll;
+}();
+
+export default VirtualScroll;

package/dist/esm/common/events.d.ts

@@ -0,0 +1,63 @@
+import { FilterDescriptor } from './filterDescriptor';
+import { Page } from './settings';
+/**
+ * @hidden
+ */
+export interface DropdownEvent {
+    /**
+     * A native event.
+     */
+    event: any;
+    /**
+     * An event target.
+     */
+    target: any;
+}
+/**
+ * @hidden
+ */
+export interface FilterChangeEvent extends DropdownEvent {
+    /**
+     * A native event.
+     */
+    event: any;
+    /**
+     * The default `FilterDescriptor` object.
+     */
+    filter: FilterDescriptor;
+}
+/**
+ * @hidden
+ */
+export interface ChangeEvent extends DropdownEvent {
+    /**
+     * The current value of the component.
+     */
+    value: any;
+}
+/**
+ * @hidden
+ */
+export interface OpenEvent extends DropdownEvent {
+}
+/**
+ * @hidden
+ */
+export interface CloseEvent extends DropdownEvent {
+}
+/**
+ * @hidden
+ */
+export interface FocusEvent extends DropdownEvent {
+}
+/**
+ * @hidden
+ */
+export interface BlurEvent extends DropdownEvent {
+}
+/**
+ * @hidden
+ */
+export interface PageChangeEvent extends DropdownEvent {
+    page: Page;
+}

package/dist/esm/common/events.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/common/filterDescriptor.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A basic filter expression. Usually a part of [`CompositeFilterDescriptor`]({% slug api_kendo-data-query_compositefilterdescriptor %}).
+ *
+ * For more information, refer to the [`filterBy`]({% slug api_kendo-data-query_filterby %}) method.
+ */
+export interface FilterDescriptor {
+    /**
+     * The field of the data item to which the filter operator is applied.
+     */
+    field?: string | Function;
+    /**
+     * The filter operator (comparison).
+     *
+     * The supported operators are:
+     * * `"eq"` (equal to)
+     * * `"neq"` (not equal to)
+     * * `"isnull"` (is equal to null)
+     * * `"isnotnull"` (is not equal to null)
+     * * `"lt"` (less than)
+     * * `"lte"` (less than or equal to)
+     * * `"gt"` (greater than)
+     * * `"gte"` (greater than or equal to)
+     *
+     * The following operators are supported for string fields only:
+     * * `"startswith"`
+     * * `"endswith"`
+     * * `"contains"`
+     * * `"doesnotcontain"`
+     * * `"isempty"`
+     * * `"isnotempty"`
+     */
+    operator: string | Function;
+    /**
+     * The value to which the field is compared. Has to be of the same type as the field.
+     */
+    value?: any;
+    /**
+     * Determines if the string comparison is case-insensitive.
+     */
+    ignoreCase?: boolean;
+}

package/dist/esm/common/filterDescriptor.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/common/settings.d.ts

@@ -0,0 +1,102 @@
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
+ */
+export interface Page {
+    /**
+     * The number of records to skip.
+     */
+    skip: number;
+    /**
+     * The number of records to take.
+     */
+    take: number;
+}
+/**
+ * The virtualization settings.
+ */
+export interface VirtualizationSettings {
+    /**
+     * The number of the requested records.
+     */
+    pageSize: number;
+    /**
+     * The number of records to skip.
+     */
+    skip: number;
+    /**
+     * The number of all records.
+     */
+    total: number;
+}
+/**
+ * The settings of the popup container.
+ */
+export interface DropDownsPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Sets the width of the popup container. By default, the width of the host element is used.
+     */
+    width?: string;
+    /**
+     * Sets the height of the popup container. By default, the height is 200px.
+     */
+    height?: string;
+}
+import { FilterDescriptor } from './filterDescriptor';
+/**
+ * @hidden
+ */
+export interface EventData {
+    type?: string;
+    filter?: FilterDescriptor;
+    page?: Page;
+    suggestion?: Suggestion;
+}
+/**
+ * Represents the `Suggestion` object of the AutoComplete.
+ */
+export interface Suggestion {
+    /**
+     * Represents the typed text of the user.
+     */
+    readonly userInput: string;
+    /**
+     * Represents the suggested text without the user input.
+     */
+    readonly value: string;
+}
+/**
+ * @hidden
+ */
+export interface InternalState {
+    data: DropDownStateBase;
+    events: Array<EventData>;
+    event: any;
+}
+/**
+ * @hidden
+ */
+export interface DropDownStateBase {
+    /**
+     * Input element text of the Component.
+     */
+    text?: string;
+    value?: any;
+    focused?: boolean;
+    opened?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare enum ActiveDescendant {
+    PopupList = 0,
+    TagsList = 1
+}

package/dist/esm/common/settings.js

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export var ActiveDescendant;
+(function (ActiveDescendant) {
+    ActiveDescendant[ActiveDescendant["PopupList"] = 0] = "PopupList";
+    ActiveDescendant[ActiveDescendant["TagsList"] = 1] = "TagsList";
+})(ActiveDescendant || (ActiveDescendant = {}));

package/dist/esm/common/utils.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @hidden
+ */
+declare const isPresent: (value: any) => boolean;
+/**
+ * @hidden
+ */
+declare const sameCharsOnly: (word: string, character: string) => boolean;
+/**
+ * @hidden
+ */
+declare const shuffleData: (data: Array<any>, splitIndex: number, defaultItem: any) => any[];
+/**
+ * @hidden
+ */
+declare const matchText: (text: string, word: string, ignoreCase?: boolean) => boolean;
+/**
+ * @hidden
+ */
+declare const scrollToItem: (scrollElem: HTMLDivElement, itemHeight: number, itemIndex: number, translate: number, virtualScroll: boolean) => void;
+/**
+ * @hidden
+ */
+declare const itemIndexStartsWith: (items: any[], text?: string, field?: string) => number;
+/**
+ * @hidden
+ */
+declare const getItemIndexByText: (data: Array<any>, text: string, textField?: string, matchCase?: boolean) => number;
+/**
+ * @hidden
+ */
+declare const getItemValue: (item: any, field?: string) => any;
+/**
+ * @hidden
+ */
+declare const matchDataCollections: (data1?: Array<any>, data2?: Array<any>, key?: string) => boolean;
+/**
+ * @hidden
+ */
+declare const removeDataItems: (items: Array<any>, toRemove: Array<any>, key?: string) => void;
+/**
+ * @hidden
+ */
+declare const areSame: (item1: any, item2: any, key?: string) => boolean;
+/**
+ * @hidden
+ */
+declare const getFocusedItem: (data: Array<any>, value?: string, textField?: string) => number;
+/**
+ * @hidden
+ */
+declare const suggestValue: (value?: string, data?: Array<any>, textField?: string) => string;
+/**
+ * @hidden
+ */
+declare const preventDefaultNonInputs: (event: any) => void;
+export { isPresent, sameCharsOnly, shuffleData, matchText, scrollToItem, itemIndexStartsWith, getItemIndexByText, getItemValue, matchDataCollections, removeDataItems, areSame, getFocusedItem, preventDefaultNonInputs, suggestValue };