ngx-obelisco-example/esm2020/highlighted/o-highlighted.component.mjs

Componentes funcionales y reutilizables para Angular.

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/platform-browser";
import * as i2 from "@angular/common";
import * as i3 from "./o-highlighted-title/o-highlighted-title.component";
import * as i4 from "./o-highlighted-footer/o-highlighted-footer.component";
import * as i5 from "./o-highlighted-description/o-highlighted-description.component";
import * as i6 from "./o-highlighted-image/o-highlighted-image.component";
import * as i7 from "./o-highlighted-video/o-highlighted-video.component";
export 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: i3.OHighlightedTitleComponent, selector: "o-highlighted-title", inputs: ["customClasses"] }, { kind: "component", type: i4.OHighlightedFooterComponent, selector: "o-highlighted-footer", inputs: ["customClasses"] }, { kind: "component", type: i5.OHighlightedDescriptionComponent, selector: "o-highlighted-description", inputs: ["customClasses"] }, { kind: "component", type: i6.OHighlightedImageComponent, selector: "o-highlighted-image", inputs: ["image", "customClasses"] }, { kind: "component", type: i7.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 }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1oaWdobGlnaHRlZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vaGlnaGxpZ2h0ZWQvby1oaWdobGlnaHRlZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vaGlnaGxpZ2h0ZWQvby1oaWdobGlnaHRlZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRzNFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7Ozs7Ozs7QUFPMUUsTUFBTSxPQUFPLHFCQUFxQjtJQWNoQyxZQUFvQixTQUF1QjtRQUF2QixjQUFTLEdBQVQsU0FBUyxDQUFjO1FBYjNCLGNBQVMsR0FBYSxLQUFLLENBQUM7UUFDNUIsU0FBSSxHQUFxQixRQUFRLENBQUM7UUFDbEMsa0JBQWEsR0FBVyxFQUFFLENBQUM7SUFXRyxDQUFDO0lBRS9DLFdBQVcsQ0FBQyxHQUFXO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyw4QkFBOEIsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM1RCxDQUFDOztrSEFsQlUscUJBQXFCO3NHQUFyQixxQkFBcUIsaVJBV2xCLHVCQUF1QixnSUFDSCxVQUFVLDZCQ3RCOUMsbzdEQXlDQTsyRkQvQmEscUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLGVBQWU7bUdBS1QsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLGFBQWE7c0JBQTVCLEtBQUs7Z0JBRVUsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxXQUFXO3NCQUExQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxNQUFNO3NCQUFyQixLQUFLO2dCQUVtRCxjQUFjO3NCQUF0RSxZQUFZO3VCQUFDLHVCQUF1QixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDUCxRQUFRO3NCQUF2RCxZQUFZO3VCQUFDLFVBQVUsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRWxlbWVudFJlZiwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSGlnaGxpZ2h0ZWRUeXBlLCBNZWRpYUlmcmFtZSwgTWVkaWFWaWRlbywgTWVkaWFJbWFnZSB9IGZyb20gJ25neC1vYmVsaXNjby1leGFtcGxlL2NvcmUvbW9kZWxzJztcclxuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlUmVzb3VyY2VVcmwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcclxuaW1wb3J0IHsgT0N1c3RvbUNvbnRlbnREaXJlY3RpdmUgfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9kaXJlY3RpdmVzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnby1oaWdobGlnaHRlZCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL28taGlnaGxpZ2h0ZWQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL28taGlnaGxpZ2h0ZWQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgT0hpZ2hsaWdodGVkQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBwdWJsaWMgaXNCZ0xpZ2h0PzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyB0eXBlPzogSGlnaGxpZ2h0ZWRUeXBlID0gJ2Jhbm5lcic7XHJcbiAgQElucHV0KCkgcHVibGljIGN1c3RvbUNsYXNzZXM6IHN0cmluZyA9ICcnO1xyXG5cclxuICBASW5wdXQoKSBwdWJsaWMgdGl0bGU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBpbWFnZT86IE1lZGlhSW1hZ2U7XHJcbiAgQElucHV0KCkgcHVibGljIHZpZGVvPzogTWVkaWFWaWRlbztcclxuICBASW5wdXQoKSBwdWJsaWMgaWZyYW1lPzogTWVkaWFJZnJhbWU7XHJcblxyXG4gIEBDb250ZW50Q2hpbGQoT0N1c3RvbUNvbnRlbnREaXJlY3RpdmUsIHsgc3RhdGljOiB0cnVlIH0pIG9DdXN0b21Db250ZW50PzogT0N1c3RvbUNvbnRlbnREaXJlY3RpdmU7XHJcbiAgQENvbnRlbnRDaGlsZCgnY2hpbGRyZW4nLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgY2hpbGRyZW46IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQ7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHt9XHJcblxyXG4gIHNhbml0aXplVXJsKHVybDogc3RyaW5nKTogU2FmZVJlc291cmNlVXJsIHtcclxuICAgIHJldHVybiB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0UmVzb3VyY2VVcmwodXJsKTtcclxuICB9XHJcbn1cclxuIiwiPG5nLXRlbXBsYXRlICNoaWdobGlnaHRlZENvbnRlbnQ+XHJcbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiby1oaWdobGlnaHRlZC1pbWFnZVwiPjwvbmctY29udGVudD5cclxuICA8bmctY29udGVudCBzZWxlY3Q9XCJvLWhpZ2hsaWdodGVkLXZpZGVvXCI+PC9uZy1jb250ZW50PlxyXG4gIDxvLWhpZ2hsaWdodGVkLWltYWdlICpuZ0lmPVwiaW1hZ2VcIiBbaW1hZ2VdPVwiaW1hZ2VcIj48L28taGlnaGxpZ2h0ZWQtaW1hZ2U+XHJcbiAgPG8taGlnaGxpZ2h0ZWQtdmlkZW8gKm5nSWY9XCJ2aWRlb1wiIFt2aWRlb109XCJ2aWRlb1wiPjwvby1oaWdobGlnaHRlZC12aWRlbz5cclxuICA8by1oaWdobGlnaHRlZC12aWRlbyAqbmdJZj1cImlmcmFtZVwiIFtpZnJhbWVdPVwiaWZyYW1lXCI+PC9vLWhpZ2hsaWdodGVkLXZpZGVvPlxyXG5cclxuICA8ZGl2IGNsYXNzPVwiY2FyZC1ib2R5XCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIW9DdXN0b21Db250ZW50XCI+XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm8taGlnaGxpZ2h0ZWQtaGVhZGVyXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICA8by1oaWdobGlnaHRlZC10aXRsZSAqbmdJZj1cInRpdGxlXCI+e3sgdGl0bGUgfX08L28taGlnaGxpZ2h0ZWQtdGl0bGU+XHJcblxyXG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJvLWhpZ2hsaWdodGVkLWNvbnRlbnRcIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgIDxvLWhpZ2hsaWdodGVkLWRlc2NyaXB0aW9uICpuZ0lmPVwiZGVzY3JpcHRpb25cIj57eyBkZXNjcmlwdGlvbiB9fTwvby1oaWdobGlnaHRlZC1kZXNjcmlwdGlvbj5cclxuXHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm8taGlnaGxpZ2h0ZWQtZm9vdGVyXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICA8by1oaWdobGlnaHRlZC1mb290ZXIgKm5nSWY9XCJjaGlsZHJlblwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L28taGlnaGxpZ2h0ZWQtZm9vdGVyPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwib0N1c3RvbUNvbnRlbnRcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJvQ3VzdG9tQ29udGVudC50ZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxyXG4gIDwvZGl2PlxyXG48L25nLXRlbXBsYXRlPlxyXG5cclxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdiYW5uZXInXCI+XHJcbiAgPGRpdiBjbGFzcz1cInBhbmVsLWhvcml6b250YWwtY29udGVudFwiIFtjbGFzcy5iZy1saWdodF09XCJpc0JnTGlnaHRcIiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLXNpbXBsZSBwYW5lbC1ob3Jpem9udGFsXCI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJoaWdobGlnaHRlZENvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L25nLWNvbnRhaW5lcj5cclxuXHJcbjxuZy1jb250YWluZXIgKm5nSWY9XCJ0eXBlID09PSAnZ3JvdXBpbmcnXCI+XHJcbiAgPGRpdiBjbGFzcz1cImNhcmQgY2FyZC1zaW1wbGUgcGFuZWwtdmVydGljYWxcIiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaGlnaGxpZ2h0ZWRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XHJcbiAgPC9kaXY+XHJcbjwvbmctY29udGFpbmVyPlxyXG5cclxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdsYXRlcmFsJ1wiPlxyXG4gIDxkaXYgY2xhc3M9XCJjYXJkIGNhcmQtc2ltcGxlIHBhbmVsLWxhdGVyYWxcIiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaGlnaGxpZ2h0ZWRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XHJcbiAgPC9kaXY+XHJcbjwvbmctY29udGFpbmVyPlxyXG4iXX0=