ng-cards-ap
Version:
I have designed this card package to help people like me searching for a card template to add in their Angular project. This card design consists of various dynamic things which will help you to create different types of card: With Image, without image et
109 lines (102 loc) • 6.06 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgCardService {
constructor() { }
}
NgCardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgCardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgCardComponent {
constructor() {
this.imageSrc = undefined;
}
ngOnInit() { }
}
NgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgCardComponent, selector: "ng-card-ap", inputs: { title: ["Title", "title"], subTitle: ["Subtitle", "subTitle"], description: ["Description", "description"], border: ["Border", "border"], imageSrc: ["Image", "imageSrc"], hoverable: ["Hoverable", "hoverable"] }, ngImport: i0, template: `
<div
class="ap-card-container"
[style.borderRadius]="border ? '8px' : '0px'"
[ngClass]="hoverable ? 'ap-card-container-hover' : ''"
>
<div class="ap-card-title">
{{ title }}
</div>
<div class="ap-card-subtitle">{{ subTitle }}</div>
<img
*ngIf="imageSrc != undefined"
class="ap-card-image"
[style.borderRadius]="border ? '8px' : '0px'"
[src]="imageSrc"
/>
<div class="ap-card-description">{{ description }}</div>
</div>
`, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap\";*{margin:0;padding:0}.ap-card-container{display:flex;flex-direction:column;box-shadow:0 0 10px #00000021;padding:20px;font-family:Poppins,sans-serif;transition:1s}.ap-card-container-hover:hover{box-shadow:0 0 30px #0000005f;transition:1s}.ap-card-title{font-size:1.5rem;font-weight:700;color:gray}.ap-card-subtitle{font-size:.8rem;color:gray}.ap-card-image{width:100%;object-fit:cover;margin-top:10px}.ap-card-description{border-top:1px solid rgba(0,0,0,.153);padding-top:10px;margin-top:10px;font-size:1rem;color:#3e3e3e}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-card-ap', template: `
<div
class="ap-card-container"
[style.borderRadius]="border ? '8px' : '0px'"
[ngClass]="hoverable ? 'ap-card-container-hover' : ''"
>
<div class="ap-card-title">
{{ title }}
</div>
<div class="ap-card-subtitle">{{ subTitle }}</div>
<img
*ngIf="imageSrc != undefined"
class="ap-card-image"
[style.borderRadius]="border ? '8px' : '0px'"
[src]="imageSrc"
/>
<div class="ap-card-description">{{ description }}</div>
</div>
`, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap\";*{margin:0;padding:0}.ap-card-container{display:flex;flex-direction:column;box-shadow:0 0 10px #00000021;padding:20px;font-family:Poppins,sans-serif;transition:1s}.ap-card-container-hover:hover{box-shadow:0 0 30px #0000005f;transition:1s}.ap-card-title{font-size:1.5rem;font-weight:700;color:gray}.ap-card-subtitle{font-size:.8rem;color:gray}.ap-card-image{width:100%;object-fit:cover;margin-top:10px}.ap-card-description{border-top:1px solid rgba(0,0,0,.153);padding-top:10px;margin-top:10px;font-size:1rem;color:#3e3e3e}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
type: Input,
args: ['Title']
}], subTitle: [{
type: Input,
args: ['Subtitle']
}], description: [{
type: Input,
args: ['Description']
}], border: [{
type: Input,
args: ['Border']
}], imageSrc: [{
type: Input,
args: ['Image']
}], hoverable: [{
type: Input,
args: ['Hoverable']
}] } });
class NgCardModule {
}
NgCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardModule, declarations: [NgCardComponent], imports: [CommonModule], exports: [NgCardComponent] });
NgCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgCardModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgCardComponent],
imports: [CommonModule],
exports: [NgCardComponent],
}]
}] });
/*
* Public API Surface of ng-card
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgCardComponent, NgCardModule, NgCardService };
//# sourceMappingURL=ng-cards-ap.mjs.map