@syncfusion/ej2-navigations 17.3.9-beta → 17.3.14-96615

package/src/toolbar/toolbar-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser } from '@syncfusion/ej2-base';import { updateBlazorTemplate, resetBlazorTemplate, isBlazor } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
+import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
 import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs} from "./toolbar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,133 +8,133 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface ItemModel {
 
     /**
-     * Specifies the unique ID to be used with button or input element of Toolbar items.
-     * @default ""
-     */
-    id?: string;
+     * Specifies the unique ID to be used with button or input element of Toolbar items.
+     * @default ""
+     */
+    id?: string;
 
     /**
-     * Specifies the text to be displayed on the Toolbar button.
-     * @default ""
-     */
-    text?: string;
+     * Specifies the text to be displayed on the Toolbar button.
+     * @default ""
+     */
+    text?: string;
 
     /**
-     * Specifies the width of the Toolbar button commands.
-     * @default 'auto'
-     */
-    width?: number | string;
-
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of commands.
-     * @default ""
-     */
-    cssClass?: string;
-
-    /**
-     * Defines the priority of items to display it in popup always.
-     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
-     * @default false
-     */
-    showAlwaysInPopup?: boolean;
-
-    /**
-     * Defines single/multiple classes separated by space used to specify an icon for the button.
-     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
-     * @default ""
-     */
-    prefixIcon?: string;
-
-    /**
-     * Defines single/multiple classes separated by space used to specify an icon for the button.
-     * The icon will be positioned after the text content if text is available.
-     * @default ""
-     */
-    suffixIcon?: string;
-
-    /**
-     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
-     * This is applicable only to `popup` mode. Possible values are:
-     * - Show:  Always shows the item as the primary priority on the *Toolbar*. 
-     * - Hide: Always shows the item as the secondary priority on the *popup*.
-     * - None: No priority for display, and as per normal order moves to popup when content exceeds.
-     * @default 'None'
-     */
-    overflow?: OverflowOption;
-
-    /**
-     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
-     * ```
-     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
-     * ```
-     * @default ""
-     */
-    template?: string | Object;
-
-    /**
-     * Specifies the types of command to be rendered in the Toolbar.
-     * Supported types are:
-     * - Button: Creates the Button control with its given properties like text, prefixIcon, etc.
-     * - Separator: Adds a horizontal line that separates the Toolbar commands.
-     * - Input: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
-     * AutoComplete, etc.
-     * @default 'Button'
-     */
-    type?: ItemType;
-
-    /**
-     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
-     * Possible values are:
-     * - Toolbar:  Text will be displayed on *Toolbar* only.
-     * - Overflow: Text will be displayed only when content overflows to *popup*.
-     * - Both: Text will be displayed on *popup* and *Toolbar*.
-     * @default 'Both'
-     */
-    showTextOn?: DisplayMode;
-
-    /**
-     * Defines htmlAttributes used to add custom attributes to Toolbar command.
-     * Supports HTML attributes such as style, class, etc.
-     * @default null
-     */
-    htmlAttributes?: { [key: string]: string; };
-
-    /**
-     * Specifies the text to be displayed on the Toolbar button.
-     * @default ""
-     */
-    tooltipText?: string;
-
-    /**
-     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
-     * Possible values are:
-     * - Left: To align commands to the left side of the Toolbar.
-     * - Center: To align commands at the center of the Toolbar.
-     * - Right: To align commands to the right side of the Toolbar.
-     * ```html
-     * <div id="element"> </div>
-     * ```
-     * ```typescript
-     * let toolbar: Toolbar = new Toolbar({
-     *     items: [
-     *         { text: "Home" },
-     *         { text: "My Home Page" , align: 'Center' },
-     *         { text: "Search", align: 'Right' }
-     *         { text: "Settings", align: 'Right' }
-     *     ]
-     * });
-     * toolbar.appendTo('#element');
-     * ```
-     * @default "Left"
-     */
-    align?: ItemAlign;
-
-    /**
-     * Event triggers when `click` the toolbar item.
-     * @event
-     * @blazorProperty 'OnClick'
-     */
-    click?: EmitType<ClickEventArgs>;
+     * Specifies the width of the Toolbar button commands.
+     * @default 'auto'
+     */
+    width?: number | string;
+
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of commands.
+     * @default ""
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the priority of items to display it in popup always.
+     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
+     * @default false
+     */
+    showAlwaysInPopup?: boolean;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
+     * @default ""
+     */
+    prefixIcon?: string;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned after the text content if text is available.
+     * @default ""
+     */
+    suffixIcon?: string;
+
+    /**
+     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
+     * This is applicable only to `popup` mode. Possible values are:
+     * - Show:  Always shows the item as the primary priority on the *Toolbar*. 
+     * - Hide: Always shows the item as the secondary priority on the *popup*.
+     * - None: No priority for display, and as per normal order moves to popup when content exceeds.
+     * @default 'None'
+     */
+    overflow?: OverflowOption;
+
+    /**
+     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
+     * ```
+     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
+     * ```
+     * @default ""
+     */
+    template?: string | Object;
+
+    /**
+     * Specifies the types of command to be rendered in the Toolbar.
+     * Supported types are:
+     * - Button: Creates the Button control with its given properties like text, prefixIcon, etc.
+     * - Separator: Adds a horizontal line that separates the Toolbar commands.
+     * - Input: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * AutoComplete, etc.
+     * @default 'Button'
+     */
+    type?: ItemType;
+
+    /**
+     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
+     * Possible values are:
+     * - Toolbar:  Text will be displayed on *Toolbar* only.
+     * - Overflow: Text will be displayed only when content overflows to *popup*.
+     * - Both: Text will be displayed on *popup* and *Toolbar*.
+     * @default 'Both'
+     */
+    showTextOn?: DisplayMode;
+
+    /**
+     * Defines htmlAttributes used to add custom attributes to Toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     * @default null
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
+     * Specifies the text to be displayed on the Toolbar button.
+     * @default ""
+     */
+    tooltipText?: string;
+
+    /**
+     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
+     * Possible values are:
+     * - Left: To align commands to the left side of the Toolbar.
+     * - Center: To align commands at the center of the Toolbar.
+     * - Right: To align commands to the right side of the Toolbar.
+     * ```html
+     * <div id="element"> </div>
+     * ```
+     * ```typescript
+     * let toolbar: Toolbar = new Toolbar({
+     *     items: [
+     *         { text: "Home" },
+     *         { text: "My Home Page" , align: 'Center' },
+     *         { text: "Search", align: 'Right' }
+     *         { text: "Settings", align: 'Right' }
+     *     ]
+     * });
+     * toolbar.appendTo('#element');
+     * ```
+     * @default "Left"
+     */
+    align?: ItemAlign;
+
+    /**
+     * Event triggers when `click` the toolbar item.
+     * @event
+     * @blazorProperty 'OnClick'
+     */
+    click?: EmitType<ClickEventArgs>;
 
 }
 
