ngx-bootstrap-carousel.js 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302
  1. import { __spread } from 'tslib';
  2. import { Injectable, Component, NgZone, Input, Output, EventEmitter, HostBinding, NgModule } from '@angular/core';
  3. import { isBs3, LinkedList } from 'ngx-bootstrap/utils';
  4. import { CommonModule } from '@angular/common';
  5. /**
  6. * @fileoverview added by tsickle
  7. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  8. */
  9. var CarouselConfig = /** @class */ (function () {
  10. function CarouselConfig() {
  11. /* Default interval of auto changing of slides */
  12. this.interval = 5000;
  13. /* Is loop of auto changing of slides can be paused */
  14. this.noPause = false;
  15. /* Is slides can wrap from the last to the first slide */
  16. this.noWrap = false;
  17. /* Show carousel-indicators */
  18. this.showIndicators = true;
  19. /* Slides can be paused on focus */
  20. this.pauseOnFocus = false;
  21. /* If `true` - carousel indicators indicate slides chunks works ONLY if singleSlideOffset = FALSE */
  22. this.indicatorsByChunk = false;
  23. /* If value more then 1 — carousel works in multilist mode */
  24. this.itemsPerSlide = 1;
  25. /* If `true` — carousel shifts by one element. By default carousel shifts by number
  26. of visible elements (itemsPerSlide field) */
  27. this.singleSlideOffset = false;
  28. }
  29. CarouselConfig.decorators = [
  30. { type: Injectable }
  31. ];
  32. return CarouselConfig;
  33. }());
  34. /**
  35. * @fileoverview added by tsickle
  36. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  37. */
  38. /**
  39. * Returns the index of the last element in the array where predicate is true, and -1
  40. * otherwise.
  41. * @template T
  42. * @param {?} array The source array to search in
  43. * @param {?} predicate find calls predicate once for each element of the array, in descending
  44. * order, until it finds one where predicate returns true. If such an element is found,
  45. * findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
  46. * @return {?}
  47. */
  48. function findLastIndex(array, predicate) {
  49. /** @type {?} */
  50. var l = array.length;
  51. while (l--) {
  52. if (predicate(array[l], l, array)) {
  53. return l;
  54. }
  55. }
  56. return -1;
  57. }
  58. /**
  59. * @template T
  60. * @param {?} array
  61. * @param {?} size
  62. * @return {?}
  63. */
  64. function chunkByNumber(array, size) {
  65. /** @type {?} */
  66. var out = [];
  67. /** @type {?} */
  68. var n = Math.ceil((array.length) / size);
  69. /** @type {?} */
  70. var i = 0;
  71. while (i < n) {
  72. /** @type {?} */
  73. var chunk = array.splice(0, (i === n - 1) && size < array.length ? array.length : size);
  74. out.push(chunk);
  75. i++;
  76. }
  77. return out;
  78. }
  79. /**
  80. * @fileoverview added by tsickle
  81. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  82. */
  83. /** @enum {number} */
  84. var Direction = {
  85. UNKNOWN: 0,
  86. NEXT: 1,
  87. PREV: 2,
  88. };
  89. Direction[Direction.UNKNOWN] = 'UNKNOWN';
  90. Direction[Direction.NEXT] = 'NEXT';
  91. Direction[Direction.PREV] = 'PREV';
  92. /**
  93. * Base element to create carousel
  94. */
  95. var CarouselComponent = /** @class */ (function () {
  96. function CarouselComponent(config, ngZone) {
  97. this.ngZone = ngZone;
  98. /* If `true` - carousel indicators indicate slides chunks
  99. works ONLY if singleSlideOffset = FALSE */
  100. this.indicatorsByChunk = false;
  101. /* If value more then 1 — carousel works in multilist mode */
  102. this.itemsPerSlide = 1;
  103. /* If `true` — carousel shifts by one element. By default carousel shifts by number
  104. of visible elements (itemsPerSlide field) */
  105. this.singleSlideOffset = false;
  106. /**
  107. * Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property
  108. */
  109. this.activeSlideChange = new EventEmitter(false);
  110. /**
  111. * Will be emitted when active slides has been changed in multilist mode
  112. */
  113. this.slideRangeChange = new EventEmitter();
  114. /* Index to start display slides from it */
  115. this.startFromIndex = 0;
  116. this._slides = new LinkedList();
  117. this._currentVisibleSlidesIndex = 0;
  118. this.destroyed = false;
  119. this.getActive = (/**
  120. * @param {?} slide
  121. * @return {?}
  122. */
  123. function (slide) { return slide.active; });
  124. this.makeSlidesConsistent = (/**
  125. * @param {?} slides
  126. * @return {?}
  127. */
  128. function (slides) {
  129. slides.forEach((/**
  130. * @param {?} slide
  131. * @param {?} index
  132. * @return {?}
  133. */
  134. function (slide, index) { return slide.item.order = index; }));
  135. });
  136. Object.assign(this, config);
  137. }
  138. Object.defineProperty(CarouselComponent.prototype, "activeSlide", {
  139. get: /**
  140. * @return {?}
  141. */
  142. function () {
  143. return this._currentActiveSlide;
  144. },
  145. /** Index of currently displayed slide(started for 0) */
  146. set: /**
  147. * Index of currently displayed slide(started for 0)
  148. * @param {?} index
  149. * @return {?}
  150. */
  151. function (index) {
  152. if (this.multilist) {
  153. return;
  154. }
  155. if (this._slides.length && index !== this._currentActiveSlide) {
  156. this._select(index);
  157. }
  158. },
  159. enumerable: true,
  160. configurable: true
  161. });
  162. Object.defineProperty(CarouselComponent.prototype, "interval", {
  163. /**
  164. * Delay of item cycling in milliseconds. If false, carousel won't cycle
  165. * automatically.
  166. */
  167. get: /**
  168. * Delay of item cycling in milliseconds. If false, carousel won't cycle
  169. * automatically.
  170. * @return {?}
  171. */
  172. function () {
  173. return this._interval;
  174. },
  175. set: /**
  176. * @param {?} value
  177. * @return {?}
  178. */
  179. function (value) {
  180. this._interval = value;
  181. this.restartTimer();
  182. },
  183. enumerable: true,
  184. configurable: true
  185. });
  186. Object.defineProperty(CarouselComponent.prototype, "slides", {
  187. get: /**
  188. * @return {?}
  189. */
  190. function () {
  191. return this._slides.toArray();
  192. },
  193. enumerable: true,
  194. configurable: true
  195. });
  196. Object.defineProperty(CarouselComponent.prototype, "isBs4", {
  197. get: /**
  198. * @return {?}
  199. */
  200. function () {
  201. return !isBs3();
  202. },
  203. enumerable: true,
  204. configurable: true
  205. });
  206. /**
  207. * @return {?}
  208. */
  209. CarouselComponent.prototype.ngAfterViewInit = /**
  210. * @return {?}
  211. */
  212. function () {
  213. var _this = this;
  214. setTimeout((/**
  215. * @return {?}
  216. */
  217. function () {
  218. if (_this.singleSlideOffset) {
  219. _this.indicatorsByChunk = false;
  220. }
  221. if (_this.multilist) {
  222. _this._chunkedSlides = chunkByNumber(_this.mapSlidesAndIndexes(), _this.itemsPerSlide);
  223. _this.selectInitialSlides();
  224. }
  225. }), 0);
  226. };
  227. /**
  228. * @return {?}
  229. */
  230. CarouselComponent.prototype.ngOnDestroy = /**
  231. * @return {?}
  232. */
  233. function () {
  234. this.destroyed = true;
  235. };
  236. /**
  237. * Adds new slide. If this slide is first in collection - set it as active
  238. * and starts auto changing
  239. * @param slide
  240. */
  241. /**
  242. * Adds new slide. If this slide is first in collection - set it as active
  243. * and starts auto changing
  244. * @param {?} slide
  245. * @return {?}
  246. */
  247. CarouselComponent.prototype.addSlide = /**
  248. * Adds new slide. If this slide is first in collection - set it as active
  249. * and starts auto changing
  250. * @param {?} slide
  251. * @return {?}
  252. */
  253. function (slide) {
  254. this._slides.add(slide);
  255. if (this.multilist && this._slides.length <= this.itemsPerSlide) {
  256. slide.active = true;
  257. }
  258. if (!this.multilist && this._slides.length === 1) {
  259. this._currentActiveSlide = undefined;
  260. this.activeSlide = 0;
  261. this.play();
  262. }
  263. if (this.multilist && this._slides.length > this.itemsPerSlide) {
  264. this.play();
  265. }
  266. };
  267. /**
  268. * Removes specified slide. If this slide is active - will roll to another
  269. * slide
  270. * @param slide
  271. */
  272. /**
  273. * Removes specified slide. If this slide is active - will roll to another
  274. * slide
  275. * @param {?} slide
  276. * @return {?}
  277. */
  278. CarouselComponent.prototype.removeSlide = /**
  279. * Removes specified slide. If this slide is active - will roll to another
  280. * slide
  281. * @param {?} slide
  282. * @return {?}
  283. */
  284. function (slide) {
  285. var _this = this;
  286. /** @type {?} */
  287. var remIndex = this._slides.indexOf(slide);
  288. if (this._currentActiveSlide === remIndex) {
  289. // removing of active slide
  290. /** @type {?} */
  291. var nextSlideIndex_1 = void 0;
  292. if (this._slides.length > 1) {
  293. // if this slide last - will roll to first slide, if noWrap flag is
  294. // FALSE or to previous, if noWrap is TRUE in case, if this slide in
  295. // middle of collection, index of next slide is same to removed
  296. nextSlideIndex_1 = !this.isLast(remIndex)
  297. ? remIndex
  298. : this.noWrap ? remIndex - 1 : 0;
  299. }
  300. this._slides.remove(remIndex);
  301. // prevents exception with changing some value after checking
  302. setTimeout((/**
  303. * @return {?}
  304. */
  305. function () {
  306. _this._select(nextSlideIndex_1);
  307. }), 0);
  308. }
  309. else {
  310. this._slides.remove(remIndex);
  311. /** @type {?} */
  312. var currentSlideIndex_1 = this.getCurrentSlideIndex();
  313. setTimeout((/**
  314. * @return {?}
  315. */
  316. function () {
  317. // after removing, need to actualize index of current active slide
  318. _this._currentActiveSlide = currentSlideIndex_1;
  319. _this.activeSlideChange.emit(_this._currentActiveSlide);
  320. }), 0);
  321. }
  322. };
  323. /**
  324. * @param {?=} force
  325. * @return {?}
  326. */
  327. CarouselComponent.prototype.nextSlideFromInterval = /**
  328. * @param {?=} force
  329. * @return {?}
  330. */
  331. function (force) {
  332. if (force === void 0) { force = false; }
  333. this.move(Direction.NEXT, force);
  334. };
  335. /**
  336. * Rolling to next slide
  337. * @param force: {boolean} if true - will ignore noWrap flag
  338. */
  339. /**
  340. * Rolling to next slide
  341. * @param {?=} force
  342. * @return {?}
  343. */
  344. CarouselComponent.prototype.nextSlide = /**
  345. * Rolling to next slide
  346. * @param {?=} force
  347. * @return {?}
  348. */
  349. function (force) {
  350. if (force === void 0) { force = false; }
  351. if (this.isPlaying) {
  352. this.restartTimer();
  353. }
  354. this.move(Direction.NEXT, force);
  355. };
  356. /**
  357. * Rolling to previous slide
  358. * @param force: {boolean} if true - will ignore noWrap flag
  359. */
  360. /**
  361. * Rolling to previous slide
  362. * @param {?=} force
  363. * @return {?}
  364. */
  365. CarouselComponent.prototype.previousSlide = /**
  366. * Rolling to previous slide
  367. * @param {?=} force
  368. * @return {?}
  369. */
  370. function (force) {
  371. if (force === void 0) { force = false; }
  372. if (this.isPlaying) {
  373. this.restartTimer();
  374. }
  375. this.move(Direction.PREV, force);
  376. };
  377. /**
  378. * @return {?}
  379. */
  380. CarouselComponent.prototype.getFirstVisibleIndex = /**
  381. * @return {?}
  382. */
  383. function () {
  384. return this.slides.findIndex(this.getActive);
  385. };
  386. /**
  387. * @return {?}
  388. */
  389. CarouselComponent.prototype.getLastVisibleIndex = /**
  390. * @return {?}
  391. */
  392. function () {
  393. return findLastIndex(this.slides, this.getActive);
  394. };
  395. /**
  396. * @param {?} direction
  397. * @param {?=} force
  398. * @return {?}
  399. */
  400. CarouselComponent.prototype.move = /**
  401. * @param {?} direction
  402. * @param {?=} force
  403. * @return {?}
  404. */
  405. function (direction, force) {
  406. if (force === void 0) { force = false; }
  407. /** @type {?} */
  408. var firstVisibleIndex = this.getFirstVisibleIndex();
  409. /** @type {?} */
  410. var lastVisibleIndex = this.getLastVisibleIndex();
  411. if (this.noWrap) {
  412. if (direction === Direction.NEXT &&
  413. this.isLast(lastVisibleIndex) ||
  414. direction === Direction.PREV &&
  415. firstVisibleIndex === 0) {
  416. return;
  417. }
  418. }
  419. if (!this.multilist) {
  420. this.activeSlide = this.findNextSlideIndex(direction, force);
  421. }
  422. else {
  423. this.moveMultilist(direction);
  424. }
  425. };
  426. /**
  427. * Swith slides by enter, space and arrows keys
  428. * @internal
  429. */
  430. /**
  431. * Swith slides by enter, space and arrows keys
  432. * \@internal
  433. * @param {?} event
  434. * @return {?}
  435. */
  436. CarouselComponent.prototype.keydownPress = /**
  437. * Swith slides by enter, space and arrows keys
  438. * \@internal
  439. * @param {?} event
  440. * @return {?}
  441. */
  442. function (event) {
  443. // tslint:disable-next-line:deprecation
  444. if (event.keyCode === 13 || event.key === 'Enter' || event.keyCode === 32 || event.key === 'Space') {
  445. this.nextSlide();
  446. event.preventDefault();
  447. return;
  448. }
  449. // tslint:disable-next-line:deprecation
  450. if (event.keyCode === 37 || event.key === 'LeftArrow') {
  451. this.previousSlide();
  452. return;
  453. }
  454. // tslint:disable-next-line:deprecation
  455. if (event.keyCode === 39 || event.key === 'RightArrow') {
  456. this.nextSlide();
  457. return;
  458. }
  459. };
  460. /**
  461. * Play on mouse leave
  462. * @internal
  463. */
  464. /**
  465. * Play on mouse leave
  466. * \@internal
  467. * @return {?}
  468. */
  469. CarouselComponent.prototype.onMouseLeave = /**
  470. * Play on mouse leave
  471. * \@internal
  472. * @return {?}
  473. */
  474. function () {
  475. if (!this.pauseOnFocus) {
  476. this.play();
  477. }
  478. };
  479. /**
  480. * Play on mouse up
  481. * @internal
  482. */
  483. /**
  484. * Play on mouse up
  485. * \@internal
  486. * @return {?}
  487. */
  488. CarouselComponent.prototype.onMouseUp = /**
  489. * Play on mouse up
  490. * \@internal
  491. * @return {?}
  492. */
  493. function () {
  494. if (!this.pauseOnFocus) {
  495. this.play();
  496. }
  497. };
  498. /**
  499. * When slides on focus autoplay is stopped(optional)
  500. * @internal
  501. */
  502. /**
  503. * When slides on focus autoplay is stopped(optional)
  504. * \@internal
  505. * @return {?}
  506. */
  507. CarouselComponent.prototype.pauseFocusIn = /**
  508. * When slides on focus autoplay is stopped(optional)
  509. * \@internal
  510. * @return {?}
  511. */
  512. function () {
  513. if (this.pauseOnFocus) {
  514. this.isPlaying = false;
  515. this.resetTimer();
  516. }
  517. };
  518. /**
  519. * When slides out of focus autoplay is started
  520. * @internal
  521. */
  522. /**
  523. * When slides out of focus autoplay is started
  524. * \@internal
  525. * @return {?}
  526. */
  527. CarouselComponent.prototype.pauseFocusOut = /**
  528. * When slides out of focus autoplay is started
  529. * \@internal
  530. * @return {?}
  531. */
  532. function () {
  533. this.play();
  534. };
  535. /**
  536. * Rolling to specified slide
  537. * @param index: {number} index of slide, which must be shown
  538. */
  539. /**
  540. * Rolling to specified slide
  541. * @param {?} index
  542. * @return {?}
  543. */
  544. CarouselComponent.prototype.selectSlide = /**
  545. * Rolling to specified slide
  546. * @param {?} index
  547. * @return {?}
  548. */
  549. function (index) {
  550. if (this.isPlaying) {
  551. this.restartTimer();
  552. }
  553. if (!this.multilist) {
  554. this.activeSlide = this.indicatorsByChunk ? index * this.itemsPerSlide : index;
  555. }
  556. else {
  557. this.selectSlideRange(this.indicatorsByChunk ? index * this.itemsPerSlide : index);
  558. }
  559. };
  560. /**
  561. * Starts a auto changing of slides
  562. */
  563. /**
  564. * Starts a auto changing of slides
  565. * @return {?}
  566. */
  567. CarouselComponent.prototype.play = /**
  568. * Starts a auto changing of slides
  569. * @return {?}
  570. */
  571. function () {
  572. if (!this.isPlaying) {
  573. this.isPlaying = true;
  574. this.restartTimer();
  575. }
  576. };
  577. /**
  578. * Stops a auto changing of slides
  579. */
  580. /**
  581. * Stops a auto changing of slides
  582. * @return {?}
  583. */
  584. CarouselComponent.prototype.pause = /**
  585. * Stops a auto changing of slides
  586. * @return {?}
  587. */
  588. function () {
  589. if (!this.noPause) {
  590. this.isPlaying = false;
  591. this.resetTimer();
  592. }
  593. };
  594. /**
  595. * Finds and returns index of currently displayed slide
  596. */
  597. /**
  598. * Finds and returns index of currently displayed slide
  599. * @return {?}
  600. */
  601. CarouselComponent.prototype.getCurrentSlideIndex = /**
  602. * Finds and returns index of currently displayed slide
  603. * @return {?}
  604. */
  605. function () {
  606. return this._slides.findIndex(this.getActive);
  607. };
  608. /**
  609. * Defines, whether the specified index is last in collection
  610. * @param index
  611. */
  612. /**
  613. * Defines, whether the specified index is last in collection
  614. * @param {?} index
  615. * @return {?}
  616. */
  617. CarouselComponent.prototype.isLast = /**
  618. * Defines, whether the specified index is last in collection
  619. * @param {?} index
  620. * @return {?}
  621. */
  622. function (index) {
  623. return index + 1 >= this._slides.length;
  624. };
  625. /**
  626. * Defines, whether the specified index is first in collection
  627. * @param index
  628. */
  629. /**
  630. * Defines, whether the specified index is first in collection
  631. * @param {?} index
  632. * @return {?}
  633. */
  634. CarouselComponent.prototype.isFirst = /**
  635. * Defines, whether the specified index is first in collection
  636. * @param {?} index
  637. * @return {?}
  638. */
  639. function (index) {
  640. return index === 0;
  641. };
  642. /**
  643. * @return {?}
  644. */
  645. CarouselComponent.prototype.indicatorsSlides = /**
  646. * @return {?}
  647. */
  648. function () {
  649. var _this = this;
  650. return this.slides.filter((/**
  651. * @param {?} slide
  652. * @param {?} index
  653. * @return {?}
  654. */
  655. function (slide, index) { return !_this.indicatorsByChunk || index % _this.itemsPerSlide === 0; }));
  656. };
  657. /**
  658. * @private
  659. * @return {?}
  660. */
  661. CarouselComponent.prototype.selectInitialSlides = /**
  662. * @private
  663. * @return {?}
  664. */
  665. function () {
  666. /** @type {?} */
  667. var startIndex = this.startFromIndex <= this._slides.length
  668. ? this.startFromIndex
  669. : 0;
  670. this.hideSlides();
  671. if (this.singleSlideOffset) {
  672. this._slidesWithIndexes = this.mapSlidesAndIndexes();
  673. if (this._slides.length - startIndex < this.itemsPerSlide) {
  674. /** @type {?} */
  675. var slidesToAppend = this._slidesWithIndexes.slice(0, startIndex);
  676. this._slidesWithIndexes = __spread(this._slidesWithIndexes, slidesToAppend).slice(slidesToAppend.length)
  677. .slice(0, this.itemsPerSlide);
  678. }
  679. else {
  680. this._slidesWithIndexes = this._slidesWithIndexes.slice(startIndex, startIndex + this.itemsPerSlide);
  681. }
  682. this._slidesWithIndexes.forEach((/**
  683. * @param {?} slide
  684. * @return {?}
  685. */
  686. function (slide) { return slide.item.active = true; }));
  687. this.makeSlidesConsistent(this._slidesWithIndexes);
  688. }
  689. else {
  690. this.selectRangeByNestedIndex(startIndex);
  691. }
  692. this.slideRangeChange.emit(this.getVisibleIndexes());
  693. };
  694. /**
  695. * Defines next slide index, depending of direction
  696. * @param direction: Direction(UNKNOWN|PREV|NEXT)
  697. * @param force: {boolean} if TRUE - will ignore noWrap flag, else will
  698. * return undefined if next slide require wrapping
  699. */
  700. /**
  701. * Defines next slide index, depending of direction
  702. * @private
  703. * @param {?} direction
  704. * @param {?} force
  705. * @return {?}
  706. */
  707. CarouselComponent.prototype.findNextSlideIndex = /**
  708. * Defines next slide index, depending of direction
  709. * @private
  710. * @param {?} direction
  711. * @param {?} force
  712. * @return {?}
  713. */
  714. function (direction, force) {
  715. /** @type {?} */
  716. var nextSlideIndex = 0;
  717. if (!force &&
  718. (this.isLast(this.activeSlide) &&
  719. direction !== Direction.PREV &&
  720. this.noWrap)) {
  721. return undefined;
  722. }
  723. switch (direction) {
  724. case Direction.NEXT:
  725. // if this is last slide, not force, looping is disabled
  726. // and need to going forward - select current slide, as a next
  727. nextSlideIndex = !this.isLast(this._currentActiveSlide)
  728. ? this._currentActiveSlide + 1
  729. : !force && this.noWrap ? this._currentActiveSlide : 0;
  730. break;
  731. case Direction.PREV:
  732. // if this is first slide, not force, looping is disabled
  733. // and need to going backward - select current slide, as a next
  734. nextSlideIndex =
  735. this._currentActiveSlide > 0
  736. ? this._currentActiveSlide - 1
  737. : !force && this.noWrap
  738. ? this._currentActiveSlide
  739. : this._slides.length - 1;
  740. break;
  741. default:
  742. throw new Error('Unknown direction');
  743. }
  744. return nextSlideIndex;
  745. };
  746. /**
  747. * @private
  748. * @return {?}
  749. */
  750. CarouselComponent.prototype.mapSlidesAndIndexes = /**
  751. * @private
  752. * @return {?}
  753. */
  754. function () {
  755. return this.slides
  756. .slice()
  757. .map((/**
  758. * @param {?} slide
  759. * @param {?} index
  760. * @return {?}
  761. */
  762. function (slide, index) {
  763. return {
  764. index: index,
  765. item: slide
  766. };
  767. }));
  768. };
  769. /**
  770. * @private
  771. * @param {?} index
  772. * @return {?}
  773. */
  774. CarouselComponent.prototype.selectSlideRange = /**
  775. * @private
  776. * @param {?} index
  777. * @return {?}
  778. */
  779. function (index) {
  780. if (this.isIndexInRange(index)) {
  781. return;
  782. }
  783. this.hideSlides();
  784. if (!this.singleSlideOffset) {
  785. this.selectRangeByNestedIndex(index);
  786. }
  787. else {
  788. /** @type {?} */
  789. var startIndex = this.isIndexOnTheEdges(index)
  790. ? index
  791. : index - this.itemsPerSlide + 1;
  792. /** @type {?} */
  793. var endIndex = this.isIndexOnTheEdges(index)
  794. ? index + this.itemsPerSlide
  795. : index + 1;
  796. this._slidesWithIndexes = this.mapSlidesAndIndexes().slice(startIndex, endIndex);
  797. this.makeSlidesConsistent(this._slidesWithIndexes);
  798. this._slidesWithIndexes.forEach((/**
  799. * @param {?} slide
  800. * @return {?}
  801. */
  802. function (slide) { return slide.item.active = true; }));
  803. }
  804. this.slideRangeChange.emit(this.getVisibleIndexes());
  805. };
  806. /**
  807. * @private
  808. * @param {?} index
  809. * @return {?}
  810. */
  811. CarouselComponent.prototype.selectRangeByNestedIndex = /**
  812. * @private
  813. * @param {?} index
  814. * @return {?}
  815. */
  816. function (index) {
  817. /** @type {?} */
  818. var selectedRange = this._chunkedSlides
  819. .map((/**
  820. * @param {?} slidesList
  821. * @param {?} i
  822. * @return {?}
  823. */
  824. function (slidesList, i) {
  825. return {
  826. index: i,
  827. list: slidesList
  828. };
  829. }))
  830. .find((/**
  831. * @param {?} slidesList
  832. * @return {?}
  833. */
  834. function (slidesList) {
  835. return slidesList.list.find((/**
  836. * @param {?} slide
  837. * @return {?}
  838. */
  839. function (slide) { return slide.index === index; })) !== undefined;
  840. }));
  841. this._currentVisibleSlidesIndex = selectedRange.index;
  842. this._chunkedSlides[selectedRange.index].forEach((/**
  843. * @param {?} slide
  844. * @return {?}
  845. */
  846. function (slide) {
  847. slide.item.active = true;
  848. }));
  849. };
  850. /**
  851. * @private
  852. * @param {?} index
  853. * @return {?}
  854. */
  855. CarouselComponent.prototype.isIndexOnTheEdges = /**
  856. * @private
  857. * @param {?} index
  858. * @return {?}
  859. */
  860. function (index) {
  861. return (index + 1 - this.itemsPerSlide <= 0 ||
  862. index + this.itemsPerSlide <= this._slides.length);
  863. };
  864. /**
  865. * @private
  866. * @param {?} index
  867. * @return {?}
  868. */
  869. CarouselComponent.prototype.isIndexInRange = /**
  870. * @private
  871. * @param {?} index
  872. * @return {?}
  873. */
  874. function (index) {
  875. if (this.singleSlideOffset) {
  876. /** @type {?} */
  877. var visibleIndexes = this._slidesWithIndexes.map((/**
  878. * @param {?} slide
  879. * @return {?}
  880. */
  881. function (slide) { return slide.index; }));
  882. return visibleIndexes.indexOf(index) >= 0;
  883. }
  884. return (index <= this.getLastVisibleIndex() &&
  885. index >= this.getFirstVisibleIndex());
  886. };
  887. /**
  888. * @private
  889. * @return {?}
  890. */
  891. CarouselComponent.prototype.hideSlides = /**
  892. * @private
  893. * @return {?}
  894. */
  895. function () {
  896. this.slides.forEach((/**
  897. * @param {?} slide
  898. * @return {?}
  899. */
  900. function (slide) { return slide.active = false; }));
  901. };
  902. /**
  903. * @private
  904. * @return {?}
  905. */
  906. CarouselComponent.prototype.isVisibleSlideListLast = /**
  907. * @private
  908. * @return {?}
  909. */
  910. function () {
  911. return this._currentVisibleSlidesIndex === this._chunkedSlides.length - 1;
  912. };
  913. /**
  914. * @private
  915. * @return {?}
  916. */
  917. CarouselComponent.prototype.isVisibleSlideListFirst = /**
  918. * @private
  919. * @return {?}
  920. */
  921. function () {
  922. return this._currentVisibleSlidesIndex === 0;
  923. };
  924. /**
  925. * @private
  926. * @param {?} direction
  927. * @return {?}
  928. */
  929. CarouselComponent.prototype.moveSliderByOneItem = /**
  930. * @private
  931. * @param {?} direction
  932. * @return {?}
  933. */
  934. function (direction) {
  935. /** @type {?} */
  936. var firstVisibleIndex;
  937. /** @type {?} */
  938. var lastVisibleIndex;
  939. /** @type {?} */
  940. var indexToHide;
  941. /** @type {?} */
  942. var indexToShow;
  943. if (this.noWrap) {
  944. firstVisibleIndex = this.getFirstVisibleIndex();
  945. lastVisibleIndex = this.getLastVisibleIndex();
  946. indexToHide = direction === Direction.NEXT
  947. ? firstVisibleIndex
  948. : lastVisibleIndex;
  949. indexToShow = direction !== Direction.NEXT
  950. ? firstVisibleIndex - 1
  951. : !this.isLast(lastVisibleIndex)
  952. ? lastVisibleIndex + 1 : 0;
  953. this._slides.get(indexToHide).active = false;
  954. this._slides.get(indexToShow).active = true;
  955. /** @type {?} */
  956. var slidesToReorder = this.mapSlidesAndIndexes().filter((/**
  957. * @param {?} slide
  958. * @return {?}
  959. */
  960. function (slide) { return slide.item.active; }));
  961. this.makeSlidesConsistent(slidesToReorder);
  962. this.slideRangeChange.emit(this.getVisibleIndexes());
  963. }
  964. else {
  965. /** @type {?} */
  966. var displayedIndex = void 0;
  967. firstVisibleIndex = this._slidesWithIndexes[0].index;
  968. lastVisibleIndex = this._slidesWithIndexes[this._slidesWithIndexes.length - 1].index;
  969. if (direction === Direction.NEXT) {
  970. this._slidesWithIndexes.shift();
  971. displayedIndex = this.isLast(lastVisibleIndex)
  972. ? 0
  973. : lastVisibleIndex + 1;
  974. this._slidesWithIndexes.push({
  975. index: displayedIndex,
  976. item: this._slides.get(displayedIndex)
  977. });
  978. }
  979. else {
  980. this._slidesWithIndexes.pop();
  981. displayedIndex = this.isFirst(firstVisibleIndex)
  982. ? this._slides.length - 1
  983. : firstVisibleIndex - 1;
  984. this._slidesWithIndexes = __spread([{
  985. index: displayedIndex,
  986. item: this._slides.get(displayedIndex)
  987. }], this._slidesWithIndexes);
  988. }
  989. this.hideSlides();
  990. this._slidesWithIndexes.forEach((/**
  991. * @param {?} slide
  992. * @return {?}
  993. */
  994. function (slide) { return slide.item.active = true; }));
  995. this.makeSlidesConsistent(this._slidesWithIndexes);
  996. this.slideRangeChange.emit(this._slidesWithIndexes.map((/**
  997. * @param {?} slide
  998. * @return {?}
  999. */
  1000. function (slide) { return slide.index; })));
  1001. }
  1002. };
  1003. /**
  1004. * @private
  1005. * @param {?} direction
  1006. * @return {?}
  1007. */
  1008. CarouselComponent.prototype.moveMultilist = /**
  1009. * @private
  1010. * @param {?} direction
  1011. * @return {?}
  1012. */
  1013. function (direction) {
  1014. if (this.singleSlideOffset) {
  1015. this.moveSliderByOneItem(direction);
  1016. }
  1017. else {
  1018. this.hideSlides();
  1019. if (this.noWrap) {
  1020. this._currentVisibleSlidesIndex = direction === Direction.NEXT
  1021. ? this._currentVisibleSlidesIndex + 1
  1022. : this._currentVisibleSlidesIndex - 1;
  1023. }
  1024. else {
  1025. if (direction === Direction.NEXT) {
  1026. this._currentVisibleSlidesIndex = this.isVisibleSlideListLast()
  1027. ? 0
  1028. : this._currentVisibleSlidesIndex + 1;
  1029. }
  1030. else {
  1031. this._currentVisibleSlidesIndex = this.isVisibleSlideListFirst()
  1032. ? this._chunkedSlides.length - 1
  1033. : this._currentVisibleSlidesIndex - 1;
  1034. }
  1035. }
  1036. this._chunkedSlides[this._currentVisibleSlidesIndex].forEach((/**
  1037. * @param {?} slide
  1038. * @return {?}
  1039. */
  1040. function (slide) { return slide.item.active = true; }));
  1041. this.slideRangeChange.emit(this.getVisibleIndexes());
  1042. }
  1043. };
  1044. /**
  1045. * @private
  1046. * @return {?}
  1047. */
  1048. CarouselComponent.prototype.getVisibleIndexes = /**
  1049. * @private
  1050. * @return {?}
  1051. */
  1052. function () {
  1053. if (!this.singleSlideOffset) {
  1054. return this._chunkedSlides[this._currentVisibleSlidesIndex]
  1055. .map((/**
  1056. * @param {?} slide
  1057. * @return {?}
  1058. */
  1059. function (slide) { return slide.index; }));
  1060. }
  1061. else {
  1062. return this._slidesWithIndexes.map((/**
  1063. * @param {?} slide
  1064. * @return {?}
  1065. */
  1066. function (slide) { return slide.index; }));
  1067. }
  1068. };
  1069. /**
  1070. * Sets a slide, which specified through index, as active
  1071. * @param index
  1072. */
  1073. /**
  1074. * Sets a slide, which specified through index, as active
  1075. * @private
  1076. * @param {?} index
  1077. * @return {?}
  1078. */
  1079. CarouselComponent.prototype._select = /**
  1080. * Sets a slide, which specified through index, as active
  1081. * @private
  1082. * @param {?} index
  1083. * @return {?}
  1084. */
  1085. function (index) {
  1086. if (isNaN(index)) {
  1087. this.pause();
  1088. return;
  1089. }
  1090. if (!this.multilist) {
  1091. /** @type {?} */
  1092. var currentSlide = this._slides.get(this._currentActiveSlide);
  1093. if (currentSlide) {
  1094. currentSlide.active = false;
  1095. }
  1096. }
  1097. /** @type {?} */
  1098. var nextSlide = this._slides.get(index);
  1099. if (nextSlide) {
  1100. this._currentActiveSlide = index;
  1101. nextSlide.active = true;
  1102. this.activeSlide = index;
  1103. this.activeSlideChange.emit(index);
  1104. }
  1105. };
  1106. /**
  1107. * Starts loop of auto changing of slides
  1108. */
  1109. /**
  1110. * Starts loop of auto changing of slides
  1111. * @private
  1112. * @return {?}
  1113. */
  1114. CarouselComponent.prototype.restartTimer = /**
  1115. * Starts loop of auto changing of slides
  1116. * @private
  1117. * @return {?}
  1118. */
  1119. function () {
  1120. var _this = this;
  1121. this.resetTimer();
  1122. /** @type {?} */
  1123. var interval = +this.interval;
  1124. if (!isNaN(interval) && interval > 0) {
  1125. this.currentInterval = this.ngZone.runOutsideAngular((/**
  1126. * @return {?}
  1127. */
  1128. function () {
  1129. return setInterval((/**
  1130. * @return {?}
  1131. */
  1132. function () {
  1133. /** @type {?} */
  1134. var nInterval = +_this.interval;
  1135. _this.ngZone.run((/**
  1136. * @return {?}
  1137. */
  1138. function () {
  1139. if (_this.isPlaying &&
  1140. !isNaN(_this.interval) &&
  1141. nInterval > 0 &&
  1142. _this.slides.length) {
  1143. _this.nextSlideFromInterval();
  1144. }
  1145. else {
  1146. _this.pause();
  1147. }
  1148. }));
  1149. }), interval);
  1150. }));
  1151. }
  1152. };
  1153. Object.defineProperty(CarouselComponent.prototype, "multilist", {
  1154. get: /**
  1155. * @return {?}
  1156. */
  1157. function () {
  1158. return this.itemsPerSlide > 1;
  1159. },
  1160. enumerable: true,
  1161. configurable: true
  1162. });
  1163. /**
  1164. * Stops loop of auto changing of slides
  1165. */
  1166. /**
  1167. * Stops loop of auto changing of slides
  1168. * @private
  1169. * @return {?}
  1170. */
  1171. CarouselComponent.prototype.resetTimer = /**
  1172. * Stops loop of auto changing of slides
  1173. * @private
  1174. * @return {?}
  1175. */
  1176. function () {
  1177. if (this.currentInterval) {
  1178. clearInterval(this.currentInterval);
  1179. this.currentInterval = void 0;
  1180. }
  1181. };
  1182. CarouselComponent.decorators = [
  1183. { type: Component, args: [{
  1184. selector: 'carousel',
  1185. template: "<div (mouseenter)=\"pause()\" (mouseleave)=\"onMouseLeave()\" (mouseup)=\"onMouseUp()\" class=\"carousel slide\" (keydown)=\"keydownPress($event)\" (focusin)=\"pauseFocusIn()\" (focusout)=\"pauseFocusOut()\" tabindex=\"0\">\n <ol class=\"carousel-indicators\" *ngIf=\"showIndicators && slides.length > 1\">\n <li *ngFor=\"let slidez of indicatorsSlides(); let i = index;\" [class.active]=\"slidez.active === true\" (click)=\"selectSlide(i)\"></li>\n </ol>\n <div class=\"carousel-inner\" [ngStyle]=\"{'display': multilist ? 'flex' : 'block'}\"><ng-content></ng-content></div>\n <a class=\"left carousel-control carousel-control-prev\" [class.disabled]=\"activeSlide === 0 && noWrap\" (click)=\"previousSlide()\" *ngIf=\"slides.length > 1\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-prev carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBs4\" class=\"sr-only\">Previous</span>\n </a>\n <a class=\"right carousel-control carousel-control-next\" (click)=\"nextSlide()\" [class.disabled]=\"isLast(activeSlide) && noWrap\" *ngIf=\"slides.length > 1\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-next carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Next</span>\n </a>\n</div>\n"
  1186. }] }
  1187. ];
  1188. /** @nocollapse */
  1189. CarouselComponent.ctorParameters = function () { return [
  1190. { type: CarouselConfig },
  1191. { type: NgZone }
  1192. ]; };
  1193. CarouselComponent.propDecorators = {
  1194. noWrap: [{ type: Input }],
  1195. noPause: [{ type: Input }],
  1196. showIndicators: [{ type: Input }],
  1197. pauseOnFocus: [{ type: Input }],
  1198. indicatorsByChunk: [{ type: Input }],
  1199. itemsPerSlide: [{ type: Input }],
  1200. singleSlideOffset: [{ type: Input }],
  1201. activeSlideChange: [{ type: Output }],
  1202. slideRangeChange: [{ type: Output }],
  1203. activeSlide: [{ type: Input }],
  1204. startFromIndex: [{ type: Input }],
  1205. interval: [{ type: Input }]
  1206. };
  1207. return CarouselComponent;
  1208. }());
  1209. /**
  1210. * @fileoverview added by tsickle
  1211. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1212. */
  1213. var SlideComponent = /** @class */ (function () {
  1214. function SlideComponent(carousel) {
  1215. this.itemWidth = '100%';
  1216. this.order = 0;
  1217. /**
  1218. * Wraps element by appropriate CSS classes
  1219. */
  1220. this.addClass = true;
  1221. this.carousel = carousel;
  1222. }
  1223. /** Fires changes in container collection after adding a new slide instance */
  1224. /**
  1225. * Fires changes in container collection after adding a new slide instance
  1226. * @return {?}
  1227. */
  1228. SlideComponent.prototype.ngOnInit = /**
  1229. * Fires changes in container collection after adding a new slide instance
  1230. * @return {?}
  1231. */
  1232. function () {
  1233. this.carousel.addSlide(this);
  1234. this.itemWidth = 100 / this.carousel.itemsPerSlide + "%";
  1235. };
  1236. /** Fires changes in container collection after removing of this slide instance */
  1237. /**
  1238. * Fires changes in container collection after removing of this slide instance
  1239. * @return {?}
  1240. */
  1241. SlideComponent.prototype.ngOnDestroy = /**
  1242. * Fires changes in container collection after removing of this slide instance
  1243. * @return {?}
  1244. */
  1245. function () {
  1246. this.carousel.removeSlide(this);
  1247. };
  1248. SlideComponent.decorators = [
  1249. { type: Component, args: [{
  1250. selector: 'slide',
  1251. template: "\n <div [class.active]=\"active\" class=\"item\">\n <ng-content></ng-content>\n </div>\n ",
  1252. host: {
  1253. '[attr.aria-hidden]': '!active'
  1254. }
  1255. }] }
  1256. ];
  1257. /** @nocollapse */
  1258. SlideComponent.ctorParameters = function () { return [
  1259. { type: CarouselComponent }
  1260. ]; };
  1261. SlideComponent.propDecorators = {
  1262. active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }],
  1263. itemWidth: [{ type: HostBinding, args: ['style.width',] }],
  1264. order: [{ type: HostBinding, args: ['style.order',] }],
  1265. addClass: [{ type: HostBinding, args: ['class.item',] }, { type: HostBinding, args: ['class.carousel-item',] }]
  1266. };
  1267. return SlideComponent;
  1268. }());
  1269. /**
  1270. * @fileoverview added by tsickle
  1271. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1272. */
  1273. var CarouselModule = /** @class */ (function () {
  1274. function CarouselModule() {
  1275. }
  1276. /**
  1277. * @return {?}
  1278. */
  1279. CarouselModule.forRoot = /**
  1280. * @return {?}
  1281. */
  1282. function () {
  1283. return { ngModule: CarouselModule, providers: [] };
  1284. };
  1285. CarouselModule.decorators = [
  1286. { type: NgModule, args: [{
  1287. imports: [CommonModule],
  1288. declarations: [SlideComponent, CarouselComponent],
  1289. exports: [SlideComponent, CarouselComponent],
  1290. providers: [CarouselConfig]
  1291. },] }
  1292. ];
  1293. return CarouselModule;
  1294. }());
  1295. export { CarouselComponent, CarouselConfig, CarouselModule, SlideComponent };
  1296. //# sourceMappingURL=ngx-bootstrap-carousel.js.map