@syncfusion/ej2-splitbuttons 30.1.37 → 30.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.1.37
+*  version : 30.1.39
 *  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/package.json

@@ -1,58 +1,17 @@
 {
-  "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@28.2.0",
-  "_inBundle": false,
-  "_integrity": "sha512-TvfE2XBZrIRf0OHfwArvbbgRJTxF3YSWscGWNEb2FNimdMZAQhSLGRmca36wAJ4ZGOoyKp0KXEhm4oKDt32uZQ==",
-  "_location": "/@syncfusion/ej2-splitbuttons",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-splitbuttons@*",
-    "name": "@syncfusion/ej2-splitbuttons",
-    "escapedName": "@syncfusion%2fej2-splitbuttons",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2-angular-splitbuttons",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-filemanager",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-inputs",
-    "/@syncfusion/ej2-interactive-chat",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
-    "/@syncfusion/ej2-react-splitbuttons",
-    "/@syncfusion/ej2-ribbon",
-    "/@syncfusion/ej2-richtexteditor",
-    "/@syncfusion/ej2-vue-splitbuttons"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-28.2.0.tgz",
-  "_shasum": "7f4fe237f666e0f7feb08f2dd39f41de49bc6dbb",
-  "_spec": "@syncfusion/ej2-splitbuttons@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\ej2-nexus-branch-switching-dev\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-splitbuttons",
+  "version": "30.1.41",
+  "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-splitbuttons.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-splitbuttons.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~30.1.37",
+    "@syncfusion/ej2-base": "~30.1.38",
     "@syncfusion/ej2-popups": "~30.1.37"
   },
-  "deprecated": false,
-  "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-splitbuttons.es5.js",
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -80,15 +39,11 @@
     "spinbutton",
     "spin button"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-splitbuttons.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-splitbuttons",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
+    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "30.1.37",
-  "sideEffects": false
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/drop-down-button/drop-down-button.js

@@ -832,7 +832,7 @@ var DropDownButton = /** @class */ (function (_super) {
                 }
             }
             else {
-                if (ul) {
+                if (observedArgs.element) {
                     ul.focus();
                 }
             }

package/styles/material3-dark-lite.css

@@ -245,6 +245,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -420,6 +421,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

package/styles/material3-dark.css

@@ -301,6 +301,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -476,6 +477,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

package/styles/material3-lite.css

@@ -247,6 +247,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -414,6 +415,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

package/styles/material3.css

@@ -303,6 +303,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -470,6 +471,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

package/styles/split-button/_layout.scss

@@ -21,6 +21,7 @@
       }
       @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
         box-shadow: none;
+        z-index: 1;
       }
       @if $skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
         padding: 3.75px 11px;

package/styles/split-button/_theme.scss

@@ -4,6 +4,10 @@
       @if $skin-name != 'tailwind3' {
         border-right-color: $split-btn-seperator-border-color;
       }
+      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
+        border-image: $split-btn-seperator-border-color;
+        border-width: 0 1px 0 0;
+      }
 
       &:focus {
         border-right-color: $split-btn-focus-border-color;

package/styles/split-button/material3-dark.css

@@ -19,6 +19,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -194,6 +195,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

package/styles/split-button/material3.css

@@ -21,6 +21,7 @@
   text-transform: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  z-index: 1;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -188,6 +189,10 @@
 
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   border-right-color: rgba(var(--color-sf-outline-variant));

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

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

@@ -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 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

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

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

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

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

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

@@ -1,95 +0,0 @@
-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';