@xui/carousel 2.0.0-alpha.19 → 2.0.0-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/xui-carousel.mjs +10 -0
  2. package/fesm2022/xui-carousel.mjs.map +1 -1
  3. package/package.json +3 -3
  4. package/types/xui-carousel.d.ts +10 -0
package/fesm2022/xui-carousel.mjs CHANGED
@@ -37,16 +37,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
37
37
  * ```
38
38
  */
39
39
  class XuiCarousel {
40
+ /** Extra classes, merged into the component's own rather than replacing them. */
40
41
  class = input('', /* @ts-ignore */
41
42
  ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
42
43
  direction = injectXDirection();
44
+ /** Zero-based index of the visible slide. Two-way bindable with `[(index)]`. */
43
45
  index = model(0, /* @ts-ignore */
44
46
  ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
47
+ /** Advance on a timer. Pauses while the pointer is over the carousel, and does nothing with a single slide. */
45
48
  autoplay = input(false, { ...(ngDevMode ? { debugName: "autoplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
49
+ /** Milliseconds between automatic advances. Only used with `autoplay`. */
46
50
  interval = input(3000, { ...(ngDevMode ? { debugName: "interval" } : /* istanbul ignore next */ {}), transform: numberAttribute });
51
+ /** Show the per-slide indicators. Hidden anyway when there is only one slide. */
47
52
  dots = input(true, { ...(ngDevMode ? { debugName: "dots" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
53
+ /** Show the previous/next buttons. Hidden anyway when there is only one slide. */
48
54
  arrows = input(true, { ...(ngDevMode ? { debugName: "arrows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
55
+ /** Wrap around at either end. With this off, the arrows stop at the first and last slide. */
49
56
  loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
57
+ /**
58
+ * How slides change: sliding horizontally (`scrollx`, direction-aware in RTL) or cross-fading in place (`fade`).
59
+ */
50
60
  effect = input('scrollx', /* @ts-ignore */
51
61
  ...(ngDevMode ? [{ debugName: "effect" }] : /* istanbul ignore next */ []));
52
62
  items = contentChildren(XuiCarouselItem, /* @ts-ignore */
package/fesm2022/xui-carousel.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"xui-carousel.mjs","sources":["../../../../../../libs/ui/carousel/xui/src/lib/carousel-item.ts","../../../../../../libs/ui/carousel/xui/src/lib/carousel.ts","../../../../../../libs/ui/carousel/xui/src/index.ts","../../../../../../libs/ui/carousel/xui/src/xui-carousel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, TemplateRef, viewChild, ViewEncapsulation } from '@angular/core';\n\n/** One slide inside {@link XuiCarousel}. Its projected content is the slide. */\n@Component({\n selector: 'xui-carousel-item',\n template: `<ng-template #content><ng-content /></ng-template>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCarouselItem {\n readonly content = viewChild.required<TemplateRef<unknown>>('content');\n}\n","import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n input,\n model,\n numberAttribute,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronLeftRound, matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { arrowDirectionOnAxis, injectXDirection } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { XuiCarouselItem } from './carousel-item';\n\n/**\n * A slideshow of `<xui-carousel-item>` slides with arrows, dot indicators and\n * optional autoplay (paused on hover). `effect` slides (`scrollx`) or crossfades\n * (`fade`); `index` is two-way bindable.\n *\n * ```html\n * <xui-carousel autoplay dots>\n * <xui-carousel-item>Slide 1</xui-carousel-item>\n * <xui-carousel-item>Slide 2</xui-carousel-item>\n * </xui-carousel>\n * ```\n */\n@Component({\n selector: 'xui-carousel',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })],\n template: `\n <div\n class=\"relative h-full w-full overflow-hidden\"\n tabindex=\"0\"\n (mouseenter)=\"paused.set(true)\"\n (mouseleave)=\"paused.set(false)\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (effect() === 'fade') {\n <!-- A grid with every slide in the one cell, rather than a stack of absolutely positioned\n ones: they still overlap to crossfade, but they are in flow, so the carousel takes its\n height from them. Out of flow, nothing gave it a height and it collapsed to nothing. -->\n <div class=\"grid h-full w-full\">\n @for (item of items(); track $index; let i = $index) {\n <div\n class=\"col-start-1 row-start-1 transition-opacity duration-500\"\n [style.opacity]=\"i === index() ? 1 : 0\"\n [style.pointer-events]=\"i === index() ? 'auto' : 'none'\"\n [attr.aria-hidden]=\"i === index() ? null : true\"\n [attr.inert]=\"i === index() ? null : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"item.content()\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"flex h-full transition-transform duration-500 ease-out\" [style.transform]=\"trackTransform()\">\n @for (item of items(); track $index; let i = $index) {\n <!-- inert as well as aria-hidden: an off-screen slide holding a\n link or button would otherwise still be a tab stop. -->\n <div\n class=\"h-full w-full shrink-0 grow-0 basis-full\"\n [attr.aria-hidden]=\"i === index() ? null : true\"\n [attr.inert]=\"i === index() ? null : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"item.content()\" />\n </div>\n }\n </div>\n }\n\n @if (arrows() && count() > 1) {\n <button type=\"button\" [class]=\"arrowClass('previous')\" (click)=\"prev()\" aria-label=\"Previous slide\">\n <ng-icon xui size=\"20px\" name=\"matChevronLeftRound\" />\n </button>\n <button type=\"button\" [class]=\"arrowClass('next')\" (click)=\"next()\" aria-label=\"Next slide\">\n <ng-icon xui size=\"20px\" name=\"matChevronRightRound\" />\n </button>\n }\n\n @if (dots() && count() > 1) {\n <div class=\"absolute inset-x-0 bottom-3 flex justify-center gap-2\">\n @for (item of items(); track $index; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClass(i === index())\"\n [attr.aria-current]=\"i === index() ? 'true' : null\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n (click)=\"go(i)\"\n ></button>\n }\n </div>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()',\n role: 'region',\n 'aria-roledescription': 'carousel'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCarousel {\n readonly class = input<ClassValue>('');\n\n protected readonly direction = injectXDirection();\n\n readonly index = model<number>(0);\n readonly autoplay = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly interval = input<number, NumberInput>(3000, { transform: numberAttribute });\n readonly dots = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly arrows = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly loop = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly effect = input<'scrollx' | 'fade'>('scrollx');\n\n protected readonly items = contentChildren(XuiCarouselItem);\n protected readonly count = computed(() => this.items().length);\n protected readonly paused = signal(false);\n\n constructor() {\n // Autoplay: a self-cleaning interval that pauses on hover.\n effect(onCleanup => {\n if (!this.autoplay() || this.paused() || this.count() <= 1) {\n return;\n }\n const id = setInterval(() => this.next(), this.interval());\n onCleanup(() => clearInterval(id));\n });\n }\n\n protected go(target: number): void {\n const count = this.count();\n if (count === 0) {\n return;\n }\n this.index.set(((target % count) + count) % count);\n }\n\n next(): void {\n const count = this.count();\n if (this.loop()) {\n this.go(this.index() + 1);\n } else {\n this.index.set(Math.min(count - 1, this.index() + 1));\n }\n }\n\n prev(): void {\n if (this.loop()) {\n this.go(this.index() - 1);\n } else {\n this.index.set(Math.max(0, this.index() - 1));\n }\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n // Arrows follow what the user sees: in RTL slides advance leftwards, so\n // ArrowLeft is \"next\".\n const arrow = arrowDirectionOnAxis(event.key, this.direction(), 'horizontal');\n if (!arrow) {\n return;\n }\n\n event.preventDefault();\n if (arrow === 'next') {\n this.next();\n } else {\n this.prev();\n }\n }\n\n protected readonly computedClass = computed(() =>\n xui('bg-surface-inset relative block overflow-hidden rounded-lg', this.class())\n );\n\n /** `previous` sits at the inline start, `next` at the inline end. */\n protected arrowClass(side: 'previous' | 'next'): string {\n return xui(\n // eslint-disable-next-line local/no-hand-z-index -- nav buttons stack above the slides inside the carousel’s own stacking context\n 'bg-surface-overlay/70 text-foreground hover:bg-surface-overlay absolute top-1/2 z-10 flex size-9 -translate-y-1/2 items-center justify-center rounded-full backdrop-blur transition-colors',\n side === 'previous' ? 'start-3' : 'end-3',\n // The chevrons are drawn pointing left/right; mirror them so \"previous\"\n // still points back towards the start of the line.\n this.direction() === 'rtl' && '-scale-x-100'\n );\n }\n\n /**\n * How far to slide the track. `translateX` is physical while the flex row\n * lays slides out inline, so RTL needs the opposite sign.\n */\n protected trackTransform(): string {\n const offset = this.index() * 100 * (this.direction() === 'rtl' ? 1 : -1);\n return `translateX(${offset}%)`;\n }\n\n protected dotClass(active: boolean): string {\n return xui('h-2 rounded-full transition-all', active ? 'bg-foreground w-5' : 'bg-foreground/40 w-2');\n }\n}\n","import { XuiCarousel } from './lib/carousel';\nimport { XuiCarouselItem } from './lib/carousel-item';\n\nexport * from './lib/carousel';\nexport * from './lib/carousel-item';\n\nexport const XuiCarouselImports = [XuiCarousel, XuiCarouselItem] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAEA;MAOa,eAAe,CAAA;AACjB,IAAA,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAuB,SAAS;gFAAC;0HAD3D,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,iMAJhB,CAAA,kDAAA,CAAoD,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAInD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE,CAAA,kDAAA,CAAoD;oBAC9D,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;qEAE6D,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACavE;;;;;;;;;;;AAWG;MA8EU,WAAW,CAAA;IACb,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAEnB,SAAS,GAAG,gBAAgB,EAAE;IAExC,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;IACxB,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC/E,QAAQ,GAAG,KAAK,CAAsB,IAAI,gFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;IAC3E,IAAI,GAAG,KAAK,CAAwB,IAAI,4EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,MAAM,GAAG,KAAK,CAAwB,IAAI,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC5E,IAAI,GAAG,KAAK,CAAwB,IAAI,4EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,MAAM,GAAG,KAAK,CAAqB,SAAS;+EAAC;IAEnC,KAAK,GAAG,eAAe,CAAC,eAAe;8EAAC;IACxC,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;8EAAC;IAC3C,MAAM,GAAG,MAAM,CAAC,KAAK;+EAAC;AAEzC,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,SAAS,IAAG;AACjB,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;gBAC1D;YACF;AACA,YAAA,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1D,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC,CAAC;AACpC,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,EAAE,CAAC,MAAc,EAAA;AACzB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;YACf;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC;IACpD;IAEA,IAAI,GAAA;AACF,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3B;aAAO;YACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QACvD;IACF;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3B;aAAO;AACL,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/C;IACF;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;;;AAGtC,QAAA,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,YAAY,CAAC;QAC7E,IAAI,CAAC,KAAK,EAAE;YACV;QACF;QAEA,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,KAAK,KAAK,MAAM,EAAE;YACpB,IAAI,CAAC,IAAI,EAAE;QACb;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;AAEmB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CAAC,4DAA4D,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFAChF;;AAGS,IAAA,UAAU,CAAC,IAAyB,EAAA;AAC5C,QAAA,OAAO,GAAG;;QAER,4LAA4L,EAC5L,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO;;;QAGzC,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,IAAI,cAAc,CAC7C;IACH;AAEA;;;AAGG;IACO,cAAc,GAAA;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QACzE,OAAO,CAAA,WAAA,EAAc,MAAM,CAAA,EAAA,CAAI;IACjC;AAEU,IAAA,QAAQ,CAAC,MAAe,EAAA;AAChC,QAAA,OAAO,GAAG,CAAC,iCAAiC,EAAE,MAAM,GAAG,mBAAmB,GAAG,sBAAsB,CAAC;IACtG;0HAhGW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;8GAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAaqB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAtFhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAlES,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAC5B,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FA0EjE,WAAW,EAAA,UAAA,EAAA,CAAA;kBA7EvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,OAAO,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,OAAO,CAAC;oBAC5C,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC,CAAC;AAC5E,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgET,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,iBAAiB;AAC5B,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,sBAAsB,EAAE;AACzB,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;+3BAc4C,eAAe,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;MCvH/C,kBAAkB,GAAG,CAAC,WAAW,EAAE,eAAe;;ACN/D;;AAEG;;;;"}
1
+ {"version":3,"file":"xui-carousel.mjs","sources":["../../../../../../libs/ui/carousel/xui/src/lib/carousel-item.ts","../../../../../../libs/ui/carousel/xui/src/lib/carousel.ts","../../../../../../libs/ui/carousel/xui/src/index.ts","../../../../../../libs/ui/carousel/xui/src/xui-carousel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, TemplateRef, viewChild, ViewEncapsulation } from '@angular/core';\n\n/** One slide inside {@link XuiCarousel}. Its projected content is the slide. */\n@Component({\n selector: 'xui-carousel-item',\n template: `<ng-template #content><ng-content /></ng-template>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCarouselItem {\n readonly content = viewChild.required<TemplateRef<unknown>>('content');\n}\n","import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n input,\n model,\n numberAttribute,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronLeftRound, matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { arrowDirectionOnAxis, injectXDirection } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { XuiCarouselItem } from './carousel-item';\n\n/**\n * A slideshow of `<xui-carousel-item>` slides with arrows, dot indicators and\n * optional autoplay (paused on hover). `effect` slides (`scrollx`) or crossfades\n * (`fade`); `index` is two-way bindable.\n *\n * ```html\n * <xui-carousel autoplay dots>\n * <xui-carousel-item>Slide 1</xui-carousel-item>\n * <xui-carousel-item>Slide 2</xui-carousel-item>\n * </xui-carousel>\n * ```\n */\n@Component({\n selector: 'xui-carousel',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })],\n template: `\n <div\n class=\"relative h-full w-full overflow-hidden\"\n tabindex=\"0\"\n (mouseenter)=\"paused.set(true)\"\n (mouseleave)=\"paused.set(false)\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (effect() === 'fade') {\n <!-- A grid with every slide in the one cell, rather than a stack of absolutely positioned\n ones: they still overlap to crossfade, but they are in flow, so the carousel takes its\n height from them. Out of flow, nothing gave it a height and it collapsed to nothing. -->\n <div class=\"grid h-full w-full\">\n @for (item of items(); track $index; let i = $index) {\n <div\n class=\"col-start-1 row-start-1 transition-opacity duration-500\"\n [style.opacity]=\"i === index() ? 1 : 0\"\n [style.pointer-events]=\"i === index() ? 'auto' : 'none'\"\n [attr.aria-hidden]=\"i === index() ? null : true\"\n [attr.inert]=\"i === index() ? null : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"item.content()\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"flex h-full transition-transform duration-500 ease-out\" [style.transform]=\"trackTransform()\">\n @for (item of items(); track $index; let i = $index) {\n <!-- inert as well as aria-hidden: an off-screen slide holding a\n link or button would otherwise still be a tab stop. -->\n <div\n class=\"h-full w-full shrink-0 grow-0 basis-full\"\n [attr.aria-hidden]=\"i === index() ? null : true\"\n [attr.inert]=\"i === index() ? null : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"item.content()\" />\n </div>\n }\n </div>\n }\n\n @if (arrows() && count() > 1) {\n <button type=\"button\" [class]=\"arrowClass('previous')\" (click)=\"prev()\" aria-label=\"Previous slide\">\n <ng-icon xui size=\"20px\" name=\"matChevronLeftRound\" />\n </button>\n <button type=\"button\" [class]=\"arrowClass('next')\" (click)=\"next()\" aria-label=\"Next slide\">\n <ng-icon xui size=\"20px\" name=\"matChevronRightRound\" />\n </button>\n }\n\n @if (dots() && count() > 1) {\n <div class=\"absolute inset-x-0 bottom-3 flex justify-center gap-2\">\n @for (item of items(); track $index; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClass(i === index())\"\n [attr.aria-current]=\"i === index() ? 'true' : null\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n (click)=\"go(i)\"\n ></button>\n }\n </div>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()',\n role: 'region',\n 'aria-roledescription': 'carousel'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiCarousel {\n /** Extra classes, merged into the component's own rather than replacing them. */\n readonly class = input<ClassValue>('');\n\n protected readonly direction = injectXDirection();\n\n /** Zero-based index of the visible slide. Two-way bindable with `[(index)]`. */\n readonly index = model<number>(0);\n /** Advance on a timer. Pauses while the pointer is over the carousel, and does nothing with a single slide. */\n readonly autoplay = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n /** Milliseconds between automatic advances. Only used with `autoplay`. */\n readonly interval = input<number, NumberInput>(3000, { transform: numberAttribute });\n /** Show the per-slide indicators. Hidden anyway when there is only one slide. */\n readonly dots = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n /** Show the previous/next buttons. Hidden anyway when there is only one slide. */\n readonly arrows = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n /** Wrap around at either end. With this off, the arrows stop at the first and last slide. */\n readonly loop = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n /**\n * How slides change: sliding horizontally (`scrollx`, direction-aware in RTL) or cross-fading in place (`fade`).\n */\n readonly effect = input<'scrollx' | 'fade'>('scrollx');\n\n protected readonly items = contentChildren(XuiCarouselItem);\n protected readonly count = computed(() => this.items().length);\n protected readonly paused = signal(false);\n\n constructor() {\n // Autoplay: a self-cleaning interval that pauses on hover.\n effect(onCleanup => {\n if (!this.autoplay() || this.paused() || this.count() <= 1) {\n return;\n }\n const id = setInterval(() => this.next(), this.interval());\n onCleanup(() => clearInterval(id));\n });\n }\n\n protected go(target: number): void {\n const count = this.count();\n if (count === 0) {\n return;\n }\n this.index.set(((target % count) + count) % count);\n }\n\n next(): void {\n const count = this.count();\n if (this.loop()) {\n this.go(this.index() + 1);\n } else {\n this.index.set(Math.min(count - 1, this.index() + 1));\n }\n }\n\n prev(): void {\n if (this.loop()) {\n this.go(this.index() - 1);\n } else {\n this.index.set(Math.max(0, this.index() - 1));\n }\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n // Arrows follow what the user sees: in RTL slides advance leftwards, so\n // ArrowLeft is \"next\".\n const arrow = arrowDirectionOnAxis(event.key, this.direction(), 'horizontal');\n if (!arrow) {\n return;\n }\n\n event.preventDefault();\n if (arrow === 'next') {\n this.next();\n } else {\n this.prev();\n }\n }\n\n protected readonly computedClass = computed(() =>\n xui('bg-surface-inset relative block overflow-hidden rounded-lg', this.class())\n );\n\n /** `previous` sits at the inline start, `next` at the inline end. */\n protected arrowClass(side: 'previous' | 'next'): string {\n return xui(\n // eslint-disable-next-line local/no-hand-z-index -- nav buttons stack above the slides inside the carousel’s own stacking context\n 'bg-surface-overlay/70 text-foreground hover:bg-surface-overlay absolute top-1/2 z-10 flex size-9 -translate-y-1/2 items-center justify-center rounded-full backdrop-blur transition-colors',\n side === 'previous' ? 'start-3' : 'end-3',\n // The chevrons are drawn pointing left/right; mirror them so \"previous\"\n // still points back towards the start of the line.\n this.direction() === 'rtl' && '-scale-x-100'\n );\n }\n\n /**\n * How far to slide the track. `translateX` is physical while the flex row\n * lays slides out inline, so RTL needs the opposite sign.\n */\n protected trackTransform(): string {\n const offset = this.index() * 100 * (this.direction() === 'rtl' ? 1 : -1);\n return `translateX(${offset}%)`;\n }\n\n protected dotClass(active: boolean): string {\n return xui('h-2 rounded-full transition-all', active ? 'bg-foreground w-5' : 'bg-foreground/40 w-2');\n }\n}\n","import { XuiCarousel } from './lib/carousel';\nimport { XuiCarouselItem } from './lib/carousel-item';\n\nexport * from './lib/carousel';\nexport * from './lib/carousel-item';\n\nexport const XuiCarouselImports = [XuiCarousel, XuiCarouselItem] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAEA;MAOa,eAAe,CAAA;AACjB,IAAA,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAuB,SAAS;gFAAC;0HAD3D,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,iMAJhB,CAAA,kDAAA,CAAoD,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAInD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE,CAAA,kDAAA,CAAoD;oBAC9D,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;qEAE6D,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACavE;;;;;;;;;;;AAWG;MA8EU,WAAW,CAAA;;IAEb,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAEnB,SAAS,GAAG,gBAAgB,EAAE;;IAGxC,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAExB,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAE/E,QAAQ,GAAG,KAAK,CAAsB,IAAI,gFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;;IAE3E,IAAI,GAAG,KAAK,CAAwB,IAAI,4EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAE1E,MAAM,GAAG,KAAK,CAAwB,IAAI,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAE5E,IAAI,GAAG,KAAK,CAAwB,IAAI,4EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACnF;;AAEG;IACM,MAAM,GAAG,KAAK,CAAqB,SAAS;+EAAC;IAEnC,KAAK,GAAG,eAAe,CAAC,eAAe;8EAAC;IACxC,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;8EAAC;IAC3C,MAAM,GAAG,MAAM,CAAC,KAAK;+EAAC;AAEzC,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,SAAS,IAAG;AACjB,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;gBAC1D;YACF;AACA,YAAA,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1D,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC,CAAC;AACpC,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,EAAE,CAAC,MAAc,EAAA;AACzB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;YACf;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC;IACpD;IAEA,IAAI,GAAA;AACF,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3B;aAAO;YACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QACvD;IACF;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3B;aAAO;AACL,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/C;IACF;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;;;AAGtC,QAAA,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,YAAY,CAAC;QAC7E,IAAI,CAAC,KAAK,EAAE;YACV;QACF;QAEA,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,KAAK,KAAK,MAAM,EAAE;YACpB,IAAI,CAAC,IAAI,EAAE;QACb;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;AAEmB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CAAC,4DAA4D,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFAChF;;AAGS,IAAA,UAAU,CAAC,IAAyB,EAAA;AAC5C,QAAA,OAAO,GAAG;;QAER,4LAA4L,EAC5L,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO;;;QAGzC,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,IAAI,cAAc,CAC7C;IACH;AAEA;;;AAGG;IACO,cAAc,GAAA;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QACzE,OAAO,CAAA,WAAA,EAAc,MAAM,CAAA,EAAA,CAAI;IACjC;AAEU,IAAA,QAAQ,CAAC,MAAe,EAAA;AAChC,QAAA,OAAO,GAAG,CAAC,iCAAiC,EAAE,MAAM,GAAG,mBAAmB,GAAG,sBAAsB,CAAC;IACtG;0HA1GW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;8GAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAuBqB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAlES,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAC5B,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FA0EjE,WAAW,EAAA,UAAA,EAAA,CAAA;kBA7EvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,OAAO,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,OAAO,CAAC;oBAC5C,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC,CAAC;AAC5E,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgET,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,iBAAiB;AAC5B,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,sBAAsB,EAAE;AACzB,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC;AAClC,iBAAA;+3BAwB4C,eAAe,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;MCjI/C,kBAAkB,GAAG,CAAC,WAAW,EAAE,eAAe;;ACN/D;;AAEG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xui/carousel",
3
- "version": "2.0.0-alpha.19",
3
+ "version": "2.0.0-alpha.21",
4
4
  "description": "Modern Angular 22 UI Library based on TailwindCSS",
5
5
  "keywords": [
6
6
  "angular",
@@ -41,8 +41,8 @@
41
41
  "@angular/core": "22",
42
42
  "@ng-icons/core": "34",
43
43
  "@ng-icons/material-icons": "34",
44
- "@xui/core": "2.0.0-alpha.19",
45
- "@xui/icon": "2.0.0-alpha.19",
44
+ "@xui/core": "2.0.0-alpha.21",
45
+ "@xui/icon": "2.0.0-alpha.21",
46
46
  "clsx": "^2.1.1"
47
47
  },
48
48
  "publishConfig": {
package/types/xui-carousel.d.ts CHANGED
@@ -24,14 +24,24 @@ declare class XuiCarouselItem {
24
24
  * ```
25
25
  */
26
26
  declare class XuiCarousel {
27
+ /** Extra classes, merged into the component's own rather than replacing them. */
27
28
  readonly class: _angular_core.InputSignal<ClassValue>;
28
29
  protected readonly direction: _angular_core.Signal<_xui_core_a11y.XDirection>;
30
+ /** Zero-based index of the visible slide. Two-way bindable with `[(index)]`. */
29
31
  readonly index: _angular_core.ModelSignal<number>;
32
+ /** Advance on a timer. Pauses while the pointer is over the carousel, and does nothing with a single slide. */
30
33
  readonly autoplay: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
34
+ /** Milliseconds between automatic advances. Only used with `autoplay`. */
31
35
  readonly interval: _angular_core.InputSignalWithTransform<number, NumberInput>;
36
+ /** Show the per-slide indicators. Hidden anyway when there is only one slide. */
32
37
  readonly dots: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
38
+ /** Show the previous/next buttons. Hidden anyway when there is only one slide. */
33
39
  readonly arrows: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
40
+ /** Wrap around at either end. With this off, the arrows stop at the first and last slide. */
34
41
  readonly loop: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
42
+ /**
43
+ * How slides change: sliding horizontally (`scrollx`, direction-aware in RTL) or cross-fading in place (`fade`).
44
+ */
35
45
  readonly effect: _angular_core.InputSignal<"scrollx" | "fade">;
36
46
  protected readonly items: _angular_core.Signal<readonly XuiCarouselItem[]>;
37
47
  protected readonly count: _angular_core.Signal<number>;