first commit

src/app/content/partials/general/card/card.component.css

@@ -0,0 +1 @@
+

src/app/content/partials/general/card/card.component.html

@@ -0,0 +1,31 @@
+<!--begin::Card-->
+<div mCard #mCard [options]="options" class="card">
+  <div class="card-header" #mCardHeader>
+    <h4 class="card-title" #mCardHeaderTitle>
+      <ng-content select="[mCardHeaderTitle]"></ng-content>
+    </h4>
+    <a class="heading-elements-toggle" (click)="toggleMobileMenu()"><i class="la la-ellipsis-v font-medium-3"></i></a>
+    <div class="heading-elements" #mCardHeaderTools>
+      <ng-content select="[mCardHeaderTools]"></ng-content>
+      <ul class="list-inline mb-0">
+        <li *ngIf="options && options.minimize"><a data-action="collapse"><i class="feather ft-minus"
+              (click)="toggleCollpase($event)"></i></a></li>
+        <li *ngIf="options && options.reload"><a data-action="reload"><i class="feather ft-rotate-cw"
+              (click)="reload()"></i></a></li>
+        <li *ngIf="options && options.expand"><a data-action="expand"><i class="feather ft-maximize"
+              (click)="toggleExpand($event)"></i></a></li>
+        <li *ngIf="options && options.close"><a data-action="close"><i class="feather ft-x" (click)="close($event)"></i></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="card-content collpase show" #mCardContent>
+    <ng-content select="[mCardContent]"></ng-content>
+    <div class="card-body" #mCardBody>
+      <ng-content select="[mCardBody]"></ng-content>
+    </div>
+  </div>
+  <div class="card-footer" #mCardFooter>
+    <ng-content select="[mCardFooter]"></ng-content>
+  </div>
+</div>

src/app/content/partials/general/card/card.component.ts

