@tylertech/forge 2.0.0

package/esm/list-dropdown/list-dropdown-utils.js

@@ -0,0 +1,347 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getEventPath, isDefined, isObject, isDeepEqual } from '@tylertech/forge-core';
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { ICON_CLASS_NAME } from '../constants';
+import { LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
+import { LIST_CONSTANTS } from '../list/list';
+import { LIST_ITEM_CONSTANTS } from '../list/list-item';
+import { PopupAnimationType, POPUP_CONSTANTS } from '../popup';
+import { SKELETON_CONSTANTS } from '../skeleton';
+import { ListDropdownAsyncStyle, ListDropdownType, LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
+export var ListDropdownOptionType;
+(function (ListDropdownOptionType) {
+    ListDropdownOptionType[ListDropdownOptionType["Option"] = 0] = "Option";
+    ListDropdownOptionType[ListDropdownOptionType["Group"] = 1] = "Group";
+})(ListDropdownOptionType || (ListDropdownOptionType = {}));
+/**
+ * Creates the floating dropdown element container.
+ * @param config
+ * @param targetElement
+ */
+export function createDropdown(config, targetElement) {
+    const dropdownElement = createPopupDropdown(config, targetElement);
+    const dropdownId = `list-dropdown-popup-${config.id}`;
+    // Prevent mousedown events from changing focus. We keep focus in the target element at all times while open.
+    dropdownElement.addEventListener('mousedown', evt => {
+        const composedPath = getEventPath(evt);
+        // We allow for custom header and footer templates and these elements could be focusable so we need to allow access into them
+        const isFromCustomTemplate = composedPath.find(el => el.nodeType === 1 && el.hasAttribute(LIST_DROPDOWN_CONSTANTS.attributes.DATA_ALLOW_FOCUS));
+        if (isFromCustomTemplate) {
+            return;
+        }
+        const isWithinDropdownElement = composedPath.find(el => el.id === dropdownId || el.id === config.id);
+        if (isWithinDropdownElement) {
+            evt.preventDefault();
+        }
+    });
+    // Set roles and other attributes based on our type
+    switch (config.type) {
+        case ListDropdownType.Menu:
+            dropdownElement.setAttribute('role', 'menu');
+            dropdownElement.setAttribute('aria-orientation', 'vertical');
+            break;
+        default:
+            dropdownElement.setAttribute('role', 'listbox');
+    }
+    if (config.id) {
+        dropdownElement.id = dropdownId;
+    }
+    if (config.popupClasses) {
+        addClass(config.popupClasses, dropdownElement);
+    }
+    return dropdownElement;
+}
+export function createPopupDropdown(config, targetElement) {
+    const popupElement = document.createElement(POPUP_CONSTANTS.elementName);
+    popupElement.targetElement = targetElement;
+    popupElement.placement = config.popupPlacement || 'bottom-start';
+    popupElement.manageFocus = false;
+    popupElement.static = !!config.popupStatic;
+    if (config.popupOffset) {
+        popupElement.offset = config.popupOffset;
+    }
+    // Set the animations based on our type
+    switch (config.type) {
+        case ListDropdownType.Menu:
+            popupElement.animationType = PopupAnimationType.Menu;
+            break;
+        case ListDropdownType.None:
+            popupElement.animationType = PopupAnimationType.None;
+            break;
+        default:
+            popupElement.animationType = PopupAnimationType.Dropdown;
+    }
+    return popupElement;
+}
+export function createList(config) {
+    const listElement = document.createElement(LIST_CONSTANTS.elementName);
+    listElement.id = `list-dropdown-list-${config.id}`;
+    listElement.propagateClick = false;
+    return listElement;
+}
+/**
+ * Creates the list to place inside of the dropdown.
+ * @param config
+ */
+export function createListItems(config, listElement, options) {
+    // Ensure the options are provided in the form a group (if no groups provided, then we have one anonymous group of options)
+    const groups = getOptionsByGroup(options || config.options);
+    const limitOptions = config.optionLimit ? true : false;
+    let optionLimit = config.optionLimit || 0;
+    let optionIndex = 0;
+    // Iterate over our groups and render the optional headers and options for that group
+    for (const group of groups) {
+        let optionParent = listElement;
+        // Check for a group header builder callback
+        if (group.builder && typeof group.builder === 'function') {
+            const headerElement = group.builder(group);
+            if (headerElement) {
+                const groupWrapper = document.createElement('div');
+                groupWrapper.classList.add(LIST_DROPDOWN_CONSTANTS.classes.GROUP_WRAPPER);
+                optionParent = groupWrapper;
+                groupWrapper.appendChild(headerElement);
+                listElement.appendChild(groupWrapper);
+            }
+        }
+        else if (group.text) {
+            // We are rendering just text as a group header so create the group header element with predefined styles
+            const groupWrapper = document.createElement('div');
+            groupWrapper.classList.add(LIST_DROPDOWN_CONSTANTS.classes.GROUP_WRAPPER);
+            const listHeaderElement = document.createElement('div');
+            listHeaderElement.textContent = group.text;
+            listHeaderElement.classList.add('forge-typography--overline');
+            listHeaderElement.style.fontFamily = 'Roboto,sans-serif';
+            listHeaderElement.style.fontSize = '0.75rem';
+            listHeaderElement.style.lineHeight = '2rem';
+            listHeaderElement.style.letterSpacing = '0.16667em';
+            listHeaderElement.style.fontWeight = '500';
+            listHeaderElement.style.margin = '4px 8px';
+            optionParent = groupWrapper;
+            groupWrapper.appendChild(listHeaderElement);
+            listElement.appendChild(groupWrapper);
+        }
+        // Loop over the options for this group
+        for (const option of group.options) {
+            // First we check if this option is just a divider
+            if (option.divider) {
+                const dividerElement = createDivider();
+                listElement.appendChild(dividerElement);
+                continue;
+            }
+            // Check if an option limit has been provided to reduce amount of options that need to be rendered
+            if (limitOptions && --optionLimit < 0) {
+                break;
+            }
+            optionIndex++;
+            // Create and configure the list element
+            const isSelected = config.selectedValues ? config.selectedValues.some(v => isDeepEqual(v, option.value)) : false;
+            let listItemElement = document.createElement(LIST_ITEM_CONSTANTS.elementName);
+            listItemElement.value = option.value;
+            listItemElement.id = `list-dropdown-option-${config.id}-${optionIndex}`;
+            listItemElement.style.cursor = 'pointer';
+            // Add any CSS classes to the option list-item
+            if (option.optionClass && (typeof option.optionClass === 'string' || Array.isArray(option.optionClass) && option.optionClass.length)) {
+                addClass(option.optionClass, listItemElement);
+            }
+            // Set role based on type
+            switch (config.type) {
+                case ListDropdownType.Menu:
+                    listItemElement.setAttribute('role', 'menuitem');
+                    break;
+                case ListDropdownType.None:
+                    break;
+                default:
+                    listItemElement.setAttribute('role', 'option');
+            }
+            if (config.dense) {
+                listItemElement.dense = true;
+            }
+            // Check for a custom option template builder
+            if (config.optionBuilder && typeof config.optionBuilder === 'function') {
+                const element = config.optionBuilder(option, listItemElement);
+                if (element) {
+                    if (typeof element === 'string') {
+                        listItemElement.innerHTML = element;
+                    }
+                    else {
+                        listItemElement.appendChild(element);
+                    }
+                }
+            }
+            else {
+                if (typeof config.transform !== 'function') {
+                    listItemElement.textContent = option.label || '';
+                }
+                else {
+                    const result = config.transform(option.label);
+                    if (typeof result === 'string') {
+                        listItemElement.textContent = result;
+                    }
+                    else if (typeof result === 'object' && result.nodeType !== undefined) {
+                        listItemElement.appendChild(result);
+                    }
+                }
+            }
+            // Leading element/icon
+            if (option.leadingBuilder) {
+                const element = option.leadingBuilder();
+                if (isObject(element)) {
+                    element.slot = 'leading';
+                    listItemElement.appendChild(element);
+                }
+            }
+            else if (option.leadingIcon) {
+                const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
+                leadingIconElement.slot = 'leading';
+                listItemElement.appendChild(leadingIconElement);
+            }
+            // Trailing element/icon
+            if (option.trailingBuilder) {
+                const element = option.trailingBuilder();
+                if (isObject(element)) {
+                    element.slot = 'trailing';
+                    listItemElement.appendChild(element);
+                }
+            }
+            else if (option.trailingIcon) {
+                const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
+                trailingIconElement.slot = 'trailing';
+                listItemElement.appendChild(trailingIconElement);
+            }
+            // Update the disabled state
+            if (option.disabled) {
+                listItemElement.disabled = option.disabled;
+                listItemElement.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                listItemElement.style.cursor = 'pointer';
+                listItemElement.setAttribute('aria-disabled', 'false');
+            }
+            // Update the selected state
+            if (isSelected) {
+                listItemElement.selected = true;
+            }
+            listItemElement.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+            // If multiple selections are enabled then we need to create and append a leading checkbox element
+            if (config.multiple) {
+                const checkboxElement = createCheckboxElement(isSelected);
+                listItemElement.appendChild(checkboxElement);
+                listItemElement.setAttribute('aria-selected', `${isSelected}`);
+                listItemElement.setAttribute('aria-checked', `${isSelected}`);
+            }
+            if (option.elementAttributes) {
+                option.elementAttributes.forEach((value, key) => {
+                    listItemElement.setAttribute(key, value);
+                });
+            }
+            // If we have any child options, we need to render a child menu for this list item
+            if (!option.disabled && typeof config.cascadingElementFactory === 'function' && Array.isArray(option.options) && option.options.length) {
+                // Create the trailing indicator icon to show that a child menu exists for this option. 
+                const optionIconElement = document.createElement('forge-icon');
+                optionIconElement.name = 'arrow_right';
+                optionIconElement.slot = 'trailing';
+                listItemElement.appendChild(optionIconElement);
+                const nonDividerOptions = group.options.filter(o => !o.divider);
+                // Create the nested cascading element wrapper
+                const factoryConfig = {
+                    index: nonDividerOptions.indexOf(option),
+                    options: option.options,
+                    parentValue: option.value
+                };
+                const cascadingElement = config.cascadingElementFactory.call(null, factoryConfig);
+                cascadingElement.appendChild(listItemElement);
+                listItemElement = cascadingElement;
+            }
+            optionParent.appendChild(listItemElement);
+        }
+    }
+}
+export function createCheckboxElement(selected) {
+    const checkboxElement = document.createElement('forge-icon');
+    checkboxElement.setAttribute(LIST_DROPDOWN_CONSTANTS.attributes.CHECKBOX_ELEMENT, '');
+    checkboxElement.name = selected ? tylIconCheckBox.name : tylIconCheckBoxOutlineBlank.name;
+    checkboxElement.slot = 'leading';
+    checkboxElement.style.marginRight = '16px';
+    checkboxElement.style.verticalAlign = 'middle';
+    return checkboxElement;
+}
+function createDivider() {
+    const divider = document.createElement('forge-divider');
+    divider.setAttribute('aria-hidden', 'true');
+    return divider;
+}
+function createIconElement(type = 'font', iconName, iconClass) {
+    if (type === 'component') {
+        const icon = document.createElement('forge-icon');
+        if (iconClass) {
+            icon.classList.add(iconClass);
+        }
+        icon.setAttribute('aria-hidden', 'true');
+        icon.name = iconName;
+        return icon;
+    }
+    const iconElement = document.createElement('i');
+    iconElement.classList.add(iconClass || ICON_CLASS_NAME);
+    iconElement.setAttribute('aria-hidden', 'true');
+    iconElement.textContent = iconName;
+    return iconElement;
+}
+export function createAsyncElement(asyncStyle) {
+    switch (asyncStyle) {
+        case ListDropdownAsyncStyle.Skeleton:
+            return createSkeletonElement();
+        default:
+            return createSpinnerElement();
+    }
+}
+function createSpinnerElement() {
+    const div = document.createElement('div');
+    div.style.display = 'flex';
+    div.style.justifyContent = 'center';
+    div.style.alignItems = 'center';
+    div.style.padding = '8px';
+    div.style.boxSizing = 'border-box';
+    const spinner = document.createElement('forge-circular-progress');
+    spinner.style.setProperty('--forge-circular-progress-size', '24px');
+    div.appendChild(spinner);
+    return div;
+}
+function createSkeletonElement() {
+    const list = document.createElement('forge-list');
+    const div = document.createElement('div');
+    div.style.minWidth = '192px';
+    for (let i = 0; i < 3; i++) {
+        const listItemSkeleton = document.createElement(SKELETON_CONSTANTS.elementName);
+        listItemSkeleton.setAttribute('list-item', '');
+        div.appendChild(listItemSkeleton);
+    }
+    list.appendChild(div);
+    return list;
+}
+export function createBusyElement() {
+    const linearProgress = document.createElement(LINEAR_PROGRESS_CONSTANTS.elementName);
+    linearProgress.determinate = false;
+    linearProgress.style.position = 'absolute';
+    linearProgress.style.top = '0';
+    linearProgress.style.left = '0';
+    linearProgress.style.right = '0';
+    linearProgress.style.width = '100%';
+    return linearProgress;
+}
+function getOptionsByGroup(options) {
+    return isListDropdownOptionType(options, ListDropdownOptionType.Group) ? options : [{ text: '', options }];
+}
+/**
+ * Determines if the provided options are of the specified type.
+ * @param options The options either grouped or individual.
+ * @param type The type of option to detect.
+ */
+export function isListDropdownOptionType(options, type) {
+    const isOptionGroups = options.some((o) => isDefined(o) && isObject(o) && o.hasOwnProperty('options') && (o.hasOwnProperty('text') || o.hasOwnProperty('builder')));
+    const isOptionTypes = options.some((o) => isDefined(o) && isObject(o) && o.hasOwnProperty('label') && o.hasOwnProperty('value'));
+    return (isOptionGroups && type === ListDropdownOptionType.Group) || (isOptionTypes && type === ListDropdownOptionType.Option);
+}

package/esm/list-dropdown/list-dropdown.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup } from './list-dropdown-constants';
+export interface IListDropdown {
+    dropdownElement: HTMLElement | undefined;
+    open(): void;
+    close(): void;
+    destroy(): void;
+    getActiveOptionIndex(): number;
+    getActiveOption(): IListDropdownOption | undefined;
+    toggleOptionMultiple(index: number, isSelected: boolean): void;
+    activateSelectedOption(): void;
+    activateFirstOption(): number;
+    activateOption(index: number): void;
+    activateInitialOption(): void;
+    clearActiveOption(): void;
+    setSelectedValues(values: any[]): void;
+    setOptions(options: Array<IListDropdownOption | IListDropdownOptionGroup>): void;
+    appendOptions(options: Array<IListDropdownOption | IListDropdownOptionGroup>): void;
+    scrollSelectedOptionIntoView(animate?: boolean): void;
+    setScrollBottomListener(listener: () => void, threshold?: number): void;
+    removeScrollBottomListener(): void;
+    setBusyVisibility(isVisible: boolean): void;
+    handleKey(key: string): void;
+}
+export declare class ListDropdown implements IListDropdown {
+    private _targetElement;
+    private _foundation;
+    constructor(_targetElement: HTMLElement, config: IListDropdownConfig);
+    destroy(): void;
+    /** Opens the dropdown. */
+    open(): void;
+    /** Closes the dropdown. */
+    close(): void;
+    /** Gets the currently highlighted option index in the dropdown. */
+    getActiveOptionIndex(): number;
+    getActiveOption(): IListDropdownOption | undefined;
+    /** Toggles the selected option by index. Only applies when in multiselect mode. */
+    toggleOptionMultiple(index: number, isSelected: boolean): void;
+    /** Activates the first selected option. */
+    activateSelectedOption(): void;
+    /** Activates the first non-disabled option. */
+    activateFirstOption(): number;
+    /** Activates (highlights) an option by index. */
+    activateOption(index: number): void;
+    /** Activates the first activatable option. */
+    activateInitialOption(): void;
+    /** Clears the active option from the dropdown */
+    clearActiveOption(): void;
+    /** Sets the selected values. Only applies when in multiselect mode. */
+    setSelectedValues(values: any[]): void;
+    get dropdownElement(): HTMLElement | undefined;
+    setOptions(options: Array<IListDropdownOption | IListDropdownOptionGroup>): void;
+    appendOptions(options: Array<IListDropdownOption | IListDropdownOptionGroup>): void;
+    scrollSelectedOptionIntoView(animate?: boolean): void;
+    setScrollBottomListener(listener: () => void, threshold?: number): void;
+    removeScrollBottomListener(): void;
+    setBusyVisibility(isVisible: boolean): void;
+    handleKey(key: string): void;
+}

package/esm/list-dropdown/list-dropdown.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { ListDropdownFoundation } from './list-dropdown-foundation';
+import { ListDropdownAdapter } from './list-dropdown-adapter';
+import { IconRegistry } from '../icon';
+export class ListDropdown {
+    constructor(_targetElement, config) {
+        this._targetElement = _targetElement;
+        IconRegistry.define([tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
+        this._foundation = new ListDropdownFoundation(new ListDropdownAdapter(this._targetElement), config);
+    }
+    destroy() {
+        this._foundation.destroy();
+    }
+    /** Opens the dropdown. */
+    open() {
+        this._foundation.open();
+    }
+    /** Closes the dropdown. */
+    close() {
+        this._foundation.close();
+    }
+    /** Gets the currently highlighted option index in the dropdown. */
+    getActiveOptionIndex() {
+        return this._foundation.getActiveOptionIndex();
+    }
+    getActiveOption() {
+        return this._foundation.getActiveOption();
+    }
+    /** Toggles the selected option by index. Only applies when in multiselect mode. */
+    toggleOptionMultiple(index, isSelected) {
+        return this._foundation.toggleOptionMultiple(index, isSelected);
+    }
+    /** Activates the first selected option. */
+    activateSelectedOption() {
+        this._foundation.activateSelectedOption();
+    }
+    /** Activates the first non-disabled option. */
+    activateFirstOption() {
+        return this._foundation.activateFirstOption();
+    }
+    /** Activates (highlights) an option by index. */
+    activateOption(index) {
+        return this._foundation.activateOption(index);
+    }
+    /** Activates the first activatable option. */
+    activateInitialOption() {
+        return this._foundation.activateInitialOption();
+    }
+    /** Clears the active option from the dropdown */
+    clearActiveOption() {
+        this._foundation.clearActiveOption();
+    }
+    /** Sets the selected values. Only applies when in multiselect mode. */
+    setSelectedValues(values) {
+        return this._foundation.setSelectedValues(values);
+    }
+    get dropdownElement() {
+        return this._foundation.dropdownElement;
+    }
+    setOptions(options) {
+        this._foundation.setOptions(options);
+    }
+    appendOptions(options) {
+        this._foundation.appendOptions(options);
+    }
+    scrollSelectedOptionIntoView(animate) {
+        this._foundation.scrollSelectedOptionIntoView();
+    }
+    setScrollBottomListener(listener, threshold) {
+        this._foundation.setScrollBottomListener(listener, threshold);
+    }
+    removeScrollBottomListener() {
+        this._foundation.removeScrollBottomListener();
+    }
+    setBusyVisibility(isVisible) {
+        this._foundation.setBusyVisibility(isVisible);
+    }
+    handleKey(key) {
+        this._foundation.handleKey(key);
+    }
+}

package/esm/menu/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './menu-adapter';
+export * from './menu-constants';
+export * from './menu-foundation';
+export * from './menu';
+export declare function defineMenuComponent(): void;

package/esm/menu/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { MenuComponent } from './menu';
+export * from './menu-adapter';
+export * from './menu-constants';
+export * from './menu-foundation';
+export * from './menu';
+export function defineMenuComponent() {
+    defineCustomElement(MenuComponent);
+}

package/esm/menu/menu-adapter.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IMenuOption } from './index';
+import { IMenuComponent } from './menu';
+import { IMenuSelectEventData } from './menu-constants';
+import { IListDropdownConfig } from '../list-dropdown';
+export interface IMenuAdapter extends IBaseAdapter {
+    getDropdownElement(): HTMLElement | null;
+    initializeTarget(): void;
+    initializeAccessibility(id: string): void;
+    hasTargetElement(): boolean;
+    addTargetListener(event: string, callback: (event: Event) => void, bubbles?: boolean): void;
+    removeTargetListener(event: string, callback: (event: Event) => void): void;
+    attachMenu(config: IListDropdownConfig): void;
+    detachMenu(): void;
+    setOptions(options: IMenuOption[]): void;
+    getActiveOptionIndex(): number;
+    setActiveOption(index: number): void;
+    activateFirstOption(): void;
+    propagateKey(key: string): void;
+    proxyKeyboardEventToChild(evt: KeyboardEvent, id: string): void;
+    toggleChildMenu(index: number, open?: boolean): void;
+    focusTarget(): void;
+    isTargetFocused(): boolean;
+    updateActiveDescendant(id: string): void;
+    isOwnElement(element: Element): boolean;
+    addDropdownListener(type: string, listener: (evt: any) => void): void;
+    createChildMenu(index: number, parentValue: any, openCb: (index: number) => void, closeCb: (index: number) => void, selectCb: (data: IMenuSelectEventData) => void): IMenuComponent;
+    closeOtherChildMenus(excludeIndex?: number): void;
+    setSelectedValues(values: any[]): void;
+}
+export declare class MenuAdapter extends BaseAdapter<IMenuComponent> implements IMenuAdapter {
+    private _targetElement;
+    private _listDropdown?;
+    private _childMenus;
+    constructor(component: IMenuComponent);
+    getDropdownElement(): HTMLElement | null;
+    hasTargetElement(): boolean;
+    initializeTarget(): void;
+    initializeAccessibility(id: string): void;
+    addTargetListener(event: string, callback: (event: Event) => void, bubbles?: boolean): void;
+    removeTargetListener(event: string, callback: (event: Event) => void): void;
+    attachMenu(config: IListDropdownConfig): void;
+    setOptions(options: IMenuOption[]): void;
+    detachMenu(): void;
+    setActiveOption(index: number): void;
+    activateFirstOption(): void;
+    getActiveOptionIndex(): number;
+    focusTarget(): void;
+    isTargetFocused(): boolean;
+    updateActiveDescendant(id: string): void;
+    addDropdownListener(type: string, listener: (evt: any) => void): void;
+    isOwnElement(el: Element): boolean;
+    propagateKey(key: string): void;
+    proxyKeyboardEventToChild(evt: KeyboardEvent, id: string): void;
+    toggleChildMenu(index: number, open?: boolean): void;
+    createChildMenu(index: number, parentValue: any, openCb: (index: number) => void, closeCb: (index: number) => void, selectCb: (data: IMenuSelectEventData) => void): IMenuComponent;
+    closeOtherChildMenus(excludeIndex?: number): void;
+    setSelectedValues(values: any[]): void;
+    private _getOpenChildMenu;
+    private _getOwnList;
+    private _getListItems;
+}