Merge branch 'main' into main

Author: joelmuskwe

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "coreui-angular-dev",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "CoreUI Components Library for Angular",
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
@@ -35,48 +35,48 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
-    "@angular/cdk": "^14.2.0",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/localize": "^14.2.0",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
+    "@angular/animations": "^14.2.4",
+    "@angular/cdk": "^14.2.3",
+    "@angular/common": "^14.2.4",
+    "@angular/compiler": "^14.2.4",
+    "@angular/core": "^14.2.4",
+    "@angular/forms": "^14.2.4",
+    "@angular/localize": "^14.2.4",
+    "@angular/platform-browser": "^14.2.4",
+    "@angular/platform-browser-dynamic": "^14.2.4",
+    "@angular/router": "^14.2.4",
     "@coreui/chartjs": "^3.0.0",
     "@popperjs/core": "~2.11.5",
     "chart.js": "^3.9.1",
+    "lodash-es": "^4.17.21",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.1",
-    "@angular-eslint/builder": "^14.0.3",
-    "@angular-eslint/eslint-plugin": "^14.0.3",
-    "@angular-eslint/eslint-plugin-template": "^14.0.3",
-    "@angular-eslint/schematics": "^14.0.3",
-    "@angular-eslint/template-parser": "^14.0.3",
-    "@angular/cli": "^14.2.1",
-    "@angular/compiler-cli": "^14.2.0",
-    "@angular/language-service": "^14.2.0",
+    "@angular-devkit/build-angular": "^14.2.4",
+    "@angular-eslint/builder": "^14.1.2",
+    "@angular-eslint/eslint-plugin": "^14.1.2",
+    "@angular-eslint/eslint-plugin-template": "^14.1.2",
+    "@angular-eslint/schematics": "^14.1.2",
+    "@angular-eslint/template-parser": "^14.1.2",
+    "@angular/cli": "^14.2.4",
+    "@angular/compiler-cli": "^14.2.4",
+    "@angular/language-service": "^14.2.4",
     "@coreui/icons": "^2.1.0",
     "@types/jasmine": "~4.3.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.11.56",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "eslint": "~8.22.0",
-    "jasmine-core": "^4.3.0",
-    "karma": "^6.4.0",
+    "@types/node": "^16.11.62",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "eslint": "~8.24.0",
+    "jasmine-core": "^4.4.0",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "lodash-es": "^4.17.21",
-    "ng-packagr": "^14.2.0",
+    "ng-packagr": "^14.2.1",
     "prettier": "^2.7.1",
     "typescript": "~4.7.2"
   },
@@ -107,4 +107,4 @@
     "node": "^14.15.0 || >=16.10.0",
     "npm": ">=6"
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-chartjs",
-  "version": "4.2.0",
+  "version": "4.2.4",
   "description": "Angular wrapper component for Chart.js",
   "copyright": "Copyright 2022 creativeLabs Łukasz Holeczek",
   "license": "MIT",

projects/coreui-angular-chartjs/package.json

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { ChartjsComponent } from './chartjs.component';
 import { Chart, registerables } from 'chart.js';
@@ -42,30 +42,33 @@ describe('ChartjsComponent', () => {
     component.type = 'line';
   });
 
-  it('chart should create', () => {
+  it('chart should create', fakeAsync(() => {
     fixture.detectChanges();
+    tick();
     expect(component).toBeTruthy();
     expect(component.chart).toBeDefined();
-  });
+  }));
 
-  it('chart should receive data', () => {
+  it('chart should receive data', fakeAsync(() => {
     component.data = { ...data };
     fixture.detectChanges();
+    tick();
     expect(component.chart?.config.data.labels?.length).toBe(7);
     expect(component.chart?.config.data.labels).toEqual(labels);
     expect(component.chart?.config.data.datasets[0]?.data.length).toBe(7);
-  });
+  }));
 
