ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
29 lines • 13.4 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ngx-obelisco-example/directives";
export class OGalleryComponent {
constructor() {
this.galleryItems = [];
this.isInteractive = false;
this.customClasses = '';
this.customClassesInteractive = '';
}
}
OGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OGalleryComponent, selector: "o-gallery", inputs: { galleryItems: "galleryItems", isInteractive: "isInteractive", dataTarget: "dataTarget", customClasses: "customClasses", customClassesInteractive: "customClassesInteractive" }, ngImport: i0, template: "<div class=\"gallery-grid\" [ngClass]=\"['gallery-max-' + galleryItems.length, customClasses]\">\r\n <ng-container *ngIf=\"isInteractive; else noInteractive\">\r\n <a\r\n *ngFor=\"let image of galleryItems\"\r\n [href]=\"image.src\"\r\n [attr.data-target]=\"'#' + dataTarget\"\r\n class=\"gallery-grid-item\"\r\n data-toggle=\"modal\"\r\n >\r\n <img oDefaultImage [src]=\"image.src\" [alt]=\"image.title\" />\r\n </a>\r\n </ng-container>\r\n <ng-template #noInteractive>\r\n <div class=\"gallery-grid-item\" *ngFor=\"let image of galleryItems\">\r\n <img oDefaultImage [src]=\"image.src\" [alt]=\"image.title\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"isInteractive\"\r\n [id]=\"dataTarget\"\r\n class=\"modal modal-carousel\"\r\n data-backdrop=\"static\"\r\n tabindex=\"-1\"\r\n role=\"dialog\"\r\n [ngClass]=\"customClassesInteractive\"\r\n>\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <a class=\"modal-carousel-close\" data-dismiss=\"modal\">Cerrar ventana</a>\r\n <div [id]=\"dataTarget + 'control'\" class=\"carousel\" data-ride=\"carousel\" data-interval=\"false\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let image of galleryItems; index as i\">\r\n <div class=\"carousel-item\" [class.active]=\"i === 0\">\r\n <img oDefaultImage class=\"d-block w-100\" [src]=\"image.src\" [alt]=\"image.title\" />\r\n <div class=\"carousel-caption\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col\">\r\n <small>{{ image.author }}</small>\r\n </div>\r\n <div class=\"col text-right\">\r\n <small>Imagen {{ i + 1 }} / {{ galleryItems.length }}</small>\r\n </div>\r\n </div>\r\n <h5 class=\"h2\">{{ image.title }}</h5>\r\n <p [innerHTML]=\"image.content\"></p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button\r\n class=\"carousel-control-prev\"\r\n type=\"button\"\r\n [attr.data-target]=\"'#' + dataTarget + 'control'\"\r\n data-slide=\"prev\"\r\n >\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Anterior</span>\r\n </button>\r\n <button\r\n class=\"carousel-control-next\"\r\n type=\"button\"\r\n [attr.data-target]=\"'#' + dataTarget + 'control'\"\r\n data-slide=\"next\"\r\n >\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Siguiente</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ODefaultImageDirective, selector: "img[oDefaultImage]", inputs: ["defaultImageUrl"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OGalleryComponent, decorators: [{
type: Component,
args: [{ selector: 'o-gallery', template: "<div class=\"gallery-grid\" [ngClass]=\"['gallery-max-' + galleryItems.length, customClasses]\">\r\n <ng-container *ngIf=\"isInteractive; else noInteractive\">\r\n <a\r\n *ngFor=\"let image of galleryItems\"\r\n [href]=\"image.src\"\r\n [attr.data-target]=\"'#' + dataTarget\"\r\n class=\"gallery-grid-item\"\r\n data-toggle=\"modal\"\r\n >\r\n <img oDefaultImage [src]=\"image.src\" [alt]=\"image.title\" />\r\n </a>\r\n </ng-container>\r\n <ng-template #noInteractive>\r\n <div class=\"gallery-grid-item\" *ngFor=\"let image of galleryItems\">\r\n <img oDefaultImage [src]=\"image.src\" [alt]=\"image.title\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"isInteractive\"\r\n [id]=\"dataTarget\"\r\n class=\"modal modal-carousel\"\r\n data-backdrop=\"static\"\r\n tabindex=\"-1\"\r\n role=\"dialog\"\r\n [ngClass]=\"customClassesInteractive\"\r\n>\r\n <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <a class=\"modal-carousel-close\" data-dismiss=\"modal\">Cerrar ventana</a>\r\n <div [id]=\"dataTarget + 'control'\" class=\"carousel\" data-ride=\"carousel\" data-interval=\"false\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let image of galleryItems; index as i\">\r\n <div class=\"carousel-item\" [class.active]=\"i === 0\">\r\n <img oDefaultImage class=\"d-block w-100\" [src]=\"image.src\" [alt]=\"image.title\" />\r\n <div class=\"carousel-caption\">\r\n <div class=\"row mb-4\">\r\n <div class=\"col\">\r\n <small>{{ image.author }}</small>\r\n </div>\r\n <div class=\"col text-right\">\r\n <small>Imagen {{ i + 1 }} / {{ galleryItems.length }}</small>\r\n </div>\r\n </div>\r\n <h5 class=\"h2\">{{ image.title }}</h5>\r\n <p [innerHTML]=\"image.content\"></p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button\r\n class=\"carousel-control-prev\"\r\n type=\"button\"\r\n [attr.data-target]=\"'#' + dataTarget + 'control'\"\r\n data-slide=\"prev\"\r\n >\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Anterior</span>\r\n </button>\r\n <button\r\n class=\"carousel-control-next\"\r\n type=\"button\"\r\n [attr.data-target]=\"'#' + dataTarget + 'control'\"\r\n data-slide=\"next\"\r\n >\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Siguiente</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
}], propDecorators: { galleryItems: [{
type: Input
}], isInteractive: [{
type: Input
}], dataTarget: [{
type: Input
}], customClasses: [{
type: Input
}], customClassesInteractive: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1nYWxsZXJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vYmVsaXNjby9nYWxsZXJ5L28tZ2FsbGVyeS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vZ2FsbGVyeS9vLWdhbGxlcnkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFPakQsTUFBTSxPQUFPLGlCQUFpQjtJQUw5QjtRQU1rQixpQkFBWSxHQUFtQixFQUFFLENBQUM7UUFDbEMsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFFL0Isa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDM0IsNkJBQXdCLEdBQVcsRUFBRSxDQUFDO0tBQ3ZEOzs4R0FOWSxpQkFBaUI7a0dBQWpCLGlCQUFpQiwyT0NSOUIsKzJGQXlFQTsyRkRqRWEsaUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLFdBQVc7OEJBS0wsWUFBWTtzQkFBM0IsS0FBSztnQkFDVSxhQUFhO3NCQUE1QixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVSx3QkFBd0I7c0JBQXZDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZWRpYUdhbGxlcnkgfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9jb3JlL21vZGVscyc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnby1nYWxsZXJ5JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vby1nYWxsZXJ5LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9vLWdhbGxlcnkuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgT0dhbGxlcnlDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBnYWxsZXJ5SXRlbXM6IE1lZGlhR2FsbGVyeVtdID0gW107XHJcbiAgQElucHV0KCkgcHVibGljIGlzSW50ZXJhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgZGF0YVRhcmdldCE6IHN0cmluZztcclxuICBASW5wdXQoKSBwdWJsaWMgY3VzdG9tQ2xhc3Nlczogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgcHVibGljIGN1c3RvbUNsYXNzZXNJbnRlcmFjdGl2ZTogc3RyaW5nID0gJyc7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImdhbGxlcnktZ3JpZFwiIFtuZ0NsYXNzXT1cIlsnZ2FsbGVyeS1tYXgtJyArIGdhbGxlcnlJdGVtcy5sZW5ndGgsIGN1c3RvbUNsYXNzZXNdXCI+XHJcbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzSW50ZXJhY3RpdmU7IGVsc2Ugbm9JbnRlcmFjdGl2ZVwiPlxyXG4gICAgPGFcclxuICAgICAgKm5nRm9yPVwibGV0IGltYWdlIG9mIGdhbGxlcnlJdGVtc1wiXHJcbiAgICAgIFtocmVmXT1cImltYWdlLnNyY1wiXHJcbiAgICAgIFthdHRyLmRhdGEtdGFyZ2V0XT1cIicjJyArIGRhdGFUYXJnZXRcIlxyXG4gICAgICBjbGFzcz1cImdhbGxlcnktZ3JpZC1pdGVtXCJcclxuICAgICAgZGF0YS10b2dnbGU9XCJtb2RhbFwiXHJcbiAgICA+XHJcbiAgICAgIDxpbWcgb0RlZmF1bHRJbWFnZSBbc3JjXT1cImltYWdlLnNyY1wiIFthbHRdPVwiaW1hZ2UudGl0bGVcIiAvPlxyXG4gICAgPC9hPlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG4gIDxuZy10ZW1wbGF0ZSAjbm9JbnRlcmFjdGl2ZT5cclxuICAgIDxkaXYgY2xhc3M9XCJnYWxsZXJ5LWdyaWQtaXRlbVwiICpuZ0Zvcj1cImxldCBpbWFnZSBvZiBnYWxsZXJ5SXRlbXNcIj5cclxuICAgICAgPGltZyBvRGVmYXVsdEltYWdlIFtzcmNdPVwiaW1hZ2Uuc3JjXCIgW2FsdF09XCJpbWFnZS50aXRsZVwiIC8+XHJcbiAgICA8L2Rpdj5cclxuICA8L25nLXRlbXBsYXRlPlxyXG48L2Rpdj5cclxuXHJcbjxkaXZcclxuICAqbmdJZj1cImlzSW50ZXJhY3RpdmVcIlxyXG4gIFtpZF09XCJkYXRhVGFyZ2V0XCJcclxuICBjbGFzcz1cIm1vZGFsIG1vZGFsLWNhcm91c2VsXCJcclxuICBkYXRhLWJhY2tkcm9wPVwic3RhdGljXCJcclxuICB0YWJpbmRleD1cIi0xXCJcclxuICByb2xlPVwiZGlhbG9nXCJcclxuICBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzSW50ZXJhY3RpdmVcIlxyXG4+XHJcbiAgPGRpdiBjbGFzcz1cIm1vZGFsLWRpYWxvZyBtb2RhbC1sZ1wiIHJvbGU9XCJkb2N1bWVudFwiPlxyXG4gICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cclxuICAgICAgPGEgY2xhc3M9XCJtb2RhbC1jYXJvdXNlbC1jbG9zZVwiIGRhdGEtZGlzbWlzcz1cIm1vZGFsXCI+Q2VycmFyIHZlbnRhbmE8L2E+XHJcbiAgICAgIDxkaXYgW2lkXT1cImRhdGFUYXJnZXQgKyAnY29udHJvbCdcIiBjbGFzcz1cImNhcm91c2VsXCIgZGF0YS1yaWRlPVwiY2Fyb3VzZWxcIiBkYXRhLWludGVydmFsPVwiZmFsc2VcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtaW5uZXJcIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGltYWdlIG9mIGdhbGxlcnlJdGVtczsgaW5kZXggYXMgaVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtaXRlbVwiIFtjbGFzcy5hY3RpdmVdPVwiaSA9PT0gMFwiPlxyXG4gICAgICAgICAgICAgIDxpbWcgb0RlZmF1bHRJbWFnZSBjbGFzcz1cImQtYmxvY2sgdy0xMDBcIiBbc3JjXT1cImltYWdlLnNyY1wiIFthbHRdPVwiaW1hZ2UudGl0bGVcIiAvPlxyXG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJvdXNlbC1jYXB0aW9uXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicm93IG1iLTRcIj5cclxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzbWFsbD57eyBpbWFnZS5hdXRob3IgfX08L3NtYWxsPlxyXG4gICAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbCB0ZXh0LXJpZ2h0XCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHNtYWxsPkltYWdlbiB7eyBpICsgMSB9fSAvIHt7IGdhbGxlcnlJdGVtcy5sZW5ndGggfX08L3NtYWxsPlxyXG4gICAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGg1IGNsYXNzPVwiaDJcIj57eyBpbWFnZS50aXRsZSB9fTwvaDU+XHJcbiAgICAgICAgICAgICAgICA8cCBbaW5uZXJIVE1MXT1cImltYWdlLmNvbnRlbnRcIj48L3A+XHJcbiAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgY2xhc3M9XCJjYXJvdXNlbC1jb250cm9sLXByZXZcIlxyXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICBbYXR0ci5kYXRhLXRhcmdldF09XCInIycgKyBkYXRhVGFyZ2V0ICsgJ2NvbnRyb2wnXCJcclxuICAgICAgICAgIGRhdGEtc2xpZGU9XCJwcmV2XCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNhcm91c2VsLWNvbnRyb2wtcHJldi1pY29uXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zcGFuPlxyXG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzci1vbmx5XCI+QW50ZXJpb3I8L3NwYW4+XHJcbiAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgY2xhc3M9XCJjYXJvdXNlbC1jb250cm9sLW5leHRcIlxyXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICBbYXR0ci5kYXRhLXRhcmdldF09XCInIycgKyBkYXRhVGFyZ2V0ICsgJ2NvbnRyb2wnXCJcclxuICAgICAgICAgIGRhdGEtc2xpZGU9XCJuZXh0XCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNhcm91c2VsLWNvbnRyb2wtbmV4dC1pY29uXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zcGFuPlxyXG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzci1vbmx5XCI+U2lndWllbnRlPC9zcGFuPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19