@@ -144,74 +144,74 @@ export interface ItemModel {
 export interface ToolbarModel extends ComponentModel{
 
     /**
-     * An array of items that is used to configure Toolbar commands.
-     * @default []
-     */
-    items?: ItemModel[];
+     * An array of items that is used to configure Toolbar commands.
+     * @default []
+     */
+    items?: ItemModel[];
 
     /**
-     * Specifies the width of the Toolbar in pixels/numbers/percentage. Number value is considered as pixels.
-     * @default 'auto'
-     */
-    width?: string | number;
+     * Specifies the width of the Toolbar in pixels/numbers/percentage. Number value is considered as pixels.
+     * @default 'auto'
+     */
+    width?: string | number;
 
     /**
-     * Specifies the height of the Toolbar in pixels/number/percentage. Number value is considered as pixels.
-     * @default 'auto'
-     */
-    height?: string | number;
+     * Specifies the height of the Toolbar in pixels/number/percentage. Number value is considered as pixels.
+     * @default 'auto'
+     */
+    height?: string | number;
 
     /**
-     * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
-     * Possible modes are:
-     * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
-     * - Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
-     * - MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
-     * - Extended: Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
-     * If the popup content overflows the height of the page, the rest of the elements will be hidden.
-     * @default 'Scrollable'
-     */
-    overflowMode?: OverflowMode;
+     * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
+     * Possible modes are:
+     * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
+     * - Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
+     * - MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
+     * - Extended: Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
+     * If the popup content overflows the height of the page, the rest of the elements will be hidden.
+     * @default 'Scrollable'
+     */
+    overflowMode?: OverflowMode;
 
     /**
-     * Specifies the scrolling distance in scroller.
-     * @default null  
-     */
-    scrollStep?: number;
+     * Specifies the scrolling distance in scroller.
+     * @default null  
+     */
+    scrollStep?: number;
 
     /**
-     * Enable or disable the popup collision.
-     * @default true
-     */
-    enableCollision?: boolean;
+     * Enable or disable the popup collision.
+     * @default true
+     */
+    enableCollision?: boolean;
 
     /**
-     * The event will be fired on clicking the Toolbar elements.
-     * @event
-     * @blazorProperty 'Clicked'
-     */
-    clicked?: EmitType<ClickEventArgs>;
+     * The event will be fired on clicking the Toolbar elements.
+     * @event
+     * @blazorProperty 'Clicked'
+     */
+    clicked?: EmitType<ClickEventArgs>;
 
     /**
-     * The event will be fired when the control is rendered.
-     * @event
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
+     * The event will be fired when the control is rendered.
+     * @event
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
 
     /**
-     * The event will be fired when the control gets destroyed.
-     * @event
-     * @blazorProperty 'Destroyed'
-     */
-    destroyed?: EmitType<Event>;
+     * The event will be fired when the control gets destroyed.
+     * @event
+     * @blazorProperty 'Destroyed'
+     */
+    destroyed?: EmitType<Event>;
 
     /**
-     * The event will be fired before the control is rendered on a page.
-     * @event
-     * @blazorProperty 'OnCreate'
-     * @deprecated
-     */
-    beforeCreate?: EmitType<BeforeCreateArgs>;
+     * The event will be fired before the control is rendered on a page.
+     * @event
+     * @blazorProperty 'OnCreate'
+     * @deprecated
+     */
+    beforeCreate?: EmitType<BeforeCreateArgs>;
 
 }

package/src/toolbar/toolbar.d.ts

@@ -319,6 +319,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     refreshOverflow(): void;
     private toolbarAlign;
     private renderOverflowMode;
+    private setOverflowAttributes;
     private separator;
     private createPopupEle;
     private pushingPoppedEle;

package/src/toolbar/toolbar.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
 import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
 import { selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';
@@ -545,7 +545,8 @@ var Toolbar = /** @class */ (function (_super) {
         }
         if (!eventArgs.cancel) {
             this.trigger('clicked', eventArgs, function (clickedArgs) {
-                if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup') {
+                if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&
+                    clickedArgs.item && clickedArgs.item.type !== 'Input') {
                     _this.popObj.hide({ name: 'FadeOut', duration: 100 });
                 }
             });
@@ -731,8 +732,7 @@ var Toolbar = /** @class */ (function (_super) {
                         this.removePositioning();
                     }
                     if (this.checkOverflow(ele, innerItems) || priorityCheck) {
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+                        this.setOverflowAttributes(ele);
                     }
                     this.toolbarAlign(innerItems);
                     break;
@@ -755,13 +755,17 @@ var Toolbar = /** @class */ (function (_super) {
                         if (this.tbarAlign) {
                             this.removePositioning();
                         }
-                        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-                        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+                        this.setOverflowAttributes(ele);
                     }
                     this.toolbarAlign(innerItems);
             }
         }
     };
+    Toolbar.prototype.setOverflowAttributes = function (ele) {
+        this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
+        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
+        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');
+    };
     Toolbar.prototype.separator = function () {
         var element = this.element;
         var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));
@@ -1099,6 +1103,7 @@ var Toolbar = /** @class */ (function (_super) {
         var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
+        nav.setAttribute('role', 'list');
         element.appendChild(nav);
     };
     Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -1738,6 +1743,7 @@ var Toolbar = /** @class */ (function (_super) {
                 case 'Button':
                     dom = this.buttonRendering(item, innerEle);
                     dom.setAttribute('tabindex', '-1');
+                    dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;