@@ -0,0 +1,134 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit,
+  ViewChild, EventEmitter, Output } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { AppConstants } from 'src/app/_helpers/app.constants';
+
+@Component({
+  selector: 'm-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CardComponent implements AfterViewInit {
+  @Input() loading$: Observable<boolean>;
+  @Input() options: any;
+  @Output() reloadFunction: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('mCard', { static: true }) elCard: ElementRef;
+  @ViewChild('mCardHeader', { static: true }) elHeader: ElementRef;
+  @ViewChild('mCardHeaderTitle', { static: true }) elHeaderTitle: ElementRef;
+  @ViewChild('mCardContent', { static: true }) elContent: ElementRef;
+  @ViewChild('mCardBody', { static: true }) elBody: ElementRef;
+  @ViewChild('mCardFooter', { static: true }) elFooter: ElementRef;
+  @ViewChild('mCardHeaderTools', { static: true }) elHeaderTools: ElementRef;
+
+  constructor() {
+  }
+
+  ngAfterViewInit(): void {
+
+    if (this.elHeader && this.elHeader.nativeElement.children.length === 0) {
+      this.elHeader.nativeElement.style.display = 'none';
+    } else if (this.options && this.options['headerClass']) {
+      this.options['headerClass'].forEach(element => {
+        this.elHeader.nativeElement.classList.add(element);
+      });
+    }
+
+    if (this.elHeaderTitle && (this.elHeaderTitle.nativeElement.children.length === 0
+      && this.elHeaderTitle.nativeElement.innerText.trim().length === 0)) {
+      this.elHeader.nativeElement.style.display = 'none';
+    }
+
+    if (this.elFooter && this.elFooter.nativeElement.children.length === 0) {
+      this.elFooter.nativeElement.style.display = 'none';
+    }
+    if (this.elHeaderTools && this.elHeaderTools.nativeElement.children.length === 0) {
+      this.elFooter.nativeElement.style.display = 'none';
+    }
+
+    if (this.elContent && this.elContent.nativeElement.children.length === 0) {
+      this.elContent.nativeElement.style.display = 'none';
+    } else if (this.options && this.options['contentClass']) {
+      this.options['contentClass'].forEach(element => {
+        this.elContent.nativeElement.classList.add(element);
+      });
+    }
+    if (this.elBody && this.elBody.nativeElement.children.length === 0) {
+      this.elBody.nativeElement.style.display = 'none';
+    } else if (this.options && this.options['bodyClass']) {
+      this.options['bodyClass'].forEach(element => {
+        this.elBody.nativeElement.classList.add(element);
+      });
+    }
+    if (this.options && this.options['cardClass']) {
+      this.options['cardClass'].forEach(element => {
+        this.elCard.nativeElement.classList.add(element);
+      });
+    }
+  }
+
+  toggleCollpase(event) {
+    let target = event.target || event.srcElement || event.currentTarget;
+    if (this.elContent.nativeElement.classList.contains('show')) {
+      this.elContent.nativeElement.classList.add('collapse');
+      this.elContent.nativeElement.classList.remove('show');
+      if (!target.classList.contains('ft-plus') && !target.classList.contains('ft-minus')) {
+        target = event.target.querySelector('i');
+      }
+      target.classList.remove('ft-minus');
+      target.classList.add('ft-plus');
+    } else {
+      this.elContent.nativeElement.classList.add('show');
+      if (!target.classList.contains('ft-plus') && !target.classList.contains('ft-minus')) {
+        target = event.target.querySelector('i');
+      }
+      this.elContent.nativeElement.classList.remove('collapse');
+      target.classList.remove('ft-plus');
+      target.classList.add('ft-minus');
+    }
+    this.toggleMobileMenu();
+  }
+
+  reload() {
+    this.reloadFunction.emit(this.options);
+  }
+
+  close() {
+    this.elCard.nativeElement.classList.add('hidden');
+    this.elCard.nativeElement.classList.remove('card-fullscreen');
+    this.toggleMobileMenu();
+  }
+
+  toggleExpand(event) {
+    let target = event.target || event.srcElement || event.currentTarget;
+    if (this.elCard.nativeElement.classList.contains('card-fullscreen')) {
+      this.elCard.nativeElement.classList.remove('card-fullscreen');
+      if (!target.classList.contains('ft-maximize') && !target.classList.contains('ft-minimize')) {
+        target = event.target.querySelector('i');
+      }
+      target.classList.add('ft-maximize');
+      target.classList.remove('ft-minimize');
+    } else {
+      this.elCard.nativeElement.classList.add('card-fullscreen');
+      if (!target.classList.contains('ft-maximize') && !target.classList.contains('ft-minimize')) {
+        target = event.target.querySelector('i');
+      }
+      target.classList.remove('ft-maximize');
+      target.classList.add('ft-minimize');
+    }
+    this.toggleMobileMenu();
+  }
+
+  toggleMobileMenu() {
+    if (this.elHeaderTools.nativeElement.classList.contains('visible')) {
+      this.elHeaderTools.nativeElement.classList.remove('visible');
+    } else {
+      this.elHeaderTools.nativeElement.classList.add('visible');
+    }
+    // fire resize event for graphs
+    setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
+  }
+
+}

src/app/content/partials/general/card/card.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchHeightModule } from '../../../partials/general/match-height/match-height.module';
+import { CardComponent } from './card.component';
+import { CardDirective } from 'src/app/_directives/card.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+     MatchHeightModule
+    ],
+  declarations: [CardComponent, CardDirective],
+  exports: [CardComponent]
+})
+export class CardModule { }

src/app/content/partials/general/match-height/match-height.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchHeightDirective } from 'src/app/_directives/match-height.directive';
+
+@NgModule({
+  declarations: [MatchHeightDirective],
+  imports: [
+    CommonModule,
+  ],
+  exports: [MatchHeightDirective]
+})
+export class MatchHeightModule { }

src/app/content/partials/partials.module.ts

@@ -0,0 +1,21 @@
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CardModule } from './general/card/card.module';
+
+
+@NgModule({
+  declarations: [
+
+  ],
+  exports: [
+    CardModule
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    NgbModule
+  ]
+})
+export class PartialsModule {}