diff --git a/src/modules/esl-carousel/core/esl-carousel.ts b/src/modules/esl-carousel/core/esl-carousel.ts index 8c9af4ced..31836ad1f 100644 --- a/src/modules/esl-carousel/core/esl-carousel.ts +++ b/src/modules/esl-carousel/core/esl-carousel.ts @@ -3,7 +3,7 @@ import {ESLBaseElement} from '../../esl-base-element/core'; import {attr, boolAttr, ready, decorate, listen, memoize} from '../../esl-utils/decorators'; import {isMatches} from '../../esl-utils/dom/traversing'; import {microtask} from '../../esl-utils/async'; -import {parseBoolean, sequentialUID} from '../../esl-utils/misc'; +import {parseBoolean, parseTime, sequentialUID} from '../../esl-utils/misc'; import {CSSClassUtils} from '../../esl-utils/dom/class'; import {ESLTraversingQuery} from '../../esl-traversing-query/core'; @@ -33,7 +33,7 @@ import type { @ExportNs('Carousel') export class ESLCarousel extends ESLBaseElement { public static override is = 'esl-carousel'; - public static observedAttributes = ['media', 'type', 'loop', 'count', 'vertical', 'container']; + public static observedAttributes = ['media', 'type', 'loop', 'count', 'vertical', 'step-duration', 'container']; /** Media query pattern used for {@link ESLMediaRuleList} of `type`, `loop` and `count` (default: `all`) */ @attr({defaultValue: 'all'}) public media: string; @@ -46,6 +46,9 @@ export class ESLCarousel extends ESLBaseElement { /** Orientation of the carousel (`horizontal` by default). Supports {@link ESLMediaRuleList} syntax */ @attr({defaultValue: 'false'}) public vertical: string | boolean; + /** Duration of the single slide transition */ + @attr({defaultValue: '250'}) public stepDuration: string; + /** Container selector (supports traversing query). Carousel itself by default */ @attr({defaultValue: ''}) public container: string; /** CSS class to add on the container when carousel is empty */ @@ -85,6 +88,11 @@ export class ESLCarousel extends ESLBaseElement { public get verticalRule(): ESLMediaRuleList { return ESLMediaRuleList.parse(this.vertical as string, this.media, parseBoolean); } + /** Duration of the single slide transition {@link ESLMediaRuleList} instance */ + @memoize() + public get stepDurationRule(): ESLMediaRuleList { + return ESLMediaRuleList.parse(this.stepDuration, this.media, parseTime); + } /** Returns observed media rules */ public get observedRules(): ESLMediaRuleList[] { @@ -309,7 +317,8 @@ export class ESLCarousel extends ESLBaseElement { /** Merge request params with default params */ protected mergeParams(params: Partial): ESLCarouselActionParams { - return {stepDuration: 250, ...params}; + const stepDuration = this.stepDurationRule.value || 0; + return {stepDuration, ...params}; } /** @returns slide by index (supports not normalized indexes) */