-  it('chart to Base64Image', () => {
+  it('chart to Base64Image', fakeAsync(() => {
     component.data = { ...data };
     fixture.detectChanges();
+    tick();
     const image = component.chartToBase64Image();
     expect(image).toBeDefined();
     expect(typeof image).toBe('string');
     expect(image).toContain('data:image/png;base64,');
-  });
+  }));
 
-  it('chart should update on data change', () => {
+  it('chart should update on data change', fakeAsync(() => {
     component.data = {
       ...data,
       labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
@@ -75,7 +78,8 @@ describe('ChartjsComponent', () => {
       ]
     };
     fixture.detectChanges();
-    expect(component.chart.config?.data.labels?.length).toBe(5);
-    expect(component.chart.config?.data.datasets[1]?.data.length).toBe(5);
-  });
+    tick();
+    expect(component.chart?.config?.data.labels?.length).toBe(5);
+    expect(component.chart?.config?.data.datasets[1]?.data.length).toBe(5);
+  }));
 });

projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts

@@ -143,8 +143,8 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
     this.ngZone.runOutsideAngular(() => {
       const config = this.chartConfig();
       if (config) {
-        this.chart = new Chart(ctx, config);
         setTimeout(() => {
+          this.chart = new Chart(ctx, config);
           this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
         });
       }

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

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

projects/coreui-angular/package.json

@@ -141,7 +141,7 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
    * Sets a specified  direction and ___location of the dropdown menu.
    * @type 'dropup' | 'dropend' | 'dropstart'
    */
-  @Input() direction?: 'dropup' | 'dropend' | 'dropstart';
+  @Input() direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
 
   /**
    * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
@@ -186,6 +186,14 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
         placement = 'left-start';
         break;
       }
+      case 'center': {
+        placement = 'bottom';
+        break;
+      }
+      case 'dropup-center': {
+        placement = 'top';
+        break;
+      }
     }
     if (this.alignment === 'end') {
       placement = 'bottom-end';
@@ -250,9 +258,7 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
         (this.variant === 'dropdown' || this.variant === 'nav-item') &&
         !this.direction,
       [`${this.direction}`]: !!this.direction,
-      'btn-group': this.variant === 'btn-group',
-      'nav-item': this.variant === 'nav-item',
-      'input-group': this.variant === 'input-group',
+      [`${this.variant}`]: !!this.variant,
       show: this.visible
     };
   }

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

@@ -37,7 +37,7 @@ import { ModalContentComponent } from '../modal-content/modal-content.component'
           display: 'none'
         })
       ),
-      transition('visible <=> *', [animate('300ms')],)
+      transition('visible <=> *', [animate('300ms')])
     ])
   ],
   templateUrl: './modal.component.html',
@@ -50,7 +50,7 @@ export class ModalComponent implements OnInit, OnDestroy {
   static ngAcceptInputType_visible: BooleanInput;
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private modalService: ModalService,
@@ -111,9 +111,11 @@ export class ModalComponent implements OnInit, OnDestroy {
   set scrollable(value: boolean) {
     this._scrollable = coerceBooleanProperty(value);
   }
+
   get scrollable(): boolean {
     return this._scrollable;
   }
+
   private _scrollable = false;
 
   /**
@@ -123,35 +125,36 @@ export class ModalComponent implements OnInit, OnDestroy {
   @Input()
   set visible(value: boolean) {
     const newValue = coerceBooleanProperty(value);
-    if(this._visible !== newValue) {
+    if (this._visible !== newValue) {
       this._visible = newValue;
       this.setBackdrop(this.backdrop !== false && newValue);
       this.setBodyStyles(newValue);
       this.visibleChange.emit(newValue);
     }
   }
+
   get visible(): boolean {
     return this._visible;
   }
+
   private _visible!: boolean;
 
   /**
    * Event triggered on modal dismiss.
    */
   @Output() visibleChange = new EventEmitter<boolean>();
 
-  @ViewChild(ModalContentComponent, {read: ElementRef}) modalContent!: ElementRef;
+  @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
   private activeBackdrop!: any;
   private stateToggleSubscription!: Subscription;
   private inBoundingClientRect!: boolean;
 
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
       modal: true,
       fade: this.transition,
-      show: this.show,
+      show: this.show
     };
   }
 
