Merge pull request #15836 from abpframework/add-card-component-features

support card component all features

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts

@@ -1,9 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-body',
-  template: `<div class="card-body">
-    <ng-content></ng-content>
-  </div>`,
+  template: `
+    <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle" >
+      <ng-content></ng-content>
+    </div>`,
+  host: {
+    class: 'card-body',
+  }
 })
-export class CardBodyComponent {}
+export class CardBodyComponent {
+  @Input() cardBodyClass: string;
+  @Input() cardBodyStyle: string;
+}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-footer',
+  template: `
+    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass" >
+      <ng-content ></ng-content>
+    </div>
+  `,
+  styles: [],
+  host: {
+    class: 'card-footer',
+  }
+})
+export class CardFooterComponent {
+  @Input() cardFooterStyle: string;
+  @Input() cardFooterClass: string;
+
+}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-header',
+  template: `
+    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+      <ng-content ></ng-content>
+    </div>
+  `,
+  styles: [],
+  host: {
+    class: 'card-header',
+  }
+})
+export class CardHeaderComponent {
+  @Input() cardHeaderClass: string;
+  @Input() cardHeaderStyle: string;
+}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
+  host: {
+    class: 'card-header',
+  },
+})
+export class CardHeader {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
+  host: {
+    class: 'card-img-top',
+  },
+})
+export class CardImgTop {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
+  host: {
+    class: 'card-subtitle',
+  },
+})
+export class CardSubtitle {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'abp-card-title',
-  template: `<div class="card-title">
-    <ng-content></ng-content>
-  </div>`,
-})
-export class CardTitleComponent {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
+  host: {
+    class: 'card-title',
+  },
+})
+export class CardTitle {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts

@@ -1,22 +1,14 @@
-import { Component, ContentChild, Input } from '@angular/core';
-import { CardBodyComponent } from './card-body.component';
-import { CardTitleComponent } from './card-title.component';
+import { Component, Directive, Input } from '@angular/core';
+
 
 @Component({
   selector: 'abp-card',
   template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
-    <ng-content *ngIf="cardTitleTemplate" select="abp-card-title"></ng-content>
-    <ng-content *ngIf="cardBodyTemplate" select="abp-card-body"></ng-content>
+    <ng-content></ng-content>
   </div>`,
 })
 export class CardComponent {
   @Input() cardClass: string;
 
   @Input() cardStyle: string;
-
-  @ContentChild(CardBodyComponent)
-  cardBodyTemplate?: CardBodyComponent;
-
-  @ContentChild(CardTitleComponent)
-  cardTitleTemplate?: CardTitleComponent;
 }

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts

@@ -1,14 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { CardBodyComponent } from './card-body.component';
-import { CardTitleComponent } from './card-title.component';
 import { CardComponent } from './card.component';
+import { CardHeaderComponent } from './card-header.component';
+import { CardFooterComponent } from './card-footer.component';
+import { CardTitle } from './card-title.directive';
+import { CardSubtitle } from './card-subtitle.directive';
+import { CardImgTop } from './card-img-top.directive';
+import { CardHeader } from './card-header.directive';
 
-const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent];
+const declarationsWithExports = [
+  CardComponent,
+  CardBodyComponent,
+  CardHeaderComponent,
+  CardFooterComponent,
+  CardTitle,
+  CardSubtitle,
+  CardImgTop,
+  CardHeader,
+];
 
 @NgModule({
   declarations: [...declarationsWithExports],
   imports: [CommonModule],
   exports: [...declarationsWithExports],
 })
-export class CardModule {}
+export class CardModule { }

npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts

@@ -1,4 +1,9 @@
 export * from './card.module';
 export * from './card.component';
 export * from './card-body.component';
-export * from './card-title.component';
+export * from './card-footer.component';
+export * from './card-header.component';
+export * from './card-title.directive';
+export * from './card-subtitle.directive';
+export * from './card-img-top.directive';
+export * from './card-header.directive';

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -76,8 +76,8 @@ const declarationsWithExports = [
     NgxDatatableModule,
     EllipsisModule,
     NgxValidateCoreModule,
-    ...declarationsWithExports,
     CardModule,
+    ...declarationsWithExports
   ],
   providers: [DatePipe],
 })