@syncfusion/ej2-navigations 23.2.5 → 24.1.41

package/src/stepper-base/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * export all modules from current location
+ */
+export * from './stepper-base';
+export * from './stepper-base-model';

package/src/stepper-base/index.js

@@ -0,0 +1,4 @@
+/**
+ * export all modules from current location
+ */
+export * from './stepper-base';

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

@@ -0,0 +1,121 @@
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property, ChildProperty, Collection, removeClass, Event, EmitType } from '@syncfusion/ej2-base';
+import {StepStatus,StepperOrientation} from "./stepper-base";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Step
+ */
+export interface StepModel {
+
+    /**
+     * Defines the CSS class to customize the step appearance.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether a step is enabled or disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Defines the icon content of the step.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Defines the state whether it is valid completion or not.
+     *
+     * @aspType bool?
+     * @default null
+     */
+    isValid?: boolean;
+
+    /**
+     * Defines the label content of the step.
+     *
+     * @default ''
+     */
+    label?: string;
+
+    /**
+     * Defines whether the step is optionally to skip completion or not.
+     *
+     * @default false
+     */
+    optional?: boolean;
+
+    /**
+     * Defines the status of the step.
+     * The possible values are
+     * * NotStarted
+     * * InProgress
+     * * Completed
+     *
+     * @isenumeration true
+     * @default StepStatus.NotStarted
+     * @asptype StepStatus
+     */
+    status?: string | StepStatus;
+
+    /**
+     * Defines the text content of the step.
+     *
+     * @default ''
+     */
+    text?: string;
+
+}
+
+/**
+ * Interface for a class StepperBase
+ */
+export interface StepperBaseModel extends ComponentModel{
+
+    /**
+     * Defines the list of steps.
+     *
+     * @default []
+     */
+    steps?: StepModel[];
+
+    /**
+     * Defines the CSS class to customize the Stepper appearance.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether the read-only mode is enabled for a Stepper control, which means that the user will not be able to interact with it.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+
+    /**
+     * Defines the orientation type of the Stepper.
+     *
+     * The possible values are:
+     * * Horizontal
+     * * vertical
+     *
+     * @isenumeration true
+     * @default StepperOrientation.Horizontal
+     * @asptype StepperOrientation
+     */
+    orientation?: string | StepperOrientation;
+
+    /**
+     * Event callback that is raised after rendering the stepper.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+}

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

@@ -0,0 +1,184 @@
+import { Component, INotifyPropertyChanged, ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { StepperBaseModel, StepModel } from './stepper-base-model';
+/**
+ * Defines the status of the step.
+ */
+export declare enum StepStatus {
+    /**
+     * Shows the status of the step is not started.
+     */
+    NotStarted = "NotStarted",
+    /**
+     * Shows the step is in progress.
+     */
+    InProgress = "InProgress",
+    /**
+     * Shows the status of the step is completed.
+     */
+    Completed = "Completed"
+}
+/**
+ * Specifies the steps of the Stepper.
+ */
+export declare class Step extends ChildProperty<Step> {
+    /**
+     * Defines the CSS class to customize the step appearance.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines whether a step is enabled or disabled.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Defines the icon content of the step.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Defines the state whether it is valid completion or not.
+     *
+     * @aspType bool?
+     * @default null
+     */
+    isValid: boolean;
+    /**
+     * Defines the label content of the step.
+     *
+     * @default ''
+     */
+    label: string;
+    /**
+     * Defines whether the step is optionally to skip completion or not.
+     *
+     * @default false
+     */
+    optional: boolean;
+    /**
+     * Defines the status of the step.
+     * The possible values are
+     * * NotStarted
+     * * InProgress
+     * * Completed
+     *
+     * @isenumeration true
+     * @default StepStatus.NotStarted
+     * @asptype StepStatus
+     */
+    status: string | StepStatus;
+    /**
+     * Defines the text content of the step.
+     *
+     * @default ''
+     */
+    text: string;
+}
+/**
+ * Defines the orientation type of the Stepper.
+ */
+export declare enum StepperOrientation {
+    /**
+     * Steps are displayed horizontally.
+     */
+    Horizontal = "Horizontal",
+    /**
+     * Steps are displayed vertically.
+     */
+    Vertical = "Vertical"
+}
+/**
+ * StepperBase component act as base class to the stepper component.
+ */
+export declare class StepperBase extends Component<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     * Defines the list of steps.
+     *
+     * @default []
+     */
+    steps: StepModel[];
+    /**
+     * Defines the CSS class to customize the Stepper appearance.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines whether the read-only mode is enabled for a Stepper control, which means that the user will not be able to interact with it.
+     *
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Defines the orientation type of the Stepper.
+     *
+     * The possible values are:
+     * * Horizontal
+     * * vertical
+     *
+     * @isenumeration true
+     * @default StepperOrientation.Horizontal
+     * @asptype StepperOrientation
+     */
+    orientation: string | StepperOrientation;
+    /**
+     * Event callback that is raised after rendering the stepper.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    protected progressStep: HTMLElement;
+    protected progressbar: HTMLElement;
+    protected progressBarPosition: number;
+    /**
+     * * Constructor for Base class
+     *
+     * @param {StepperBaseModel} options - Specifies the Base model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options?: StepperBaseModel, element?: string | HTMLElement);
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void;
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    getModuleName(): string;
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    protected getPersistData(): string;
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected render(): void;
+    protected updateOrientaion(wrapper: HTMLElement): void;
+    protected renderProgressBar(wrapper: HTMLElement): void;
+    protected setProgressPosition(wrapper: HTMLElement, isResize?: boolean): void;
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @param newProp
+     * @param oldProp
+     * @private
+     * @returns {void}
+     */
+    onPropertyChanged(newProp: StepperBaseModel, oldProp: StepperBaseModel): void;
+}

