Merge pull request #61 from mledour/update_angular_9

Update angular 9

Author: mledour

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "10"
+  - "12"
 dist: trusty
 sudo: false
 
@@ -33,6 +33,9 @@ after_success:
   - cat coverage/lcov.info | coveralls
   - bash scripts/gh-pages.sh $TMPDIR/gh-pages $TRAVIS_BUILD_DIR/dist/angular-admin-lte-demo
 
+before_install:
+  - npm install -g yarn
+
 before_deploy:
   - cp README.md LICENSE dist/angular-admin-lte
   - cd dist/angular-admin-lte

angular.json

@@ -13,6 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/angular-admin-lte-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -38,6 +39,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -140,7 +147,8 @@
           },
           "configurations": {
             "production": {
-              "project": "library/angular-admin-lte/ng-package.prod.json"
+              "project": "library/angular-admin-lte/ng-package.prod.json",
+              "tsConfig": "library/angular-admin-lte/tsconfig.lib.prod.json"
             }
           }
         },
@@ -167,5 +175,8 @@
       }
     }
   },
-  "defaultProject": "angular-admin-lte-demo"
-}
+  "defaultProject": "angular-admin-lte-demo",
+  "cli": {
+    "packageManager": "yarn"
+  }
+}

src/browserslist browserslistsrc/browserslist renamed to browserslist

@@ -1,6 +1,6 @@
 {
   "name": "angular-admin-lte",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "homepage": "https://github.com/mledour/angular-admin-lte#README.MD",
   "author": {
     "name": "Mik@",

library/angular-admin-lte/package.json

@@ -8,7 +8,7 @@ <h4 class="box-title">
         </a>
       </h4>
     </div>
-    <div class="panel-collapse" [mkCollapseAnimation]="accordion.isCollapsed" (mkCollapseAnimation.start)="collapseStart($event, accordion)" (mkCollapseAnimation.done)="collapseDone($event, accordion)">
+    <div class="panel-collapse" [mkCollapseAnimation]="accordion.isCollapsed" (mkCollapseAnimation.start)="onCollapseStart($event, accordion)" (mkCollapseAnimation.done)="onCollapseDone($event, accordion)">
       <div [ngClass]="accordion.contentStyleClass" [mkFontColor]="accordion.contentColor">
         <ng-template [ngTemplateOutlet]="accordion.contentTemplateRef"></ng-template>
       </div>

library/angular-admin-lte/src/lib/accordion/accordion.component.html

@@ -35,7 +35,7 @@ import { Subscription } from 'rxjs';
   template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
 })
 export class AccordionHeaderComponent {
-  @ViewChild('templateRef') public templateRef: TemplateRef<any>;
+  @ViewChild('templateRef', { static: true }) public templateRef: TemplateRef<any>;
 }
 
 
@@ -47,7 +47,7 @@ export class AccordionHeaderComponent {
   template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
 })
 export class AccordionContentComponent {
-  @ViewChild('templateRef') public templateRef: TemplateRef<any>;
+  @ViewChild('templateRef', { static: true }) public templateRef: TemplateRef<any>;
 }
 
 
