lib-portal-angular 0.0.90 → 0.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,20 +1,31 @@
|
|
|
1
|
-
import { Component, Input } from "@angular/core";
|
|
1
|
+
import { Component, EventEmitter, Input, Output, } from "@angular/core";
|
|
2
2
|
import { ButtonClasses } from "../../enum/ButtonClassesEnum";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
5
|
import * as i2 from "lucide-angular";
|
|
6
6
|
export class CardInfoComponent {
|
|
7
|
-
constructor() {
|
|
7
|
+
constructor(cdr) {
|
|
8
|
+
this.cdr = cdr;
|
|
8
9
|
this.title = "Title";
|
|
9
10
|
this.titleCard = "Title";
|
|
10
11
|
this.subTitleCard = "sub-title";
|
|
11
12
|
this.cardClass = ButtonClasses.Primary;
|
|
12
13
|
this.iconCard = "check";
|
|
14
|
+
this.clicked = false;
|
|
15
|
+
this.onCardClick = new EventEmitter();
|
|
13
16
|
}
|
|
14
17
|
ngOnInit() { }
|
|
15
18
|
get dynamicStyles() {
|
|
16
19
|
return this.calculateDynamicStyles();
|
|
17
20
|
}
|
|
21
|
+
onClick(event) {
|
|
22
|
+
this.clicked = true;
|
|
23
|
+
this.onCardClick.emit(event);
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
this.clicked = false;
|
|
26
|
+
this.cdr.detectChanges();
|
|
27
|
+
}, 80);
|
|
28
|
+
}
|
|
18
29
|
calculateDynamicStyles() {
|
|
19
30
|
let backgroundColor = "";
|
|
20
31
|
let textColor = getComputedStyle(document.documentElement)
|
|
@@ -65,13 +76,13 @@ export class CardInfoComponent {
|
|
|
65
76
|
border: borderColor ? `1px solid ${borderColor}` : "none",
|
|
66
77
|
};
|
|
67
78
|
}
|
|
68
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardInfoComponent, selector: "argenta-card-info", inputs: { title: "title", titleCard: "titleCard", subTitleCard: "subTitleCard", cardClass: "cardClass", iconCard: "iconCard" }, ngImport: i0, template: "<div\n class=\"card order-card\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
80
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardInfoComponent, selector: "argenta-card-info", inputs: { title: "title", titleCard: "titleCard", subTitleCard: "subTitleCard", cardClass: "cardClass", iconCard: "iconCard" }, outputs: { onCardClick: "onCardClick" }, ngImport: i0, template: "<div\n class=\"card order-card\"\n (click)=\"onClick($event)\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <h2 class=\"text-white\">{{titleCard}}</h2>\n <h3 class=\"text-white\">{{subTitleCard}}</h3>\n <lucide-icon class=\"icon-card\" name=\"{{iconCard}}\" [size]=\"100\"></lucide-icon>\n </div>\n</div>\n", styles: [".cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.card{width:100%;height:120px;padding:10px;border-radius:10px;position:relative;overflow:hidden;transition:transform .2s ease-in-out}.card-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:5px;position:relative}.card-body h2{font-size:1.5rem!important}.card-body h3{font-size:1.25rem!important}.card:hover{transform:scale(1.05)}.icon-card{position:absolute;bottom:-20px;right:30px;max-width:80px;max-height:80px;color:#fff;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
|
|
70
81
|
}
|
|
71
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, decorators: [{
|
|
72
83
|
type: Component,
|
|
73
|
-
args: [{ selector: "argenta-card-info", template: "<div\n class=\"card order-card\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <
|
|
74
|
-
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
84
|
+
args: [{ selector: "argenta-card-info", template: "<div\n class=\"card order-card\"\n (click)=\"onClick($event)\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <h2 class=\"text-white\">{{titleCard}}</h2>\n <h3 class=\"text-white\">{{subTitleCard}}</h3>\n <lucide-icon class=\"icon-card\" name=\"{{iconCard}}\" [size]=\"100\"></lucide-icon>\n </div>\n</div>\n", styles: [".cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.card{width:100%;height:120px;padding:10px;border-radius:10px;position:relative;overflow:hidden;transition:transform .2s ease-in-out}.card-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:5px;position:relative}.card-body h2{font-size:1.5rem!important}.card-body h3{font-size:1.25rem!important}.card:hover{transform:scale(1.05)}.icon-card{position:absolute;bottom:-20px;right:30px;max-width:80px;max-height:80px;color:#fff;opacity:.5}\n"] }]
|
|
85
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
75
86
|
type: Input
|
|
76
87
|
}], titleCard: [{
|
|
77
88
|
type: Input
|
|
@@ -81,5 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
81
92
|
type: Input
|
|
82
93
|
}], iconCard: [{
|
|
83
94
|
type: Input
|
|
95
|
+
}], onCardClick: [{
|
|
96
|
+
type: Output
|
|
84
97
|
}] } });
|
|
85
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
98
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2xpYi1wb3J0YWwtYW5ndWxhci9zcmMvbGliL2NvbXBvbmVudHMvY2FyZC1pbmZvL2NhcmQtaW5mby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9saWItcG9ydGFsLWFuZ3VsYXIvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtaW5mby9jYXJkLWluZm8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sOEJBQThCLENBQUM7Ozs7QUFPN0QsTUFBTSxPQUFPLGlCQUFpQjtJQVE1QixZQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQVBqQyxVQUFLLEdBQVcsT0FBTyxDQUFDO1FBQ3hCLGNBQVMsR0FBVyxPQUFPLENBQUM7UUFDNUIsaUJBQVksR0FBVyxXQUFXLENBQUM7UUFDbkMsY0FBUyxHQUFrQixhQUFhLENBQUMsT0FBTyxDQUFDO1FBQ2pELGFBQVEsR0FBVyxPQUFPLENBQUM7UUFDcEMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUNmLGdCQUFXLEdBQXdCLElBQUksWUFBWSxFQUFTLENBQUM7SUFDMUIsQ0FBQztJQUU5QyxRQUFRLEtBQVUsQ0FBQztJQUVuQixJQUFJLGFBQWE7UUFDZixPQUFPLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBWTtRQUNsQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QixVQUFV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ICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJ1dHRvbkNsYXNzZXMgfSBmcm9tIFwiLi4vLi4vZW51bS9CdXR0b25DbGFzc2VzRW51bVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXJnZW50YS1jYXJkLWluZm9cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXJkLWluZm8uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2NhcmQtaW5mby5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZEluZm9Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gXCJUaXRsZVwiO1xuICBASW5wdXQoKSB0aXRsZUNhcmQ6IHN0cmluZyA9IFwiVGl0bGVcIjtcbiAgQElucHV0KCkgc3ViVGl0bGVDYXJkOiBzdHJpbmcgPSBcInN1Yi10aXRsZVwiO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IEJ1dHRvbkNsYXNzZXMgPSBCdXR0b25DbGFzc2VzLlByaW1hcnk7XG4gIEBJbnB1dCgpIGljb25DYXJkOiBzdHJpbmcgPSBcImNoZWNrXCI7XG4gIGNsaWNrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2FyZENsaWNrOiBFdmVudEVtaXR0ZXI8RXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBnZXQgZHluYW1pY1N0eWxlcygpIHtcbiAgICByZXR1cm4gdGhpcy5jYWxjdWxhdGVEeW5hbWljU3R5bGVzKCk7XG4gIH1cblxuICBvbkNsaWNrKGV2ZW50OiBFdmVudCkge1xuICAgIHRoaXMuY2xpY2tlZCA9IHRydWU7XG4gICAgdGhpcy5vbkNhcmRDbGljay5lbWl0KGV2ZW50KTtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuY2xpY2tlZCA9IGZhbHNlO1xuICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH0sIDgwKTtcbiAgfVxuXG4gIHByaXZhdGUgY2FsY3VsYXRlRHluYW1pY1N0eWxlcygpIHtcbiAgICBsZXQgYmFja2dyb3VuZENvbG9yID0gXCJcIjtcbiAgICBsZXQgdGV4dENvbG9yID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpXG4gICAgICAuZ2V0UHJvcGVydHlWYWx1ZShcIi0tdGV4dC1jb2xvclwiKVxuICAgICAgLnRyaW0oKTtcbiAgICBsZXQgYm9yZGVyQ29sb3IgPSBcIlwiO1xuXG4gICAgY29uc3QgZ2V0Q1NTVmFyaWFibGUgPSAodmFyaWFibGU6IHN0cmluZykgPT5cbiAgICAgIGdldENvbXB1dGVkU3R5bGUoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KVxuICAgICAgICAuZ2V0UHJvcGVydHlWYWx1ZSh2YXJpYWJsZSlcbiAgICAgICAgLnRyaW0oKTtcblxuICAgIHN3aXRjaCAodGhpcy5jYXJkQ2xhc3MpIHtcbiAgICAgIGNhc2UgQnV0dG9uQ2xhc3Nlcy5QcmltYXJ5OlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tcHJpbWFyeS1jb2xvclwiKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIEJ1dHRvbkNsYXNzZXMuU2Vjb25kYXJ5OlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tc2Vjb25kYXJ5LWNvbG9yXCIpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgQnV0dG9uQ2xhc3Nlcy5TdWNjZXNzOlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tc3VjY2Vzcy1jb2xvclwiKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIEJ1dHRvbkNsYXNzZXMuRGFuZ2VyOlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tZGFuZ2VyLWNvbG9yXCIpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgQnV0dG9uQ2xhc3Nlcy5XYXJuaW5nOlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0td2FybmluZy1jb2xvclwiKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIEJ1dHRvbkNsYXNzZXMuSW5mbzpcbiAgICAgICAgYmFja2dyb3VuZENvbG9yID0gZ2V0Q1NTVmFyaWFibGUoXCItLWluZm8tY29sb3JcIik7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBCdXR0b25DbGFzc2VzLkxpZ2h0OlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tbGlnaHQtY29sb3JcIik7XG4gICAgICAgIHRleHRDb2xvciA9IGdldENTU1ZhcmlhYmxlKFwiLS1wcmltYXJ5LWNvbG9yXCIpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgQnV0dG9uQ2xhc3Nlcy5EYXJrOlxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NWYXJpYWJsZShcIi0tZGFyay1jb2xvclwiKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlIEJ1dHRvbkNsYXNzZXMuTGluazpcbiAgICAgICAgYmFja2dyb3VuZENvbG9yID0gXCJ0cmFuc3BhcmVudFwiO1xuICAgICAgICBib3JkZXJDb2xvciA9IGdldENTU1ZhcmlhYmxlKFwiLS1saW5rLWJvcmRlci1jb2xvclwiKTtcbiAgICAgICAgdGV4dENvbG9yID0gZ2V0Q1NTVmFyaWFibGUoXCItLXByaW1hcnktY29sb3JcIik7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgYmFja2dyb3VuZENvbG9yID0gZ2V0Q1NTVmFyaWFibGUoXCItLXByaW1hcnktY29sb3JcIik7XG4gICAgICAgIGJyZWFrO1xuICAgIH1cblxuICAgIHJldHVybiB7XG4gICAgICBcImJhY2tncm91bmQtY29sb3JcIjogYmFja2dyb3VuZENvbG9yLFxuICAgICAgY29sb3I6IHRleHRDb2xvcixcbiAgICAgIGJvcmRlcjogYm9yZGVyQ29sb3IgPyBgMXB4IHNvbGlkICR7Ym9yZGVyQ29sb3J9YCA6IFwibm9uZVwiLFxuICAgIH07XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJjYXJkIG9yZGVyLWNhcmRcIlxuICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbiAgW25nQ2xhc3NdPVwiY2FyZENsYXNzXCJcbiAgW25nU3R5bGVdPVwiZHluYW1pY1N0eWxlc1wiXG4gIHRpdGxlPVwie3t0aXRsZX19XCJcbj5cbiAgPGRpdiBjbGFzcz1cImNhcmQtYm9keVwiPlxuICAgIDxoMiBjbGFzcz1cInRleHQtd2hpdGVcIj57e3RpdGxlQ2FyZH19PC9oMj5cbiAgICA8aDMgY2xhc3M9XCJ0ZXh0LXdoaXRlXCI+e3tzdWJUaXRsZUNhcmR9fTwvaDM+XG4gICAgPGx1Y2lkZS1pY29uIGNsYXNzPVwiaWNvbi1jYXJkXCIgbmFtZT1cInt7aWNvbkNhcmR9fVwiIFtzaXplXT1cIjEwMFwiPjwvbHVjaWRlLWljb24+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -1187,17 +1187,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1187
1187
|
}] } });
|
|
1188
1188
|
|
|
1189
1189
|
class CardInfoComponent {
|
|
1190
|
-
constructor() {
|
|
1190
|
+
constructor(cdr) {
|
|
1191
|
+
this.cdr = cdr;
|
|
1191
1192
|
this.title = "Title";
|
|
1192
1193
|
this.titleCard = "Title";
|
|
1193
1194
|
this.subTitleCard = "sub-title";
|
|
1194
1195
|
this.cardClass = ButtonClasses.Primary;
|
|
1195
1196
|
this.iconCard = "check";
|
|
1197
|
+
this.clicked = false;
|
|
1198
|
+
this.onCardClick = new EventEmitter();
|
|
1196
1199
|
}
|
|
1197
1200
|
ngOnInit() { }
|
|
1198
1201
|
get dynamicStyles() {
|
|
1199
1202
|
return this.calculateDynamicStyles();
|
|
1200
1203
|
}
|
|
1204
|
+
onClick(event) {
|
|
1205
|
+
this.clicked = true;
|
|
1206
|
+
this.onCardClick.emit(event);
|
|
1207
|
+
setTimeout(() => {
|
|
1208
|
+
this.clicked = false;
|
|
1209
|
+
this.cdr.detectChanges();
|
|
1210
|
+
}, 80);
|
|
1211
|
+
}
|
|
1201
1212
|
calculateDynamicStyles() {
|
|
1202
1213
|
let backgroundColor = "";
|
|
1203
1214
|
let textColor = getComputedStyle(document.documentElement)
|
|
@@ -1248,13 +1259,13 @@ class CardInfoComponent {
|
|
|
1248
1259
|
border: borderColor ? `1px solid ${borderColor}` : "none",
|
|
1249
1260
|
};
|
|
1250
1261
|
}
|
|
1251
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardInfoComponent, selector: "argenta-card-info", inputs: { title: "title", titleCard: "titleCard", subTitleCard: "subTitleCard", cardClass: "cardClass", iconCard: "iconCard" }, ngImport: i0, template: "<div\n class=\"card order-card\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <
|
|
1262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardInfoComponent, selector: "argenta-card-info", inputs: { title: "title", titleCard: "titleCard", subTitleCard: "subTitleCard", cardClass: "cardClass", iconCard: "iconCard" }, outputs: { onCardClick: "onCardClick" }, ngImport: i0, template: "<div\n class=\"card order-card\"\n (click)=\"onClick($event)\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <h2 class=\"text-white\">{{titleCard}}</h2>\n <h3 class=\"text-white\">{{subTitleCard}}</h3>\n <lucide-icon class=\"icon-card\" name=\"{{iconCard}}\" [size]=\"100\"></lucide-icon>\n </div>\n</div>\n", styles: [".cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.card{width:100%;height:120px;padding:10px;border-radius:10px;position:relative;overflow:hidden;transition:transform .2s ease-in-out}.card-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:5px;position:relative}.card-body h2{font-size:1.5rem!important}.card-body h3{font-size:1.25rem!important}.card:hover{transform:scale(1.05)}.icon-card{position:absolute;bottom:-20px;right:30px;max-width:80px;max-height:80px;color:#fff;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
|
|
1253
1264
|
}
|
|
1254
1265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardInfoComponent, decorators: [{
|
|
1255
1266
|
type: Component,
|
|
1256
|
-
args: [{ selector: "argenta-card-info", template: "<div\n class=\"card order-card\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <
|
|
1257
|
-
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1267
|
+
args: [{ selector: "argenta-card-info", template: "<div\n class=\"card order-card\"\n (click)=\"onClick($event)\"\n [ngClass]=\"cardClass\"\n [ngStyle]=\"dynamicStyles\"\n title=\"{{title}}\"\n>\n <div class=\"card-body\">\n <h2 class=\"text-white\">{{titleCard}}</h2>\n <h3 class=\"text-white\">{{subTitleCard}}</h3>\n <lucide-icon class=\"icon-card\" name=\"{{iconCard}}\" [size]=\"100\"></lucide-icon>\n </div>\n</div>\n", styles: [".cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.card{width:100%;height:120px;padding:10px;border-radius:10px;position:relative;overflow:hidden;transition:transform .2s ease-in-out}.card-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:5px;position:relative}.card-body h2{font-size:1.5rem!important}.card-body h3{font-size:1.25rem!important}.card:hover{transform:scale(1.05)}.icon-card{position:absolute;bottom:-20px;right:30px;max-width:80px;max-height:80px;color:#fff;opacity:.5}\n"] }]
|
|
1268
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
1258
1269
|
type: Input
|
|
1259
1270
|
}], titleCard: [{
|
|
1260
1271
|
type: Input
|
|
@@ -1264,6 +1275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1264
1275
|
type: Input
|
|
1265
1276
|
}], iconCard: [{
|
|
1266
1277
|
type: Input
|
|
1278
|
+
}], onCardClick: [{
|
|
1279
|
+
type: Output
|
|
1267
1280
|
}] } });
|
|
1268
1281
|
|
|
1269
1282
|
class CardComponent {
|