Merge branch 'v4' into v4-feat-placeholder

Author: xidedix

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "coreui-angular-dev",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-alpha.13",
   "description": "CoreUI Components Library for Angular",
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
@@ -39,7 +39,7 @@
     "@coreui/chartjs": "^3.0.0",
     "@coreui/icons-angular": "^3.0.0-alpha.4",
     "@popperjs/core": "^2.11.0",
-    "chart.js": "~3.6.0",
+    "chart.js": "~3.7.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-alpha.13",
   "description": "CoreUI for Angular UI components library",
   "license": "MIT",
   "homepage": "https://coreui.io/angular",

projects/coreui-angular/package.json

@@ -1,16 +1,16 @@
 <ng-container>
   <div class="accordion-header">
-    <ng-container *ngTemplateOutlet="templates?.accordionHeaderTemplate || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
+    <ng-container *ngTemplateOutlet="templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
   </div>
-  <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="open" [id]="contentId">
-    <ng-container *ngTemplateOutlet="templates?.accordionBodyTemplate || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
+  <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="visible" [id]="contentId">
+    <ng-container *ngTemplateOutlet="templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
   </div>
 </ng-container>
 
 <ng-template #defaultAccordionHeaderTemplate>
-  <button cAccordionButton [collapsed]="!open" [attr.aria-controls]="contentId" (click)="toggleItem()">
+  <button cAccordionButton [collapsed]="!visible" [attr.aria-controls]="contentId" (click)="toggleItem()">
     <ng-container
-      *ngTemplateOutlet="templates?.accordionHeader || defaultAccordionHeaderContentTemplate; context: itemContext">
+      *ngTemplateOutlet="templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext">
     </ng-container>
   </button>
 </ng-template>
@@ -22,7 +22,7 @@
 <ng-template #defaultAccordionBodyTemplate>
   <div class="accordion-body">
     <ng-container
-      *ngTemplateOutlet="templates?.accordionBody || defaultAccordionBodyContentTemplate; context: itemContext">
+      *ngTemplateOutlet="templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext">
     </ng-container>
   </div>
 </ng-template>

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.html

@@ -10,6 +10,7 @@ import {
 
 import { AccordionService } from '../accordion.service';
 import { TemplateIdDirective } from '../../shared';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 let nextId = 0;
 
@@ -20,15 +21,30 @@ let nextId = 0;
   exportAs: 'cAccordionItem',
 })
 export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentInit {
+
+  static ngAcceptInputType_visible: BooleanInput;
+
   /**
    * Toggle an accordion item programmatically
    * @type boolean
    * @default false
    */
-  @Input() visible: boolean = false;
-  @Input() set open(value: boolean) {
+  @Input()
+  set visible(value: boolean){
+    this._visible = coerceBooleanProperty(value);
+  }
+  get visible() {
+    return this._visible;
+  }
+  private _visible: boolean = false;
+
+  @Input()
+  set open(value: boolean) {
     console.warn('c-accordion-item "open" prop is deprecated, use "visible"  prop instead.')
-    this.visible = value ?? false;
+    this.visible = value || this.visible;
+  }
+  get open() {
+    return this.visible;
   }
 
   @HostBinding('class')
@@ -56,7 +72,7 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
   }
 
   toggleItem(): void {
-    this.accordionService.toggelItem(this);
+    this.accordionService.toggleItem(this);
   }
 
   ngAfterContentInit(): void {

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -20,7 +20,7 @@ export class AccordionService {
     }
   }
 
-  toggelItem(item: AccordionItemComponent): void {
+  toggleItem(item: AccordionItemComponent): void {
     item.visible = !item.visible;
     this.closeOtherItems(item);
   }

projects/coreui-angular/src/lib/accordion/accordion.service.ts

@@ -83,6 +83,14 @@ export class AlertComponent implements AfterContentInit {
   }
   private _fade = false;
 
+  /**
+   * Default role for alert. [docs]
+   * @type string
+   * @default 'alert'
+   */
+  @HostBinding('attr.role')
+  @Input() role = 'alert';
+
   /**
    * Set the alert variant to a solid.
    * @type string

projects/coreui-angular/src/lib/alert/alert.component.ts

@@ -8,12 +8,11 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 @Component({
   selector: 'c-carousel-item',
   templateUrl: './carousel-item.component.html',
-  styleUrls: ['./carousel-item.component.scss'],
+  styleUrls: ['./carousel-item.component.scss']
 })
 export class CarouselItemComponent implements OnDestroy, AfterViewInit {
 
   static ngAcceptInputType_active: BooleanInput;
-  private _active = false;
 
   index?: number;
   private carouselIndexSubscription?: Subscription;
@@ -29,12 +28,20 @@ export class CarouselItemComponent implements OnDestroy, AfterViewInit {
   get active(): boolean {
     return this._active;
   }
+  private _active = false;
+
+  /**
+   * Time delay before cycling to next item. If -1, uses carousel interval value.
+   * @type number
+   * @default -1
+   */
+  @Input() interval: number = -1;
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'carousel-item': true,
-      active: this.active,
+      active: this.active
     };
   }
 

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts

