Merge pull request #15584 from abpframework/feat-card-component

Feat card component

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -26,8 +26,8 @@
     <h3>Let's improve your application!</h3>
     <p>Here are some links to help you get started:</p>
   </div>
-  <div class="card mt-4 mb-5">
+  <abp-card cardClass="mt-4 mb-5">
-    <div class="card-body">
+    <abp-card-body>
       <div class="row text-center justify-content-md-center">
         <ng-container
           *ngTemplateOutlet="
@@ -182,16 +182,15 @@
           "
         ></ng-container>
       </div>
-    </div>
+    </abp-card-body>
-  </div>
+  </abp-card>
 
   <div class="mt-5 my-3 text-center">
     <h3>Meet the ABP Commercial</h3>
     <p>A Complete Web Application Platform Built on the ABP Framework</p>
   </div>
-
+  <abp-card cardClass="mt-4 mb-5">
-  <div class="card mt-4 mb-5">
+    <abp-card-body>
-    <div class="card-body">
       <p class="px-lg-5 mx-lg-5 py-3 text-center">
         <a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based
         on the open source ABP framework. It provides pre-built application modules, rapid
@@ -271,8 +270,9 @@
           "
         ></ng-container>
       </div>
-    </div>
+    </abp-card-body>
-  </div>
+  </abp-card>
+
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"

npm/ng-packs/package.json

@@ -134,8 +134,8 @@
     "bootstrap-icons": "^1.10.3"
   },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx}": [
+    "**/*.{js,jsx,ts,tsx,html,css,scss}": [
       "npx prettier --write --config .prettierrc "
     ]
   }
-}
+}

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

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

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

@@ -0,0 +1,9 @@
+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.component.ts

@@ -0,0 +1,22 @@
+import { Component, ContentChild, Input } from '@angular/core';
+import { CardBodyComponent } from './card-body.component';
+import { CardTitleComponent } from './card-title.component';
+
+@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>
+  </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

@@ -0,0 +1,14 @@
+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';
+
+const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent];
+
+@NgModule({
+  declarations: [...declarationsWithExports],
+  imports: [CommonModule],
+  exports: [...declarationsWithExports],
+})
+export class CardModule {}

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

@@ -0,0 +1,4 @@
+export * from './card.module';
+export * from './card.component';
+export * from './card-body.component';
+export * from './card-title.component';

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

@@ -11,3 +11,4 @@ export * from './modal/modal.component';
 export * from './toast-container/toast-container.component';
 export * from './toast/toast.component';
 export * from './password/password.component';
+export * from './card/index';

npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

@@ -8,7 +8,7 @@ export class AbpVisibleDirective implements OnDestroy, OnInit {
   conditionSubscription: Subscription | undefined;
   isVisible: boolean | undefined;
 
-  @Input('abpVisible') set abpVisible(
+  @Input() set abpVisible(
     value: boolean | Promise<boolean> | Observable<boolean> | undefined | null,
   ) {
     this.condition$ = checkType(value);

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

@@ -36,8 +36,10 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 import { PasswordComponent } from './components/password/password.component';
+import { CardModule } from './components/card/card.module';
 import { AbpVisibleDirective } from './directives';
 
+
 const declarationsWithExports = [
   BreadcrumbComponent,
   BreadcrumbItemsComponent,
@@ -63,9 +65,16 @@ const declarationsWithExports = [
     NgxValidateCoreModule,
     NgbPaginationModule,
     EllipsisModule,
+    CardModule,
   ],
   declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
-  exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports],
+  exports: [
+    NgxDatatableModule,
+    EllipsisModule,
+    NgxValidateCoreModule,
+    ...declarationsWithExports,
+    CardModule,
+  ],
   providers: [DatePipe],
 })
 export class BaseThemeSharedModule {}