@ks89/angular-modal-gallery 11.0.0-rc.1 → 11.1.0-rc.1
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.
- package/CHANGELOG.md +18 -0
- package/README.md +2 -0
- package/esm2022/lib/components/carousel/carousel-previews/carousel-previews.component.mjs +3 -3
- package/esm2022/lib/components/carousel/carousel.component.mjs +3 -3
- package/esm2022/lib/components/current-image/current-image.component.mjs +3 -3
- package/esm2022/lib/components/plain-gallery/plain-gallery.component.mjs +3 -3
- package/esm2022/lib/components/previews/previews.component.mjs +3 -3
- package/esm2022/lib/model/image.class.mjs +4 -2
- package/fesm2022/ks89-angular-modal-gallery.mjs +13 -11
- package/fesm2022/ks89-angular-modal-gallery.mjs.map +1 -1
- package/lib/model/image.class.d.ts +11 -1
- package/package.json +1 -1
|
@@ -270,10 +270,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
270
270
|
* Both image `id` and `modal` are mandatory, instead `plain` is optional.
|
|
271
271
|
*/
|
|
272
272
|
class Image {
|
|
273
|
-
constructor(id, modal, plain) {
|
|
273
|
+
constructor(id, modal, plain, loading = 'lazy', fetchpriority = 'auto') {
|
|
274
274
|
this.id = id;
|
|
275
275
|
this.modal = modal;
|
|
276
276
|
this.plain = plain;
|
|
277
|
+
this.loading = loading;
|
|
278
|
+
this.fetchpriority = fetchpriority;
|
|
277
279
|
}
|
|
278
280
|
}
|
|
279
281
|
/**
|
|
@@ -2074,11 +2076,11 @@ class CurrentImageComponent extends AccessibleComponent {
|
|
|
2074
2076
|
}
|
|
2075
2077
|
}
|
|
2076
2078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CurrentImageComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CurrentImageComponent, selector: "ks-current-image", inputs: { id: "id", currentImage: "currentImage", images: "images", isOpen: "isOpen" }, outputs: { loadImage: "loadImage", changeImage: "changeImage", closeGallery: "closeGallery" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main class=\"main-image-container\"\n ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n <div class=\"left-sub-container\">\n <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n class=\"inside current-image-previous\"\n [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\"/>\n <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.display]=\"loading ? 'none' : ''\">\n <img id=\"current-image\"\n class=\"inside\"\n [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (load)=\"onImageLoad($event)\"\n (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n ksSwipe\n (swipeLeft)=\"swipe('swipeleft')\"\n (swipeRight)=\"swipe('swiperight')\"/>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n class=\"inside current-image-next\"\n [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\"/>\n <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\n\n <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n </a>\n </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>#current-image{max-width:100%;height:auto;display:block}.main-image-container #current-figure>#current-image.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}#current-image{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){#current-image{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CurrentImageComponent, selector: "ks-current-image", inputs: { id: "id", currentImage: "currentImage", images: "images", isOpen: "isOpen" }, outputs: { loadImage: "loadImage", changeImage: "changeImage", closeGallery: "closeGallery" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main class=\"main-image-container\"\n ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n <div class=\"left-sub-container\">\n <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n class=\"inside current-image-previous\"\n [loading]=\"leftPreview.loading\"\n [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\"/>\n <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\n <img [id]=\"currentImage.id\"\n [loading]=\"currentImage.loading\"\n [attr.fetchpriority]=\"currentImage.fetchpriority\"\n class=\"inside\"\n [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (load)=\"onImageLoad($event)\"\n (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n ksSwipe\n (swipeLeft)=\"swipe('swipeleft')\"\n (swipeRight)=\"swipe('swiperight')\"/>\n </picture>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n class=\"inside current-image-next\"\n [loading]=\"rightPreview.loading\"\n [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\"/>\n <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\n\n <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n </a>\n </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2078
2080
|
}
|
|
2079
2081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CurrentImageComponent, decorators: [{
|
|
2080
2082
|
type: Component,
|
|
2081
|
-
args: [{ selector: 'ks-current-image', changeDetection: ChangeDetectionStrategy.OnPush, template: "<main class=\"main-image-container\"\n ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n <div class=\"left-sub-container\">\n <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n class=\"inside current-image-previous\"\n [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\"/>\n <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.display]=\"loading ? 'none' : ''\">\n <img id=\"current-image\"\n class=\"inside\"\n [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (load)=\"onImageLoad($event)\"\n (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n ksSwipe\n (swipeLeft)=\"swipe('swipeleft')\"\n (swipeRight)=\"swipe('swiperight')\"/>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n class=\"inside current-image-next\"\n [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\"/>\n <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\n\n <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n </a>\n </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>#current-image{max-width:100%;height:auto;display:block}.main-image-container #current-figure>#current-image.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}#current-image{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){#current-image{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"] }]
|
|
2083
|
+
args: [{ selector: 'ks-current-image', changeDetection: ChangeDetectionStrategy.OnPush, template: "<main class=\"main-image-container\"\n ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n <div class=\"left-sub-container\">\n <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n class=\"inside current-image-previous\"\n [loading]=\"leftPreview.loading\"\n [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\"/>\n <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\n <img [id]=\"currentImage.id\"\n [loading]=\"currentImage.loading\"\n [attr.fetchpriority]=\"currentImage.fetchpriority\"\n class=\"inside\"\n [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (load)=\"onImageLoad($event)\"\n (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n ksSwipe\n (swipeLeft)=\"swipe('swipeleft')\"\n (swipeRight)=\"swipe('swiperight')\"/>\n </picture>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n class=\"inside current-image-next\"\n [loading]=\"rightPreview.loading\"\n [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n [hidden]=\"loading\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\"/>\n <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\n\n <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n </a>\n </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"] }]
|
|
2082
2084
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2083
2085
|
type: Inject,
|
|
2084
2086
|
args: [PLATFORM_ID]
|
|
@@ -2834,11 +2836,11 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2834
2836
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2835
2837
|
}
|
|
2836
2838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PreviewsComponent, selector: "ks-previews", inputs: { id: "id", currentImage: "currentImage", images: "images", customTemplate: "customTemplate" }, outputs: { clickPreview: "clickPreview" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n [tabIndex]=\"0\" role=\"img\"\n />\n </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PreviewsComponent, selector: "ks-previews", inputs: { id: "id", currentImage: "currentImage", images: "images", customTemplate: "customTemplate" }, outputs: { clickPreview: "clickPreview" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [loading]=\"preview.loading\"\n [attr.fetchpriority]=\"preview.fetchpriority\"\n [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n [tabIndex]=\"0\" role=\"img\"\n />\n </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2838
2840
|
}
|
|
2839
2841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PreviewsComponent, decorators: [{
|
|
2840
2842
|
type: Component,
|
|
2841
|
-
args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n [tabIndex]=\"0\" role=\"img\"\n />\n </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"] }]
|
|
2843
|
+
args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [loading]=\"preview.loading\"\n [attr.fetchpriority]=\"preview.fetchpriority\"\n [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n [tabIndex]=\"0\" role=\"img\"\n />\n </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"] }]
|
|
2842
2844
|
}], ctorParameters: function () { return [{ type: ConfigService }]; }, propDecorators: { id: [{
|
|
2843
2845
|
type: Input
|
|
2844
2846
|
}], currentImage: [{
|
|
@@ -4122,11 +4124,11 @@ class CarouselPreviewsComponent extends AccessibleComponent {
|
|
|
4122
4124
|
return getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
4123
4125
|
}
|
|
4124
4126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CarouselPreviewsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.BreakpointObserver }, { token: i4.DomSanitizer }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: { id: "id", currentImage: "currentImage", images: "images" }, outputs: { clickPreview: "clickPreview" }, host: { properties: { "style.max-width": "this.hostMaxWidth", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav *ngIf=\"previewConfig?.visible\"\n class=\"previews-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n </a>\n\n <div class=\"preview-inner-container\">\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n height: previewMaxHeight}\"\n [attr.aria-label]=\"getAriaLabel(preview)\"\n [title]=\"getTitle(preview)\"\n alt=\"{{getAlt(preview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"/>\n </ng-container>\n </div>\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n </a>\n\n</nav>\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: { id: "id", currentImage: "currentImage", images: "images" }, outputs: { clickPreview: "clickPreview" }, host: { properties: { "style.max-width": "this.hostMaxWidth", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav *ngIf=\"previewConfig?.visible\"\n class=\"previews-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n </a>\n\n <div class=\"preview-inner-container\">\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n [loading]=\"preview.loading\"\n [attr.fetchpriority]=\"preview.fetchpriority\"\n class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n height: previewMaxHeight}\"\n [attr.aria-label]=\"getAriaLabel(preview)\"\n [title]=\"getTitle(preview)\"\n alt=\"{{getAlt(preview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"/>\n </ng-container>\n </div>\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n </a>\n\n</nav>\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4126
4128
|
}
|
|
4127
4129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CarouselPreviewsComponent, decorators: [{
|
|
4128
4130
|
type: Component,
|
|
4129
|
-
args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav *ngIf=\"previewConfig?.visible\"\n class=\"previews-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n </a>\n\n <div class=\"preview-inner-container\">\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n height: previewMaxHeight}\"\n [attr.aria-label]=\"getAriaLabel(preview)\"\n [title]=\"getTitle(preview)\"\n alt=\"{{getAlt(preview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"/>\n </ng-container>\n </div>\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n </a>\n\n</nav>\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"] }]
|
|
4131
|
+
args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav *ngIf=\"previewConfig?.visible\"\n class=\"previews-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n </a>\n\n <div class=\"preview-inner-container\">\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n [loading]=\"preview.loading\"\n [attr.fetchpriority]=\"preview.fetchpriority\"\n class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n height: previewMaxHeight}\"\n [attr.aria-label]=\"getAriaLabel(preview)\"\n [title]=\"getTitle(preview)\"\n alt=\"{{getAlt(preview)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"/>\n </ng-container>\n </div>\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n </a>\n\n</nav>\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:black;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"] }]
|
|
4130
4132
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.BreakpointObserver }, { type: i4.DomSanitizer }, { type: ConfigService }]; }, propDecorators: { hostMaxWidth: [{
|
|
4131
4133
|
type: HostBinding,
|
|
4132
4134
|
args: ['style.max-width']
|
|
@@ -4894,11 +4896,11 @@ class CarouselComponent extends AccessibleComponent {
|
|
|
4894
4896
|
return !libConfig.carouselSlideInfinite && getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
4895
4897
|
}
|
|
4896
4898
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CarouselComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: ModalGalleryService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4897
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CarouselComponent, selector: "ks-carousel", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage", changeImage: "changeImage", firstImage: "firstImage", lastImage: "lastImage" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown.arrowLeft": "onKeyDownLeft()", "keydown.arrowRight": "onKeyDownLRight()" }, properties: { "attr.aria-label": "this.ariaLabel" } }, providers: [ConfigService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main id=\"carousel-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselContainerTitle\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: ''}\">\n\n\n <!-- Workaround to support 2 ng-content in the same template in 2 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n
|
|
4899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CarouselComponent, selector: "ks-carousel", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage", changeImage: "changeImage", firstImage: "firstImage", lastImage: "lastImage" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown.arrowLeft": "onKeyDownLeft()", "keydown.arrowRight": "onKeyDownLRight()" }, properties: { "attr.aria-label": "this.ariaLabel" } }, providers: [ConfigService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main id=\"carousel-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselContainerTitle\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: ''}\">\n\n\n <!-- Workaround to support 2 ng-content in the same template in 2 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\n <img [id]=\"currentImage.id\"\n [loading]=\"currentImage.loading\"\n [attr.fetchpriority]=\"currentImage.fetchpriority\"\n [style.object-fit]=\"carouselConfig?.objectFit\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onClickCurrentImage()\"\n (swipeleft)=\"swipe($event.type)\"\n (swiperight)=\"swipe($event.type)\"/>\n </picture>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"description\"\n ksDescription [description]=\"carouselImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n\n <a class=\"nav-right\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n </a>\n\n <div id=\"dots\">\n <ks-dots [id]=\"id\"\n [currentImage]=\"currentImage\"\n [images]=\"images\"\n [dotsConfig]=\"carouselDotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n </div>\n\n </figure>\n\n</main>\n\n<ks-carousel-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n (clickPreview)=\"onClickPreview($event)\"></ks-carousel-previews>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: ["id", "currentImage", "images"], outputs: ["clickPreview"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: MaxSizeDirective, selector: "[ksMaxSize]", inputs: ["maxSizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4898
4900
|
}
|
|
4899
4901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
4900
4902
|
type: Component,
|
|
4901
|
-
args: [{ selector: 'ks-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigService], template: "<main id=\"carousel-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselContainerTitle\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: ''}\">\n\n\n <!-- Workaround to support 2 ng-content in the same template in 2 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n
|
|
4903
|
+
args: [{ selector: 'ks-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigService], template: "<main id=\"carousel-container\"\n [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n [title]=\"accessibilityConfig?.carouselContainerTitle\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: ''}\">\n\n\n <!-- Workaround to support 2 ng-content in the same template in 2 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n </a>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\n <img [id]=\"currentImage.id\"\n [loading]=\"currentImage.loading\"\n [attr.fetchpriority]=\"currentImage.fetchpriority\"\n [style.object-fit]=\"carouselConfig?.objectFit\"\n ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\"\n [src]=\"currentImage.modal.img\"\n ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"onClickCurrentImage()\"\n (swipeleft)=\"swipe($event.type)\"\n (swiperight)=\"swipe($event.type)\"/>\n </picture>\n <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"description\"\n ksDescription [description]=\"carouselImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n\n <a class=\"nav-right\" *ngIf=\"carouselConfig?.showArrows\"\n [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n </a>\n\n <div id=\"dots\">\n <ks-dots [id]=\"id\"\n [currentImage]=\"currentImage\"\n [images]=\"images\"\n [dotsConfig]=\"carouselDotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n </div>\n\n </figure>\n\n</main>\n\n<ks-carousel-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n (clickPreview)=\"onClickPreview($event)\"></ks-carousel-previews>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:black;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"] }]
|
|
4902
4904
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
4903
4905
|
type: Inject,
|
|
4904
4906
|
args: [PLATFORM_ID]
|
|
@@ -5373,11 +5375,11 @@ class PlainGalleryComponent extends AccessibleComponent {
|
|
|
5373
5375
|
}
|
|
5374
5376
|
}
|
|
5375
5377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PlainGalleryComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PlainGalleryComponent, selector: "ks-plain-gallery", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"plain-container\"\n ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n class=\"image\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"/>\n </ng-container>\n\n <!-- Add directive to set background with the image url as param to pass thumb or img-->\n <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n class=\"a-tag-image\"\n ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n [tabIndex]=\"0\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: WrapDirective, selector: "[ksWrap]", inputs: ["wrap", "width"] }, { kind: "directive", type: DirectionDirective, selector: "[ksDirection]", inputs: ["direction", "justify"] }, { kind: "directive", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: ["image", "style"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PlainGalleryComponent, selector: "ks-plain-gallery", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"plain-container\"\n ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [loading]=\"imgCol.loading\"\n [attr.fetchpriority]=\"imgCol.fetchpriority\"\n [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n class=\"image\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"/>\n </ng-container>\n\n <!-- Add directive to set background with the image url as param to pass thumb or img-->\n <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n class=\"a-tag-image\"\n ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n [tabIndex]=\"0\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: WrapDirective, selector: "[ksWrap]", inputs: ["wrap", "width"] }, { kind: "directive", type: DirectionDirective, selector: "[ksDirection]", inputs: ["direction", "justify"] }, { kind: "directive", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: ["image", "style"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5377
5379
|
}
|
|
5378
5380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PlainGalleryComponent, decorators: [{
|
|
5379
5381
|
type: Component,
|
|
5380
|
-
args: [{ selector: 'ks-plain-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"plain-container\"\n ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n class=\"image\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"/>\n </ng-container>\n\n <!-- Add directive to set background with the image url as param to pass thumb or img-->\n <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n class=\"a-tag-image\"\n ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n [tabIndex]=\"0\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"] }]
|
|
5382
|
+
args: [{ selector: 'ks-plain-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"plain-container\"\n ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [loading]=\"imgCol.loading\"\n [attr.fetchpriority]=\"imgCol.fetchpriority\"\n [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n class=\"image\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n [tabIndex]=\"0\" role=\"img\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"/>\n </ng-container>\n\n <!-- Add directive to set background with the image url as param to pass thumb or img-->\n <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n class=\"a-tag-image\"\n ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n [tabIndex]=\"0\"\n (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n </ng-template>\n\n </ng-container>\n </ng-container>\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"] }]
|
|
5381
5383
|
}], ctorParameters: function () { return [{ type: ConfigService }]; }, propDecorators: { id: [{
|
|
5382
5384
|
type: Input
|
|
5383
5385
|
}], images: [{
|