@festo-ui/angular 11.1.0-dev.977 → 11.1.0-dev.979
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3555,11 +3555,11 @@ class FngImageGalleryComponent {
|
|
|
3555
3555
|
}
|
|
3556
3556
|
}
|
|
3557
3557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FngImageGalleryComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3558
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FngImageGalleryComponent, isStandalone: true, selector: "fng-image-gallery", inputs: { data: "data" }, outputs: { close: "close", scaleUp: "scaleUp", scaleDown: "scaleDown", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "@if (data != null) {\n <div\n class=\"fwe-modal fwe-modal-image-gallery\"\n [class.fwe-modal-image-gallery--with-thumbnails]=\"data.thumbnailImages?.length\"\n [class.fwe-modal-image-gallery--with-container]=\"data.descriptiveContent\"\n
|
|
3558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FngImageGalleryComponent, isStandalone: true, selector: "fng-image-gallery", inputs: { data: "data" }, outputs: { close: "close", scaleUp: "scaleUp", scaleDown: "scaleDown", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "@if (data != null) {\n <div\n class=\"fwe-modal fwe-modal-image-gallery\"\n [class.fwe-modal-image-gallery--with-thumbnails]=\"data.thumbnailImages?.length\"\n [class.fwe-modal-image-gallery--with-container]=\"data.descriptiveContent\"\n >\n <div class=\"fwe-image-gallery-header\">\n @if (data.pagination) {\n <div class=\"fwe-pagination fwe-pagination--on-dark-bg\">\n <button aria-label=\"previous\" type=\"button\" class=\"fwe-navigate-btn-down\" (click)=\"onPrev()\"></button>\n <span class=\"fwe-page-current\">{{ currentIndex }}</span>\n <span class=\"fwe-page-max\">{{ data.images.length }}</span>\n <button aria-label=\"next\" type=\"button\" class=\"fwe-navigate-btn-up\" (click)=\"onNext()\"></button>\n </div>\n }\n @if (data.showScaleButton === true) {\n <button aria-label=\"scale up\" type=\"button\" class=\"fwe-image-gallery-scale-btn fwe-ml-auto\" (click)=\"onScale()\"></button>\n }\n <button\n aria-label=\"close\"\n type=\"button\"\n class=\"fwe-image-gallery-close-btn\"\n (click)=\"onClose()\"\n [ngClass]=\"{ 'fwe-ml-auto': !data.showScaleButton, 'fwe-ml-3': data.showScaleButton }\"\n ></button>\n </div>\n @switch (data.descriptiveContent) {\n @case (true) {\n <div class=\"fwe-image-gallery-container\">\n <ng-container *ngTemplateOutlet=\"baseGallery\"></ng-container>\n @if (data.images[currentIndex - 1].content; as imageContent) {\n <div class=\"fwe-image-gallery-content\">\n <h3>{{ imageContent.title }}</h3>\n <div [innerHTML]=\"imageContent.body | fngSafeHtml\"></div>\n </div>\n }\n </div>\n }\n @default {\n <ng-container *ngTemplateOutlet=\"baseGallery\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #baseGallery>\n <div class=\"fwe-image-gallery-wrapper\">\n <swiper-container\n keyboard\n space-between=\"0\"\n zoom=\"true\"\n thumbs-swiper=\".fng-image-gallery-thumbs-swiper\"\n (swiperinit)=\"onSwiperInit($any($event))\"\n (swipernavigationnext)=\"onSlideChange($any($event))\"\n (swipernavigationprev)=\"onSlideChange($any($event))\"\n (swiperslidechange)=\"onSlideChange($any($event))\"\n class=\"gallery-swiper fwe-image-gallery\"\n >\n @for (image of data.images; track image) {\n <swiper-slide>\n <div class=\"swiper-zoom-container\">\n <img\n [alt]=\"image.alt\"\n [src]=\"image.url\"\n [class.fwe-object-fit-contain]=\"image.containMode\"\n [class.fwe-p-m]=\"image.containMode\"\n />\n </div>\n </swiper-slide>\n }\n </swiper-container>\n @if (data.thumbnailImages?.length) {\n <swiper-container\n slides-per-view=\"auto\"\n free-mode=\"true\"\n threshold=\"20\"\n watch-slides-progress=\"true\"\n class=\"thumbs-swiper fng-image-gallery-thumbs-swiper\"\n >\n @for (thumbnail of data.thumbnailImages; track thumbnail) {\n <swiper-slide class=\"fng-image-gallery-thumbs-swiper-slide\">\n <img\n [alt]=\"thumbnail.alt\"\n [src]=\"thumbnail.url\"\n [class.fwe-object-fit-contain]=\"thumbnail.containMode\"\n [class.fwe-p-xxxs]=\"thumbnail.containMode\"\n />\n </swiper-slide>\n }\n </swiper-container>\n }\n </div>\n</ng-template>\n", styles: [".fwe-modal-image-gallery{position:relative}.fng-image-gallery-thumbs-swiper{margin-top:24px;-webkit-user-select:none;user-select:none;width:100%;height:64px;box-sizing:border-box;margin-left:auto;margin-right:auto}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide{position:relative;background-size:cover;background-position:center;width:88px!important;margin-right:8px;height:64px;opacity:.33;transition:opacity .3s;cursor:pointer}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:last-child{margin-right:0}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:after{position:absolute;content:\"\";height:4px;width:100%;background-color:var(--fwe-hero);bottom:0;opacity:0;transition:opacity .3s}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide img{display:block;object-fit:cover;width:88px;height:56px;background-color:#fff}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active,.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:hover{opacity:1}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active:after,.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:hover:after{opacity:1}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FngSafeHtmlPipe, name: "fngSafeHtml" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3559
3559
|
}
|
|
3560
3560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FngImageGalleryComponent, decorators: [{
|
|
3561
3561
|
type: Component,
|
|
3562
|
-
args: [{ imports: [CommonModule, FngSafeHtmlPipe], selector: 'fng-image-gallery', encapsulation: ViewEncapsulation.None, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (data != null) {\n <div\n class=\"fwe-modal fwe-modal-image-gallery\"\n [class.fwe-modal-image-gallery--with-thumbnails]=\"data.thumbnailImages?.length\"\n [class.fwe-modal-image-gallery--with-container]=\"data.descriptiveContent\"\n
|
|
3562
|
+
args: [{ imports: [CommonModule, FngSafeHtmlPipe], selector: 'fng-image-gallery', encapsulation: ViewEncapsulation.None, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (data != null) {\n <div\n class=\"fwe-modal fwe-modal-image-gallery\"\n [class.fwe-modal-image-gallery--with-thumbnails]=\"data.thumbnailImages?.length\"\n [class.fwe-modal-image-gallery--with-container]=\"data.descriptiveContent\"\n >\n <div class=\"fwe-image-gallery-header\">\n @if (data.pagination) {\n <div class=\"fwe-pagination fwe-pagination--on-dark-bg\">\n <button aria-label=\"previous\" type=\"button\" class=\"fwe-navigate-btn-down\" (click)=\"onPrev()\"></button>\n <span class=\"fwe-page-current\">{{ currentIndex }}</span>\n <span class=\"fwe-page-max\">{{ data.images.length }}</span>\n <button aria-label=\"next\" type=\"button\" class=\"fwe-navigate-btn-up\" (click)=\"onNext()\"></button>\n </div>\n }\n @if (data.showScaleButton === true) {\n <button aria-label=\"scale up\" type=\"button\" class=\"fwe-image-gallery-scale-btn fwe-ml-auto\" (click)=\"onScale()\"></button>\n }\n <button\n aria-label=\"close\"\n type=\"button\"\n class=\"fwe-image-gallery-close-btn\"\n (click)=\"onClose()\"\n [ngClass]=\"{ 'fwe-ml-auto': !data.showScaleButton, 'fwe-ml-3': data.showScaleButton }\"\n ></button>\n </div>\n @switch (data.descriptiveContent) {\n @case (true) {\n <div class=\"fwe-image-gallery-container\">\n <ng-container *ngTemplateOutlet=\"baseGallery\"></ng-container>\n @if (data.images[currentIndex - 1].content; as imageContent) {\n <div class=\"fwe-image-gallery-content\">\n <h3>{{ imageContent.title }}</h3>\n <div [innerHTML]=\"imageContent.body | fngSafeHtml\"></div>\n </div>\n }\n </div>\n }\n @default {\n <ng-container *ngTemplateOutlet=\"baseGallery\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #baseGallery>\n <div class=\"fwe-image-gallery-wrapper\">\n <swiper-container\n keyboard\n space-between=\"0\"\n zoom=\"true\"\n thumbs-swiper=\".fng-image-gallery-thumbs-swiper\"\n (swiperinit)=\"onSwiperInit($any($event))\"\n (swipernavigationnext)=\"onSlideChange($any($event))\"\n (swipernavigationprev)=\"onSlideChange($any($event))\"\n (swiperslidechange)=\"onSlideChange($any($event))\"\n class=\"gallery-swiper fwe-image-gallery\"\n >\n @for (image of data.images; track image) {\n <swiper-slide>\n <div class=\"swiper-zoom-container\">\n <img\n [alt]=\"image.alt\"\n [src]=\"image.url\"\n [class.fwe-object-fit-contain]=\"image.containMode\"\n [class.fwe-p-m]=\"image.containMode\"\n />\n </div>\n </swiper-slide>\n }\n </swiper-container>\n @if (data.thumbnailImages?.length) {\n <swiper-container\n slides-per-view=\"auto\"\n free-mode=\"true\"\n threshold=\"20\"\n watch-slides-progress=\"true\"\n class=\"thumbs-swiper fng-image-gallery-thumbs-swiper\"\n >\n @for (thumbnail of data.thumbnailImages; track thumbnail) {\n <swiper-slide class=\"fng-image-gallery-thumbs-swiper-slide\">\n <img\n [alt]=\"thumbnail.alt\"\n [src]=\"thumbnail.url\"\n [class.fwe-object-fit-contain]=\"thumbnail.containMode\"\n [class.fwe-p-xxxs]=\"thumbnail.containMode\"\n />\n </swiper-slide>\n }\n </swiper-container>\n }\n </div>\n</ng-template>\n", styles: [".fwe-modal-image-gallery{position:relative}.fng-image-gallery-thumbs-swiper{margin-top:24px;-webkit-user-select:none;user-select:none;width:100%;height:64px;box-sizing:border-box;margin-left:auto;margin-right:auto}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide{position:relative;background-size:cover;background-position:center;width:88px!important;margin-right:8px;height:64px;opacity:.33;transition:opacity .3s;cursor:pointer}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:last-child{margin-right:0}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:after{position:absolute;content:\"\";height:4px;width:100%;background-color:var(--fwe-hero);bottom:0;opacity:0;transition:opacity .3s}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide img{display:block;object-fit:cover;width:88px;height:56px;background-color:#fff}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active,.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:hover{opacity:1}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active:after,.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide:hover:after{opacity:1}.fng-image-gallery-thumbs-swiper .fng-image-gallery-thumbs-swiper-slide.swiper-slide-thumb-active{cursor:default}\n"] }]
|
|
3563
3563
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
|
|
3564
3564
|
type: Input
|
|
3565
3565
|
}], close: [{
|