package/src/stepper-base/stepper-base.js

@@ -0,0 +1,221 @@
+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, NotifyPropertyChanges, Property, ChildProperty, Collection, Event } from '@syncfusion/ej2-base';
+var PROGRESSVALUE = '--progress-value';
+/**
+ * Defines the status of the step.
+ */
+export var StepStatus;
+(function (StepStatus) {
+    /**
+     * Shows the status of the step is not started.
+     */
+    StepStatus["NotStarted"] = "NotStarted";
+    /**
+     * Shows the step is in progress.
+     */
+    StepStatus["InProgress"] = "InProgress";
+    /**
+     * Shows the status of the step is completed.
+     */
+    StepStatus["Completed"] = "Completed";
+})(StepStatus || (StepStatus = {}));
+/**
+ * Specifies the steps of the Stepper.
+ */
+var Step = /** @class */ (function (_super) {
+    __extends(Step, _super);
+    function Step() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], Step.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Step.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], Step.prototype, "iconCss", void 0);
+    __decorate([
+        Property(null)
+    ], Step.prototype, "isValid", void 0);
+    __decorate([
+        Property('')
+    ], Step.prototype, "label", void 0);
+    __decorate([
+        Property(false)
+    ], Step.prototype, "optional", void 0);
+    __decorate([
+        Property(StepStatus.NotStarted)
+    ], Step.prototype, "status", void 0);
+    __decorate([
+        Property('')
+    ], Step.prototype, "text", void 0);
+    return Step;
+}(ChildProperty));
+export { Step };
+/**
+ * Defines the orientation type of the Stepper.
+ */
+export var StepperOrientation;
+(function (StepperOrientation) {
+    /**
+     * Steps are displayed horizontally.
+     */
+    StepperOrientation["Horizontal"] = "Horizontal";
+    /**
+     * Steps are displayed vertically.
+     */
+    StepperOrientation["Vertical"] = "Vertical";
+})(StepperOrientation || (StepperOrientation = {}));
+/**
+ * StepperBase component act as base class to the stepper component.
+ */
+var StepperBase = /** @class */ (function (_super) {
+    __extends(StepperBase, _super);
+    /**
+     * * Constructor for Base class
+     *
+     * @param {StepperBaseModel} options - Specifies the Base model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    function StepperBase(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    StepperBase.prototype.preRender = function () {
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    StepperBase.prototype.getModuleName = function () {
+        return 'stepperBase';
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    StepperBase.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {void}
+     */
+    StepperBase.prototype.render = function () {
+    };
+    StepperBase.prototype.updateOrientaion = function (wrapper) {
+        if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {
+            wrapper.classList.contains('e-horizontal') ? wrapper.classList.remove('e-horizontal') : wrapper.classList.remove('e-vertical');
+        }
+        wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());
+    };
+    StepperBase.prototype.renderProgressBar = function (wrapper) {
+        this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
+        this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        this.progressStep.appendChild(this.progressbar);
+        wrapper.prepend(this.progressStep);
+        this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
+        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
+        if (wrapper.classList.contains('e-vertical')) {
+            if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {
+                var stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
+                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+            }
+            else {
+                this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');
+            }
+        }
+        if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {
+            this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');
+        }
+        if (wrapper.classList.contains('e-horizontal')) {
+            this.setProgressPosition(wrapper);
+        }
+    };
+    StepperBase.prototype.setProgressPosition = function (wrapper, isResize) {
+        var stepItemContainer = (wrapper.querySelector('.e-step-container'));
+        var stepItemEle = stepItemContainer.firstElementChild;
+        if (isResize != true) {
+            var topPos = 0;
+            if (wrapper.classList.contains('e-label-before')) {
+                topPos = (stepItemContainer.offsetParent.offsetHeight - (stepItemEle.offsetHeight / 2) - 1);
+            }
+            else {
+                topPos = (stepItemEle.offsetHeight / 2);
+            }
+            this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');
+        }
+        var lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        if (wrapper.classList.contains('e-rtl')) {
+            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);
+            this.progressStep.style.setProperty('--progress-left-position', Math.abs(leftPost) + 'px');
+            this.progressStep.style.setProperty('--progress-bar-width', Math.abs(lastEle.offsetLeft - stepItemEle.offsetLeft) + 'px');
+        }
+        else {
+            this.progressStep.style.setProperty('--progress-left-position', (stepItemEle.offsetLeft + 1) + 'px');
+            this.progressStep.style.setProperty('--progress-bar-width', ((lastEle.offsetWidth + lastEle.offsetLeft - 2) - (stepItemEle.offsetLeft + 2)) + 'px');
+        }
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @param newProp
+     * @param oldProp
+     * @private
+     * @returns {void}
+     */
+    StepperBase.prototype.onPropertyChanged = function (newProp, oldProp) {
+    };
+    __decorate([
+        Collection([], Step)
+    ], StepperBase.prototype, "steps", void 0);
+    __decorate([
+        Property('')
+    ], StepperBase.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], StepperBase.prototype, "readOnly", void 0);
+    __decorate([
+        Property(StepperOrientation.Horizontal)
+    ], StepperBase.prototype, "orientation", void 0);
+    __decorate([
+        Event()
+    ], StepperBase.prototype, "created", void 0);
+    StepperBase = __decorate([
+        NotifyPropertyChanges
+    ], StepperBase);
+    return StepperBase;
+}(Component));
+export { StepperBase };

