@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
36 lines • 10.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NxtInfoCard } from '../info-card/info-card.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NxtGroupCard {
title = 'title'; // card title
cardWidth = '250px'; // card width
cardHeight = '80px'; // card height
titleIconSrc = 'https://img.icons8.com/material-sharp/24/permanent-job.png'; // card title icon
infoCardArray = []; // array of info cards
buttonClick = new EventEmitter();
onButtonClick(event) {
const { button, cardData } = event;
this.buttonClick.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtGroupCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtGroupCard, isStandalone: true, selector: "nxt-group-card", inputs: { title: "title", cardWidth: "cardWidth", cardHeight: "cardHeight", titleIconSrc: "titleIconSrc", infoCardArray: "infoCardArray" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- SKS4APR25 group card -->\n<div class=\"cards-container\" [style.width]=\"cardWidth\" [style.height]=\"cardHeight\">\n <div class=\"header\">\n <div class=\"title-container\">\n <img [src]=\"titleIconSrc\" alt=\"Icon\" class=\"title-icon\" *ngIf=\"titleIconSrc\">\n <h2 class=\"title\">{{ title }}</h2>\n </div>\n </div>\n \n <div class=\"cards-grid\">\n <div *ngFor=\"let card of infoCardArray\" class=\"card-wrapper\">\n <nxt-info-card \n [title]=\"card.title\"\n [description]=\"card.description\"\n [imgSrc]=\"card.imgSrc\"\n [hoverImgSrc]=\"card.hoverImgSrc\"\n [color]=\"card.color\"\n [hoverColor]=\"card.hoverColor\"\n [iconColor]=\"card.iconColor\"\n [iconHoverColor]=\"card.iconHoverColor\"\n [padding]=\"card.padding\"\n [isImageLeft]=\"card.isImageLeft\"\n [isImageRight]=\"card.isImageRight\"\n [isEdit]=\"card.isEdit\"\n [editConfig]=\"card.editConfig\"\n (buttonClick)=\"onButtonClick($event)\"\n ></nxt-info-card>\n </div>\n </div>\n </div>", styles: [".cards-container{font-family:Arial,sans-serif;margin:20px 0;border:1px solid #e0e0e0;border-radius:8px;padding:15px;background-color:#fff;overflow:auto}.header{margin-bottom:15px;position:sticky;top:0;background-color:#fff;z-index:1;padding-bottom:10px}.title-container{display:flex;align-items:center}.title-icon{width:24px;height:24px;margin-right:8px}.title{font-size:18px;font-weight:600;color:#333;margin:0}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;overflow:visible}.card-wrapper{min-width:0}@media (max-width: 768px){.cards-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInfoCard, selector: "nxt-info-card", inputs: ["title", "value", "description", "content", "imgSrc", "hoverImgSrc", "color", "hoverColor", "padding", "isImageRight", "isImageLeft", "iconColor", "iconHoverColor", "isEdit", "editConfig"], outputs: ["buttonClick"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtGroupCard, decorators: [{
type: Component,
args: [{ selector: 'nxt-group-card', standalone: true, imports: [CommonModule, NxtInfoCard], template: "<!-- SKS4APR25 group card -->\n<div class=\"cards-container\" [style.width]=\"cardWidth\" [style.height]=\"cardHeight\">\n <div class=\"header\">\n <div class=\"title-container\">\n <img [src]=\"titleIconSrc\" alt=\"Icon\" class=\"title-icon\" *ngIf=\"titleIconSrc\">\n <h2 class=\"title\">{{ title }}</h2>\n </div>\n </div>\n \n <div class=\"cards-grid\">\n <div *ngFor=\"let card of infoCardArray\" class=\"card-wrapper\">\n <nxt-info-card \n [title]=\"card.title\"\n [description]=\"card.description\"\n [imgSrc]=\"card.imgSrc\"\n [hoverImgSrc]=\"card.hoverImgSrc\"\n [color]=\"card.color\"\n [hoverColor]=\"card.hoverColor\"\n [iconColor]=\"card.iconColor\"\n [iconHoverColor]=\"card.iconHoverColor\"\n [padding]=\"card.padding\"\n [isImageLeft]=\"card.isImageLeft\"\n [isImageRight]=\"card.isImageRight\"\n [isEdit]=\"card.isEdit\"\n [editConfig]=\"card.editConfig\"\n (buttonClick)=\"onButtonClick($event)\"\n ></nxt-info-card>\n </div>\n </div>\n </div>", styles: [".cards-container{font-family:Arial,sans-serif;margin:20px 0;border:1px solid #e0e0e0;border-radius:8px;padding:15px;background-color:#fff;overflow:auto}.header{margin-bottom:15px;position:sticky;top:0;background-color:#fff;z-index:1;padding-bottom:10px}.title-container{display:flex;align-items:center}.title-icon{width:24px;height:24px;margin-right:8px}.title{font-size:18px;font-weight:600;color:#333;margin:0}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;overflow:visible}.card-wrapper{min-width:0}@media (max-width: 768px){.cards-grid{grid-template-columns:1fr}}\n"] }]
}], propDecorators: { title: [{
type: Input
}], cardWidth: [{
type: Input
}], cardHeight: [{
type: Input
}], titleIconSrc: [{
type: Input
}], infoCardArray: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvY29tcG9uZW50cy9jYXJkcy9ncm91cC1jYXJkL2dyb3VwLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY2FyZHMvZ3JvdXAtY2FyZC9ncm91cC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7O0FBUy9ELE1BQU0sT0FBTyxZQUFZO0lBQ2QsS0FBSyxHQUFXLE9BQU8sQ0FBQyxDQUFDLGFBQWE7SUFDdEMsU0FBUyxHQUFXLE9BQU8sQ0FBQyxDQUFDLGFBQWE7SUFDMUMsVUFBVSxHQUFXLE1BQU0sQ0FBQyxDQUFDLGNBQWM7SUFDM0MsWUFBWSxHQUFXLDREQUE0RCxDQUFDLENBQUMsa0JBQWtCO0lBQ3ZHLGFBQWEsR0FBVSxFQUFFLENBQUMsQ0FBQyxzQkFBc0I7SUFFaEQsV0FBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFHaEQsYUFBYSxDQUFDLEtBQVU7UUFDdEIsTUFBTSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsR0FBRyxLQUFLLENBQUM7UUFDbkMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQzt3R0FiVSxZQUFZOzRGQUFaLFlBQVksK1BDWHpCLGdvQ0E2QlEsK3BCRHRCSSxZQUFZLGdRQUFFLFdBQVc7OzRGQUl4QixZQUFZO2tCQVB4QixTQUFTOytCQUNFLGdCQUFnQixjQUNkLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxXQUFXLENBQUM7OEJBSzNCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE54dEluZm9DYXJkIH0gZnJvbSAnLi4vaW5mby1jYXJkL2luZm8tY2FyZC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdueHQtZ3JvdXAtY2FyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE54dEluZm9DYXJkXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyb3VwLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZ3JvdXAtY2FyZC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBOeHRHcm91cENhcmQge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJ3RpdGxlJzsgLy8gY2FyZCB0aXRsZVxuICBASW5wdXQoKSBjYXJkV2lkdGg6IHN0cmluZyA9ICcyNTBweCc7IC8vIGNhcmQgd2lkdGhcbiAgQElucHV0KCkgY2FyZEhlaWdodDogc3RyaW5nID0gJzgwcHgnOyAvLyBjYXJkIGhlaWdodFxuICBASW5wdXQoKSB0aXRsZUljb25TcmM6IHN0cmluZyA9ICdodHRwczovL2ltZy5pY29uczguY29tL21hdGVyaWFsLXNoYXJwLzI0L3Blcm1hbmVudC1qb2IucG5nJzsgLy8gY2FyZCB0aXRsZSBpY29uXG4gIEBJbnB1dCgpIGluZm9DYXJkQXJyYXk6IGFueVtdID0gW107IC8vIGFycmF5IG9mIGluZm8gY2FyZHNcblxuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgXG5cbiAgb25CdXR0b25DbGljayhldmVudDogYW55KSB7XG4gICAgY29uc3QgeyBidXR0b24sIGNhcmREYXRhIH0gPSBldmVudDtcbiAgICB0aGlzLmJ1dHRvbkNsaWNrLmVtaXQoZXZlbnQpO1xuICB9XG59XG4iLCI8IS0tIFNLUzRBUFIyNSBncm91cCBjYXJkIC0tPlxuPGRpdiBjbGFzcz1cImNhcmRzLWNvbnRhaW5lclwiIFtzdHlsZS53aWR0aF09XCJjYXJkV2lkdGhcIiBbc3R5bGUuaGVpZ2h0XT1cImNhcmRIZWlnaHRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidGl0bGUtY29udGFpbmVyXCI+XG4gICAgICAgIDxpbWcgW3NyY109XCJ0aXRsZUljb25TcmNcIiBhbHQ9XCJJY29uXCIgY2xhc3M9XCJ0aXRsZS1pY29uXCIgKm5nSWY9XCJ0aXRsZUljb25TcmNcIj5cbiAgICAgICAgPGgyIGNsYXNzPVwidGl0bGVcIj57eyB0aXRsZSB9fTwvaDI+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICBcbiAgICA8ZGl2IGNsYXNzPVwiY2FyZHMtZ3JpZFwiPlxuICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgY2FyZCBvZiBpbmZvQ2FyZEFycmF5XCIgY2xhc3M9XCJjYXJkLXdyYXBwZXJcIj5cbiAgICAgICAgPG54dC1pbmZvLWNhcmQgXG4gICAgICAgICAgW3RpdGxlXT1cImNhcmQudGl0bGVcIlxuICAgICAgICAgIFtkZXNjcmlwdGlvbl09XCJjYXJkLmRlc2NyaXB0aW9uXCJcbiAgICAgICAgICBbaW1nU3JjXT1cImNhcmQuaW1nU3JjXCJcbiAgICAgICAgICBbaG92ZXJJbWdTcmNdPVwiY2FyZC5ob3ZlckltZ1NyY1wiXG4gICAgICAgICAgW2NvbG9yXT1cImNhcmQuY29sb3JcIlxuICAgICAgICAgIFtob3ZlckNvbG9yXT1cImNhcmQuaG92ZXJDb2xvclwiXG4gICAgICAgICAgW2ljb25Db2xvcl09XCJjYXJkLmljb25Db2xvclwiXG4gICAgICAgICAgW2ljb25Ib3ZlckNvbG9yXT1cImNhcmQuaWNvbkhvdmVyQ29sb3JcIlxuICAgICAgICAgIFtwYWRkaW5nXT1cImNhcmQucGFkZGluZ1wiXG4gICAgICAgICAgW2lzSW1hZ2VMZWZ0XT1cImNhcmQuaXNJbWFnZUxlZnRcIlxuICAgICAgICAgIFtpc0ltYWdlUmlnaHRdPVwiY2FyZC5pc0ltYWdlUmlnaHRcIlxuICAgICAgICAgIFtpc0VkaXRdPVwiY2FyZC5pc0VkaXRcIlxuICAgICAgICAgIFtlZGl0Q29uZmlnXT1cImNhcmQuZWRpdENvbmZpZ1wiXG4gICAgICAgICAgKGJ1dHRvbkNsaWNrKT1cIm9uQnV0dG9uQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgID48L254dC1pbmZvLWNhcmQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+Il19