ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
200 lines (188 loc) • 22.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ElementRef, ContentChild, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { OCustomContentDirective } from 'ngx-obelisco-example/directives';
import * as i1 from '@angular/platform-browser';
class OHighlightedTitleComponent {
constructor() {
this.customClasses = '';
}
}
OHighlightedTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedTitleComponent, selector: "o-highlighted-title", inputs: { customClasses: "customClasses" }, ngImport: i0, template: "<h2 class=\"card-title\" [ngClass]=\"customClasses\"><ng-content></ng-content></h2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedTitleComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-title', template: "<h2 class=\"card-title\" [ngClass]=\"customClasses\"><ng-content></ng-content></h2>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { customClasses: [{
type: Input
}] } });
class OHighlightedFooterComponent {
constructor() {
this.customClasses = '';
}
}
OHighlightedFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedFooterComponent, selector: "o-highlighted-footer", inputs: { customClasses: "customClasses" }, ngImport: i0, template: "<div class=\"panel-footer\" [ngClass]=\"customClasses\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedFooterComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-footer', template: "<div class=\"panel-footer\" [ngClass]=\"customClasses\">\r\n <ng-content></ng-content>\r\n</div>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { customClasses: [{
type: Input
}] } });
class OHighlightedDescriptionComponent {
constructor() {
this.customClasses = '';
}
}
OHighlightedDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedDescriptionComponent, selector: "o-highlighted-description", inputs: { customClasses: "customClasses" }, ngImport: i0, template: "<p class=\"card-text\" [ngClass]=\"customClasses\"><ng-content></ng-content></p>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedDescriptionComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-description', template: "<p class=\"card-text\" [ngClass]=\"customClasses\"><ng-content></ng-content></p>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { customClasses: [{
type: Input
}] } });
class OHighlightedImageComponent {
constructor() {
this.customClasses = '';
}
}
OHighlightedImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedImageComponent, selector: "o-highlighted-image", inputs: { image: "image", customClasses: "customClasses" }, ngImport: i0, template: "<img [src]=\"image?.src\" [alt]=\"image?.alt ? image?.alt : ' '\" class=\"card-img\" [ngClass]=\"customClasses\" />\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedImageComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-image', template: "<img [src]=\"image?.src\" [alt]=\"image?.alt ? image?.alt : ' '\" class=\"card-img\" [ngClass]=\"customClasses\" />\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { image: [{
type: Input
}], customClasses: [{
type: Input
}] } });
class OHighlightedVideoComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.customClasses = '';
}
sanitizeUrl(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
OHighlightedVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedVideoComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
OHighlightedVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedVideoComponent, selector: "o-highlighted-video", inputs: { video: "video", iframe: "iframe", customClasses: "customClasses" }, ngImport: i0, template: "<ng-container *ngIf=\"video\">\r\n <p class=\"sr-only\">{{ video.title }}</p>\r\n <video class=\"card-img\" [ngClass]=\"customClasses\" controls=\"\">\r\n <source [src]=\"video.src\" type=\"video/mp4\" />\r\n <ng-container *ngIf=\"video.track\">\r\n <track [src]=\"video.track\" default=\"\" kind=\"captions\" srclang=\"es\" />\r\n </ng-container>\r\n <p>\r\n Su navegador no soporta v\u00EDdeos HTML5. Puedes ver el video haciendo clic en\r\n <a [href]=\"video.src\">este enlace</a>.\r\n </p>\r\n </video>\r\n</ng-container>\r\n<ng-container *ngIf=\"iframe\">\r\n <iframe\r\n [src]=\"sanitizeUrl(iframe.src ? iframe.src : '')\"\r\n class=\"card-img\"\r\n [ngClass]=\"customClasses\"\r\n [title]=\"iframe.title ? iframe.title : ' '\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen=\"\"\r\n ></iframe>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedVideoComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-video', template: "<ng-container *ngIf=\"video\">\r\n <p class=\"sr-only\">{{ video.title }}</p>\r\n <video class=\"card-img\" [ngClass]=\"customClasses\" controls=\"\">\r\n <source [src]=\"video.src\" type=\"video/mp4\" />\r\n <ng-container *ngIf=\"video.track\">\r\n <track [src]=\"video.track\" default=\"\" kind=\"captions\" srclang=\"es\" />\r\n </ng-container>\r\n <p>\r\n Su navegador no soporta v\u00EDdeos HTML5. Puedes ver el video haciendo clic en\r\n <a [href]=\"video.src\">este enlace</a>.\r\n </p>\r\n </video>\r\n</ng-container>\r\n<ng-container *ngIf=\"iframe\">\r\n <iframe\r\n [src]=\"sanitizeUrl(iframe.src ? iframe.src : '')\"\r\n class=\"card-img\"\r\n [ngClass]=\"customClasses\"\r\n [title]=\"iframe.title ? iframe.title : ' '\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen=\"\"\r\n ></iframe>\r\n</ng-container>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { video: [{
type: Input
}], iframe: [{
type: Input
}], customClasses: [{
type: Input
}] } });
class OHighlightedComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.isBgLight = false;
this.type = 'banner';
this.customClasses = '';
}
sanitizeUrl(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
OHighlightedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
OHighlightedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedComponent, selector: "o-highlighted", inputs: { isBgLight: "isBgLight", type: "type", customClasses: "customClasses", title: "title", description: "description", image: "image", video: "video", iframe: "iframe" }, queries: [{ propertyName: "oCustomContent", first: true, predicate: OCustomContentDirective, descendants: true, static: true }, { propertyName: "children", first: true, predicate: ["children"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #highlightedContent>\r\n <ng-content select=\"o-highlighted-image\"></ng-content>\r\n <ng-content select=\"o-highlighted-video\"></ng-content>\r\n <o-highlighted-image *ngIf=\"image\" [image]=\"image\"></o-highlighted-image>\r\n <o-highlighted-video *ngIf=\"video\" [video]=\"video\"></o-highlighted-video>\r\n <o-highlighted-video *ngIf=\"iframe\" [iframe]=\"iframe\"></o-highlighted-video>\r\n\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"!oCustomContent\">\r\n <ng-content select=\"o-highlighted-header\"></ng-content>\r\n <o-highlighted-title *ngIf=\"title\">{{ title }}</o-highlighted-title>\r\n\r\n <ng-content select=\"o-highlighted-content\"></ng-content>\r\n <o-highlighted-description *ngIf=\"description\">{{ description }}</o-highlighted-description>\r\n\r\n <ng-content select=\"o-highlighted-footer\"></ng-content>\r\n <o-highlighted-footer *ngIf=\"children\"><ng-content></ng-content></o-highlighted-footer>\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<ng-container *ngIf=\"type === 'banner'\">\r\n <div class=\"panel-horizontal-content\" [class.bg-light]=\"isBgLight\" [ngClass]=\"customClasses\">\r\n <div class=\"card card-simple panel-horizontal\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 'grouping'\">\r\n <div class=\"card card-simple panel-vertical\" [ngClass]=\"customClasses\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 'lateral'\">\r\n <div class=\"card card-simple panel-lateral\" [ngClass]=\"customClasses\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n</ng-container>\r\n", styles: ["::ng-deep .card.panel-horizontal .card-body .panel-footer o-access,.card.panel-vertical .card-body .panel-footer o-access,.card.panel-lateral .card-body .panel-footer o-access{width:100%;max-width:340px}::ng-deep .card.panel-lateral .card-body .panel-footer o-button,::ng-deep .card.panel-lateral .card-body .panel-footer o-access{width:100%}::ng-deep .panel-horizontal-content .card.panel-horizontal o-highlighted-image,::ng-deep .panel-horizontal-content .card.panel-horizontal o-highlighted-video{flex-shrink:0}::ng-deep .card-deck.max-cards-2.card-column .card.panel-horizontal o-access,::ng-deep .card-deck.max-cards-2.card-column .card.panel-vertical o-access,::ng-deep .card-deck.max-cards-2.card-column .card.panel-lateral o-access{width:100%;max-width:340px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OHighlightedTitleComponent, selector: "o-highlighted-title", inputs: ["customClasses"] }, { kind: "component", type: OHighlightedFooterComponent, selector: "o-highlighted-footer", inputs: ["customClasses"] }, { kind: "component", type: OHighlightedDescriptionComponent, selector: "o-highlighted-description", inputs: ["customClasses"] }, { kind: "component", type: OHighlightedImageComponent, selector: "o-highlighted-image", inputs: ["image", "customClasses"] }, { kind: "component", type: OHighlightedVideoComponent, selector: "o-highlighted-video", inputs: ["video", "iframe", "customClasses"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted', template: "<ng-template #highlightedContent>\r\n <ng-content select=\"o-highlighted-image\"></ng-content>\r\n <ng-content select=\"o-highlighted-video\"></ng-content>\r\n <o-highlighted-image *ngIf=\"image\" [image]=\"image\"></o-highlighted-image>\r\n <o-highlighted-video *ngIf=\"video\" [video]=\"video\"></o-highlighted-video>\r\n <o-highlighted-video *ngIf=\"iframe\" [iframe]=\"iframe\"></o-highlighted-video>\r\n\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"!oCustomContent\">\r\n <ng-content select=\"o-highlighted-header\"></ng-content>\r\n <o-highlighted-title *ngIf=\"title\">{{ title }}</o-highlighted-title>\r\n\r\n <ng-content select=\"o-highlighted-content\"></ng-content>\r\n <o-highlighted-description *ngIf=\"description\">{{ description }}</o-highlighted-description>\r\n\r\n <ng-content select=\"o-highlighted-footer\"></ng-content>\r\n <o-highlighted-footer *ngIf=\"children\"><ng-content></ng-content></o-highlighted-footer>\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<ng-container *ngIf=\"type === 'banner'\">\r\n <div class=\"panel-horizontal-content\" [class.bg-light]=\"isBgLight\" [ngClass]=\"customClasses\">\r\n <div class=\"card card-simple panel-horizontal\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 'grouping'\">\r\n <div class=\"card card-simple panel-vertical\" [ngClass]=\"customClasses\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 'lateral'\">\r\n <div class=\"card card-simple panel-lateral\" [ngClass]=\"customClasses\">\r\n <ng-container *ngTemplateOutlet=\"highlightedContent\"></ng-container>\r\n </div>\r\n</ng-container>\r\n", styles: ["::ng-deep .card.panel-horizontal .card-body .panel-footer o-access,.card.panel-vertical .card-body .panel-footer o-access,.card.panel-lateral .card-body .panel-footer o-access{width:100%;max-width:340px}::ng-deep .card.panel-lateral .card-body .panel-footer o-button,::ng-deep .card.panel-lateral .card-body .panel-footer o-access{width:100%}::ng-deep .panel-horizontal-content .card.panel-horizontal o-highlighted-image,::ng-deep .panel-horizontal-content .card.panel-horizontal o-highlighted-video{flex-shrink:0}::ng-deep .card-deck.max-cards-2.card-column .card.panel-horizontal o-access,::ng-deep .card-deck.max-cards-2.card-column .card.panel-vertical o-access,::ng-deep .card-deck.max-cards-2.card-column .card.panel-lateral o-access{width:100%;max-width:340px}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { isBgLight: [{
type: Input
}], type: [{
type: Input
}], customClasses: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], image: [{
type: Input
}], video: [{
type: Input
}], iframe: [{
type: Input
}], oCustomContent: [{
type: ContentChild,
args: [OCustomContentDirective, { static: true }]
}], children: [{
type: ContentChild,
args: ['children', { read: ElementRef }]
}] } });
class OHighlightedHeaderComponent {
constructor() { }
}
OHighlightedHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedHeaderComponent, selector: "o-highlighted-header", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-header', template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: function () { return []; } });
class OHighlightedContentComponent {
constructor() { }
}
OHighlightedContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OHighlightedContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OHighlightedContentComponent, selector: "o-highlighted-content", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedContentComponent, decorators: [{
type: Component,
args: [{ selector: 'o-highlighted-content', template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: function () { return []; } });
class OHighlightedModule {
}
OHighlightedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OHighlightedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedModule, declarations: [OHighlightedComponent,
OHighlightedTitleComponent,
OHighlightedFooterComponent,
OHighlightedDescriptionComponent,
OHighlightedHeaderComponent,
OHighlightedContentComponent,
OHighlightedImageComponent,
OHighlightedVideoComponent], imports: [CommonModule], exports: [OHighlightedComponent,
OHighlightedTitleComponent,
OHighlightedFooterComponent,
OHighlightedDescriptionComponent,
OHighlightedHeaderComponent,
OHighlightedContentComponent,
OHighlightedImageComponent,
OHighlightedVideoComponent] });
OHighlightedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OHighlightedModule, decorators: [{
type: NgModule,
args: [{
declarations: [
OHighlightedComponent,
OHighlightedTitleComponent,
OHighlightedFooterComponent,
OHighlightedDescriptionComponent,
OHighlightedHeaderComponent,
OHighlightedContentComponent,
OHighlightedImageComponent,
OHighlightedVideoComponent
],
imports: [CommonModule],
exports: [
OHighlightedComponent,
OHighlightedTitleComponent,
OHighlightedFooterComponent,
OHighlightedDescriptionComponent,
OHighlightedHeaderComponent,
OHighlightedContentComponent,
OHighlightedImageComponent,
OHighlightedVideoComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OHighlightedComponent, OHighlightedContentComponent, OHighlightedDescriptionComponent, OHighlightedFooterComponent, OHighlightedHeaderComponent, OHighlightedImageComponent, OHighlightedModule, OHighlightedTitleComponent, OHighlightedVideoComponent };
//# sourceMappingURL=ngx-obelisco-example-highlighted.mjs.map