ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
46 lines • 10.4 kB
JavaScript
import { Component, ContentChild, ElementRef, Input } from '@angular/core';
import { OCustomContentDirective } from 'ngx-obelisco-example/directives';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./o-modal-title/o-modal-title.component";
import * as i3 from "./o-modal-footer/o-modal-footer.component";
export class OModalComponent {
constructor() {
this.isHeaderUnbordered = false;
this.size = 'sm';
this.isScrollable = false;
this.isOnTop = false;
this.customClasses = '';
}
}
OModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OModalComponent, selector: "o-modal", inputs: { dataTarget: "dataTarget", title: "title", subtitle: "subtitle", description: "description", isHeaderUnbordered: "isHeaderUnbordered", size: "size", isScrollable: "isScrollable", isOnTop: "isOnTop", customClasses: "customClasses" }, queries: [{ propertyName: "oCustomContent", first: true, predicate: OCustomContentDirective, descendants: true, static: true }, { propertyName: "children", first: true, predicate: ["children"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" [attr.id]=\"dataTarget\" [ngClass]=\"customClasses\">\r\n <div\r\n class=\"modal-dialog\"\r\n [ngClass]=\"[\r\n size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : size === 'xl' ? 'modal-xl' : '',\r\n isScrollable ? 'modal-dialog-scrollable' : '',\r\n isOnTop ? '' : 'modal-dialog-centered'\r\n ]\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n <ng-container *ngIf=\"!oCustomContent\">\r\n <div class=\"modal-header\" [ngClass]=\"{ unbordered: isHeaderUnbordered }\" *ngIf=\"title || subtitle\">\r\n <small *ngIf=\"subtitle\">{{ subtitle }}</small>\r\n <o-modal-title *ngIf=\"title\">{{ title }}</o-modal-title>\r\n </div>\r\n <ng-content select=\"o-modal-header\"></ng-content>\r\n\r\n <div class=\"modal-body\" *ngIf=\"description\">\r\n <p>{{ description }}</p>\r\n </div>\r\n <ng-content select=\"o-modal-content\"></ng-content>\r\n\r\n <o-modal-footer *ngIf=\"children\"><ng-content></ng-content></o-modal-footer>\r\n <ng-content select=\"o-modal-footer\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\"> </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .modal-footer>*{margin:0}\n"], 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"] }, { kind: "component", type: i2.OModalTitleComponent, selector: "o-modal-title", inputs: ["customClasses"] }, { kind: "component", type: i3.OModalFooterComponent, selector: "o-modal-footer", inputs: ["customClasses"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OModalComponent, decorators: [{
type: Component,
args: [{ selector: 'o-modal', template: "<div class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" [attr.id]=\"dataTarget\" [ngClass]=\"customClasses\">\r\n <div\r\n class=\"modal-dialog\"\r\n [ngClass]=\"[\r\n size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : size === 'xl' ? 'modal-xl' : '',\r\n isScrollable ? 'modal-dialog-scrollable' : '',\r\n isOnTop ? '' : 'modal-dialog-centered'\r\n ]\"\r\n role=\"document\"\r\n >\r\n <div class=\"modal-content\">\r\n <ng-container *ngIf=\"!oCustomContent\">\r\n <div class=\"modal-header\" [ngClass]=\"{ unbordered: isHeaderUnbordered }\" *ngIf=\"title || subtitle\">\r\n <small *ngIf=\"subtitle\">{{ subtitle }}</small>\r\n <o-modal-title *ngIf=\"title\">{{ title }}</o-modal-title>\r\n </div>\r\n <ng-content select=\"o-modal-header\"></ng-content>\r\n\r\n <div class=\"modal-body\" *ngIf=\"description\">\r\n <p>{{ description }}</p>\r\n </div>\r\n <ng-content select=\"o-modal-content\"></ng-content>\r\n\r\n <o-modal-footer *ngIf=\"children\"><ng-content></ng-content></o-modal-footer>\r\n <ng-content select=\"o-modal-footer\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\"> </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .modal-footer>*{margin:0}\n"] }]
}], propDecorators: { dataTarget: [{
type: Input
}], title: [{
type: Input
}], subtitle: [{
type: Input
}], description: [{
type: Input
}], isHeaderUnbordered: [{
type: Input
}], size: [{
type: Input
}], isScrollable: [{
type: Input
}], isOnTop: [{
type: Input
}], customClasses: [{
type: Input
}], oCustomContent: [{
type: ContentChild,
args: [OCustomContentDirective, { static: true }]
}], children: [{
type: ContentChild,
args: ['children', { read: ElementRef }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1tb2RhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vbW9kYWwvby1tb2RhbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vbW9kYWwvby1tb2RhbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7OztBQVExRSxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQVVrQix1QkFBa0IsR0FBWSxLQUFLLENBQUM7UUFDcEMsU0FBSSxHQUFlLElBQUksQ0FBQztRQUN4QixpQkFBWSxHQUFZLEtBQUssQ0FBQztRQUM5QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBQ3pCLGtCQUFhLEdBQVcsRUFBRSxDQUFDO0tBSTVDOzs0R0FiWSxlQUFlO2dHQUFmLGVBQWUsNlVBV1osdUJBQXVCLGdJQUNILFVBQVUsNkJDckI5Qyw2MENBOEJBOzJGRHJCYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFNBQVM7OEJBS0gsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsV0FBVztzQkFBMUIsS0FBSztnQkFDVSxrQkFBa0I7c0JBQWpDLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLE9BQU87c0JBQXRCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFFbUQsY0FBYztzQkFBdEUsWUFBWTt1QkFBQyx1QkFBdUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBQ1AsUUFBUTtzQkFBdkQsWUFBWTt1QkFBQyxVQUFVLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEVsZW1lbnRSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9DdXN0b21Db250ZW50RGlyZWN0aXZlIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvZGlyZWN0aXZlcyc7XHJcbmltcG9ydCB7IE1vZGFsU2l6ZXMgfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9jb3JlL21vZGVscyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ28tbW9kYWwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9vLW1vZGFsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9vLW1vZGFsLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIE9Nb2RhbENvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgcHVibGljIGRhdGFUYXJnZXQhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIHRpdGxlITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBzdWJ0aXRsZSE6IHN0cmluZztcclxuICBASW5wdXQoKSBwdWJsaWMgZGVzY3JpcHRpb24hOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIGlzSGVhZGVyVW5ib3JkZXJlZDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBzaXplOiBNb2RhbFNpemVzID0gJ3NtJztcclxuICBASW5wdXQoKSBwdWJsaWMgaXNTY3JvbGxhYmxlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGlzT25Ub3A6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgY3VzdG9tQ2xhc3Nlczogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBDb250ZW50Q2hpbGQoT0N1c3RvbUNvbnRlbnREaXJlY3RpdmUsIHsgc3RhdGljOiB0cnVlIH0pIG9DdXN0b21Db250ZW50PzogT0N1c3RvbUNvbnRlbnREaXJlY3RpdmU7XHJcbiAgQENvbnRlbnRDaGlsZCgnY2hpbGRyZW4nLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgY2hpbGRyZW46IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQ7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIm1vZGFsIGZhZGVcIiB0YWJpbmRleD1cIi0xXCIgcm9sZT1cImRpYWxvZ1wiIFthdHRyLmlkXT1cImRhdGFUYXJnZXRcIiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJtb2RhbC1kaWFsb2dcIlxyXG4gICAgW25nQ2xhc3NdPVwiW1xyXG4gICAgICBzaXplID09PSAnc20nID8gJ21vZGFsLXNtJyA6IHNpemUgPT09ICdsZycgPyAnbW9kYWwtbGcnIDogc2l6ZSA9PT0gJ3hsJyA/ICdtb2RhbC14bCcgOiAnJyxcclxuICAgICAgaXNTY3JvbGxhYmxlID8gJ21vZGFsLWRpYWxvZy1zY3JvbGxhYmxlJyA6ICcnLFxyXG4gICAgICBpc09uVG9wID8gJycgOiAnbW9kYWwtZGlhbG9nLWNlbnRlcmVkJ1xyXG4gICAgXVwiXHJcbiAgICByb2xlPVwiZG9jdW1lbnRcIlxyXG4gID5cclxuICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhb0N1c3RvbUNvbnRlbnRcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtaGVhZGVyXCIgW25nQ2xhc3NdPVwieyB1bmJvcmRlcmVkOiBpc0hlYWRlclVuYm9yZGVyZWQgfVwiICpuZ0lmPVwidGl0bGUgfHwgc3VidGl0bGVcIj5cclxuICAgICAgICAgIDxzbWFsbCAqbmdJZj1cInN1YnRpdGxlXCI+e3sgc3VidGl0bGUgfX08L3NtYWxsPlxyXG4gICAgICAgICAgPG8tbW9kYWwtdGl0bGUgKm5nSWY9XCJ0aXRsZVwiPnt7IHRpdGxlIH19PC9vLW1vZGFsLXRpdGxlPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm8tbW9kYWwtaGVhZGVyXCI+PC9uZy1jb250ZW50PlxyXG5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiICpuZ0lmPVwiZGVzY3JpcHRpb25cIj5cclxuICAgICAgICAgIDxwPnt7IGRlc2NyaXB0aW9uIH19PC9wPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm8tbW9kYWwtY29udGVudFwiPjwvbmctY29udGVudD5cclxuXHJcbiAgICAgICAgPG8tbW9kYWwtZm9vdGVyICpuZ0lmPVwiY2hpbGRyZW5cIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9vLW1vZGFsLWZvb3Rlcj5cclxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJvLW1vZGFsLWZvb3RlclwiPjwvbmctY29udGVudD5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJvQ3VzdG9tQ29udGVudFwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm9DdXN0b21Db250ZW50LnRlbXBsYXRlXCI+IDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=