@syncfusion/ej2-navigations 27.2.4 → 28.1.33-686179

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Collection, Property, Event, EmitType, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, getInstance, L10n } from '@syncfusion/ej2-base';import { append, closest, isNullOrUndefined, remove, classList, Touch, SwipeEventArgs, KeyboardEvents, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';
+import { Component, EventHandler, Collection, Property, Event, EmitType, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';
 import {CarouselAnimationEffect,CarouselIndicatorsType,CarouselButtonVisibility,CarouselSwipeMode,SlideChangingEventArgs,SlideChangedEventArgs} from "./carousel";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,36 +8,36 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface CarouselItemModel {
 
     /**
-     * Accepts single/multiple classes (separated by a space) to be used for individual carousel item customization.
-     *
-     * @default null
-     */
-    cssClass?: string;
+     * Accepts single/multiple classes (separated by a space) to be used for individual carousel item customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
 
     /**
-     * Accepts the interval duration in milliseconds for individual carousel item transition.
-     *
-     * @default null
-     */
-    interval?: number;
+     * Accepts the interval duration in milliseconds for individual carousel item transition.
+     *
+     * @default null
+     */
+    interval?: number;
 
     /**
-     * Accepts the template for individual carousel item.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    template?: string | Function;
+     * Accepts the template for individual carousel item.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Function;
 
     /**
-     * Accepts HTML attributes/custom attributes to add in individual carousel item.
-     *
-     * @default null
-     */
-    htmlAttributes?: Record<string, string>;
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
 
 }
 
@@ -47,224 +47,236 @@ export interface CarouselItemModel {
 export interface CarouselModel extends ComponentModel{
 
     /**
-     * Allows defining the collection of carousel item to be displayed on the Carousel.
-     *
-     * @default []
-     */
-    items?: CarouselItemModel[];
+     * Allows defining the collection of carousel item to be displayed on the Carousel.
+     *
+     * @default []
+     */
+    items?: CarouselItemModel[];
 
     /**
-     * Specifies the type of animation effects. The possible values for this property as follows
-     * * `None`: The carousel item transition happens without animation.
-     * * `Slide`: The carousel item transition happens with slide animation.
-     * * `Fade`: The Carousel item transition happens with fade animation.
-     * * `Custom`: The Carousel item transition happens with custom animation.
-     *
-     *  @default 'Slide'
-     */
-    animationEffect?: CarouselAnimationEffect;
+     * Specifies the type of animation effects. The possible values for this property as follows
+     * * `None`: The carousel item transition happens without animation.
+     * * `Slide`: The carousel item transition happens with slide animation.
+     * * `Fade`: The Carousel item transition happens with fade animation.
+     * * `Custom`: The Carousel item transition happens with custom animation.
+     *
+     *  @default 'Slide'
+     */
+    animationEffect?: CarouselAnimationEffect;
 
     /**
-     * Accepts the template for previous navigation button.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    previousButtonTemplate?: string | Function;
+     * Accepts the template for previous navigation button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    previousButtonTemplate?: string | Function;
 
     /**
-     * Accepts the template for next navigation button.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    nextButtonTemplate?: string | Function;
+     * Accepts the template for next navigation button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    nextButtonTemplate?: string | Function;
 
     /**
-     * Accepts the template for indicator buttons.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    indicatorsTemplate?: string | Function;
+     * Accepts the template for indicator buttons.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    indicatorsTemplate?: string | Function;
 
     /**
-     * Accepts the template for play/pause button.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    playButtonTemplate?: string | Function;
+     * Accepts the template for play/pause button.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    playButtonTemplate?: string | Function;
 
     /**
-     * Accepts single/multiple classes (separated by a space) to be used for carousel customization.
-     *
-     * @default null
-     */
-    cssClass?: string;
+     * Accepts single/multiple classes (separated by a space) to be used for carousel customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
 
     /**
-     * Specifies the datasource for the carousel items.
-     *
-     * @isdatamanager false
-     * @default []
-     */
-    dataSource?: Record<string, any>[];
+     * Specifies the datasource for the carousel items.
+     *
+     * @isdatamanager false
+     * @default []
+     */
+    dataSource?: Record<string, any>[];
 
     /**
-     * Specifies the template option for carousel items.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    itemTemplate?: string | Function;
+     * Specifies the template option for carousel items.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    itemTemplate?: string | Function;
 
     /**
-     * Specifies index of the current carousel item.
-     *
-     * @default 0
-     */
-    selectedIndex?: number;
+     * Specifies index of the current carousel item.
+     *
+     * @default 0
+     */
+    selectedIndex?: number;
 
     /**
-     * Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.
-     *
-     * @default '100%'
-     */
-    width?: string | number;
+     * Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    width?: string | number;
 
     /**
-     * Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.
-     *
-     * @default '100%'
-     */
-    height?: string | number;
+     * Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    height?: string | number;
 
     /**
-     * Specifies the interval duration in milliseconds for carousel item transition.
-     *
-     * @default 5000
-     */
-    interval?: number;
+     * Specifies the interval duration in milliseconds for carousel item transition.
+     *
+     * @default 5000
+     */
+    interval?: number;
 
     /**
-     * Defines whether the slide transition is automatic or manual.
-     *
-     * @default true
-     */
-    autoPlay?: boolean;
+     * Defines whether the slide transition is automatic or manual.
+     *
+     * @default true
+     */
+    autoPlay?: boolean;
 
     /**
-     * Defines whether the slide transition gets pause on hover or not.
-     *
-     * @default true
-     */
-    pauseOnHover?: boolean;
+     * Defines whether the slide transition gets pause on hover or not.
+     *
+     * @default true
+     */
+    pauseOnHover?: boolean;
 
     /**
-     * Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.
-     *
-     * @default true
-     */
-    loop?: boolean;
+     * Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.
+     *
+     * @default true
+     */
+    loop?: boolean;
 
     /**
-     * Defines whether to show play button or not.
-     *
-     * @default false
-     */
-    showPlayButton?: boolean;
+     * Defines whether to show play button or not.
+     *
+     * @default false
+     */
+    showPlayButton?: boolean;
 
     /**
-     * Defines whether to enable swipe action in touch devices or not.
-     *
-     * @default true
-     */
-    enableTouchSwipe?: boolean;
+     * Defines whether to enable swipe action in touch devices or not.
+     *
+     * @default true
+     */
+    enableTouchSwipe?: boolean;
 
     /**
-     * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
-     *
-     * @default true
-     */
-    showIndicators?: boolean;
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction?: boolean;
 
     /**
-     * Specifies the type of indicators. The available values for this property are:
-     *
-     * * `Default`: Displays the indicators with a bullet design.
-     * * `Dynamic`: Applies a dynamic animation design to the indicators.
-     * * `Fraction`: Displays the slides numerically as indicators.
-     * * `Progress`: Represents the slides using a progress bar design.
-     *
-     * @default 'Default'
-     */
-    indicatorsType?: CarouselIndicatorsType;
+     * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
+     *
+     * @default true
+     */
+    showIndicators?: boolean;
 
     /**
-     * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
-     * * `Hidden`: Navigation buttons are hidden.
-     * * `Visible`: Navigation buttons are visible.
-     * * `VisibleOnHover`: Navigation buttons are visible only when we hover the carousel.
-     *
-     * @default 'Visible'
-     */
-    buttonsVisibility?: CarouselButtonVisibility;
+     * Specifies the type of indicators. The available values for this property are:
+     *
+     * * `Default`: Displays the indicators with a bullet design.
+     * * `Dynamic`: Applies a dynamic animation design to the indicators.
+     * * `Fraction`: Displays the slides numerically as indicators.
+     * * `Progress`: Represents the slides using a progress bar design.
+     *
+     * @default 'Default'
+     */
+    indicatorsType?: CarouselIndicatorsType;
 
     /**
-     * Enables active slide with partial previous/next slides.
-     *
-     * Slide animation only applicable if the partialVisible is enabled.
-     *
-     * @default false
-     */
-    partialVisible?: boolean;
+     * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
+     * * `Hidden`: Navigation buttons are hidden.
+     * * `Visible`: Navigation buttons are visible.
+     * * `VisibleOnHover`: Navigation buttons are visible only when we hover the carousel.
+     *
+     * @default 'Visible'
+     */
+    buttonsVisibility?: CarouselButtonVisibility;
 
     /**
-     * Specifies whether the slide transition should occur while performing swiping via touch/mouse.
-     * The slide swiping is enabled or disabled using bitwise operators. The swiping is disabled using ‘~’ bitwise operator.
-     * * Touch - Enables or disables the swiping action in touch interaction.
-     * * Mouse - Enables or disables the swiping action in mouse interaction.
-     *
-     * @default 'Touch'
-     * @aspNumberEnum
-     */
-    swipeMode?: CarouselSwipeMode;
+     * Enables active slide with partial previous/next slides.
+     *
+     * Slide animation only applicable if the partialVisible is enabled.
+     *
+     * @default false
+     */
+    partialVisible?: boolean;
 
     /**
-     * Accepts HTML attributes/custom attributes to add in individual carousel item.
-     *
-     * @default null
-     */
-    htmlAttributes?: Record<string, string>;
+     * Specifies whether the slide transition should occur while performing swiping via touch/mouse.
+     * The slide swiping is enabled or disabled using bitwise operators. The swiping is disabled using ‘~’ bitwise operator.
+     * * Touch - Enables or disables the swiping action in touch interaction.
+     * * Mouse - Enables or disables the swiping action in mouse interaction.
+     *
+     * @default 'Touch'
+     * @aspNumberEnum
+     */
+    swipeMode?: CarouselSwipeMode;
 
     /**
-     * The event will be fired before the slide change.
-     *
-     * @event slideChanging
-     */
-    slideChanging?: EmitType<SlideChangingEventArgs>;
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
 
     /**
-     * The event will be fired after the slide changed.
-     *
-     * @event slideChanged
-     */
-    slideChanged?: EmitType<SlideChangedEventArgs>;
+     * The event will be fired before the slide change.
+     *
+     * @event slideChanging
+     */
+    slideChanging?: EmitType<SlideChangingEventArgs>;
+
+    /**
+     * The event will be fired after the slide changed.
+     *
+     * @event slideChanged
+     */
+    slideChanged?: EmitType<SlideChangedEventArgs>;
 
 }

package/src/carousel/carousel.d.ts

@@ -261,6 +261,17 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     enableTouchSwipe: boolean;
+    /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction: boolean;
     /**
      * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
      *

package/src/carousel/carousel.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;
+};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, EventHandler, Collection, Property, Event, formatUnit, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';
 import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, getInstance, L10n } from '@syncfusion/ej2-base';
@@ -183,6 +183,15 @@ var Carousel = /** @class */ (function (_super) {
                         this.reRenderSlides();
                     }
                     break;
+                case 'allowKeyboardInteraction':
+                    if (this.keyModule) {
+                        this.keyModule.destroy();
+                        this.keyModule = null;
+                    }
+                    if (newProp.allowKeyboardInteraction) {
+                        this.renderKeyboardActions();
+                    }
+                    break;
                 case 'enableRtl':
                     rtlElement = [].slice.call(this.element.querySelectorAll("." + CLS_PREV_BUTTON + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
                     rtlElement.push(this.element);
@@ -554,6 +563,9 @@ var Carousel = /** @class */ (function (_super) {
         append(template, indicatorBar);
     };
     Carousel.prototype.renderKeyboardActions = function () {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
@@ -877,6 +889,9 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.keyHandler = function (e) {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         var direction;
         var slideIndex;
         var isSlideTransition = false;
@@ -1025,6 +1040,7 @@ var Carousel = /** @class */ (function (_super) {
         if (!this.timeStampStart) {
             this.timeStampStart = Date.now();
         }
+        e.preventDefault();
         this.isSwipe = false;
         this.itemsContainer.classList.add('e-swipe-start');
         this.prevPageX = e.touches ? e.touches[0].pageX : e.pageX;
@@ -1034,6 +1050,7 @@ var Carousel = /** @class */ (function (_super) {
         if (!this.itemsContainer.classList.contains('e-swipe-start')) {
             return;
         }
+        this.isSwipe = true;
         e.preventDefault();
         var pageX = e.touches ? e.touches[0].pageX : e.pageX;
         var positionDiff = this.prevPageX - (pageX);
@@ -1046,7 +1063,6 @@ var Carousel = /** @class */ (function (_super) {
         this.itemsContainer.style.transform = "translateX(" + (this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)) + "px)";
     };
     Carousel.prototype.swipStop = function () {
-        this.isSwipe = true;
         var time = Date.now() - this.timeStampStart;
         var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
         distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
@@ -1232,8 +1248,10 @@ var Carousel = /** @class */ (function (_super) {
             this.touchModule.destroy();
             this.touchModule = null;
         }
-        this.keyModule.destroy();
-        this.keyModule = null;
+        if (this.keyModule) {
+            this.keyModule.destroy();
+            this.keyModule = null;
+        }
         this.resetSlideInterval();
         this.destroyButtons();
         this.unWireEvents();
@@ -1297,6 +1315,9 @@ var Carousel = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Carousel.prototype, "enableTouchSwipe", void 0);
+    __decorate([
+        Property(true)
+    ], Carousel.prototype, "allowKeyboardInteraction", void 0);
     __decorate([
         Property(true)
     ], Carousel.prototype, "showIndicators", void 0);

package/src/common/h-scroll-model.d.ts

@@ -1,4 +1,4 @@
-import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser, detach } from '@syncfusion/ej2-base';import { classList, SwipeEventArgs, isNullOrUndefined} from '@syncfusion/ej2-base';
+import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -7,10 +7,10 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface HScrollModel extends ComponentModel{
 
     /**
-     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
-     *
-     * @default null
-     */
-    scrollStep?: number;
+     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
+     *
+     * @default null
+     */
+    scrollStep?: number;
 
 }