@syncfusion/ej2-splitbuttons 30.2.4 → 31.1.17

package/dist/ej2-splitbuttons.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.min.js
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-splitbuttons.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.umd.min.js
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/ej2-splitbuttons.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.min.js
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ts/button-group/button-group.d.ts

@@ -0,0 +1,38 @@
+import { ButtonModel } from '@syncfusion/ej2-buttons';
+/**
+ * Initialize ButtonGroup CSS component with specified properties.
+ * ```html
+ * <div id='buttongroup'>
+ * <button></button>
+ * <button></button>
+ * <button></button>
+ * </div>
+ * ```
+ * ```typescript
+ * createButtonGroup('#buttongroup', {
+ *   cssClass: 'e-outline',
+ *   buttons: [
+ *       { content: 'Day' },
+ *       { content: 'Week' },
+ *       { content: 'Work Week'}
+ *   ]
+ * });
+ * ```
+ *
+ * @param {string} selector
+ * @param {CreateButtonGroupModel} options
+ * @returns HTMLElement
+ */
+/**
+ * Creates button group.
+ *
+ * @param {string} selector - Specifies the selector.
+ * @param {CreateButtonGroupModel} options - Specifies the button group model.
+ * @param {Function} createElement - Specifies the element.
+ * @returns {HTMLElement} - Button group element.
+ */
+export declare function createButtonGroup(selector: string, options?: CreateButtonGroupModel, createElement?: Function): HTMLElement;
+export interface CreateButtonGroupModel {
+    cssClass?: string;
+    buttons?: (ButtonModel | null)[];
+}

package/dist/ts/button-group/button-group.ts

@@ -0,0 +1,84 @@
+import { addClass, createElement as internalCreateElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ButtonModel, Button } from '@syncfusion/ej2-buttons';
+
+/**
+ * Initialize ButtonGroup CSS component with specified properties.
+ * ```html
+ * <div id='buttongroup'>
+ * <button></button>
+ * <button></button>
+ * <button></button>
+ * </div>
+ * ```
+ * ```typescript
+ * createButtonGroup('#buttongroup', {
+ *   cssClass: 'e-outline',
+ *   buttons: [
+ *       { content: 'Day' },
+ *       { content: 'Week' },
+ *       { content: 'Work Week'}
+ *   ]
+ * });
+ * ```
+ *
+ * @param {string} selector
+ * @param {CreateButtonGroupModel} options
+ * @returns HTMLElement
+ */
+
+/**
+ * Creates button group.
+ *
+ * @param {string} selector - Specifies the selector.
+ * @param {CreateButtonGroupModel} options - Specifies the button group model.
+ * @param {Function} createElement - Specifies the element.
+ * @returns {HTMLElement} - Button group element.
+ */
+export function createButtonGroup(selector: string, options: CreateButtonGroupModel = {}, createElement?: Function): HTMLElement {
+    let child: Element;
+    let btnElem: Element;
+    let nextChild: Element;
+    let btnModel: ButtonModel | null;
+    if (isNullOrUndefined(createElement)) {
+        createElement = internalCreateElement;
+    }
+    const wrapper: HTMLElement = document.querySelector(selector) as HTMLElement;
+    addClass([wrapper],  ['e-btn-group', 'e-css']);
+    wrapper.setAttribute('role', 'group');
+    const childs: HTMLCollection = wrapper.children;
+    options.buttons = options.buttons || [] as ButtonModel[];
+    for (let i: number = 0, j: number = 0; j < childs.length; i++, j++) {
+        child = childs[j as number];
+        btnModel = options.buttons[i as number];
+        if (btnModel !== null) {
+            if (child.tagName === 'BUTTON') {
+                btnElem = child;
+            } else {
+                btnElem = createElement('label');
+                nextChild = childs[j + 1];
+                if (nextChild) {
+                    wrapper.insertBefore(btnElem, nextChild);
+                } else {
+                    wrapper.appendChild(btnElem);
+                }
+                if (child.id) {
+                    btnElem.setAttribute('for', child.id);
+                }
+                if (btnModel && btnModel.disabled) {
+                    (child as HTMLInputElement).disabled = true;
+                }
+                j++;
+            }
+            if (options.cssClass && btnModel && !btnModel.cssClass) {
+                btnModel.cssClass = options.cssClass;
+            }
+            new Button(btnModel || {}, btnElem as HTMLButtonElement);
+        }
+    }
+    return wrapper;
+}
+
+export interface CreateButtonGroupModel {
+    cssClass?: string;
+    buttons?: (ButtonModel | null)[];
+}

package/dist/ts/button-group/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ButtonGroup modules
+ */
+export * from './button-group';

package/dist/ts/button-group/index.ts

@@ -0,0 +1,4 @@
+/**
+ * ButtonGroup modules
+ */
+export * from './button-group';

package/dist/ts/common/common-model.d.ts