@@ -73,10 +73,10 @@ export class AccordionComponent implements OnInit {
   @Input() public headerColorHover: string;
   @Input() public headerStyleClass = 'box-header with-border';
 
-  @ContentChild(AccordionHeaderComponent) public accordionHeaderComponent: AccordionHeaderComponent;
-  @ContentChild(AccordionContentComponent) public accordionContentComponent: AccordionContentComponent;
+  @ContentChild(AccordionHeaderComponent, /* TODO: add static flag */ {}) public accordionHeaderComponent: AccordionHeaderComponent;
+  @ContentChild(AccordionContentComponent, /* TODO: add static flag */ {}) public accordionContentComponent: AccordionContentComponent;
 
-  @ViewChild('templateRef') public templateRef: TemplateRef<any>;
+  @ViewChild('templateRef', { static: true }) public templateRef: TemplateRef<any>;
 
   /**
    * @method ngOnInit
@@ -107,7 +107,7 @@ export class AccordionComponent implements OnInit {
 export class AccordionGroupComponent implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy {
   private activeIndex: any = [0];
   // @TODO change types for listeners to all files
-  private listeners: Array<Function> = [];
+  private listeners: Array<() => void> = [];
   // @TODO change types for subscriptions to all files
   private subscriptions: Array<Subscription> = [];
 
@@ -118,8 +118,8 @@ export class AccordionGroupComponent implements AfterContentInit, AfterViewInit,
   @Input() public isMultiple: boolean;
   @Input() public styleClass = 'box-group';
 
-  @Output() public onCollapseStart = new EventEmitter();
-  @Output() public onCollapseDone = new EventEmitter();
+  @Output() public collapseStart = new EventEmitter();
+  @Output() public collapseDone = new EventEmitter();
 
   @ContentChildren(AccordionComponent) public accordionComponents: QueryList<AccordionComponent>;
 
@@ -209,7 +209,7 @@ export class AccordionGroupComponent implements AfterContentInit, AfterViewInit,
   public toggleAccordion(event: Event, toggleIndex: number): void {
     event.preventDefault();
 
-    const indexOf = this.activeIndex['indexOf'](toggleIndex);
+    const indexOf = this.activeIndex.indexOf(toggleIndex);
     if (indexOf === -1) {
       if (this.isMultiple) {
         this.activeIndex.push(toggleIndex);
@@ -232,9 +232,9 @@ export class AccordionGroupComponent implements AfterContentInit, AfterViewInit,
    * @param event [description]
    * @param accordion [description]
    */
-  public collapseStart(event: AnimationEvent, accordion: AccordionComponent): void {
+  public onCollapseStart(event: AnimationEvent, accordion: AccordionComponent): void {
     accordion.isCollapsing = true;
-    this.onCollapseStart.emit({animationEvent: event, index: accordion.index});
+    this.collapseStart.emit({animationEvent: event, index: accordion.index});
   }
 
   /**
@@ -243,9 +243,9 @@ export class AccordionGroupComponent implements AfterContentInit, AfterViewInit,
    * @param event [description]
    * @param accordion [description]
    */
-  public collapseDone(event: AnimationEvent, accordion: AccordionComponent): void {
+  public onCollapseDone(event: AnimationEvent, accordion: AccordionComponent): void {
     accordion.isCollapsing = false;
-    this.onCollapseDone.emit({animationEvent: event, index: accordion.index});
+    this.collapseDone.emit({animationEvent: event, index: accordion.index});
   }
 
   /**

library/angular-admin-lte/src/lib/accordion/accordion.component.ts

@@ -1,4 +1,4 @@
-<div *ngIf="!removed" [mkCollapseAnimation]="remove" (mkCollapseAnimation.start)="collapseStart($event)" (mkCollapseAnimation.done)="collapseDone($event)">
+<div *ngIf="!removed" [mkCollapseAnimation]="remove" (mkCollapseAnimation.start)="onCollapseStart($event)" (mkCollapseAnimation.done)="onCollapseDone($event)">
   <div [mkColor]="backgroundColor" mkColorProperty="background-color" [mkColorPrefix]="type" [mkFontColor]="color" [ngClass]="[styleClass, dismissibleClass, type]">
     <button *ngIf="isDismissible" type="button" class="close" #removeButtonElement>&times;</button>
     <ng-content></ng-content>

library/angular-admin-lte/src/lib/alert/alert.component.html

@@ -53,8 +53,8 @@ export class AlertComponent implements AfterViewInit, OnDestroy {
   }
   @Input() public styleClass = '';
 
-  @Output() public onCollapseStart = new EventEmitter();
-  @Output() public onCollapseDone = new EventEmitter();
+  @Output() public collapseStart = new EventEmitter();
+  @Output() public collapseDone = new EventEmitter();
 
   @ViewChild('removeButtonElement') private removeButtonElement: ElementRef;
   @ViewChild('containerElementRef', { read: ViewContainerRef }) private containerElementRef: ViewContainerRef;
@@ -107,22 +107,22 @@ export class AlertComponent implements AfterViewInit, OnDestroy {
    * @method collapseStart
    * @param event [description]
    */
-  public collapseStart(event: AnimationEvent): void {
-    this.onCollapseStart.emit(event);
+  public onCollapseStart(event: AnimationEvent): void {
+    this.collapseStart.emit(event);
   }
 
   /**
    * [collapseDone description]
    * @method collapseDone
    * @param event [description]
    */
-  public collapseDone(event: AnimationEvent): void {
+  public onCollapseDone(event: AnimationEvent): void {
     if (event.toState === '1') {
       this.listeners = removeListeners(this.listeners);
       this.removed = true;
       this.viewContainerRef.clear();
       this.changeDetectorRef.detectChanges();
     }
-    this.onCollapseDone.emit(event);
+    this.collapseDone.emit(event);
   }
 }

library/angular-admin-lte/src/lib/alert/alert.component.ts

@@ -11,7 +11,7 @@ export class CollapseAnimationDirective implements OnInit, AfterContentInit, OnD
   private isCollapsed: boolean;
   private lastIsCollapsed: boolean;
   private transitioning: boolean;
-  private listener: Function;
+  private listener: () => void;
 
   @Input() public collapseAnimationDuration = 350;
   @Input() public collapseAnimationTiming: string;
@@ -28,7 +28,9 @@ export class CollapseAnimationDirective implements OnInit, AfterContentInit, OnD
     }
   }
 
+  // tslint:disable-next-line:no-output-rename
   @Output('mkCollapseAnimation.start') public startEventEmitter = new EventEmitter();
+  // tslint:disable-next-line:no-output-rename
   @Output('mkCollapseAnimation.done') public doneEventEmitter = new EventEmitter();
 
 
@@ -137,7 +139,7 @@ export class CollapseAnimationDirective implements OnInit, AfterContentInit, OnD
     const event: AnimationEvent = {
       element: this.elementRef.nativeElement,
       fromState: this.lastIsCollapsed === undefined ? 'void' : this.lastIsCollapsed ? '1' : '0',
-      phaseName: phaseName,
+      phaseName,
       toState: this.isCollapsed === undefined ? 'void' : this.isCollapsed ? '1' : '0',
       totalTime: this.collapseAnimationDuration,
       triggerName: 'mkCollapseAnimation'

library/angular-admin-lte/src/lib/animations/animations.directive.ts

@@ -27,9 +27,9 @@ export class BoxInfoComponent implements OnInit {
   @Input() public progressWidth: number;
   @Input() public styleClass = 'info-box';
 
-  @ContentChild(BoxInfoHeaderDirective) public boxInfoHeaderDirective: BoxInfoHeaderDirective;
-  @ContentChild(BoxInfoFooterDirective) public boxInfoFooterDirective: BoxInfoFooterDirective;
-  @ContentChild(BoxInfoContentDirective) public boxInfoContentDirective: BoxInfoContentDirective;
+  @ContentChild(BoxInfoHeaderDirective, /* TODO: add static flag */ {}) public boxInfoHeaderDirective: BoxInfoHeaderDirective;
+  @ContentChild(BoxInfoFooterDirective, /* TODO: add static flag */ {}) public boxInfoFooterDirective: BoxInfoFooterDirective;
+  @ContentChild(BoxInfoContentDirective, /* TODO: add static flag */ {}) public boxInfoContentDirective: BoxInfoContentDirective;
 
   /**
    * @method ngOnInit