@@ -24,7 +24,13 @@ export class CarouselState {
     const nextState = { ...this._state, ...state };
     this._state = nextState;
     if (prevState.activeItemIndex !== nextState.activeItemIndex) {
-      this.carouselService.setIndex({active: nextState.activeItemIndex});
+      const activeItemIndex = this.state.activeItemIndex || 0;
+      const itemInterval = this.state.items && this.state.items[activeItemIndex]?.interval || -1;
+      this.carouselService.setIndex({
+        active: nextState.activeItemIndex,
+        interval: itemInterval,
+        lastItemIndex: (nextState.items?.length ?? 0) - 1
+      });
     }
   }
 
@@ -35,7 +41,7 @@ export class CarouselState {
         item.index = i;
       });
       this.state = {
-        items: itemsArray,
+        items: itemsArray
       };
     } else {
       this.reset();
@@ -46,7 +52,7 @@ export class CarouselState {
     this.carouselService.setIndex(nextIndex);
   }
 
-  direction(direction: 'next' | 'prev' = 'next' ): number {
+  direction(direction: 'next' | 'prev' = 'next'): number {
     this.state = { direction };
     const { activeItemIndex = -1, items } = this.state;
     const itemsCount = items?.length ?? 0;

projects/coreui-angular/src/lib/carousel/carousel-state.ts

@@ -3,6 +3,8 @@ import { BehaviorSubject } from 'rxjs';
 
 export interface ICarouselIndex {
   active?: number;
+  interval?: number;
+  lastItemIndex?: number;
 }
 
 @Injectable()

projects/coreui-angular/src/lib/carousel/carousel.service.ts

@@ -1,9 +1,9 @@
 import {
   AfterContentInit,
   Component,
+  ElementRef,
   EventEmitter,
   HostBinding,
-  HostListener,
   Inject,
   Input,
   OnDestroy,
@@ -12,15 +12,19 @@ import {
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
+import { IntersectionService } from '../../services/intersection.service';
+import { IListenersConfig, ListenersService } from '../../services/listeners.service';
+
 import { CarouselState } from '../carousel-state';
 import { CarouselService } from '../carousel.service';
 import { CarouselConfig } from '../carousel.config';
+import { Triggers } from '../../coreui.types';
 
 @Component({
   selector: 'c-carousel',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content></ng-content>',
   styleUrls: ['./carousel.component.scss'],
-  providers: [CarouselService, CarouselState, CarouselConfig]
+  providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService]
 })
 export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   /**
@@ -46,14 +50,26 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   /**
    * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
    * @type number
+   * @default 0
    */
   @Input() interval = 0;
+  /**
+   * Sets which event handlers you’d like provided to your pause prop. You can specify one trigger or an array of them.
+   * @type {'hover' | 'focus' | 'click'}
+   */
+  @Input() pause: Triggers | Triggers[] | false = 'hover';
   /**
    * Set type of the transition.
    * @type {'slide' | 'crossfade'}
    * @default 'slide'
    */
   @Input() transition: 'slide' | 'crossfade' = 'slide';
+  /**
+   * Set whether the carousel should cycle continuously or have hard stops.
+   * @type boolean
+   * @default true
+   */
+  @Input() wrap = true;
   /**
    * Event emitted on carousel item change. [docs]
    * @type number
@@ -72,23 +88,16 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
 
   private carouselIndexSubscription?: Subscription;
   private timerId!: any;
-
-  @HostListener('mouseenter', ['$event'])
-  @HostListener('mousedown', ['$event'])
-  public onMouseenter($event: MouseEvent): void {
-    this.resetTimer();
-  }
-
-  @HostListener('mouseleave', ['$event'])
-  @HostListener('mouseup', ['$event'])
-  public onMouseleave($event: MouseEvent): void {
-    this.setTimer();
-  }
+  private intersectingSubscription?: Subscription;
+  private activeItemInterval = 0;
 
   constructor(
     @Inject(CarouselConfig) private config: CarouselConfig,
+    private hostElement: ElementRef,
     private carouselService: CarouselService,
-    private carouselState: CarouselState
+    private carouselState: CarouselState,
+    private intersectionService: IntersectionService,
+    private listenersService: ListenersService
   ) {
     Object.assign(this, config);
   }
@@ -98,21 +107,52 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   }
 
   ngOnDestroy(): void {
+    this.clearListeners();
     this.carouselStateSubscribe(false);
+    this.intersectionServiceSubscribe(false);
   }
 
   ngAfterContentInit(): void {
+    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionServiceSubscribe();
     this.carouselState.state = { activeItemIndex: this.activeIndex, animate: this.animate };
-    this.setTimer();
+    this.setListeners();
   }
 
+  private setListeners(): void {
+    const config: IListenersConfig = {
+      hostElement: this.hostElement,
+      trigger: this.pause || [],
+      callbackOff: () => {
+        this.setTimer();
+      },
+      callbackOn: () => {
+        this.resetTimer();
+      }
+    };
+    this.listenersService.setListeners(config);
+  }
+
+  private clearListeners(): void {
+    this.listenersService.clearListeners();
+  }
+
+  set visible(value) {
+    this._visible = value;
+  }
+  get visible() {
+    return this._visible;
+  }
+  private _visible: boolean = true;
+
   setTimer(): void {
+    const interval = this.activeItemInterval || 0;
     this.resetTimer();
-    if (this.interval > 0) {
+    if (interval > 0) {
       this.timerId = setTimeout(() => {
         const nextIndex = this.carouselState.direction(this.direction);
         this.carouselState.state = { activeItemIndex: nextIndex };
-      }, this.interval);
+      }, interval);
     }
   }
 
@@ -122,13 +162,27 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
 
   private carouselStateSubscribe(subscribe: boolean = true): void {
     if (subscribe) {
-      this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextIndex) => {
-        if ('active' in nextIndex) {
-          this.setTimer();
+      this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextItem) => {
+        if ('active' in nextItem) {
+          this.itemChange.emit(nextItem.active);
         }
+        this.activeItemInterval = typeof nextItem.interval === 'number' && nextItem.interval > -1 ? nextItem.interval : this.interval;
+        const isLastItem = ((nextItem.active === nextItem.lastItemIndex) && this.direction === 'next') || ((nextItem.active === 0) && this.direction === 'prev');
+        !this.wrap && isLastItem ? this.resetTimer() : this.setTimer();
       });
     } else {
       this.carouselIndexSubscription?.unsubscribe();
     }
   }
+
+  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+    if (subscribe) {
+      this.intersectingSubscription = this.intersectionService.intersecting$.subscribe(isIntersecting => {
+        this.visible = isIntersecting;
+        isIntersecting ? this.setTimer() : this.resetTimer();
+      });
+    } else {
+      this.intersectingSubscription?.unsubscribe();
+    }
+  }
 }