@progress/kendo-vue-layout 2.5.1 → 2.5.2

package/dist/es/menu/components/MenuItemLink.js

@@ -0,0 +1,57 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { getDefaultSlots } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+
+var MenuItemLink = {
+  name: 'KendoMenuItemLink',
+  props: {
+    opened: Boolean,
+    url: String
+  },
+  computed: {
+    menuItemClassName: function menuItemClassName() {
+      return {
+        'k-link': true,
+        'k-menu-link': true,
+        'k-state-active': this.$props.opened
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+
+    if (this.$props.url) {
+      return h("a", {
+        "class": this.getMenuItemClassName(),
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation",
+          href: this.props.url,
+          tabIndex: -1
+        },
+        href: this.props.url,
+        tabIndex: -1
+      }, [this.props.children]);
+    } else {
+      return h("span", {
+        "class": this.menuItemClassName,
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [defaultSlot]);
+    }
+  }
+};
+var MenuItemLinkVue3 = MenuItemLink;
+export { MenuItemLink, MenuItemLinkVue3 };

package/dist/es/menu/consts.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS_RTL: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+    leftward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+};
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+    rightward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+};

package/dist/es/menu/consts.js

@@ -0,0 +1,70 @@
+/**
+ * @hidden
+ */
+var POPUP_ALIGN = {
+    vertical: 'top',
+    horizontal: 'left'
+};
+/**
+ * @hidden
+ */
+var POPUP_ALIGN_RTL = {
+    vertical: 'top',
+    horizontal: 'right'
+};
+/**
+ * @hidden
+ */
+var VERTICAL_COLLISION = {
+    vertical: 'flip',
+    horizontal: 'fit'
+};
+/**
+ * @hidden
+ */
+var HORIZONTAL_COLLISION = {
+    vertical: 'fit',
+    horizontal: 'flip'
+};
+/**
+ * @hidden
+ */
+export var POPUP_SETTINGS_RTL = {
+    downward: {
+        anchorAlign: {
+            vertical: 'bottom',
+            horizontal: 'right'
+        },
+        popupAlign: POPUP_ALIGN_RTL,
+        collision: VERTICAL_COLLISION
+    },
+    leftward: {
+        anchorAlign: {
+            vertical: 'top',
+            horizontal: 'left'
+        },
+        popupAlign: POPUP_ALIGN_RTL,
+        collision: HORIZONTAL_COLLISION
+    }
+};
+/**
+ * @hidden
+ */
+export var POPUP_SETTINGS = {
+    downward: {
+        anchorAlign: {
+            vertical: 'bottom',
+            horizontal: 'left'
+        },
+        popupAlign: POPUP_ALIGN,
+        collision: VERTICAL_COLLISION
+    },
+    rightward: {
+        anchorAlign: {
+            vertical: 'top',
+            horizontal: 'right'
+        },
+        popupAlign: POPUP_ALIGN,
+        collision: HORIZONTAL_COLLISION
+    }
+};

package/dist/es/menu/events.d.ts

@@ -0,0 +1,14 @@
+import { MenuItemModel } from './models/MenuItemModel';
+/**
+ * The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
+ */
+export interface MenuSelectEvent {
+    /**
+     * The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    itemId: string;
+    /**
+     * The selected item.
+     */
+    item: MenuItemModel;
+}

package/dist/es/menu/events.js

@@ -0,0 +1 @@
+// tslint:enable:max-line-length

package/dist/es/menu/models/BaseMenuItem.d.ts

@@ -0,0 +1,45 @@
+/**
+ * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
+ */
+export interface BaseMenuItem {
+    /**
+     * Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
+     */
+    text?: string;
+    /**
+     * Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
+     */
+    url?: string;
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     */
+    icon?: string;
+    /**
+     * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssClass?: string;
+    /**
+     * The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssStyle?: any;
+    /**
+     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     */
+    render?: any;
+    /**
+     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     */
+    linkRender?: any;
+    /**
+     * A React functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
+     */
+    contentRender?: any;
+    /**
+     * Represents any additional data that is associated with the Menu item.
+     */
+    data?: any;
+}

package/dist/es/menu/models/BaseMenuItem.js

@@ -0,0 +1 @@
+// tslint:enable:max-line-length

package/dist/es/menu/models/MenuItemModel.d.ts

