ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
53 lines (48 loc) • 9.12 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ngx-obelisco-example/directives';
import { ODefaultImageDirective } from 'ngx-obelisco-example/directives';
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
}] } });
class OGalleryModule {
}
OGalleryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OGalleryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OGalleryModule, declarations: [OGalleryComponent], imports: [CommonModule, ODefaultImageDirective], exports: [OGalleryComponent] });
OGalleryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OGalleryModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OGalleryModule, decorators: [{
type: NgModule,
args: [{
declarations: [OGalleryComponent],
imports: [CommonModule, ODefaultImageDirective],
exports: [OGalleryComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OGalleryComponent, OGalleryModule };
//# sourceMappingURL=ngx-obelisco-example-gallery.mjs.map