@@ -0,0 +1,51 @@
+import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Item
+ */
+export interface ItemModel {
+
+    /**
+     * Defines class/multiple classes separated by a space for the item that is used to include an icon.
+     * Action item can include font icon and sprite image.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Specifies the id for item.
+     *
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Specifies separator between the items. Separator are horizontal lines used to group action items.
+     *
+     * @default false
+     */
+    separator?: boolean;
+
+    /**
+     * Specifies text for item.
+     *
+     * @default ''
+     */
+    text?: string;
+
+    /**
+     * Specifies url for item that creates the anchor link to navigate to the url provided.
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Used to enable or disable the item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+}

package/dist/ts/common/common.d.ts

@@ -0,0 +1,95 @@
+import { ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
+import { ItemModel } from './common-model';
+/**
+ * Defines the icon position of Split Button.
+ */
+export declare type SplitButtonIconPosition = 'Left' | 'Top';
+/**
+ * @param {Object} props - Specifies the properties
+ * @param {string[]} model - Specifies the model
+ * @returns {Object} Component Model
+ */
+export declare function getModel(props: Object, model: string[]): Object;
+/** @hidden
+ * @param {HTMLElement} ul - Specifies the UL element
+ * @param {number} keyCode - Specifies the keycode
+ * @returns {void}
+ */
+export declare function upDownKeyHandler(ul: HTMLElement, keyCode: number): void;
+/** @hidden
+ * @param {HTMLElement} popup - Specifies the popup element.
+ * @param {boolean} blankIcon - Specifies the blankIcon value.
+ * @returns {void}
+ */
+export declare function setBlankIconStyle(popup: HTMLElement, blankIcon?: boolean): void;
+/**
+ * Defines the items of Split Button/DropDownButton.
+ */
+export declare class Item extends ChildProperty<Item> {
+    /**
+     * Defines class/multiple classes separated by a space for the item that is used to include an icon.
+     * Action item can include font icon and sprite image.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Specifies the id for item.
+     *
+     * @default ''
+     */
+    id: string;
+    /**
+     * Specifies separator between the items. Separator are horizontal lines used to group action items.
+     *
+     * @default false
+     */
+    separator: boolean;
+    /**
+     * Specifies text for item.
+     *
+     * @default ''
+     */
+    text: string;
+    /**
+     * Specifies url for item that creates the anchor link to navigate to the url provided.
+     *
+     * @default ''
+     */
+    url: string;
+    /**
+     * Used to enable or disable the item.
+     *
+     * @default false
+     */
+    disabled: boolean;
+}
+/**
+ * Interface for before item render / select event.
+ */
+export interface MenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    item: ItemModel;
+    event?: Event;
+}
+/**
+ * Interface for before open / close event.
+ */
+export interface BeforeOpenCloseMenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    items: ItemModel[];
+    event: Event;
+    cancel?: boolean;
+}
+/**
+ * Interface for open/close event.
+ */
+export interface OpenCloseMenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    items: ItemModel[];
+    parentItem?: ItemModel;
+}
+/**
+ * Interface for animation effects.
+ */
+export declare type DropDownAnimationEffect = 'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn';

package/dist/ts/common/common.ts

