@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
99 lines (94 loc) • 7.32 kB
JavaScript
import * as i0 from '@angular/core';
import { input, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { startWith, switchMap, filter } from 'rxjs/operators';
import { PghLightboxComponent, PghLightboxModule } from '@tapsellorg/angular-material-library/src/lib/lightbox';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1 from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
class PghImageSliderComponent {
get currentIndex() {
return this._currentIndex;
}
set currentIndex(value) {
if (value >= this.slides().length || value < 0) {
value = 0;
}
this._currentIndex = value;
this.currentSlide = this.slides()[value];
}
constructor(matDialog) {
this.matDialog = matDialog;
this._currentIndex = 0;
this.skipSlider = false;
this.slides = input([]);
this.currentSlide = this.slides()[this._currentIndex];
this.sliderTimer$ = new Subject();
}
ngOnInit() {
this.sliderTimer$
.pipe(startWith(0), switchMap(() => interval(5000)), filter(() => !this.skipSlider))
.subscribe(() => {
this.currentIndex += 1;
});
}
selectImage(index) {
this.currentIndex = index;
this.sliderTimer$.next(undefined);
}
ngOnChanges(changes) {
if (changes.slides) {
this.currentIndex = 0;
}
}
openImageLightbox() {
this.skipSlider = true;
this.matDialog
.open(PghLightboxComponent, {
data: {
type: 'image',
src: this.currentSlide,
},
})
.afterClosed()
.subscribe(() => {
this.skipSlider = false;
this.sliderTimer$.next(undefined);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghImageSliderComponent, isStandalone: false, selector: "pgh-image-slider", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pgh-image-slider\">\n <div class=\"pgh-slide-preview-container\" (click)=\"openImageLightbox()\">\n @for (s of slides(); track s; let i = $index) { @if (i === currentIndex) {\n <div\n [style.backgroundImage]=\"'url(' + s + ')'\"\n class=\"pgh-slide-preview\"\n @carouselAnimation\n ></div>\n } }\n </div>\n\n <div class=\"pgh-slider\">\n @for (s of slides(); track s; let i = $index) {\n <div\n class=\"pgh-slide\"\n [style.backgroundImage]=\"'url(' + s + ')'\"\n (click)=\"selectImage(i)\"\n ></div>\n }\n </div>\n</div>\n", styles: [".pgh-slide-preview-container{margin-bottom:.5rem;border-radius:var(--box-radius);overflow:hidden;border:1px solid var(--ddd);height:21.875rem;cursor:pointer}.pgh-slide-preview{height:100%;background:var(--f9f9f9) no-repeat center/contain}.pgh-slider{display:flex;flex-wrap:nowrap;justify-content:space-evenly;height:5.625rem}.pgh-slider .pgh-slide{flex:0 1 7.5rem;min-width:0;margin-block:0;margin-inline:.125rem;position:relative;overflow:hidden;background:var(--fff) no-repeat center/cover;border-radius:var(--box-radius);cursor:pointer;border:1px solid var(--ddd)}.pgh-slider .pgh-slide:hover{opacity:.8}\n"], animations: [
trigger('carouselAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
transition(':leave', [animate('200ms', style({ opacity: 0 }))]),
]),
], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-image-slider', encapsulation: ViewEncapsulation.None, animations: [
trigger('carouselAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
transition(':leave', [animate('200ms', style({ opacity: 0 }))]),
]),
], standalone: false, template: "<div class=\"pgh-image-slider\">\n <div class=\"pgh-slide-preview-container\" (click)=\"openImageLightbox()\">\n @for (s of slides(); track s; let i = $index) { @if (i === currentIndex) {\n <div\n [style.backgroundImage]=\"'url(' + s + ')'\"\n class=\"pgh-slide-preview\"\n @carouselAnimation\n ></div>\n } }\n </div>\n\n <div class=\"pgh-slider\">\n @for (s of slides(); track s; let i = $index) {\n <div\n class=\"pgh-slide\"\n [style.backgroundImage]=\"'url(' + s + ')'\"\n (click)=\"selectImage(i)\"\n ></div>\n }\n </div>\n</div>\n", styles: [".pgh-slide-preview-container{margin-bottom:.5rem;border-radius:var(--box-radius);overflow:hidden;border:1px solid var(--ddd);height:21.875rem;cursor:pointer}.pgh-slide-preview{height:100%;background:var(--f9f9f9) no-repeat center/contain}.pgh-slider{display:flex;flex-wrap:nowrap;justify-content:space-evenly;height:5.625rem}.pgh-slider .pgh-slide{flex:0 1 7.5rem;min-width:0;margin-block:0;margin-inline:.125rem;position:relative;overflow:hidden;background:var(--fff) no-repeat center/cover;border-radius:var(--box-radius);cursor:pointer;border:1px solid var(--ddd)}.pgh-slider .pgh-slide:hover{opacity:.8}\n"] }]
}], ctorParameters: () => [{ type: i1.MatDialog }] });
class PghImageSliderModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderModule, declarations: [PghImageSliderComponent], imports: [CommonModule, PghLightboxModule, MatDialogModule], exports: [PghImageSliderComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderModule, imports: [CommonModule, PghLightboxModule, MatDialogModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghImageSliderModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghImageSliderComponent],
imports: [CommonModule, PghLightboxModule, MatDialogModule],
exports: [PghImageSliderComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghImageSliderComponent, PghImageSliderModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-image-slider.mjs.map