@@ -0,0 +1,19 @@
+import { BaseMenuItem } from './BaseMenuItem';
+/**
+ * The interface for describing items that can be passed to the `items` property of the Menu as an alternative to passing them as children.
+ */
+export interface MenuItemModel extends BaseMenuItem {
+    /**
+     * Specifies the children of the item.
+     */
+    items?: MenuItemModel[];
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalModel extends BaseMenuItem {
+    id: string;
+    items: MenuItemInternalModel[];
+    contentParentItemId?: string;
+    isLastFromSiblings: boolean;
+}

package/dist/es/menu/utils/DirectionHolder.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export declare class DirectionHolder {
+    private phase;
+    private previousIsDirectionRightToLeft?;
+    private isDirectionRightToLeft?;
+    getIsDirectionRightToLeft(): boolean;
+    setIsDirectionRightToLeft(value: boolean): void;
+    hasDirectionChanged(): boolean;
+}

package/dist/es/menu/utils/DirectionHolder.js

@@ -0,0 +1,24 @@
+/**
+ * @hidden
+ */
+var DirectionHolder = /** @class */ (function () {
+    function DirectionHolder() {
+        // The phase changes in the following sequence:
+        // NotInitialized -> Initialized -> NewValueReceived.
+        this.phase = 'Initialized';
+    }
+    DirectionHolder.prototype.getIsDirectionRightToLeft = function () {
+        return this.isDirectionRightToLeft;
+    };
+    DirectionHolder.prototype.setIsDirectionRightToLeft = function (value) {
+        this.phase = this.phase === 'NotInitialized' ? 'Initialized' : 'NewValueReceived';
+        this.previousIsDirectionRightToLeft = this.isDirectionRightToLeft;
+        this.isDirectionRightToLeft = value;
+    };
+    DirectionHolder.prototype.hasDirectionChanged = function () {
+        return this.phase === 'NewValueReceived' ?
+            this.previousIsDirectionRightToLeft !== this.isDirectionRightToLeft : false;
+    };
+    return DirectionHolder;
+}());
+export { DirectionHolder };

package/dist/es/menu/utils/MouseOverHandler.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @hidden
+ */
+export declare class MouseOverHandler {
+    private openOnClick;
+    private resetMenu;
+    private openItem;
+    private isMouseOverEnabled;
+    private mouseDown;
+    constructor(openOnClick: boolean | undefined, resetMenu: any, openItem: any);
+    set OpenOnClick(value: boolean | undefined);
+    handleItemSelectedViaKeyboard(): void;
+    get IsMouseOverEnabled(): boolean;
+    handleItemMouseDown(): void;
+    handleItemFocus(): void;
+    handleItemClick(itemId: string, clickedItemIsWithDefaultClose: boolean): void;
+}

package/dist/es/menu/utils/MouseOverHandler.js

@@ -0,0 +1,64 @@
+/**
+ * @hidden
+ */
+var MouseOverHandler = /** @class */ (function () {
+    function MouseOverHandler(openOnClick, resetMenu, openItem) {
+        this.openOnClick = openOnClick;
+        this.resetMenu = resetMenu;
+        this.openItem = openItem;
+        this.openOnClick = openOnClick;
+        this.isMouseOverEnabled = openOnClick ? false : true;
+    }
+    Object.defineProperty(MouseOverHandler.prototype, "OpenOnClick", {
+        set: function (value) {
+            if (Boolean(value) !== Boolean(this.openOnClick)) {
+                this.mouseDown = false;
+                this.isMouseOverEnabled = value ? false : true;
+            }
+            this.openOnClick = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MouseOverHandler.prototype.handleItemSelectedViaKeyboard = function () {
+        if (this.openOnClick) {
+            this.isMouseOverEnabled = false;
+            this.resetMenu();
+        }
+    };
+    Object.defineProperty(MouseOverHandler.prototype, "IsMouseOverEnabled", {
+        get: function () {
+            return this.isMouseOverEnabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MouseOverHandler.prototype.handleItemMouseDown = function () {
+        this.mouseDown = true;
+    };
+    MouseOverHandler.prototype.handleItemFocus = function () {
+        // Keep opening on mouse over upon tabbing
+        // and keyboard navigation. However, discard the event
+        // upon click because a cycle occurs and the item does not open.
+        if (this.openOnClick && !this.mouseDown) {
+            this.isMouseOverEnabled = true;
+        }
+        this.mouseDown = false;
+    };
+    MouseOverHandler.prototype.handleItemClick = function (itemId, clickedItemIsWithDefaultClose) {
+        if (this.openOnClick) {
+            if (this.isMouseOverEnabled) {
+                if (clickedItemIsWithDefaultClose) {
+                    this.isMouseOverEnabled = false;
+                    this.resetMenu();
+                }
+            }
+            else {
+                this.isMouseOverEnabled = true;
+                this.openItem(itemId);
+            }
+        }
+    };
+    return MouseOverHandler;
+}());
+export { MouseOverHandler };

package/dist/es/menu/utils/getNewItemIdUponKeyboardNavigation.d.ts

@@ -0,0 +1,7 @@
+import { MenuItemInternalModel } from '../models/MenuItemModel';
+/**
+ * @hidden
+ * Returns the `itemId` (string) for applicable key codes even when the id has not changed.
+ * For key codes that are not applicable, returns `undefined`.
+ */
+export declare function getNewItemIdUponKeyboardNavigation(sourceItems: MenuItemInternalModel[], sourceItemId: string, keyCode: number, key: string, isMenuVertical?: boolean, isDirectionRightToLeft?: boolean): string;

package/dist/es/menu/utils/getNewItemIdUponKeyboardNavigation.js

@@ -0,0 +1,202 @@
+import { Keys } from '@progress/kendo-vue-common';
+import { getFirstChildId, isIdZeroLevel, getRootParentId, isIdFirstLevel, getDirectParentId, getShortId, createId, getDirectSiblingIdForLevelZero, getItemById as getItemByIdUtil } from './itemsIdsUtils';
+var NO_WHITESPACE_REGEX = /\S/;
+/**
+ * @hidden
+ * Returns the `itemId` (string) for applicable key codes even when the id has not changed.
+ * For key codes that are not applicable, returns `undefined`.
+ */
+export function getNewItemIdUponKeyboardNavigation(sourceItems, sourceItemId, keyCode, key, isMenuVertical, isDirectionRightToLeft) {
+    var sourceItem = getItemById();
+    switch (keyCode) {
+        case Keys.left:
+            return getIdUponLeftKey();
+        case Keys.right:
+            return getIdUponRightKey();
+        case Keys.up:
+            return getIdUponUpKey();
+        case Keys.down:
+            return getIdUponDownKey();
+        case Keys.enter:
+        case Keys.space:
+            return getIdUponEnterAndSpaceKeys();
+        case Keys.home:
+            return getIdUponHomeKey();
+        case Keys.end:
+            return getIdUponEndKey();
+        case Keys.esc:
+            return getIdUponEscKey();
+        default:
+            return isSearchableKey() ? getIdUponSearchByChar() : sourceItemId;
+    }
+    function getIdUponLeftKey() {
+        if (isMenuVertical) {
+            return isDirectionRightToLeft ? getIdUponRightKeyForVerticalMenu() : getIdUponLeftKeyForVerticalMenu();
+        }
+        else {
+            return isDirectionRightToLeft ?
+                getIdUponRightKeyForHorizontalMenu() : getIdUponLeftKeyForHorizontalMenu();
+        }
+    }
+    function getIdUponRightKey() {
+        if (isMenuVertical) {
+            return isDirectionRightToLeft ? getIdUponLeftKeyForVerticalMenu() : getIdUponRightKeyForVerticalMenu();
+        }
+        else {
+            return isDirectionRightToLeft ?
+                getIdUponLeftKeyForHorizontalMenu() : getIdUponRightKeyForHorizontalMenu();
+        }
+    }
+    function getIdUponDownKey() {
+        if (isMenuVertical) {
+            return getNextSiblingId();
+        }
+        else {
+            if (isIdZeroLevel(sourceItemId)) {
+                return getFirstChildIdForEnabledItemOrGetSameId();
+            }
+            else {
+                return getNextSiblingId();
+            }
+        }
+    }
+    function getIdUponUpKey() {
+        if (isMenuVertical) {
+            return getPrevSiblingId();
+        }
+        else {
+            if (isIdZeroLevel(sourceItemId)) {
+                return getLastChildIdForEnabledItemOrGetSameId();
+            }
+            else {
+                return getPrevSiblingId();
+            }
+        }
+    }
+    function getIdUponEnterAndSpaceKeys() {
+        if (sourceItem.disabled) {
+            return sourceItemId;
+        }
+        else {
+            return hasChildren() ? getFirstChildId(sourceItemId) : getRootParentId(sourceItemId);
+        }
+    }
+    function getIdUponHomeKey() {
+        return getSiblings()[0].id;
+    }
+    function getIdUponEndKey() {
+        var siblings = getSiblings();
+        return siblings[siblings.length - 1].id;
+    }
+    function getIdUponEscKey() {
+        return isIdZeroLevel(sourceItemId) ? sourceItemId : getDirectParentId(sourceItemId);
+    }
+    function getIdUponSearchByChar() {
+        var searchChar = key.toLowerCase();
+        var siblings = getSiblings();
+        var currentItemIndex = Number(getShortId(sourceItemId));
+        var itemsToSearch = siblings.slice(currentItemIndex + 1).concat(siblings.slice(0, currentItemIndex + 1));
+        var matchedSibling = itemsToSearch.find(function (item) {
+            return (item.text || '').toLowerCase().startsWith(searchChar);
+        });
+        return matchedSibling ? matchedSibling.id : sourceItemId;
+    }
+    // #region Left Key Internals
+    function getIdUponLeftKeyForHorizontalMenu() {
+        if (isIdZeroLevel(sourceItemId)) {
+            return getPrevSiblingId();
+        }
+        else if (isIdFirstLevel(sourceItemId)) {
+            return getFirstChildIdForEnabledItemOrGetSameId(getPrevSiblingId(getRootParentId(sourceItemId)));
+        }
+        else {
+            return getDirectParentId(sourceItemId);
+        }
+    }
+    function getIdUponLeftKeyForVerticalMenu() {
+        if (isIdZeroLevel(sourceItemId)) {
+            return getLastChildIdForEnabledItemOrGetSameId();
+        }
+        else {
+            return getDirectParentId(sourceItemId);
+        }
+    }
+    // #endregion
+    // #region Right Key Internals
+    function getIdUponRightKeyForHorizontalMenu() {
+        if (isIdZeroLevel(sourceItemId)) {
+            return getNextSiblingId();
+        }
+        else {
+            return getFirstChildIdForEnabledItemOrGetSameId(hasChildren() ? sourceItemId : getNextSiblingId(getRootParentId(sourceItemId)));
+        }
+    }
+    function getIdUponRightKeyForVerticalMenu() {
+        return getFirstChildIdForEnabledItemOrGetSameId(isIdZeroLevel(sourceItemId) || hasChildren() ?
+            sourceItemId : getNextSiblingId(getRootParentId(sourceItemId)));
+    }
+    // #endregion
+    // #region Utils
+    function getFirstChildIdForEnabledItemOrGetSameId(itemId) {
+        return getFirstOrLastChildIdForEnabledItemOrGetSameId(true, itemId);
+    }
+    function getLastChildIdForEnabledItemOrGetSameId(itemId) {
+        return getFirstOrLastChildIdForEnabledItemOrGetSameId(false, itemId);
+    }
+    function isSearchableKey() {
+        return key.length === 1 && NO_WHITESPACE_REGEX.test(key);
+    }
+    function getItemById(itemId, items) {
+        if (itemId === undefined) {
+            itemId = sourceItemId;
+        }
+        if (items === undefined) {
+            items = sourceItems;
+        }
+        return getItemByIdUtil(itemId, items);
+    }
+    function hasChildren(itemId) {
+        return getItemById(itemId).items.length > 0;
+    }
+    function getPrevSiblingId(itemId) {
+        return getSiblingId(false, itemId);
+    }
+    function getNextSiblingId(itemId) {
+        return getSiblingId(true, itemId);
+    }
+    function getLastChildId(itemId) {
+        var itemChildren = getItemById(itemId).items;
+        return itemChildren[itemChildren.length - 1].id;
+    }
+    function getSiblings() {
+        return isIdZeroLevel(sourceItemId) ?
+            sourceItems : getItemById(getDirectParentId(sourceItemId), sourceItems).items;
+    }
+    function getFirstOrLastChildIdForEnabledItemOrGetSameId(getFirstChild, itemId) {
+        if (itemId === undefined) {
+            itemId = sourceItemId;
+        }
+        var item = getItemById(itemId);
+        if (hasChildren(itemId) && !item.disabled) {
+            return getFirstChild ? getFirstChildId(itemId) : getLastChildId(itemId);
+        }
+        else {
+            return itemId;
+        }
+    }
+    function getSiblingId(next, itemId) {
+        if (itemId === undefined) {
+            itemId = sourceItemId;
+        }
+        if (isIdZeroLevel(itemId)) {
+            return getDirectSiblingIdForLevelZero(next, itemId, sourceItems.length);
+        }
+        else {
+            var directParentId = getDirectParentId(itemId);
+            var shortId = getShortId(itemId);
+            var siblingsCount = getItemById(directParentId).items.length;
+            return createId(getDirectSiblingIdForLevelZero(next, shortId, siblingsCount), directParentId);
+        }
+    }
+    // #endregion
+}

package/dist/es/menu/utils/hoverDelay.d.ts

@@ -0,0 +1,9 @@
+import { MenuProps } from '../MenuProps';
+/**
+ * @hidden
+ */
+export declare function getHoverOpenDelay(props: MenuProps): number;
+/**
+ * @hidden
+ */
+export declare function getHoverCloseDelay(props: MenuProps): number;

package/dist/es/menu/utils/hoverDelay.js

@@ -0,0 +1,17 @@
+/**
+ * @hidden
+ */
+export function getHoverOpenDelay(props) {
+    if (props.hoverOpenDelay !== undefined) {
+        return props.hoverOpenDelay;
+    }
+    else {
+        return props.openOnClick ? 0 : 100;
+    }
+}
+/**
+ * @hidden
+ */
+export function getHoverCloseDelay(props) {
+    return props.hoverCloseDelay !== undefined ? props.hoverCloseDelay : 100;
+}