@@ -170,14 +173,16 @@ export class ModalComponent implements OnInit, OnDestroy {
     return this.visible ? 'visible' : 'hidden';
   }
 
-  private _show = true;
   get show(): boolean {
     return this.visible && this._show;
   }
+
   set show(value: boolean) {
     this._show = value;
   }
 
+  private _show = true;
+
   private get scrollbarWidth() {
     // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
     const documentWidth = this.document.documentElement.clientWidth;
@@ -187,28 +192,21 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   @HostListener('@showHide.start', ['$event'])
   animateStart(event: AnimationEvent) {
-    this.renderer.setStyle(this.hostElement.nativeElement, 'overflow-y', 'hidden');
-    this.show = this.visible;
+    const scrollbarWidth = this.scrollbarWidth;
+    if (event.toState === 'visible') {
+      this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+      this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+    }
   }
 
   @HostListener('@showHide.done', ['$event'])
   animateDone(event: AnimationEvent) {
-    const scrollbarWidth = this.scrollbarWidth;
     setTimeout(() => {
-      if (event.toState === 'visible') {
-        this.inBoundingClientRect = this.modalContent?.nativeElement?.getBoundingClientRect().height <= this.document?.documentElement.clientHeight;
-        if (!this.inBoundingClientRect) {
-          this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-          this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
-        } else {
-          this.renderer.removeStyle(this.document.body, 'overflow-y');
-          this.renderer.removeStyle(this.document.body, 'padding-right');
-        }
-        if (this.fullscreen === true) {
-          this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-        }
-        this.renderer.removeStyle(this.hostElement.nativeElement, 'overflow-y');
+      if (event.toState === 'hidden') {
+        this.renderer.removeStyle(this.document.body, 'overflow');
+        this.renderer.removeStyle(this.document.body, 'padding-right');
       }
+      this.show = this.visible;
     });
   }
 
@@ -218,7 +216,7 @@ export class ModalComponent implements OnInit, OnDestroy {
       if (this.backdrop === 'static') {
         this.setStaticBackdrop();
       } else {
-        this.modalService.toggle({show: false, modal: this});
+        this.modalService.toggle({ show: false, modal: this });
       }
     }
   }
@@ -241,15 +239,15 @@ export class ModalComponent implements OnInit, OnDestroy {
       this.setStaticBackdrop();
       return;
     }
-    this.modalService.toggle({show: false, modal: this});
+    this.modalService.toggle({ show: false, modal: this });
   }
 
   ngOnInit(): void {
     this.stateToggleSubscribe();
   }
 
   ngOnDestroy(): void {
-    this.modalService.toggle({show: false, modal: this});
+    this.modalService.toggle({ show: false, modal: this });
     this.stateToggleSubscribe(false);
   }
 
@@ -283,16 +281,11 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   private setBodyStyles(open: boolean): void {
     if (open) {
-      if (this.fullscreen === true) {
-        this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-      }
       if (this.backdrop === true) {
         this.renderer.addClass(this.document.body, 'modal-open');
       }
     } else {
       this.renderer.removeClass(this.document.body, 'modal-open');
-      this.renderer.removeStyle(this.document.body, 'overflow-y');
-      this.renderer.removeStyle(this.document.body, 'padding-right');
     }
   }
 
@@ -303,7 +296,7 @@ export class ModalComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.renderer.removeClass(this.hostElement.nativeElement, 'modal-static');
         this.renderer.removeStyle(this.hostElement.nativeElement, 'overflow-y');
-      }, 400);
+      }, 300);
     }
   }
 }