ngx-obelisco-example/esm2020/panel/o-panel-small/o-panel-small.component.mjs

Componentes funcionales y reutilizables para Angular.

import { Component, ContentChild, Input } from '@angular/core';
import { OCustomContentDirective } from 'ngx-obelisco-example/directives';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class OPanelSmallComponent {
    constructor() {
        this.isBgWhite = false;
        this.isBgLight = false;
        this.isVertical = false;
        this.customClasses = '';
        this.sizeToPx = (size) => {
            switch (size) {
                case 'lg':
                    return 154;
                case 'md':
                    return 104;
                case 'sm':
                    return 104;
            }
        };
    }
}
OPanelSmallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPanelSmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OPanelSmallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OPanelSmallComponent, selector: "o-panel-small", inputs: { title: "title", description: "description", image: "image", isBgWhite: "isBgWhite", isBgLight: "isBgLight", isVertical: "isVertical", customClasses: "customClasses" }, queries: [{ propertyName: "oCustomContent", first: true, predicate: OCustomContentDirective, descendants: true, static: true }, { propertyName: "listLinkContent", first: true, predicate: ["listLinkContent"], descendants: true, static: true }, { propertyName: "panelFooterContent", first: true, predicate: ["panelFooterContent"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #smallPanelContent>\r\n  <img\r\n    *ngIf=\"image\"\r\n    [src]=\"image.src\"\r\n    [alt]=\"image.alt\"\r\n    class=\"rounded-lg\"\r\n    [width]=\"image.size ? sizeToPx(image.size) : sizeToPx('md')\"\r\n    [height]=\"image.size ? sizeToPx(image.size) : sizeToPx('md')\"\r\n  />\r\n  <div class=\"card-body\">\r\n    <ng-container *ngIf=\"!oCustomContent\">\r\n      <h3 class=\"card-title\">{{ title }}</h3>\r\n      <p class=\"card-text\">\r\n        {{ description }}\r\n      </p>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\"> </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div *ngIf=\"!isVertical\" class=\"card card-simple panel-sm-horizontal\" [ngClass]=\"customClasses\">\r\n  <ng-container *ngTemplateOutlet=\"smallPanelContent\"></ng-container>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"isVertical\"\r\n  class=\"card card-simple\"\r\n  [class.panel-list-link]=\"listLinkContent\"\r\n  [class.panel-sm]=\"!listLinkContent\"\r\n  [class.bg-white]=\"isBgWhite\"\r\n  [class.bg-light]=\"isBgLight\"\r\n  [ngClass]=\"customClasses\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"smallPanelContent\"></ng-container>\r\n\r\n  <div [ngClass]=\"{ 'panel-footer': panelFooterContent, 'list-link': listLinkContent }\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPanelSmallComponent, decorators: [{
            type: Component,
            args: [{ selector: 'o-panel-small', template: "<ng-template #smallPanelContent>\r\n  <img\r\n    *ngIf=\"image\"\r\n    [src]=\"image.src\"\r\n    [alt]=\"image.alt\"\r\n    class=\"rounded-lg\"\r\n    [width]=\"image.size ? sizeToPx(image.size) : sizeToPx('md')\"\r\n    [height]=\"image.size ? sizeToPx(image.size) : sizeToPx('md')\"\r\n  />\r\n  <div class=\"card-body\">\r\n    <ng-container *ngIf=\"!oCustomContent\">\r\n      <h3 class=\"card-title\">{{ title }}</h3>\r\n      <p class=\"card-text\">\r\n        {{ description }}\r\n      </p>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\"> </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div *ngIf=\"!isVertical\" class=\"card card-simple panel-sm-horizontal\" [ngClass]=\"customClasses\">\r\n  <ng-container *ngTemplateOutlet=\"smallPanelContent\"></ng-container>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"isVertical\"\r\n  class=\"card card-simple\"\r\n  [class.panel-list-link]=\"listLinkContent\"\r\n  [class.panel-sm]=\"!listLinkContent\"\r\n  [class.bg-white]=\"isBgWhite\"\r\n  [class.bg-light]=\"isBgLight\"\r\n  [ngClass]=\"customClasses\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"smallPanelContent\"></ng-container>\r\n\r\n  <div [ngClass]=\"{ 'panel-footer': panelFooterContent, 'list-link': listLinkContent }\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { title: [{
                type: Input
            }], description: [{
                type: Input
            }], image: [{
                type: Input
            }], isBgWhite: [{
                type: Input
            }], isBgLight: [{
                type: Input
            }], isVertical: [{
                type: Input
            }], customClasses: [{
                type: Input
            }], oCustomContent: [{
                type: ContentChild,
                args: [OCustomContentDirective, { static: true }]
            }], listLinkContent: [{
                type: ContentChild,
                args: ['listLinkContent', { static: true }]
            }], panelFooterContent: [{
                type: ContentChild,
                args: ['panelFooterContent', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1wYW5lbC1zbWFsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vcGFuZWwvby1wYW5lbC1zbWFsbC9vLXBhbmVsLXNtYWxsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vYmVsaXNjby9wYW5lbC9vLXBhbmVsLXNtYWxsL28tcGFuZWwtc21hbGwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWMsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTNFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7QUFPMUUsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQVNrQixjQUFTLEdBQVksS0FBSyxDQUFDO1FBQzNCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0IsZUFBVSxHQUFZLEtBQUssQ0FBQztRQUM1QixrQkFBYSxHQUFXLEVBQUUsQ0FBQztRQUUzQyxhQUFRLEdBQUcsQ0FBQyxJQUFnQixFQUFVLEVBQUU7WUFDdEMsUUFBUSxJQUFJLEVBQUU7Z0JBQ1osS0FBSyxJQUFJO29CQUNQLE9BQU8sR0FBRyxDQUFDO2dCQUNiLEtBQUssSUFBSTtvQkFDUCxPQUFPLEdBQUcsQ0FBQztnQkFDYixLQUFLLElBQUk7b0JBQ1AsT0FBTyxHQUFHLENBQUM7YUFDZDtRQUNILENBQUMsQ0FBQztLQUtIOztpSEF2Qlksb0JBQW9CO3FHQUFwQixvQkFBb0IsbVJBb0JqQix1QkFBdUIsMFNDN0J2QyxzMUNBdUNBOzJGRDlCYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsZUFBZTs4QkFLVCxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFdBQVc7c0JBQTFCLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxhQUFhO3NCQUE1QixLQUFLO2dCQWFtRCxjQUFjO3NCQUF0RSxZQUFZO3VCQUFDLHVCQUF1QixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDSixlQUFlO3NCQUFqRSxZQUFZO3VCQUFDLGlCQUFpQixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDSyxrQkFBa0I7c0JBQXZFLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEVsZW1lbnRSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1lZGlhUGFuZWwsIE1lZGlhU2l6ZXMgfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9jb3JlL21vZGVscyc7XHJcbmltcG9ydCB7IE9DdXN0b21Db250ZW50RGlyZWN0aXZlIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvZGlyZWN0aXZlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ28tcGFuZWwtc21hbGwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9vLXBhbmVsLXNtYWxsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9vLXBhbmVsLXNtYWxsLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIE9QYW5lbFNtYWxsQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBwdWJsaWMgdGl0bGUhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIGRlc2NyaXB0aW9uITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBpbWFnZSE6IE1lZGlhUGFuZWw7XHJcbiAgQElucHV0KCkgcHVibGljIGlzQmdXaGl0ZTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0JnTGlnaHQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgaXNWZXJ0aWNhbDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBjdXN0b21DbGFzc2VzOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgc2l6ZVRvUHggPSAoc2l6ZTogTWVkaWFTaXplcyk6IG51bWJlciA9PiB7XHJcbiAgICBzd2l0Y2ggKHNpemUpIHtcclxuICAgICAgY2FzZSAnbGcnOlxyXG4gICAgICAgIHJldHVybiAxNTQ7XHJcbiAgICAgIGNhc2UgJ21kJzpcclxuICAgICAgICByZXR1cm4gMTA0O1xyXG4gICAgICBjYXNlICdzbSc6XHJcbiAgICAgICAgcmV0dXJuIDEwNDtcclxuICAgIH1cclxuICB9O1xyXG5cclxuICBAQ29udGVudENoaWxkKE9DdXN0b21Db250ZW50RGlyZWN0aXZlLCB7IHN0YXRpYzogdHJ1ZSB9KSBvQ3VzdG9tQ29udGVudD86IE9DdXN0b21Db250ZW50RGlyZWN0aXZlO1xyXG4gIEBDb250ZW50Q2hpbGQoJ2xpc3RMaW5rQ29udGVudCcsIHsgc3RhdGljOiB0cnVlIH0pIGxpc3RMaW5rQ29udGVudD86IEVsZW1lbnRSZWY8YW55PjtcclxuICBAQ29udGVudENoaWxkKCdwYW5lbEZvb3RlckNvbnRlbnQnLCB7IHN0YXRpYzogdHJ1ZSB9KSBwYW5lbEZvb3RlckNvbnRlbnQ/OiBFbGVtZW50UmVmPGFueT47XHJcbn1cclxuIiwiPG5nLXRlbXBsYXRlICNzbWFsbFBhbmVsQ29udGVudD5cclxuICA8aW1nXHJcbiAgICAqbmdJZj1cImltYWdlXCJcclxuICAgIFtzcmNdPVwiaW1hZ2Uuc3JjXCJcclxuICAgIFthbHRdPVwiaW1hZ2UuYWx0XCJcclxuICAgIGNsYXNzPVwicm91bmRlZC1sZ1wiXHJcbiAgICBbd2lkdGhdPVwiaW1hZ2Uuc2l6ZSA/IHNpemVUb1B4KGltYWdlLnNpemUpIDogc2l6ZVRvUHgoJ21kJylcIlxyXG4gICAgW2hlaWdodF09XCJpbWFnZS5zaXplID8gc2l6ZVRvUHgoaW1hZ2Uuc2l6ZSkgOiBzaXplVG9QeCgnbWQnKVwiXHJcbiAgLz5cclxuICA8ZGl2IGNsYXNzPVwiY2FyZC1ib2R5XCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIW9DdXN0b21Db250ZW50XCI+XHJcbiAgICAgIDxoMyBjbGFzcz1cImNhcmQtdGl0bGVcIj57eyB0aXRsZSB9fTwvaDM+XHJcbiAgICAgIDxwIGNsYXNzPVwiY2FyZC10ZXh0XCI+XHJcbiAgICAgICAge3sgZGVzY3JpcHRpb24gfX1cclxuICAgICAgPC9wPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwib0N1c3RvbUNvbnRlbnRcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJvQ3VzdG9tQ29udGVudC50ZW1wbGF0ZVwiPiA8L25nLWNvbnRhaW5lcj5cclxuICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxkaXYgKm5nSWY9XCIhaXNWZXJ0aWNhbFwiIGNsYXNzPVwiY2FyZCBjYXJkLXNpbXBsZSBwYW5lbC1zbS1ob3Jpem9udGFsXCIgW25nQ2xhc3NdPVwiY3VzdG9tQ2xhc3Nlc1wiPlxyXG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzbWFsbFBhbmVsQ29udGVudFwiPjwvbmctY29udGFpbmVyPlxyXG48L2Rpdj5cclxuXHJcbjxkaXZcclxuICAqbmdJZj1cImlzVmVydGljYWxcIlxyXG4gIGNsYXNzPVwiY2FyZCBjYXJkLXNpbXBsZVwiXHJcbiAgW2NsYXNzLnBhbmVsLWxpc3QtbGlua109XCJsaXN0TGlua0NvbnRlbnRcIlxyXG4gIFtjbGFzcy5wYW5lbC1zbV09XCIhbGlzdExpbmtDb250ZW50XCJcclxuICBbY2xhc3MuYmctd2hpdGVdPVwiaXNCZ1doaXRlXCJcclxuICBbY2xhc3MuYmctbGlnaHRdPVwiaXNCZ0xpZ2h0XCJcclxuICBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCJcclxuPlxyXG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzbWFsbFBhbmVsQ29udGVudFwiPjwvbmctY29udGFpbmVyPlxyXG5cclxuICA8ZGl2IFtuZ0NsYXNzXT1cInsgJ3BhbmVsLWZvb3Rlcic6IHBhbmVsRm9vdGVyQ29udGVudCwgJ2xpc3QtbGluayc6IGxpc3RMaW5rQ29udGVudCB9XCI+XHJcbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=