@coreui/angular 4.0.0-alpha.12 → 4.0.0-alpha.13
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.
- package/esm2020/lib/accordion/accordion-item/accordion-item.component.mjs +3 -3
- package/esm2020/lib/accordion/accordion.service.mjs +1 -1
- package/esm2020/lib/carousel/carousel/carousel.component.mjs +18 -9
- package/esm2020/lib/carousel/carousel-state.mjs +6 -2
- package/esm2020/lib/carousel/carousel.service.mjs +1 -1
- package/esm2020/lib/collapse/collapse.animations.mjs +10 -1
- package/esm2020/lib/collapse/collapse.directive.mjs +61 -23
- package/esm2020/lib/services/intersection.service.mjs +34 -0
- package/esm2020/lib/services/public_api.mjs +2 -1
- package/fesm2015/coreui-angular.mjs +100 -36
- package/fesm2015/coreui-angular.mjs.map +1 -1
- package/fesm2020/coreui-angular.mjs +96 -35
- package/fesm2020/coreui-angular.mjs.map +1 -1
- package/lib/carousel/carousel/carousel.component.d.ts +8 -2
- package/lib/carousel/carousel.service.d.ts +1 -0
- package/lib/collapse/collapse.animations.d.ts +2 -0
- package/lib/collapse/collapse.directive.d.ts +14 -2
- package/lib/{carousel → services}/intersection.service.d.ts +8 -1
- package/lib/services/public_api.d.ts +1 -0
- package/package.json +1 -1
- package/esm2020/lib/carousel/intersection.service.mjs +0 -33
|
@@ -254,6 +254,15 @@ const expandAnimation = animation([
|
|
|
254
254
|
const collapseAnimation = animation([
|
|
255
255
|
style({ height: '*', visibility: 'visible', overflow: 'hidden', paddingTop: '*', paddingBottom: '*', minHeight: '*' }),
|
|
256
256
|
animate('{{ time }} {{ easing }}', style({ height: 0, visibility: 'hidden', opacity: 0, overflow: 'hidden', paddingTop: 0, paddingBottom: 0, minHeight: 0 }))
|
|
257
|
+
]);
|
|
258
|
+
const expandHorizontalAnimation = animation([
|
|
259
|
+
style({ width: 0, visibility: 'hidden', paddingLeft: 0, paddingRight: 0 }),
|
|
260
|
+
animate('{{ time }} {{ easing }}', style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' })),
|
|
261
|
+
animate('{{ time }}', style({ opacity: '*' })),
|
|
262
|
+
]);
|
|
263
|
+
const collapseHorizontalAnimation = animation([
|
|
264
|
+
style({ width: '*', visibility: 'visible', paddingLeft: '*', paddingRight: '*', minWidth: '*' }),
|
|
265
|
+
animate('{{ time }} {{ easing }}', style({ width: 0, visibility: 'hidden', opacity: 0, paddingLeft: 0, paddingRight: 0, minWidth: 0 }))
|
|
257
266
|
]);
|
|
258
267
|
|
|
259
268
|
// todo
|
|
@@ -264,23 +273,25 @@ class CollapseDirective {
|
|
|
264
273
|
this.renderer = renderer;
|
|
265
274
|
this.animationBuilder = animationBuilder;
|
|
266
275
|
this._animate = true;
|
|
276
|
+
this._horizontal = false;
|
|
267
277
|
this._visible = false;
|
|
268
278
|
this._navbar = false;
|
|
269
279
|
/**
|
|
270
280
|
* @ignore
|
|
271
281
|
*/
|
|
272
|
-
this.duration = '
|
|
282
|
+
this.duration = '350ms';
|
|
273
283
|
/**
|
|
274
284
|
* @ignore
|
|
275
285
|
*/
|
|
276
|
-
this.transition = 'ease
|
|
286
|
+
this.transition = 'ease';
|
|
277
287
|
/**
|
|
278
288
|
* Event emitted on visibility change. [docs]
|
|
279
289
|
* @type string
|
|
280
290
|
*/
|
|
281
291
|
this.collapseChange = new EventEmitter();
|
|
292
|
+
this.collapsing = false;
|
|
282
293
|
this.host = this.hostElement.nativeElement;
|
|
283
|
-
this.
|
|
294
|
+
this.setDisplay(false);
|
|
284
295
|
}
|
|
285
296
|
/**
|
|
286
297
|
* @ignore
|
|
@@ -291,6 +302,15 @@ class CollapseDirective {
|
|
|
291
302
|
get animate() {
|
|
292
303
|
return this._animate;
|
|
293
304
|
}
|
|
305
|
+
/**
|
|
306
|
+
* Set horizontal collapsing to transition the width instead of height.
|
|
307
|
+
*/
|
|
308
|
+
set horizontal(value) {
|
|
309
|
+
this._horizontal = coerceBooleanProperty(value);
|
|
310
|
+
}
|
|
311
|
+
get horizontal() {
|
|
312
|
+
return this._horizontal;
|
|
313
|
+
}
|
|
294
314
|
/**
|
|
295
315
|
* Toggle the visibility of collapsible element.
|
|
296
316
|
*/
|
|
@@ -313,16 +333,25 @@ class CollapseDirective {
|
|
|
313
333
|
get hostClasses() {
|
|
314
334
|
return {
|
|
315
335
|
'navbar-collapse': this.navbar,
|
|
316
|
-
show: this.visible
|
|
336
|
+
show: this.visible,
|
|
337
|
+
'collapse-horizontal': this.horizontal,
|
|
338
|
+
collapsing: this.collapsing
|
|
339
|
+
// collapse: !this.collapsing
|
|
317
340
|
};
|
|
318
341
|
}
|
|
342
|
+
ngAfterViewInit() {
|
|
343
|
+
if (this.visible) {
|
|
344
|
+
this.toggle();
|
|
345
|
+
}
|
|
346
|
+
}
|
|
319
347
|
ngOnDestroy() {
|
|
320
348
|
this.destroyPlayer();
|
|
321
349
|
}
|
|
322
350
|
ngOnChanges(changes) {
|
|
323
351
|
if (changes['visible']) {
|
|
324
|
-
|
|
325
|
-
|
|
352
|
+
if (!changes['visible'].firstChange || !changes['visible'].currentValue) {
|
|
353
|
+
this.toggle(changes['visible'].currentValue);
|
|
354
|
+
}
|
|
326
355
|
}
|
|
327
356
|
}
|
|
328
357
|
ngDoCheck() {
|
|
@@ -331,35 +360,54 @@ class CollapseDirective {
|
|
|
331
360
|
}
|
|
332
361
|
}
|
|
333
362
|
toggle(visible = this.visible) {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
}
|
|
337
|
-
this.visible = visible;
|
|
363
|
+
var _a;
|
|
364
|
+
this.setDisplay(true);
|
|
338
365
|
this.createPlayer(visible);
|
|
339
|
-
this.
|
|
366
|
+
this.visible = visible;
|
|
367
|
+
(_a = this.player) === null || _a === void 0 ? void 0 : _a.play();
|
|
340
368
|
}
|
|
341
369
|
destroyPlayer() {
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
}
|
|
370
|
+
var _a;
|
|
371
|
+
(_a = this.player) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
345
372
|
}
|
|
346
373
|
createPlayer(visible = this.visible) {
|
|
347
|
-
|
|
374
|
+
var _a;
|
|
375
|
+
if ((_a = this.player) === null || _a === void 0 ? void 0 : _a.hasStarted()) {
|
|
348
376
|
this.destroyPlayer();
|
|
349
377
|
}
|
|
350
378
|
let animationFactory;
|
|
351
379
|
const duration = this.animate ? this.duration : '0ms';
|
|
352
|
-
|
|
380
|
+
const expand = this.horizontal ? expandHorizontalAnimation : expandAnimation;
|
|
381
|
+
const collapse = this.horizontal ? collapseHorizontalAnimation : collapseAnimation;
|
|
382
|
+
animationFactory = this.animationBuilder.build(useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition } }));
|
|
353
383
|
this.player = animationFactory.create(this.host);
|
|
354
|
-
this.player.onStart(() => {
|
|
355
|
-
|
|
384
|
+
this.player.onStart(() => {
|
|
385
|
+
this.setMaxSize();
|
|
386
|
+
this.collapsing = true;
|
|
387
|
+
this.collapseChange.emit(visible ? 'opening' : 'collapsing');
|
|
388
|
+
});
|
|
389
|
+
this.player.onDone(() => {
|
|
390
|
+
this.collapsing = false;
|
|
391
|
+
this.collapseChange.emit(visible ? 'open' : 'collapsed');
|
|
392
|
+
});
|
|
356
393
|
}
|
|
357
|
-
|
|
358
|
-
|
|
394
|
+
setMaxSize() {
|
|
395
|
+
setTimeout(() => {
|
|
396
|
+
if (this.horizontal) {
|
|
397
|
+
this.scrollWidth = this.host.scrollWidth;
|
|
398
|
+
this.scrollWidth > 0 && this.renderer.setStyle(this.host, 'maxWidth', `${this.scrollWidth}px`);
|
|
399
|
+
// } else {
|
|
400
|
+
// this.scrollHeight = this.host.scrollHeight;
|
|
401
|
+
// this.scrollHeight > 0 && this.renderer.setStyle(this.host, 'maxHeight', `${this.scrollHeight}px`);
|
|
402
|
+
}
|
|
403
|
+
});
|
|
404
|
+
}
|
|
405
|
+
setDisplay(display) {
|
|
406
|
+
display ? this.renderer.removeStyle(this.host, 'display') : this.renderer.setStyle(this.host, 'display', 'none');
|
|
359
407
|
}
|
|
360
408
|
}
|
|
361
409
|
CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
362
|
-
CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: CollapseDirective, selector: "[cCollapse]", inputs: { animate: "animate", visible: "visible", navbar: "navbar", duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 });
|
|
410
|
+
CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: CollapseDirective, selector: "[cCollapse]", inputs: { animate: "animate", horizontal: "horizontal", visible: "visible", navbar: "navbar", duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 });
|
|
363
411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollapseDirective, decorators: [{
|
|
364
412
|
type: Directive,
|
|
365
413
|
args: [{
|
|
@@ -368,6 +416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
368
416
|
}]
|
|
369
417
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.AnimationBuilder }]; }, propDecorators: { animate: [{
|
|
370
418
|
type: Input
|
|
419
|
+
}], horizontal: [{
|
|
420
|
+
type: Input
|
|
371
421
|
}], visible: [{
|
|
372
422
|
type: Input
|
|
373
423
|
}], navbar: [{
|
|
@@ -431,10 +481,10 @@ class AccordionItemComponent {
|
|
|
431
481
|
}
|
|
432
482
|
}
|
|
433
483
|
AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AccordionItemComponent, selector: "c-accordion-item", inputs: { visible: "visible", open: "open" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "visible", "navbar", "duration", "transition"], outputs: ["collapseChange"], exportAs: ["cCollapse"] }, { type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }] });
|
|
484
|
+
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AccordionItemComponent, selector: "c-accordion-item", inputs: { visible: "visible", open: "open" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["collapseChange"], exportAs: ["cCollapse"] }, { type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }] });
|
|
435
485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
436
486
|
type: Component,
|
|
437
|
-
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', template: "<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
|
|
487
|
+
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"] }]
|
|
438
488
|
}], ctorParameters: function () { return [{ type: AccordionService }]; }, propDecorators: { visible: [{
|
|
439
489
|
type: Input
|
|
440
490
|
}], open: [{
|
|
@@ -1690,14 +1740,15 @@ class IntersectionService {
|
|
|
1690
1740
|
constructor() {
|
|
1691
1741
|
this.intersecting = new BehaviorSubject(false);
|
|
1692
1742
|
this.intersecting$ = this.intersecting.asObservable();
|
|
1693
|
-
|
|
1694
|
-
createIntersectionObserver(hostElement) {
|
|
1695
|
-
this.hostElement = hostElement;
|
|
1696
|
-
const options = {
|
|
1743
|
+
this.defaultObserverOptions = {
|
|
1697
1744
|
root: null,
|
|
1698
1745
|
rootMargin: '0px',
|
|
1699
1746
|
threshold: 0.2
|
|
1700
1747
|
};
|
|
1748
|
+
}
|
|
1749
|
+
createIntersectionObserver(hostElement, observerOptions = this.defaultObserverOptions) {
|
|
1750
|
+
const options = Object.assign(Object.assign({}, this.defaultObserverOptions), observerOptions);
|
|
1751
|
+
this.hostElement = hostElement;
|
|
1701
1752
|
const handleIntersect = (entries, observer) => {
|
|
1702
1753
|
entries.forEach((entry) => {
|
|
1703
1754
|
this.intersecting.next(entry.isIntersecting);
|
|
@@ -1789,14 +1840,18 @@ class CarouselState {
|
|
|
1789
1840
|
return this._state;
|
|
1790
1841
|
}
|
|
1791
1842
|
set state(state) {
|
|
1792
|
-
var _a;
|
|
1843
|
+
var _a, _b, _c;
|
|
1793
1844
|
const prevState = Object.assign({}, this._state);
|
|
1794
1845
|
const nextState = Object.assign(Object.assign({}, this._state), state);
|
|
1795
1846
|
this._state = nextState;
|
|
1796
1847
|
if (prevState.activeItemIndex !== nextState.activeItemIndex) {
|
|
1797
1848
|
const activeItemIndex = this.state.activeItemIndex || 0;
|
|
1798
1849
|
const itemInterval = this.state.items && ((_a = this.state.items[activeItemIndex]) === null || _a === void 0 ? void 0 : _a.interval) || -1;
|
|
1799
|
-
this.carouselService.setIndex({
|
|
1850
|
+
this.carouselService.setIndex({
|
|
1851
|
+
active: nextState.activeItemIndex,
|
|
1852
|
+
interval: itemInterval,
|
|
1853
|
+
lastItemIndex: ((_c = (_b = nextState.items) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) - 1
|
|
1854
|
+
});
|
|
1800
1855
|
}
|
|
1801
1856
|
}
|
|
1802
1857
|
setItems(newItems) {
|
|
@@ -1906,6 +1961,12 @@ class CarouselComponent {
|
|
|
1906
1961
|
* @default 'slide'
|
|
1907
1962
|
*/
|
|
1908
1963
|
this.transition = 'slide';
|
|
1964
|
+
/**
|
|
1965
|
+
* Set whether the carousel should cycle continuously or have hard stops.
|
|
1966
|
+
* @type boolean
|
|
1967
|
+
* @default true
|
|
1968
|
+
*/
|
|
1969
|
+
this.wrap = true;
|
|
1909
1970
|
/**
|
|
1910
1971
|
* Event emitted on carousel item change. [docs]
|
|
1911
1972
|
* @type number
|
|
@@ -1975,12 +2036,13 @@ class CarouselComponent {
|
|
|
1975
2036
|
carouselStateSubscribe(subscribe = true) {
|
|
1976
2037
|
var _a;
|
|
1977
2038
|
if (subscribe) {
|
|
1978
|
-
this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((
|
|
1979
|
-
if ('active' in
|
|
1980
|
-
this.itemChange.emit(
|
|
2039
|
+
this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextItem) => {
|
|
2040
|
+
if ('active' in nextItem) {
|
|
2041
|
+
this.itemChange.emit(nextItem.active);
|
|
1981
2042
|
}
|
|
1982
|
-
this.activeItemInterval = typeof
|
|
1983
|
-
this.
|
|
2043
|
+
this.activeItemInterval = typeof nextItem.interval === 'number' && nextItem.interval > -1 ? nextItem.interval : this.interval;
|
|
2044
|
+
const isLastItem = ((nextItem.active === nextItem.lastItemIndex) && this.direction === 'next') || ((nextItem.active === 0) && this.direction === 'prev');
|
|
2045
|
+
!this.wrap && isLastItem ? this.resetTimer() : this.setTimer();
|
|
1984
2046
|
});
|
|
1985
2047
|
}
|
|
1986
2048
|
else {
|
|
@@ -2001,7 +2063,7 @@ class CarouselComponent {
|
|
|
2001
2063
|
}
|
|
2002
2064
|
}
|
|
2003
2065
|
CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CarouselComponent, deps: [{ token: CarouselConfig }, { token: i0.ElementRef }, { token: CarouselService }, { token: CarouselState }, { token: IntersectionService }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2004
|
-
CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: CarouselComponent, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", transition: "transition" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] });
|
|
2066
|
+
CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: CarouselComponent, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] });
|
|
2005
2067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
2006
2068
|
type: Component,
|
|
2007
2069
|
args: [{ selector: 'c-carousel', template: '<ng-content></ng-content>', providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], styles: [":host{display:block}\n"] }]
|
|
@@ -2024,6 +2086,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
2024
2086
|
type: Input
|
|
2025
2087
|
}], transition: [{
|
|
2026
2088
|
type: Input
|
|
2089
|
+
}], wrap: [{
|
|
2090
|
+
type: Input
|
|
2027
2091
|
}], itemChange: [{
|
|
2028
2092
|
type: Output
|
|
2029
2093
|
}], hostClasses: [{
|
|
@@ -9405,5 +9469,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
9405
9469
|
* Generated bundle index. Do not edit.
|
|
9406
9470
|
*/
|
|
9407
9471
|
|
|
9408
|
-
export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
|
|
9472
|
+
export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
|
|
9409
9473
|
//# sourceMappingURL=coreui-angular.mjs.map
|