package/src/tab/tab.js

@@ -1354,7 +1354,6 @@ var Tab = /** @class */ (function (_super) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNOU(scrCnt)) {
             var scrBar = select('.e-hscroll-bar', this.tbItems);
-            scrBar.removeAttribute('tabindex');
             var scrStart = scrBar.scrollLeft;
             var scrEnd = scrStart + scrBar.offsetWidth;
             var eleStart = target.offsetLeft;

package/src/toolbar/toolbar.js

@@ -795,6 +795,10 @@ var Toolbar = /** @class */ (function (_super) {
             if (this.cssClass) {
                 addClass([innerItems[0]], this.cssClass.split(' '));
             }
+            var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR + ', .' + 'e-vscroll-bar');
+            if (scrollEle) {
+                scrollEle.removeAttribute('tabindex');
+            }
             this.remove(this.scrollModule.element, CLS_TBARPOS);
             setStyle(this.element, { overflow: 'hidden' });
         }

package/src/treeview/treeview.js

@@ -350,9 +350,11 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.setDisabledMode = function () {
         if (this.disabled) {
             this.element.classList.add(DISABLED);
+            this.element.setAttribute('aria-disabled', 'true');
         }
         else {
             this.element.classList.remove(DISABLED);
+            this.element.setAttribute('aria-disabled', 'false');
         }
     };
     TreeView.prototype.setEnableRtl = function () {
@@ -375,12 +377,11 @@ var TreeView = /** @class */ (function (_super) {
         (isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);
     };
     TreeView.prototype.setMultiSelect = function (isEnabled) {
-        var firstUl = select('.' + PARENTITEM, this.element);
         if (isEnabled) {
-            firstUl.setAttribute('aria-multiselectable', 'true');
+            this.element.setAttribute('aria-multiselectable', 'true');
         }
         else {
-            firstUl.removeAttribute('aria-multiselectable');
+            this.element.setAttribute('aria-multiselectable', 'false');
         }
     };
     // eslint-disable-next-line
@@ -749,7 +750,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.showCheckBox) {
             var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
             checkboxEle.setAttribute('role', 'checkbox');
-            checkboxEle.setAttribute('aria-label', 'checkbox');
+            checkboxEle.setAttribute('aria-label', e.text);
             var icon = select('div.' + ICON, e.item);
             var id = e.item.getAttribute('data-uid');
             e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);
@@ -1006,17 +1007,11 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {
         var li = selectAll('.' + LISTITEM, this.element);
         if (!isNOU(nodes)) {
-            for (var len = nodes.length; len >= 0; len--) {
-                var liEle = void 0;
-                if (nodes.length === 1) {
-                    liEle = this.getElement(nodes[len - 1]);
-                }
-                else {
-                    liEle = this.getElement(nodes[len]);
-                }
+            for (var len = nodes.length - 1; len >= 0; len--) {
+                var liEle = this.getElement(nodes[len]);
                 if (isNOU(liEle)) {
                     var node = void 0;
-                    node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString() : nodes[len] ? nodes[len].toString() : null;
+                    node = nodes[len - (nodes.length - 1)] ? nodes[len - (nodes.length - 1)].toString() : nodes[len] ? nodes[len].toString() : null;
                     if (node !== '' && doCheck && node) {
                         this.setValidCheckedNode(node);
                         this.dynamicCheckState(node, doCheck);
@@ -1066,7 +1061,7 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
         if (nodes) {
-            for (var j = 0; j < nodes.length; j++) {
+            for (var j = 0; j < nodes.length - 1; j++) {
                 var node = nodes[j] ? nodes[j].toString() : '';
                 if (!doCheck) {
                     this.updateField(this.treeData, this.fields, node, 'isChecked', null);
@@ -4616,7 +4611,7 @@ var TreeView = /** @class */ (function (_super) {
                     this.isAnimate = false;
                     this.isFieldChange = true;
                     this.initialRender = true;
-                    if (isNOU(this.isReact) && !(this.fields.dataSource instanceof DataManager)) {
+                    if (!this.isReact || this.isReact && !(this.fields.dataSource instanceof DataManager)) {
                         this.reRenderNodes();
                     }
                     this.initialRender = false;

package/stepper-base.d.ts

@@ -0,0 +1,4 @@
+/**
+ * stepper-base
+ */
+export * from './src/stepper-base/index';

package/stepper-base.js

@@ -0,0 +1,4 @@
+/**
+ * stepper-base
+ */
+export * from './src/stepper-base/index';

package/stepper.d.ts

@@ -0,0 +1,4 @@
+/**
+ * stepper
+ */
+export * from './src/stepper/index';

package/stepper.js

@@ -0,0 +1,4 @@
+/**
+ * stepper
+ */
+export * from './src/stepper/index';