@syncfusion/ej2-splitbuttons 20.2.36 → 20.2.45

package/styles/progress-button/fluent-dark.css

@@ -320,14 +320,14 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0078d4;
@@ -340,14 +340,14 @@
   stroke: #0078d4;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0b6a0b;
@@ -360,14 +360,14 @@
   stroke: #0b6a0b;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #038387;
@@ -380,14 +380,14 @@
   stroke: #038387;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #ca5010;
@@ -400,14 +400,14 @@
   stroke: #ca5010;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #d13438;
@@ -496,19 +496,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/highcontrast.css

@@ -488,11 +488,11 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {

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

@@ -1,84 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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;
-}