design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
59 lines • 11.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ItAbstractComponent } from '../../../abstracts/abstract.component';
import { NgTemplateOutlet } from '@angular/common';
import { inputToBoolean } from '../../../utils/coercion';
import * as i0 from "@angular/core";
/**
* Card
* @description A container of texts and images with many options and variations.
*/
export class ItCardComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* Custom card class
* @default ''
*/
this.cardClass = '';
/**
* Custom card body class
* @default ''
*/
this.bodyClass = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{ bodyClass }}\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n@if (!special) {\n <div\n class=\"card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.no-after]=\"hasImage\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </div>\n} @else {\n <a\n class=\"card special-card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.no-after]=\"hasImage\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n\n <div class=\"card-body {{ bodyClass }}\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n@if (!special) {\n <div\n class=\"card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.no-after]=\"hasImage\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </div>\n} @else {\n <a\n class=\"card special-card {{ cardClass }}\"\n [class.card-img]=\"hasImage\"\n [class.card-teaser]=\"teaser\"\n [class.shadow]=\"shadow\"\n [class.card-bg]=\"background\"\n [class.card-big]=\"big\"\n [class.no-after]=\"hasImage\"\n [class.border-bottom-card]=\"borderBottom\"\n [class.rounded]=\"rounded\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
}], propDecorators: { teaser: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], special: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], hasImage: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], rounded: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], shadow: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], background: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], borderBottom: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], big: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], cardClass: [{
type: Input
}], bodyClass: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tYW5ndWxhci1raXQvc3JjL2xpYi9jb21wb25lbnRzL2NvcmUvY2FyZC9jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9jYXJkL2NhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDOztBQUV6RDs7O0dBR0c7QUFTSCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxtQkFBbUI7SUFSeEQ7O1FBeURFOzs7V0FHRztRQUNNLGNBQVMsR0FBVyxFQUFFLENBQUM7UUFFaEM7OztXQUdHO1FBQ00sY0FBUyxHQUFXLEVBQUUsQ0FBQztLQUNqQzs4R0E1RFksZUFBZTtrR0FBZixlQUFlLGtGQUtOLGNBQWMsbUNBTWQsY0FBYyxzQ0FNZCxjQUFjLG1DQU1kLGNBQWMsZ0NBTWQsY0FBYyw0Q0FNZCxjQUFjLGtEQU1kLGNBQWMsdUJBTWQsY0FBYyxvR0NoRXBDLHdoQ0FtQ0EsMGFEcEJZLGdCQUFnQjs7MkZBRWYsZUFBZTtrQkFSM0IsU0FBUztpQ0FDSSxJQUFJLFlBQ04sU0FBUyxtQkFHRix1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZ0JBQWdCLENBQUM7OEJBT1csTUFBTTtzQkFBM0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsT0FBTztzQkFBNUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsUUFBUTtzQkFBN0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsT0FBTztzQkFBNUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsTUFBTTtzQkFBM0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsVUFBVTtzQkFBL0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsWUFBWTtzQkFBakQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTUUsR0FBRztzQkFBeEMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBTTNCLFNBQVM7c0JBQWpCLEtBQUs7Z0JBTUcsU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJdEFic3RyYWN0Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vYWJzdHJhY3RzL2Fic3RyYWN0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IGlucHV0VG9Cb29sZWFuIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvY29lcmNpb24nO1xuXG4vKipcbiAqIENhcmRcbiAqIEBkZXNjcmlwdGlvbiBBIGNvbnRhaW5lciBvZiB0ZXh0cyBhbmQgaW1hZ2VzIHdpdGggbWFueSBvcHRpb25zIGFuZCB2YXJpYXRpb25zLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdpdC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jYXJkLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTmdUZW1wbGF0ZU91dGxldF0sXG59KVxuZXhwb3J0IGNsYXNzIEl0Q2FyZENvbXBvbmVudCBleHRlbmRzIEl0QWJzdHJhY3RDb21wb25lbnQge1xuICAvKipcbiAgICogVG8gY3JlYXRlIGNhcmRzIHdpdGggc2hvcnQgb3IgXCJwcmV2aWV3XCIgY29udGVudFxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSB0ZWFzZXI/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUbyBjcmVhdGUgc3BlY2lhbCBjYXJkc1xuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBzcGVjaWFsPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogQ2FyZCB3aXRoIGltYWdlXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGhhc0ltYWdlPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogVG8gYWRkIHJvdW5kaW5nIGVmZmVjdHNcbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogaW5wdXRUb0Jvb2xlYW4gfSkgcm91bmRlZD86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRvIGFkZCBzaGFkb3cgZWZmZWN0c1xuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBzaGFkb3c/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUbyBhZGQgYmFja2dyb3VuZCBhbmQgc2hhZG93XG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGJhY2tncm91bmQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUbyBhZGQgYm90dG9tIGJvcmRlclxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBib3JkZXJCb3R0b20/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUbyByZW5kZXIgYSBiaWcgY2FyZFxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBiaWc/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBDdXN0b20gY2FyZCBjbGFzc1xuICAgKiBAZGVmYXVsdCAnJ1xuICAgKi9cbiAgQElucHV0KCkgY2FyZENsYXNzOiBzdHJpbmcgPSAnJztcblxuICAvKipcbiAgICogQ3VzdG9tIGNhcmQgYm9keSBjbGFzc1xuICAgKiBAZGVmYXVsdCAnJ1xuICAgKi9cbiAgQElucHV0KCkgYm9keUNsYXNzOiBzdHJpbmcgPSAnJztcbn1cbiIsIjxuZy10ZW1wbGF0ZSAjY2FyZENvbnRlbnQ+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cIltiZWZvcmVCb2R5XVwiPjwvbmctY29udGVudD5cblxuICA8ZGl2IGNsYXNzPVwiY2FyZC1ib2R5IHt7IGJvZHlDbGFzcyB9fVwiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG5AaWYgKCFzcGVjaWFsKSB7XG4gIDxkaXZcbiAgICBjbGFzcz1cImNhcmQge3sgY2FyZENsYXNzIH19XCJcbiAgICBbY2xhc3MuY2FyZC1pbWddPVwiaGFzSW1hZ2VcIlxuICAgIFtjbGFzcy5jYXJkLXRlYXNlcl09XCJ0ZWFzZXJcIlxuICAgIFtjbGFzcy5uby1hZnRlcl09XCJoYXNJbWFnZVwiXG4gICAgW2NsYXNzLnNoYWRvd109XCJzaGFkb3dcIlxuICAgIFtjbGFzcy5jYXJkLWJnXT1cImJhY2tncm91bmRcIlxuICAgIFtjbGFzcy5jYXJkLWJpZ109XCJiaWdcIlxuICAgIFtjbGFzcy5ib3JkZXItYm90dG9tLWNhcmRdPVwiYm9yZGVyQm90dG9tXCJcbiAgICBbY2xhc3Mucm91bmRlZF09XCJyb3VuZGVkXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNhcmRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxufSBAZWxzZSB7XG4gIDxhXG4gICAgY2xhc3M9XCJjYXJkIHNwZWNpYWwtY2FyZCB7eyBjYXJkQ2xhc3MgfX1cIlxuICAgIFtjbGFzcy5jYXJkLWltZ109XCJoYXNJbWFnZVwiXG4gICAgW2NsYXNzLmNhcmQtdGVhc2VyXT1cInRlYXNlclwiXG4gICAgW2NsYXNzLnNoYWRvd109XCJzaGFkb3dcIlxuICAgIFtjbGFzcy5jYXJkLWJnXT1cImJhY2tncm91bmRcIlxuICAgIFtjbGFzcy5jYXJkLWJpZ109XCJiaWdcIlxuICAgIFtjbGFzcy5uby1hZnRlcl09XCJoYXNJbWFnZVwiXG4gICAgW2NsYXNzLmJvcmRlci1ib3R0b20tY2FyZF09XCJib3JkZXJCb3R0b21cIlxuICAgIFtjbGFzcy5yb3VuZGVkXT1cInJvdW5kZWRcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZENvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9hPlxufVxuIl19