@syncfusion/ej2-navigations 23.2.5 → 24.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.5
+*  version : 24.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@23.2.4",
+  "_id": "@syncfusion/ej2-navigations@22.41.2",
   "_inBundle": false,
-  "_integrity": "sha512-/lcIGigtoogO3gjNR2HN9S5xXiCmQ7ko/L5oA/s/TcRmqR96vUfL8xEPe+PxlHa4ZyJ4/Y5YftWHzOXV4puIiA==",
+  "_integrity": "sha512-b3KXfky3ZmIlLFaIktMCIBAljYf+fcwzAVfffACt0yKbZjrAstPSX0sacmik/l8rDhZBuKyLA+8AeIpITMKDIg==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,10 +39,10 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-23.2.4.tgz",
-  "_shasum": "73768a985e749e2953e6d2df3bd99c79ebc6144d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-22.41.2.tgz",
+  "_shasum": "7c8e8a2249c22f6e3c5799e28f824826fa0ebd6c",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-popups": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-lists": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.5",
+  "version": "24.1.41",
   "sideEffects": false
 }

package/src/breadcrumb/breadcrumb.js

@@ -131,7 +131,9 @@ var Breadcrumb = /** @class */ (function (_super) {
     };
     Breadcrumb.prototype.initialize = function () {
         this._maxItems = this.maxItems;
-        this.element.setAttribute('aria-label', 'breadcrumb');
+        if (isNullOrUndefined(this.element.getAttribute('aria-label'))) {
+            this.element.setAttribute('aria-label', 'breadcrumb');
+        }
         if (this.cssClass) {
             addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
@@ -460,6 +462,9 @@ var Breadcrumb = /** @class */ (function (_super) {
     };
     Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
         var wrapElem = elem.querySelector('.e-anchor-wrap');
+        if (wrapElem) {
+            wrapElem.parentElement.setAttribute('aria-label', 'home');
+        }
         if (currItem.text !== prevItem.text) {
             wrapElem.childNodes.forEach(function (child) {
                 if (child.nodeType === Node.TEXT_NODE) {

package/src/carousel/carousel.js

@@ -312,7 +312,7 @@ var Carousel = /** @class */ (function (_super) {
         }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
-        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        attributes(this.element, { 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -321,7 +321,7 @@ var Carousel = /** @class */ (function (_super) {
         var _this = this;
         var slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);
         if (!slideContainer) {
-            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
+            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER, attrs: { 'tabindex': '0', 'role': 'tabpanel' } });
             this.element.appendChild(slideContainer);
         }
         this.itemsContainer = this.createElement('div', { className: CLS_ITEMS, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
@@ -1230,7 +1230,7 @@ var Carousel = /** @class */ (function (_super) {
         this.unWireEvents();
         [].slice.call(this.element.children).forEach(function (ele) { _this.element.removeChild(ele); });
         removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL, CLS_SWIPE]);
-        ['tabindex', 'role', 'style'].forEach(function (attr) { _this.element.removeAttribute(attr); });
+        ['role', 'style'].forEach(function (attr) { _this.element.removeAttribute(attr); });
         this.itemsContainer = null;
         _super.prototype.destroy.call(this);
     };

package/src/common/menu-base.js

@@ -280,6 +280,10 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
         }
+        else {
+            this.element.parentElement.setAttribute('role', 'dialog');
+            this.element.parentElement.setAttribute('aria-label', 'context menu');
+        }
     };
     MenuBase.prototype.wireEvents = function () {
         var wrapper = this.getWrapper();

package/src/index.d.ts

@@ -12,3 +12,5 @@ export * from './sidebar/index';
 export * from './breadcrumb/index';
 export * from './carousel/index';
 export * from './appbar/index';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/src/index.js

@@ -12,3 +12,5 @@ export * from './sidebar/index';
 export * from './breadcrumb/index';
 export * from './carousel/index';
 export * from './appbar/index';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/src/stepper/index.d.ts

@@ -0,0 +1,3 @@
+/** Stepper export modules */
+export * from './stepper';
+export * from './stepper-model';

package/src/stepper/index.js

@@ -0,0 +1,2 @@
+/** Stepper export modules */
+export * from './stepper';

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

@@ -0,0 +1,153 @@
+import { INotifyPropertyChanged, attributes, NotifyPropertyChanges, L10n, append, isNullOrUndefined, getUniqueID, Complex, KeyboardEvents, KeyboardEventArgs, ChildProperty, Property, EventHandler, Event, EmitType, BaseEventArgs, addClass, remove, removeClass, initializeCSPTemplate, select, compile } from '@syncfusion/ej2-base';
+import {StepLabelPosition,StepType,StepperChangedEventArgs,StepperChangingEventArgs,StepperClickEventArgs,StepperRenderingEventArgs} from "./stepper";
+import {StepperBaseModel} from "../stepper-base/stepper-base-model";
+
+/**
+ * Interface for a class StepperAnimationSettings
+ */
+export interface StepperAnimationSettingsModel {
+
+    /**
+     * Defines whether a animation is enabled or disabled.
+     *
+     * @default true
+     */
+    enable?: boolean;
+
+    /**
+     * duration in milliseconds
+     *
+     * @default 2000
+     * @aspType int
+     */
+    duration?: number;
+
+    /**
+     * delay in milliseconds
+     *
+     * @default 0
+     * @aspType int
+     */
+    delay?: number;
+
+}
+
+/**
+ * Interface for a class Stepper
+ */
+export interface StepperModel extends StepperBaseModel{
+
+    /**
+     * Defines the current step index of the Stepper.
+     *
+     * {% codeBlock src='stepper/activeStep/index.md' %}{% endcodeBlock %}
+     *
+     * @default 0
+     * @aspType int
+     */
+    activeStep?: number;
+
+    /**
+     * Defines the step progress animation of the Stepper.
+     *
+     * {% codeBlock src='stepper/animation/index.md' %}{% endcodeBlock %}
+     *
+     */
+    animation?: StepperAnimationSettingsModel;
+
+    /**
+     * Defines whether allows to complete one step in order to move to the next or not.
+     *
+     * {% codeBlock src='stepper/linear/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    linear?: boolean;
+
+    /**
+     * Defines a value that defines whether to show tooltip or not on each step.
+     *
+     * @default false
+     */
+    showTooltip?: boolean;
+
+    /**
+     * Defines the template content for each step.
+     *
+     * {% codeBlock src='stepper/template/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Defines the template content for the tooltip.
+     *
+     * @default ''
+     * @aspType string
+     */
+    tooltipTemplate?: string | Function;
+
+    /**
+     * Defines the label position in the Stepper.
+     *
+     * The possible values are:
+     * * Top
+     * * Bottom
+     * * Start
+     * * End
+     *
+     * {% codeBlock src='stepper/labelPosition/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default StepLabelPosition.Bottom
+     * @asptype StepLabelPosition
+     */
+    labelPosition?: string | StepLabelPosition;
+
+    /**
+     * Defines whether steps are display with only indicator, only labels or combination of both.
+     *
+     * The possible values are:
+     * * Default
+     * * Label
+     * * Indicator
+     *
+     * {% codeBlock src='stepper/stepType/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default StepType.Default
+     * @asptype StepType
+     */
+    stepType?: string | StepType;
+
+    /**
+     * Event triggers after active step changed. 
+     *
+     * @event stepChanged
+     */
+    stepChanged?: EmitType<StepperChangedEventArgs>;
+
+    /**
+     * Event triggers before active step change.
+     *
+     * @event stepChanging
+     */
+    stepChanging?: EmitType<StepperChangingEventArgs>;
+
+    /**
+     * Event triggers when clicked on step.
+     *
+     * @event stepClick
+     */
+    stepClick?: EmitType<StepperClickEventArgs>;
+
+    /**
+     * Event triggers before rendering each step.
+     *
+     * @event beforeStepRender
+     */
+    beforeStepRender?: EmitType<StepperRenderingEventArgs>;
+
+}

package/src/stepper/stepper.d.ts

@@ -0,0 +1,339 @@
+/// <reference path="../stepper-base/stepper-base-model.d.ts" />
+import { INotifyPropertyChanged, ChildProperty, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import { StepperBase } from '../stepper-base/stepper-base';
+import { StepperModel, StepperAnimationSettingsModel } from '../stepper';
+/**
+ * Defines the step progress animation of the Stepper.
+ */
+export declare class StepperAnimationSettings extends ChildProperty<StepperAnimationSettings> {
+    /**
+     * Defines whether a animation is enabled or disabled.
+     *
+     * @default true
+     */
+    enable: boolean;
+    /**
+     * duration in milliseconds
+     *
+     * @default 2000
+     * @aspType int
+     */
+    duration: number;
+    /**
+     * delay in milliseconds
+     *
+     * @default 0
+     * @aspType int
+     */
+    delay: number;
+}
+/**
+ * Defines the label position in the Stepper.
+ */
+export declare enum StepLabelPosition {
+    /**
+     * Displays the label on top position regardless of the Stepper's orientation.
+     */
+    Top = "Top",
+    /**
+     * Displays the label on bottom position regardless of the Stepper's orientation.
+     */
+    Bottom = "Bottom",
+    /**
+     * Displays the label on left side regardless of the Stepper's orientation.
+     */
+    Start = "Start",
+    /**
+     * Displays the label on right side regardless of the Stepper's orientation.
+     */
+    End = "End"
+}
+/**
+ * Defines whether steps are display with only indicator, only labels or combination of both.
+ */
+export declare enum StepType {
+    /**
+     * Steps are shown indicator with label defined.
+     */
+    Default = "Default",
+    /**
+     * Steps are shown with only label.
+     */
+    Label = "Label",
+    /**
+     * Steps are shown with only indicator.
+     */
+    Indicator = "Indicator"
+}
+/**
+ * Provides information about stepChanged event callback.
+ */
+export interface StepperChangedEventArgs extends BaseEventArgs {
+    /**
+     * Provides the original event.
+     */
+    event: Event;
+    /**
+     * Provides whether the change is triggered by user interaction.
+     */
+    isInteracted: boolean;
+    /**
+     * Provides the index of the previous step.
+     */
+    previousStep: number;
+    /**
+     * Provides the index of the current step.
+     */
+    activeStep: number;
+    /**
+     * Provides the stepper element.
+     */
+    element: HTMLElement;
+}
+/**
+ * Provides information about stepChanging event callback.
+ */
+export interface StepperChangingEventArgs extends StepperChangedEventArgs {
+    /**
+     * Provides whether the change has been prevented or not. Default value is false.
+     */
+    cancel: boolean;
+}
+/**
+ * Provides information about stepClick event callback.
+ */
+export interface StepperClickEventArgs extends BaseEventArgs {
+    /**
+     * Provides the original event.
+     */
+    event: Event;
+    /**
+     * Provides the index of the previous step.
+     */
+    previousStep: number;
+    /**
+     * Provides the index of the current step.
+     */
+    activeStep: number;
+    /**
+     * Provides the stepper element.
+     */
+    element: HTMLElement;
+}
+/**
+ * Provides information about beforeStepRender event callback.
+ */
+export interface StepperRenderingEventArgs extends BaseEventArgs {
+    /**
+     * Provides the stepper element.
+     */
+    element: HTMLElement;
+    /**
+     * Provides the index of the current step.
+     */
+    index: number;
+}
+/**
+ * The Stepper component visualizes several steps and indicates the current progress by highlighting already completed steps.
+ *
+ * ```html
+ * <nav id="stepper"></nav>
+ * ```
+ * ```typescript
+ * <script>
+ *   let stepperObj: Stepper = new Stepper({steps : [{}, {}, {}, {}, {}]});
+ *   stepperObj.appendTo('#stepper');
+ * </script>
+ * ```
+ */
+export declare class Stepper extends StepperBase implements INotifyPropertyChanged {
+    /**
+     * Defines the current step index of the Stepper.
+     *
+     * {% codeBlock src='stepper/activeStep/index.md' %}{% endcodeBlock %}
+     *
+     * @default 0
+     * @aspType int
+     */
+    activeStep: number;
+    /**
+     * Defines the step progress animation of the Stepper.
+     *
+     * {% codeBlock src='stepper/animation/index.md' %}{% endcodeBlock %}
+     *
+     */
+    animation: StepperAnimationSettingsModel;
+    /**
+     * Defines whether allows to complete one step in order to move to the next or not.
+     *
+     * {% codeBlock src='stepper/linear/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    linear: boolean;
+    /**
+     * Defines a value that defines whether to show tooltip or not on each step.
+     *
+     * @default false
+     */
+    showTooltip: boolean;
+    /**
+     * Defines the template content for each step.
+     *
+     * {% codeBlock src='stepper/template/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Defines the template content for the tooltip.
+     *
+     * @default ''
+     * @aspType string
+     */
+    tooltipTemplate: string | Function;
+    /**
+     * Defines the label position in the Stepper.
+     *
+     * The possible values are:
+     * * Top
+     * * Bottom
+     * * Start
+     * * End
+     *
+     * {% codeBlock src='stepper/labelPosition/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default StepLabelPosition.Bottom
+     * @asptype StepLabelPosition
+     */
+    labelPosition: string | StepLabelPosition;
+    /**
+     * Defines whether steps are display with only indicator, only labels or combination of both.
+     *
+     * The possible values are:
+     * * Default
+     * * Label
+     * * Indicator
+     *
+     * {% codeBlock src='stepper/stepType/index.md' %}{% endcodeBlock %}
+     *
+     * @isenumeration true
+     * @default StepType.Default
+     * @asptype StepType
+     */
+    stepType: string | StepType;
+    /**
+     * Event triggers after active step changed.
+     *
+     * @event stepChanged
+     */
+    stepChanged: EmitType<StepperChangedEventArgs>;
+    /**
+     * Event triggers before active step change.
+     *
+     * @event stepChanging
+     */
+    stepChanging: EmitType<StepperChangingEventArgs>;
+    /**
+     * Event triggers when clicked on step.
+     *
+     * @event stepClick
+     */
+    stepClick: EmitType<StepperClickEventArgs>;
+    /**
+     * Event triggers before rendering each step.
+     *
+     * @event beforeStepRender
+     */
+    beforeStepRender: EmitType<StepperRenderingEventArgs>;
+    private stepperItemList;
+    private stepperItemContainer;
+    private labelContainer;
+    private textContainer;
+    private stepperItemElements;
+    private beforeLabelWidth;
+    private textEleWidth;
+    private tooltipObj;
+    private tooltipOpen;
+    private isReact?;
+    private templateFunction;
+    private keyboardModuleStepper;
+    private keyConfigs;
+    private l10n;
+    private isKeyNavFocus;
+    private isAngular;
+    /**
+     * * Constructor for creating the Stepper component.
+     *
+     * @param {StepperModel} options - Specifies the Stepper model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options?: StepperModel, element?: string | HTMLElement);
+    protected preRender(): void;
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName(): string;
+    protected render(): void;
+    private initialize;
+    private updatePosition;
+    private renderDefault;
+    private updateAnimation;
+    private updateStepType;
+    private wireEvents;
+    private updateStepFocus;
+    private updateStepperStatus;
+    private updateStatusClass;
+    private renderItems;
+    private calculateProgressBarPosition;
+    private checkValidState;
+    private updateCurrentLabel;
+    private updateLabelPosition;
+    private clearLabelPosition;
+    private checkValidStep;
+    private updateTooltip;
+    private wireItemsEvents;
+    private openStepperTooltip;
+    private closeStepperTooltip;
+    private updateTooltipContent;
+    private stepClickHandler;
+    private updateTemplateFunction;
+    private renderItemContent;
+    private removeItemContent;
+    private updateContent;
+    /**
+     * Gets template content based on the template property value.
+     *
+     * @param {string | Function} template - Template property value.
+     * @returns {Function} - Return template function.
+     * @hidden
+     */
+    private getTemplateFunction;
+    private navigateToStep;
+    private navigationHandler;
+    private removeItemElements;
+    nextStep(): void;
+    previousStep(): void;
+    reset(): void;
+    private updateElementClassArray;
+    destroy(): void;
+    private wireKeyboardEvent;
+    private keyActionHandler;
+    private handleNavigation;
+    private renderStepperItems;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {StepperModel} newProp - Specifies new properties
+     * @param  {StepperModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp: StepperModel, oldProp?: StepperModel): void;
+}