@syncfusion/ej2-splitbuttons 20.1.47 → 20.2.36

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];
+        btnModel = options.buttons[i];
+        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/common/common.ts

@@ -0,0 +1,203 @@
+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].classList.contains('e-focused')) {
+            li = ul.children[i];
+            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];
+    liIdx = isValidLI(ul, li, liIdx, keyCode);
+    if (liIdx !== -1) {
+        addClass([ul.children[liIdx]], 'e-focused');
+        (ul.children[liIdx] 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];
+    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.
+ * @returns {void}
+ */
+export function setBlankIconStyle(popup: HTMLElement): void {
+    const blankIconList: HTMLElement[] = [].slice.call(popup.getElementsByClassName('e-blank-icon'));
+    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).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;
+}
+
+/**
+ * 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;
+}