ng-zorro-antd-carousel.mjs 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  1. import * as i0 from '@angular/core';
  2. import { Directive, InjectionToken, EventEmitter, inject, numberAttribute, booleanAttribute, Output, Input, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
  3. import { __esDecorate, __runInitializers } from 'tslib';
  4. import { Directionality } from '@angular/cdk/bidi';
  5. import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
  6. import { NgTemplateOutlet } from '@angular/common';
  7. import { Subject, timer } from 'rxjs';
  8. import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
  9. import * as i1 from 'ng-zorro-antd/core/config';
  10. import { WithConfig } from 'ng-zorro-antd/core/config';
  11. import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
  12. import * as i2 from '@angular/cdk/platform';
  13. import * as i3 from 'ng-zorro-antd/core/services';
  14. import * as i4 from 'ng-zorro-antd/cdk/resize-observer';
  15. /**
  16. * Use of this source code is governed by an MIT-style license that can be
  17. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  18. */
  19. class NzCarouselContentDirective {
  20. renderer;
  21. el;
  22. set isActive(value) {
  23. this._active = value;
  24. if (this.isActive) {
  25. this.renderer.addClass(this.el, 'slick-active');
  26. }
  27. else {
  28. this.renderer.removeClass(this.el, 'slick-active');
  29. }
  30. }
  31. get isActive() {
  32. return this._active;
  33. }
  34. _active = false;
  35. constructor(elementRef, renderer) {
  36. this.renderer = renderer;
  37. this.el = elementRef.nativeElement;
  38. }
  39. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselContentDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
  40. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzCarouselContentDirective, isStandalone: true, selector: "[nz-carousel-content]", host: { classAttribute: "slick-slide" }, exportAs: ["nzCarouselContent"], ngImport: i0 });
  41. }
  42. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselContentDirective, decorators: [{
  43. type: Directive,
  44. args: [{
  45. selector: '[nz-carousel-content]',
  46. exportAs: 'nzCarouselContent',
  47. host: {
  48. class: 'slick-slide'
  49. }
  50. }]
  51. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
  52. /**
  53. * Use of this source code is governed by an MIT-style license that can be
  54. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  55. */
  56. class NzCarouselBaseStrategy {
  57. cdr;
  58. renderer;
  59. platform;
  60. options;
  61. // Properties that strategies may want to use.
  62. carouselComponent;
  63. contents;
  64. slickListEl;
  65. slickTrackEl;
  66. length;
  67. unitWidth;
  68. unitHeight;
  69. get maxIndex() {
  70. return this.length - 1;
  71. }
  72. get firstEl() {
  73. return this.contents[0].el;
  74. }
  75. get lastEl() {
  76. return this.contents[this.maxIndex].el;
  77. }
  78. constructor(carouselComponent, cdr, renderer, platform, options) {
  79. this.cdr = cdr;
  80. this.renderer = renderer;
  81. this.platform = platform;
  82. this.options = options;
  83. this.carouselComponent = carouselComponent;
  84. }
  85. /**
  86. * Initialize dragging sequences.
  87. *
  88. * @param contents
  89. */
  90. withCarouselContents(contents) {
  91. const carousel = this.carouselComponent;
  92. this.slickListEl = carousel.slickListEl;
  93. this.slickTrackEl = carousel.slickTrackEl;
  94. this.contents = contents?.toArray() || [];
  95. this.length = this.contents.length;
  96. if (this.platform.isBrowser) {
  97. const rect = carousel.el.getBoundingClientRect();
  98. this.unitWidth = rect.width;
  99. this.unitHeight = rect.height;
  100. }
  101. else {
  102. // Since we cannot call getBoundingClientRect in server, we just hide all items except for the first one.
  103. contents?.forEach((content, index) => {
  104. if (index === 0) {
  105. this.renderer.setStyle(content.el, 'width', '100%');
  106. }
  107. else {
  108. this.renderer.setStyle(content.el, 'display', 'none');
  109. }
  110. });
  111. }
  112. }
  113. /**
  114. * When user drag the carousel component.
  115. *
  116. * @optional
  117. */
  118. dragging(_vector) { }
  119. /**
  120. * Destroy a scroll strategy.
  121. */
  122. dispose() { }
  123. getFromToInBoundary(f, t) {
  124. const length = this.maxIndex + 1;
  125. return { from: (f + length) % length, to: (t + length) % length };
  126. }
  127. }
  128. /**
  129. * Use of this source code is governed by an MIT-style license that can be
  130. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  131. */
  132. class NzCarouselOpacityStrategy extends NzCarouselBaseStrategy {
  133. withCarouselContents(contents) {
  134. super.withCarouselContents(contents);
  135. if (this.contents) {
  136. this.slickTrackEl.style.width = `${this.length * this.unitWidth}px`;
  137. this.contents.forEach((content, i) => {
  138. this.renderer.setStyle(content.el, 'opacity', this.carouselComponent.activeIndex === i ? '1' : '0');
  139. this.renderer.setStyle(content.el, 'position', 'relative');
  140. this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`);
  141. this.renderer.setStyle(content.el, 'left', `${-this.unitWidth * i}px`);
  142. this.renderer.setStyle(content.el, 'transition', ['opacity 500ms ease 0s', 'visibility 500ms ease 0s']);
  143. });
  144. }
  145. }
  146. switch(_f, _t) {
  147. const { to: t } = this.getFromToInBoundary(_f, _t);
  148. const complete$ = new Subject();
  149. this.contents.forEach((content, i) => {
  150. this.renderer.setStyle(content.el, 'opacity', t === i ? '1' : '0');
  151. });
  152. setTimeout(() => {
  153. complete$.next();
  154. complete$.complete();
  155. }, this.carouselComponent.nzTransitionSpeed);
  156. return complete$;
  157. }
  158. dispose() {
  159. this.contents.forEach((content) => {
  160. this.renderer.setStyle(content.el, 'transition', null);
  161. this.renderer.setStyle(content.el, 'opacity', null);
  162. this.renderer.setStyle(content.el, 'width', null);
  163. this.renderer.setStyle(content.el, 'left', null);
  164. });
  165. super.dispose();
  166. }
  167. }
  168. /**
  169. * Use of this source code is governed by an MIT-style license that can be
  170. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  171. */
  172. class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
  173. isDragging = false;
  174. isTransitioning = false;
  175. get vertical() {
  176. return this.carouselComponent.vertical;
  177. }
  178. constructor(carouselComponent, cdr, renderer, platform, options) {
  179. super(carouselComponent, cdr, renderer, platform, options);
  180. }
  181. dispose() {
  182. super.dispose();
  183. this.renderer.setStyle(this.slickTrackEl, 'transform', null);
  184. }
  185. withCarouselContents(contents) {
  186. super.withCarouselContents(contents);
  187. const carousel = this.carouselComponent;
  188. const activeIndex = carousel.activeIndex;
  189. // We only do when we are in browser.
  190. if (this.platform.isBrowser && this.contents.length) {
  191. this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
  192. if (this.vertical) {
  193. this.renderer.setStyle(this.slickTrackEl, 'width', `${this.unitWidth}px`);
  194. this.renderer.setStyle(this.slickTrackEl, 'height', `${this.length * this.unitHeight}px`);
  195. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-activeIndex * this.unitHeight}px, 0)`);
  196. }
  197. else {
  198. this.renderer.setStyle(this.slickTrackEl, 'height', `${this.unitHeight}px`);
  199. this.renderer.setStyle(this.slickTrackEl, 'width', `${this.length * this.unitWidth}px`);
  200. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth}px, 0, 0)`);
  201. }
  202. this.contents.forEach((content) => {
  203. this.renderer.setStyle(content.el, 'position', 'relative');
  204. this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`);
  205. this.renderer.setStyle(content.el, 'height', `${this.unitHeight}px`);
  206. });
  207. }
  208. }
  209. switch(_f, _t) {
  210. const { to: t } = this.getFromToInBoundary(_f, _t);
  211. const complete$ = new Subject();
  212. this.renderer.setStyle(this.slickTrackEl, 'transition', `transform ${this.carouselComponent.nzTransitionSpeed}ms ease`);
  213. if (this.vertical) {
  214. this.verticalTransform(_f, _t);
  215. }
  216. else {
  217. this.horizontalTransform(_f, _t);
  218. }
  219. this.isTransitioning = true;
  220. this.isDragging = false;
  221. // TODO: use transitionEnd event instead of setTimeout
  222. setTimeout(() => {
  223. this.renderer.setStyle(this.slickTrackEl, 'transition', null);
  224. this.contents.forEach((content) => {
  225. this.renderer.setStyle(content.el, this.vertical ? 'top' : 'left', null);
  226. });
  227. if (this.vertical) {
  228. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-t * this.unitHeight}px, 0)`);
  229. }
  230. else {
  231. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-t * this.unitWidth}px, 0, 0)`);
  232. }
  233. this.isTransitioning = false;
  234. complete$.next();
  235. complete$.complete();
  236. }, this.carouselComponent.nzTransitionSpeed);
  237. return complete$.asObservable();
  238. }
  239. dragging(_vector) {
  240. if (this.isTransitioning) {
  241. return;
  242. }
  243. const activeIndex = this.carouselComponent.activeIndex;
  244. if (this.carouselComponent.vertical) {
  245. if (!this.isDragging && this.length > 2) {
  246. if (activeIndex === this.maxIndex) {
  247. this.prepareVerticalContext(true);
  248. }
  249. else if (activeIndex === 0) {
  250. this.prepareVerticalContext(false);
  251. }
  252. }
  253. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-activeIndex * this.unitHeight + _vector.x}px, 0)`);
  254. }
  255. else {
  256. if (!this.isDragging && this.length > 2) {
  257. if (activeIndex === this.maxIndex) {
  258. this.prepareHorizontalContext(true);
  259. }
  260. else if (activeIndex === 0) {
  261. this.prepareHorizontalContext(false);
  262. }
  263. }
  264. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth + _vector.x}px, 0, 0)`);
  265. }
  266. this.isDragging = true;
  267. }
  268. verticalTransform(_f, _t) {
  269. const { from: f, to: t } = this.getFromToInBoundary(_f, _t);
  270. const needToAdjust = this.length > 2 && _t !== t;
  271. if (needToAdjust) {
  272. this.prepareVerticalContext(t < f);
  273. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-_t * this.unitHeight}px, 0)`);
  274. }
  275. else {
  276. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-t * this.unitHeight}px, 0`);
  277. }
  278. }
  279. horizontalTransform(_f, _t) {
  280. const { from: f, to: t } = this.getFromToInBoundary(_f, _t);
  281. const needToAdjust = this.length > 2 && _t !== t;
  282. if (needToAdjust) {
  283. this.prepareHorizontalContext(t < f);
  284. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-_t * this.unitWidth}px, 0, 0)`);
  285. }
  286. else {
  287. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-t * this.unitWidth}px, 0, 0`);
  288. }
  289. }
  290. prepareVerticalContext(lastToFirst) {
  291. if (lastToFirst) {
  292. this.renderer.setStyle(this.firstEl, 'top', `${this.length * this.unitHeight}px`);
  293. this.renderer.setStyle(this.lastEl, 'top', null);
  294. }
  295. else {
  296. this.renderer.setStyle(this.firstEl, 'top', null);
  297. this.renderer.setStyle(this.lastEl, 'top', `${-this.unitHeight * this.length}px`);
  298. }
  299. }
  300. prepareHorizontalContext(lastToFirst) {
  301. if (lastToFirst) {
  302. this.renderer.setStyle(this.firstEl, 'left', `${this.length * this.unitWidth}px`);
  303. this.renderer.setStyle(this.lastEl, 'left', null);
  304. }
  305. else {
  306. this.renderer.setStyle(this.firstEl, 'left', null);
  307. this.renderer.setStyle(this.lastEl, 'left', `${-this.unitWidth * this.length}px`);
  308. }
  309. }
  310. }
  311. /**
  312. * Use of this source code is governed by an MIT-style license that can be
  313. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  314. */
  315. const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken('nz-carousel-custom-strategies');
  316. const NZ_CONFIG_MODULE_NAME = 'carousel';
  317. let NzCarouselComponent = (() => {
  318. let _instanceExtraInitializers = [];
  319. let _nzEffect_decorators;
  320. let _nzEffect_initializers = [];
  321. let _nzEffect_extraInitializers = [];
  322. let _nzEnableSwipe_decorators;
  323. let _nzEnableSwipe_initializers = [];
  324. let _nzEnableSwipe_extraInitializers = [];
  325. let _nzDots_decorators;
  326. let _nzDots_initializers = [];
  327. let _nzDots_extraInitializers = [];
  328. let _nzAutoPlay_decorators;
  329. let _nzAutoPlay_initializers = [];
  330. let _nzAutoPlay_extraInitializers = [];
  331. let _nzAutoPlaySpeed_decorators;
  332. let _nzAutoPlaySpeed_initializers = [];
  333. let _nzAutoPlaySpeed_extraInitializers = [];
  334. let _nzLoop_decorators;
  335. let _nzLoop_initializers = [];
  336. let _nzLoop_extraInitializers = [];
  337. let _set_nzDotPosition_decorators;
  338. return class NzCarouselComponent {
  339. static {
  340. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  341. _nzEffect_decorators = [WithConfig()];
  342. _nzEnableSwipe_decorators = [WithConfig()];
  343. _nzDots_decorators = [WithConfig()];
  344. _nzAutoPlay_decorators = [WithConfig()];
  345. _nzAutoPlaySpeed_decorators = [WithConfig()];
  346. _nzLoop_decorators = [WithConfig()];
  347. _set_nzDotPosition_decorators = [WithConfig()];
  348. __esDecorate(this, null, _set_nzDotPosition_decorators, { kind: "setter", name: "nzDotPosition", static: false, private: false, access: { has: obj => "nzDotPosition" in obj, set: (obj, value) => { obj.nzDotPosition = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
  349. __esDecorate(null, null, _nzEffect_decorators, { kind: "field", name: "nzEffect", static: false, private: false, access: { has: obj => "nzEffect" in obj, get: obj => obj.nzEffect, set: (obj, value) => { obj.nzEffect = value; } }, metadata: _metadata }, _nzEffect_initializers, _nzEffect_extraInitializers);
  350. __esDecorate(null, null, _nzEnableSwipe_decorators, { kind: "field", name: "nzEnableSwipe", static: false, private: false, access: { has: obj => "nzEnableSwipe" in obj, get: obj => obj.nzEnableSwipe, set: (obj, value) => { obj.nzEnableSwipe = value; } }, metadata: _metadata }, _nzEnableSwipe_initializers, _nzEnableSwipe_extraInitializers);
  351. __esDecorate(null, null, _nzDots_decorators, { kind: "field", name: "nzDots", static: false, private: false, access: { has: obj => "nzDots" in obj, get: obj => obj.nzDots, set: (obj, value) => { obj.nzDots = value; } }, metadata: _metadata }, _nzDots_initializers, _nzDots_extraInitializers);
  352. __esDecorate(null, null, _nzAutoPlay_decorators, { kind: "field", name: "nzAutoPlay", static: false, private: false, access: { has: obj => "nzAutoPlay" in obj, get: obj => obj.nzAutoPlay, set: (obj, value) => { obj.nzAutoPlay = value; } }, metadata: _metadata }, _nzAutoPlay_initializers, _nzAutoPlay_extraInitializers);
  353. __esDecorate(null, null, _nzAutoPlaySpeed_decorators, { kind: "field", name: "nzAutoPlaySpeed", static: false, private: false, access: { has: obj => "nzAutoPlaySpeed" in obj, get: obj => obj.nzAutoPlaySpeed, set: (obj, value) => { obj.nzAutoPlaySpeed = value; } }, metadata: _metadata }, _nzAutoPlaySpeed_initializers, _nzAutoPlaySpeed_extraInitializers);
  354. __esDecorate(null, null, _nzLoop_decorators, { kind: "field", name: "nzLoop", static: false, private: false, access: { has: obj => "nzLoop" in obj, get: obj => obj.nzLoop, set: (obj, value) => { obj.nzLoop = value; } }, metadata: _metadata }, _nzLoop_initializers, _nzLoop_extraInitializers);
  355. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  356. }
  357. nzConfigService = __runInitializers(this, _instanceExtraInitializers);
  358. ngZone;
  359. renderer;
  360. cdr;
  361. platform;
  362. resizeService;
  363. nzDragService;
  364. nzResizeObserver;
  365. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  366. carouselContents;
  367. slickList;
  368. slickTrack;
  369. nzDotRender;
  370. nzEffect = __runInitializers(this, _nzEffect_initializers, 'scrollx');
  371. nzEnableSwipe = (__runInitializers(this, _nzEffect_extraInitializers), __runInitializers(this, _nzEnableSwipe_initializers, true));
  372. nzDots = (__runInitializers(this, _nzEnableSwipe_extraInitializers), __runInitializers(this, _nzDots_initializers, true));
  373. nzAutoPlay = (__runInitializers(this, _nzDots_extraInitializers), __runInitializers(this, _nzAutoPlay_initializers, false));
  374. nzAutoPlaySpeed = (__runInitializers(this, _nzAutoPlay_extraInitializers), __runInitializers(this, _nzAutoPlaySpeed_initializers, 3000));
  375. nzTransitionSpeed = (__runInitializers(this, _nzAutoPlaySpeed_extraInitializers), 500);
  376. nzLoop = __runInitializers(this, _nzLoop_initializers, true);
  377. /**
  378. * this property is passed directly to an NzCarouselBaseStrategy
  379. */
  380. nzStrategyOptions = (__runInitializers(this, _nzLoop_extraInitializers), undefined);
  381. set nzDotPosition(value) {
  382. this._dotPosition = value;
  383. this.vertical = value === 'left' || value === 'right';
  384. }
  385. get nzDotPosition() {
  386. return this._dotPosition;
  387. }
  388. _dotPosition = 'bottom';
  389. nzBeforeChange = new EventEmitter();
  390. nzAfterChange = new EventEmitter();
  391. activeIndex = 0;
  392. el;
  393. slickListEl;
  394. slickTrackEl;
  395. strategy;
  396. vertical = false;
  397. transitionInProgress;
  398. dir = 'ltr';
  399. destroy$ = new Subject();
  400. gestureRect = null;
  401. pointerDelta = null;
  402. isTransiting = false;
  403. isDragging = false;
  404. directionality = inject(Directionality);
  405. customStrategies = inject(NZ_CAROUSEL_CUSTOM_STRATEGIES, { optional: true });
  406. constructor(elementRef, nzConfigService, ngZone, renderer, cdr, platform, resizeService, nzDragService, nzResizeObserver) {
  407. this.nzConfigService = nzConfigService;
  408. this.ngZone = ngZone;
  409. this.renderer = renderer;
  410. this.cdr = cdr;
  411. this.platform = platform;
  412. this.resizeService = resizeService;
  413. this.nzDragService = nzDragService;
  414. this.nzResizeObserver = nzResizeObserver;
  415. this.nzDotPosition = 'bottom';
  416. this.el = elementRef.nativeElement;
  417. }
  418. ngOnInit() {
  419. this.slickListEl = this.slickList.nativeElement;
  420. this.slickTrackEl = this.slickTrack.nativeElement;
  421. this.dir = this.directionality.value;
  422. this.directionality.change.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  423. this.dir = direction;
  424. this.markContentActive(this.activeIndex);
  425. this.cdr.detectChanges();
  426. });
  427. fromEventOutsideAngular(this.slickListEl, 'keydown')
  428. .pipe(takeUntil(this.destroy$))
  429. .subscribe(event => {
  430. const { keyCode } = event;
  431. if (keyCode !== LEFT_ARROW && keyCode !== RIGHT_ARROW) {
  432. return;
  433. }
  434. event.preventDefault();
  435. this.ngZone.run(() => {
  436. if (keyCode === LEFT_ARROW) {
  437. this.pre();
  438. }
  439. else {
  440. this.next();
  441. }
  442. this.cdr.markForCheck();
  443. });
  444. });
  445. this.nzResizeObserver
  446. .observe(this.el)
  447. .pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this.destroy$))
  448. .subscribe(() => {
  449. this.layout();
  450. });
  451. }
  452. ngAfterContentInit() {
  453. this.markContentActive(0);
  454. }
  455. ngAfterViewInit() {
  456. this.carouselContents.changes.subscribe(() => {
  457. this.markContentActive(0);
  458. this.layout();
  459. });
  460. this.resizeService
  461. .subscribe()
  462. .pipe(takeUntil(this.destroy$))
  463. .subscribe(() => {
  464. this.layout();
  465. });
  466. this.switchStrategy();
  467. this.markContentActive(0);
  468. this.layout();
  469. // If embedded in an entry component, it may do initial render at an inappropriate time.
  470. // ngZone.onStable won't do this trick
  471. // TODO: need to change this.
  472. Promise.resolve().then(() => {
  473. this.layout();
  474. });
  475. }
  476. ngOnChanges(changes) {
  477. const { nzEffect, nzDotPosition } = changes;
  478. if (nzEffect && !nzEffect.isFirstChange()) {
  479. this.switchStrategy();
  480. this.markContentActive(0);
  481. this.layout();
  482. }
  483. if (nzDotPosition && !nzDotPosition.isFirstChange()) {
  484. this.switchStrategy();
  485. this.markContentActive(0);
  486. this.layout();
  487. }
  488. if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) {
  489. this.clearScheduledTransition();
  490. }
  491. else {
  492. this.scheduleNextTransition();
  493. }
  494. }
  495. ngOnDestroy() {
  496. this.clearScheduledTransition();
  497. if (this.strategy) {
  498. this.strategy.dispose();
  499. }
  500. this.destroy$.next();
  501. this.destroy$.complete();
  502. }
  503. next() {
  504. this.goTo(this.activeIndex + 1);
  505. }
  506. pre() {
  507. this.goTo(this.activeIndex - 1);
  508. }
  509. goTo(index) {
  510. if (this.carouselContents &&
  511. this.carouselContents.length &&
  512. !this.isTransiting &&
  513. (this.nzLoop || (index >= 0 && index < this.carouselContents.length))) {
  514. const length = this.carouselContents.length;
  515. const from = this.activeIndex;
  516. const to = (index + length) % length;
  517. this.isTransiting = true;
  518. this.nzBeforeChange.emit({ from, to });
  519. this.strategy.switch(this.activeIndex, index).subscribe(() => {
  520. this.scheduleNextTransition();
  521. this.nzAfterChange.emit(to);
  522. this.isTransiting = false;
  523. });
  524. this.markContentActive(to);
  525. this.cdr.markForCheck();
  526. }
  527. }
  528. switchStrategy() {
  529. if (this.strategy) {
  530. this.strategy.dispose();
  531. }
  532. // Load custom strategies first.
  533. const customStrategy = this.customStrategies ? this.customStrategies.find(s => s.name === this.nzEffect) : null;
  534. if (customStrategy) {
  535. this.strategy = new customStrategy.strategy(this, this.cdr, this.renderer, this.platform);
  536. return;
  537. }
  538. this.strategy =
  539. this.nzEffect === 'scrollx'
  540. ? new NzCarouselTransformStrategy(this, this.cdr, this.renderer, this.platform)
  541. : new NzCarouselOpacityStrategy(this, this.cdr, this.renderer, this.platform);
  542. }
  543. scheduleNextTransition() {
  544. this.clearScheduledTransition();
  545. if (this.nzAutoPlay && this.nzAutoPlaySpeed > 0 && this.platform.isBrowser) {
  546. this.transitionInProgress = setTimeout(() => {
  547. this.goTo(this.activeIndex + 1);
  548. }, this.nzAutoPlaySpeed);
  549. }
  550. }
  551. clearScheduledTransition() {
  552. if (this.transitionInProgress) {
  553. clearTimeout(this.transitionInProgress);
  554. this.transitionInProgress = undefined;
  555. }
  556. }
  557. markContentActive(index) {
  558. this.activeIndex = index;
  559. if (this.carouselContents) {
  560. this.carouselContents.forEach((slide, i) => {
  561. slide.isActive = index === i;
  562. });
  563. }
  564. this.cdr.markForCheck();
  565. }
  566. /**
  567. * Drag carousel.
  568. */
  569. pointerDown = (event) => {
  570. if (!this.isDragging && !this.isTransiting && this.nzEnableSwipe) {
  571. this.clearScheduledTransition();
  572. this.gestureRect = this.slickListEl.getBoundingClientRect();
  573. this.nzDragService.requestDraggingSequence(event).subscribe(delta => {
  574. this.pointerDelta = delta;
  575. this.isDragging = true;
  576. this.strategy?.dragging(this.pointerDelta);
  577. }, () => { }, () => {
  578. if (this.nzEnableSwipe && this.isDragging) {
  579. const xDelta = this.pointerDelta ? this.pointerDelta.x : 0;
  580. // Switch to another slide if delta is bigger than third of the width.
  581. if (Math.abs(xDelta) > this.gestureRect.width / 3 &&
  582. (this.nzLoop ||
  583. (xDelta <= 0 && this.activeIndex + 1 < this.carouselContents.length) ||
  584. (xDelta > 0 && this.activeIndex > 0))) {
  585. this.goTo(xDelta > 0 ? this.activeIndex - 1 : this.activeIndex + 1);
  586. }
  587. else {
  588. this.goTo(this.activeIndex);
  589. }
  590. this.gestureRect = null;
  591. this.pointerDelta = null;
  592. }
  593. this.isDragging = false;
  594. });
  595. }
  596. };
  597. layout() {
  598. if (this.strategy) {
  599. this.strategy.withCarouselContents(this.carouselContents);
  600. }
  601. }
  602. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i1.NzConfigService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.Platform }, { token: i3.NzResizeService }, { token: i3.NzDragService }, { token: i4.NzResizeObserver }], target: i0.ɵɵFactoryTarget.Component });
  603. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzCarouselComponent, isStandalone: true, selector: "nz-carousel", inputs: { nzDotRender: "nzDotRender", nzEffect: "nzEffect", nzEnableSwipe: ["nzEnableSwipe", "nzEnableSwipe", booleanAttribute], nzDots: ["nzDots", "nzDots", booleanAttribute], nzAutoPlay: ["nzAutoPlay", "nzAutoPlay", booleanAttribute], nzAutoPlaySpeed: ["nzAutoPlaySpeed", "nzAutoPlaySpeed", numberAttribute], nzTransitionSpeed: ["nzTransitionSpeed", "nzTransitionSpeed", numberAttribute], nzLoop: "nzLoop", nzStrategyOptions: "nzStrategyOptions", nzDotPosition: "nzDotPosition" }, outputs: { nzBeforeChange: "nzBeforeChange", nzAfterChange: "nzAfterChange" }, host: { properties: { "class.ant-carousel-vertical": "vertical", "class.ant-carousel-rtl": "dir === 'rtl'" }, classAttribute: "ant-carousel" }, queries: [{ propertyName: "carouselContents", predicate: NzCarouselContentDirective }], viewQueries: [{ propertyName: "slickList", first: true, predicate: ["slickList"], descendants: true, static: true }, { propertyName: "slickTrack", first: true, predicate: ["slickTrack"], descendants: true, static: true }], exportAs: ["nzCarousel"], usesOnChanges: true, ngImport: i0, template: `
  604. <div
  605. class="slick-initialized slick-slider"
  606. [class.slick-vertical]="nzDotPosition === 'left' || nzDotPosition === 'right'"
  607. [dir]="'ltr'"
  608. >
  609. <div
  610. #slickList
  611. class="slick-list"
  612. tabindex="-1"
  613. (mousedown)="pointerDown($event)"
  614. (touchstart)="pointerDown($event)"
  615. >
  616. <!-- Render carousel items. -->
  617. <div class="slick-track" #slickTrack>
  618. <ng-content></ng-content>
  619. </div>
  620. </div>
  621. <!-- Render dots. -->
  622. @if (nzDots) {
  623. <ul
  624. class="slick-dots"
  625. [class.slick-dots-top]="nzDotPosition === 'top'"
  626. [class.slick-dots-bottom]="nzDotPosition === 'bottom'"
  627. [class.slick-dots-left]="nzDotPosition === 'left'"
  628. [class.slick-dots-right]="nzDotPosition === 'right'"
  629. >
  630. @for (content of carouselContents; track content) {
  631. <li [class.slick-active]="$index === activeIndex" (click)="goTo($index)">
  632. <ng-template
  633. [ngTemplateOutlet]="nzDotRender || renderDotTemplate"
  634. [ngTemplateOutletContext]="{ $implicit: $index }"
  635. ></ng-template>
  636. </li>
  637. }
  638. </ul>
  639. }
  640. </div>
  641. <ng-template #renderDotTemplate let-index>
  642. <button>{{ index + 1 }}</button>
  643. </ng-template>
  644. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  645. };
  646. })();
  647. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselComponent, decorators: [{
  648. type: Component,
  649. args: [{
  650. changeDetection: ChangeDetectionStrategy.OnPush,
  651. encapsulation: ViewEncapsulation.None,
  652. selector: 'nz-carousel',
  653. exportAs: 'nzCarousel',
  654. preserveWhitespaces: false,
  655. template: `
  656. <div
  657. class="slick-initialized slick-slider"
  658. [class.slick-vertical]="nzDotPosition === 'left' || nzDotPosition === 'right'"
  659. [dir]="'ltr'"
  660. >
  661. <div
  662. #slickList
  663. class="slick-list"
  664. tabindex="-1"
  665. (mousedown)="pointerDown($event)"
  666. (touchstart)="pointerDown($event)"
  667. >
  668. <!-- Render carousel items. -->
  669. <div class="slick-track" #slickTrack>
  670. <ng-content></ng-content>
  671. </div>
  672. </div>
  673. <!-- Render dots. -->
  674. @if (nzDots) {
  675. <ul
  676. class="slick-dots"
  677. [class.slick-dots-top]="nzDotPosition === 'top'"
  678. [class.slick-dots-bottom]="nzDotPosition === 'bottom'"
  679. [class.slick-dots-left]="nzDotPosition === 'left'"
  680. [class.slick-dots-right]="nzDotPosition === 'right'"
  681. >
  682. @for (content of carouselContents; track content) {
  683. <li [class.slick-active]="$index === activeIndex" (click)="goTo($index)">
  684. <ng-template
  685. [ngTemplateOutlet]="nzDotRender || renderDotTemplate"
  686. [ngTemplateOutletContext]="{ $implicit: $index }"
  687. ></ng-template>
  688. </li>
  689. }
  690. </ul>
  691. }
  692. </div>
  693. <ng-template #renderDotTemplate let-index>
  694. <button>{{ index + 1 }}</button>
  695. </ng-template>
  696. `,
  697. host: {
  698. class: 'ant-carousel',
  699. '[class.ant-carousel-vertical]': 'vertical',
  700. '[class.ant-carousel-rtl]': `dir === 'rtl'`
  701. },
  702. imports: [NgTemplateOutlet]
  703. }]
  704. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NzConfigService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i2.Platform }, { type: i3.NzResizeService }, { type: i3.NzDragService }, { type: i4.NzResizeObserver }], propDecorators: { carouselContents: [{
  705. type: ContentChildren,
  706. args: [NzCarouselContentDirective]
  707. }], slickList: [{
  708. type: ViewChild,
  709. args: ['slickList', { static: true }]
  710. }], slickTrack: [{
  711. type: ViewChild,
  712. args: ['slickTrack', { static: true }]
  713. }], nzDotRender: [{
  714. type: Input
  715. }], nzEffect: [{
  716. type: Input
  717. }], nzEnableSwipe: [{
  718. type: Input,
  719. args: [{ transform: booleanAttribute }]
  720. }], nzDots: [{
  721. type: Input,
  722. args: [{ transform: booleanAttribute }]
  723. }], nzAutoPlay: [{
  724. type: Input,
  725. args: [{ transform: booleanAttribute }]
  726. }], nzAutoPlaySpeed: [{
  727. type: Input,
  728. args: [{ transform: numberAttribute }]
  729. }], nzTransitionSpeed: [{
  730. type: Input,
  731. args: [{ transform: numberAttribute }]
  732. }], nzLoop: [{
  733. type: Input
  734. }], nzStrategyOptions: [{
  735. type: Input
  736. }], nzDotPosition: [{
  737. type: Input
  738. }], nzBeforeChange: [{
  739. type: Output
  740. }], nzAfterChange: [{
  741. type: Output
  742. }] } });
  743. /**
  744. * Use of this source code is governed by an MIT-style license that can be
  745. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  746. */
  747. class NzCarouselModule {
  748. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  749. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselModule, imports: [NzCarouselComponent, NzCarouselContentDirective], exports: [NzCarouselComponent, NzCarouselContentDirective] });
  750. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselModule });
  751. }
  752. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCarouselModule, decorators: [{
  753. type: NgModule,
  754. args: [{
  755. imports: [NzCarouselComponent, NzCarouselContentDirective],
  756. exports: [NzCarouselComponent, NzCarouselContentDirective]
  757. }]
  758. }] });
  759. /**
  760. * Use of this source code is governed by an MIT-style license that can be
  761. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  762. */
  763. /**
  764. * this strategy is very much like NzCarouselTransformStrategy, but it doesn't loop between the first and the last one
  765. */
  766. class NzCarouselTransformNoLoopStrategy extends NzCarouselBaseStrategy {
  767. isTransitioning = false;
  768. get vertical() {
  769. return this.carouselComponent.vertical;
  770. }
  771. constructor(carouselComponent, cdr, renderer, platform, options) {
  772. super(carouselComponent, cdr, renderer, platform, options);
  773. }
  774. dispose() {
  775. this.renderer.setStyle(this.slickTrackEl, 'transform', null);
  776. super.dispose();
  777. }
  778. withCarouselContents(contents) {
  779. super.withCarouselContents(contents);
  780. const carousel = this.carouselComponent;
  781. const activeIndex = carousel.activeIndex;
  782. if (this.platform.isBrowser && this.contents.length) {
  783. this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
  784. if (this.platform.isBrowser && this.contents.length) {
  785. this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
  786. if (this.vertical) {
  787. this.renderer.setStyle(this.slickTrackEl, 'width', `${this.unitWidth}px`);
  788. this.renderer.setStyle(this.slickTrackEl, 'height', `${this.length * this.unitHeight}px`);
  789. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-activeIndex * this.unitHeight}px, 0)`);
  790. }
  791. else {
  792. this.renderer.setStyle(this.slickTrackEl, 'height', `${this.unitHeight}px`);
  793. this.renderer.setStyle(this.slickTrackEl, 'width', `${this.length * this.unitWidth}px`);
  794. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth}px, 0, 0)`);
  795. }
  796. this.contents.forEach((content) => {
  797. this.renderer.setStyle(content.el, 'position', 'relative');
  798. this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`);
  799. this.renderer.setStyle(content.el, 'height', `${this.unitHeight}px`);
  800. });
  801. }
  802. }
  803. }
  804. switch(_f, _t) {
  805. const to = (_t + this.length) % this.length;
  806. const transitionSpeed = this.carouselComponent.nzTransitionSpeed;
  807. const complete$ = new Subject();
  808. this.renderer.setStyle(this.slickTrackEl, 'transition', `transform ${transitionSpeed}ms ease`);
  809. if (this.vertical) {
  810. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-to * this.unitHeight}px, 0)`);
  811. }
  812. else {
  813. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-to * this.unitWidth}px, 0, 0)`);
  814. }
  815. this.isTransitioning = true;
  816. setTimeout(() => {
  817. // this strategy don't need to do a following adjust
  818. this.isTransitioning = false;
  819. complete$.next();
  820. complete$.complete();
  821. }, transitionSpeed);
  822. return complete$.asObservable();
  823. }
  824. dragging(vector) {
  825. if (this.isTransitioning) {
  826. return;
  827. }
  828. const activeIndex = this.carouselComponent.activeIndex;
  829. if (this.vertical) {
  830. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(0, ${-activeIndex * this.unitHeight + vector.x}px, 0)`);
  831. }
  832. else {
  833. this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth + vector.x}px, 0, 0)`);
  834. }
  835. }
  836. }
  837. /**
  838. * Use of this source code is governed by an MIT-style license that can be
  839. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  840. */
  841. class NzCarouselFlipStrategy extends NzCarouselBaseStrategy {
  842. withCarouselContents(contents) {
  843. super.withCarouselContents(contents);
  844. if (this.contents) {
  845. this.renderer.setStyle(this.slickListEl, 'width', `${this.unitWidth}px`);
  846. this.renderer.setStyle(this.slickTrackEl, 'width', `${this.length * this.unitWidth}px`);
  847. this.contents.forEach((content, i) => {
  848. const cur = this.carouselComponent.activeIndex === i;
  849. this.renderer.setStyle(content.el, 'transform', cur ? 'rotateY(0deg)' : 'rotateY(180deg)');
  850. this.renderer.setStyle(content.el, 'position', 'relative');
  851. this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`);
  852. this.renderer.setStyle(content.el, 'left', `${-this.unitWidth * i}px`);
  853. this.renderer.setStyle(content.el, 'transform-style', 'preserve-3d');
  854. this.renderer.setStyle(content.el, 'backface-visibility', 'hidden');
  855. });
  856. const { carouselComponent } = this;
  857. carouselComponent.ngZone.runOutsideAngular(() => {
  858. timer(carouselComponent.nzTransitionSpeed).subscribe(() => {
  859. this.contents.forEach(c => this.renderer.setStyle(c.el, 'transition', ['transform 500ms ease 0s']));
  860. });
  861. });
  862. }
  863. }
  864. switch(rawF, rawT) {
  865. const { from, to } = this.getFromToInBoundary(rawF, rawT);
  866. const complete$ = new Subject();
  867. const speed = this.carouselComponent.nzTransitionSpeed;
  868. timer(speed).subscribe(() => {
  869. complete$.next();
  870. complete$.complete();
  871. });
  872. if (rawF === rawT) {
  873. return complete$;
  874. }
  875. this.contents.forEach((content, i) => {
  876. if (i === from) {
  877. this.renderer.setStyle(content.el, 'transform', 'rotateY(180deg)');
  878. }
  879. else if (i === to) {
  880. this.renderer.setStyle(content.el, 'transform', 'rotateY(0deg)');
  881. }
  882. });
  883. return complete$.asObservable();
  884. }
  885. dispose() {
  886. this.contents.forEach((content) => {
  887. this.renderer.setStyle(content.el, 'transition', null);
  888. this.renderer.setStyle(content.el, 'transform', null);
  889. this.renderer.setStyle(content.el, 'width', null);
  890. this.renderer.setStyle(content.el, 'left', null);
  891. this.renderer.setStyle(content.el, 'transform-style', null);
  892. this.renderer.setStyle(content.el, 'backface-visibility', null);
  893. });
  894. super.dispose();
  895. }
  896. }
  897. /**
  898. * Use of this source code is governed by an MIT-style license that can be
  899. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  900. */
  901. /**
  902. * Generated bundle index. Do not edit.
  903. */
  904. export { NZ_CAROUSEL_CUSTOM_STRATEGIES, NzCarouselBaseStrategy, NzCarouselComponent, NzCarouselContentDirective, NzCarouselFlipStrategy, NzCarouselModule, NzCarouselOpacityStrategy, NzCarouselTransformNoLoopStrategy, NzCarouselTransformStrategy };
  905. //# sourceMappingURL=ng-zorro-antd-carousel.mjs.map