@@ -0,0 +1,218 @@
+import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ItemModel } from './common-model';
+/**
+ * Defines the icon position of Split Button.
+ */
+export type SplitButtonIconPosition = 'Left' | 'Top';
+
+/**
+ * @param {Object} props - Specifies the properties
+ * @param {string[]} model - Specifies the model
+ * @returns {Object} Component Model
+ */
+export function getModel(props: Object, model: string[]): Object {
+
+    const obj: Object = extend({}, props);
+    for (const prop of Object.keys(obj)) {
+        if ((model).indexOf(prop) < 0) {
+            deleteObject(obj, prop);
+        }
+    }
+
+    return obj as Object;
+}
+
+/** @hidden
+ * @param {HTMLElement} ul - Specifies the UL element
+ * @param {number} keyCode - Specifies the keycode
+ * @returns {void}
+ */
+export function upDownKeyHandler(ul: HTMLElement, keyCode: number): void {
+    const defaultIdx: number = keyCode === 40 ? 0 : ul.childElementCount - 1;
+    let liIdx: number = defaultIdx;
+    let li: Element;
+    const selectedLi: Element = ul.querySelector('.e-selected');
+    if (selectedLi) { selectedLi.classList.remove('e-selected'); }
+    for (let i: number = 0, len: number = ul.children.length; i < len; i++) {
+        if (ul.children[i as number].classList.contains('e-focused')) {
+            li = ul.children[i as number];
+            liIdx = i;
+            li.classList.remove('e-focused');
+            if (keyCode === 40) {
+                liIdx++;
+            } else {
+                liIdx--;
+            }
+            if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {
+                liIdx = defaultIdx;
+            }
+        }
+    }
+    li = ul.children[liIdx as number];
+    liIdx = isValidLI(ul, li, liIdx, keyCode);
+    if (liIdx !== -1) {
+        addClass([ul.children[liIdx as number]], 'e-focused');
+        (ul.children[liIdx as number] as HTMLElement).focus();
+    }
+}
+
+/**
+ * Get Valid LI element
+ *
+ * @param {HTMLElement} ul - Specifies the UL element
+ * @param {Element} li - Specifies the LI element
+ * @param {number} index - Specifies the index
+ * @param {number} keyCode - Specifies the keycode
+ * @param {number} count - Specifies the count
+ * @returns {number} - Index
+ */
+function isValidLI(ul: HTMLElement, li: Element, index: number, keyCode: number, count: number = 0): number {
+    if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {
+        if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {
+            index = keyCode === 40 ? 0 : ul.childElementCount - 1;
+        } else {
+            if (keyCode === 40) {
+                index++;
+            } else {
+                index--;
+            }
+        }
+    }
+    li = ul.children[index as number];
+    if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {
+        count++;
+        if (count === ul.childElementCount) {
+            return index = -1;
+        }
+        index = isValidLI(ul, li, index, keyCode, count);
+    }
+    return index;
+}
+
+/** @hidden
+ * @param {HTMLElement} popup - Specifies the popup element.
+ * @param {boolean} blankIcon - Specifies the blankIcon value.
+ * @returns {void}
+ */
+export function setBlankIconStyle(popup: HTMLElement, blankIcon?: boolean): void {
+    const blankIconList: HTMLElement[] = [].slice.call(popup.getElementsByClassName('e-blank-icon'));
+    if (blankIcon) {
+        const menuItem: HTMLElement[] = [].slice.call(popup.getElementsByClassName('e-item'));
+        menuItem.forEach((li: HTMLElement): void => {
+            if (li.style.paddingLeft || li.style.paddingRight) {
+                li.removeAttribute('style');
+            }
+        });
+    }
+    if (!blankIconList.length) { return; }
+    let iconLi: HTMLElement = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)') as HTMLElement;
+    if (isNullOrUndefined(iconLi)) {return; }
+    if (iconLi.classList.contains('e-url')) { iconLi = iconLi.querySelector('.e-menu-url'); }
+    const icon: HTMLElement = iconLi.querySelector('.e-menu-icon') as HTMLElement;
+    let cssProp: { padding: string, margin: string };
+    const enableRtl: boolean = popup.classList.contains('e-rtl');
+    if (enableRtl) {
+        cssProp = { padding: 'paddingRight', margin: 'marginLeft' };
+    } else {
+        cssProp = { padding: 'paddingLeft', margin: 'marginRight' };
+    }
+    /* eslint-disable */
+    let size: string = `${parseInt(getComputedStyle(icon).fontSize, 10) + parseInt(
+        (enableRtl ? (getComputedStyle(icon) as any)[cssProp.margin] : (getComputedStyle(icon) as any)[cssProp.margin]), 10)
+        + parseInt(getComputedStyle(iconLi).paddingLeft, 10)}px`;
+    blankIconList.forEach((li: HTMLElement): void => {
+        if (li.classList.contains('e-url') && (li.querySelector('.e-menu-url') as HTMLElement)) {
+            ((li.querySelector('.e-menu-url') as HTMLElement).style as any)[cssProp.padding] = size;
+        } else {
+            (li.style as any)[cssProp.padding] = size;
+        }
+    });
+    /* eslint-enable */
+}
+
+/**
+ * Defines the items of Split Button/DropDownButton.
+ */
+export class Item extends ChildProperty<Item> {
+    /**
+     * Defines class/multiple classes separated by a space for the item that is used to include an icon.
+     * Action item can include font icon and sprite image.
+     *
+     * @default ''
+     */
+    @Property('')
+    public iconCss: string;
+
+    /**
+     * Specifies the id for item.
+     *
+     * @default ''
+     */
+    @Property('')
+    public id: string;
+
+    /**
+     * Specifies separator between the items. Separator are horizontal lines used to group action items.
+     *
+     * @default false
+     */
+    @Property(false)
+    public separator: boolean;
+
+    /**
+     * Specifies text for item.
+     *
+     * @default ''
+     */
+    @Property('')
+    public text: string;
+
+    /**
+     * Specifies url for item that creates the anchor link to navigate to the url provided.
+     *
+     * @default ''
+     */
+    @Property('')
+    public url: string;
+
+    /**
+     * Used to enable or disable the item.
+     *
+     * @default false
+     */
+    @Property(false)
+    public disabled: boolean;
+}
+
+/**
+ * Interface for before item render / select event.
+ */
+export interface MenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    item: ItemModel;
+    event?: Event;
+}
+
+/**
+ * Interface for before open / close event.
+ */
+export interface BeforeOpenCloseMenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    items: ItemModel[];
+    event: Event;
+    cancel?: boolean;
+}
+
+/**
+ * Interface for open/close event.
+ */
+export interface OpenCloseMenuEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    items: ItemModel[];
+    parentItem?: ItemModel;
+}
+
+/**
+ * Interface for animation effects.
+ */
+export type DropDownAnimationEffect = 'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn';

package/dist/ts/common/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Common modules
+ */
+export * from './common';
+export * from './common-model';

package/dist/ts/common/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Common modules
+ */
+export * from './common';
+export * from './common-model';