@ks89/angular-modal-gallery 9.0.0 → 9.1.0-beta.2
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 +37 -10
- package/README.md +4 -1
- package/esm2020/lib/components/modal-gallery/modal-gallery.component.mjs +4 -3
- package/esm2020/lib/components/previews/previews.component.mjs +73 -133
- package/esm2020/lib/model/modal-gallery-config.interface.mjs +1 -1
- package/fesm2015/ks89-angular-modal-gallery.mjs +79 -134
- package/fesm2015/ks89-angular-modal-gallery.mjs.map +1 -1
- package/fesm2020/ks89-angular-modal-gallery.mjs +76 -134
- package/fesm2020/ks89-angular-modal-gallery.mjs.map +1 -1
- package/lib/components/modal-gallery/modal-gallery.component.d.ts +5 -1
- package/lib/components/previews/previews.component.d.ts +21 -22
- package/lib/model/modal-gallery-config.interface.d.ts +8 -0
- package/package.json +2 -2
|
@@ -2712,25 +2712,10 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2712
2712
|
* In particular, it's called when any data-bound property of a directive changes!!!
|
|
2713
2713
|
*/
|
|
2714
2714
|
ngOnChanges(changes) {
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
if (currentImage) {
|
|
2720
|
-
prev = currentImage.previousValue;
|
|
2721
|
-
current = currentImage.currentValue;
|
|
2722
|
-
}
|
|
2723
|
-
else {
|
|
2724
|
-
current = this.currentImage;
|
|
2725
|
-
}
|
|
2726
|
-
if (current && images && images.previousValue && images.currentValue) {
|
|
2727
|
-
// I'm in this if statement, if input images are changed (for instance, because I removed one of them with the 'delete button',
|
|
2728
|
-
// or because users changed the images array while modal gallery is still open).
|
|
2729
|
-
// In this case, I have to re-init previews, because the input array of images is changed.
|
|
2730
|
-
this.initPreviews(current, images.currentValue);
|
|
2731
|
-
}
|
|
2732
|
-
if (prev && current && prev.id !== current.id) {
|
|
2733
|
-
this.updatePreviews(prev, current);
|
|
2715
|
+
let currentImage = changes.currentImage?.currentValue ?? this.currentImage;
|
|
2716
|
+
let images = changes.images?.currentValue ?? this.images;
|
|
2717
|
+
if (this.previewConfig && currentImage && images) {
|
|
2718
|
+
this.initPreviews(currentImage, images);
|
|
2734
2719
|
}
|
|
2735
2720
|
}
|
|
2736
2721
|
/**
|
|
@@ -2741,6 +2726,9 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2741
2726
|
* @param Action action that triggered the source event or `Action.NORMAL` if not specified
|
|
2742
2727
|
*/
|
|
2743
2728
|
onImageEvent(preview, event, action = Action.NORMAL) {
|
|
2729
|
+
// It's suggested to stop propagation of the event, so the
|
|
2730
|
+
// Cdk background will not catch a click and close the modal (like it does on Windows Chrome/FF).
|
|
2731
|
+
event?.stopPropagation();
|
|
2744
2732
|
if (!this.id || !this.images) {
|
|
2745
2733
|
throw new Error('Internal library error - id and images must be defined');
|
|
2746
2734
|
}
|
|
@@ -2778,165 +2766,117 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2778
2766
|
return item.id;
|
|
2779
2767
|
}
|
|
2780
2768
|
/**
|
|
2781
|
-
*
|
|
2782
|
-
*
|
|
2783
|
-
* @param InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
|
|
2784
|
-
* @param InternalLibImage[] images is the array of all images.
|
|
2769
|
+
* Indicates if the previews 'left arrow' should be displayed or not.
|
|
2770
|
+
* @returns
|
|
2785
2771
|
*/
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
}
|
|
2791
|
-
catch (err) {
|
|
2792
|
-
throw err;
|
|
2793
|
-
}
|
|
2794
|
-
switch (index) {
|
|
2795
|
-
case 0:
|
|
2796
|
-
// first image
|
|
2797
|
-
this.setBeginningIndexesPreviews();
|
|
2798
|
-
break;
|
|
2799
|
-
case images.length - 1:
|
|
2800
|
-
// last image
|
|
2801
|
-
this.setEndIndexesPreviews();
|
|
2802
|
-
break;
|
|
2803
|
-
default:
|
|
2804
|
-
// other images
|
|
2805
|
-
this.setIndexesPreviews();
|
|
2806
|
-
break;
|
|
2772
|
+
displayLeftPreviewsArrow() {
|
|
2773
|
+
// Don't show arrows if requested previews number equals or is greated than total number of imgaes
|
|
2774
|
+
if (this.previewConfig?.number !== undefined && this.images && this.previewConfig?.number >= this.images?.length) {
|
|
2775
|
+
return false;
|
|
2807
2776
|
}
|
|
2808
|
-
this.
|
|
2777
|
+
return (this.previewConfig?.arrows && this.start > 0) || !!this.slideConfig?.infinite;
|
|
2809
2778
|
}
|
|
2810
2779
|
/**
|
|
2811
|
-
*
|
|
2780
|
+
* Indicates if the previews 'right arrow' should be displayed or not.
|
|
2781
|
+
* @returns
|
|
2812
2782
|
*/
|
|
2813
|
-
|
|
2814
|
-
if
|
|
2815
|
-
|
|
2783
|
+
displayRightPreviewsArrow() {
|
|
2784
|
+
// Don't show arrows if requested previews number equals or is greated than total number of imgaes
|
|
2785
|
+
if (this.previewConfig?.number !== undefined && this.images && this.previewConfig?.number >= this.images?.length) {
|
|
2786
|
+
return false;
|
|
2816
2787
|
}
|
|
2817
|
-
this.
|
|
2818
|
-
this.end = Math.min(this.previewConfig.number, this.images.length);
|
|
2788
|
+
return (this.previewConfig?.arrows && this.images && this.end < this.images.length) || !!this.slideConfig?.infinite;
|
|
2819
2789
|
}
|
|
2820
2790
|
/**
|
|
2821
|
-
* Private method to init
|
|
2791
|
+
* Private method to init previews based on the currentImage and the full array of images.
|
|
2792
|
+
* The current image in mandatory to show always the current preview (as highlighted).
|
|
2793
|
+
* @param InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
|
|
2794
|
+
* @param InternalLibImage[] images is the array of all images.
|
|
2822
2795
|
*/
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
}
|
|
2827
|
-
this.start = this.images.length - 1 - (this.previewConfig.number - 1);
|
|
2828
|
-
this.end = this.images.length;
|
|
2796
|
+
initPreviews(currentImage, images) {
|
|
2797
|
+
this.setIndexesPreviews(currentImage, images);
|
|
2798
|
+
this.previews = images.filter((img, i) => i >= this.start && i < this.end);
|
|
2829
2799
|
}
|
|
2830
2800
|
/**
|
|
2831
2801
|
* Private method to update both `start` and `end` based on the currentImage.
|
|
2832
2802
|
*/
|
|
2833
|
-
setIndexesPreviews() {
|
|
2834
|
-
if (!this.previewConfig || !
|
|
2803
|
+
setIndexesPreviews(currentImage, images) {
|
|
2804
|
+
if (!this.previewConfig || !images || !currentImage) {
|
|
2835
2805
|
throw new Error('Internal library error - previewConfig, currentImage and images must be defined');
|
|
2836
2806
|
}
|
|
2837
|
-
|
|
2838
|
-
|
|
2807
|
+
const previewsNumber = this.previewConfig.number;
|
|
2808
|
+
let start = getIndex(currentImage, images) - Math.floor(previewsNumber / 2);
|
|
2809
|
+
// start is, at a minimum, the first index
|
|
2810
|
+
if (start < 0)
|
|
2811
|
+
start = 0;
|
|
2812
|
+
// end index
|
|
2813
|
+
let end = start + previewsNumber;
|
|
2814
|
+
// end is, at a maximum, the last index
|
|
2815
|
+
if (end > images.length) {
|
|
2816
|
+
start -= end - images.length;
|
|
2817
|
+
if (start < 0)
|
|
2818
|
+
start = 0; // start is, at a minimum, the first index
|
|
2819
|
+
end = images.length;
|
|
2820
|
+
}
|
|
2821
|
+
this.start = start;
|
|
2822
|
+
this.end = end;
|
|
2839
2823
|
}
|
|
2840
2824
|
/**
|
|
2841
2825
|
* Private method to update the visible previews navigating to the right (next).
|
|
2842
2826
|
*/
|
|
2843
2827
|
next() {
|
|
2844
|
-
if (!this.images) {
|
|
2828
|
+
if (!this.images || !this.previewConfig) {
|
|
2845
2829
|
throw new Error('Internal library error - images must be defined');
|
|
2846
2830
|
}
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2831
|
+
if (this.end >= this.images.length) {
|
|
2832
|
+
// check if nextImage should be blocked
|
|
2833
|
+
const preventSliding = !!this.slideConfig && this.slideConfig.infinite === false;
|
|
2834
|
+
if (preventSliding) {
|
|
2835
|
+
return;
|
|
2836
|
+
}
|
|
2837
|
+
this.start = 0;
|
|
2850
2838
|
}
|
|
2851
|
-
|
|
2852
|
-
|
|
2839
|
+
else {
|
|
2840
|
+
this.start++;
|
|
2853
2841
|
}
|
|
2854
|
-
this.start
|
|
2855
|
-
this.end = Math.min(this.end + 1, this.images.length);
|
|
2842
|
+
this.end = this.start + Math.min(this.previewConfig.number, this.images.length);
|
|
2856
2843
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2857
2844
|
}
|
|
2858
2845
|
/**
|
|
2859
2846
|
* Private method to update the visible previews navigating to the left (previous).
|
|
2860
2847
|
*/
|
|
2861
2848
|
previous() {
|
|
2862
|
-
if (!this.images) {
|
|
2849
|
+
if (!this.images || !this.previewConfig) {
|
|
2863
2850
|
throw new Error('Internal library error - images must be defined');
|
|
2864
2851
|
}
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2852
|
+
if (this.start <= 0) {
|
|
2853
|
+
// check if prevImage should be blocked
|
|
2854
|
+
const preventSliding = !!this.slideConfig && this.slideConfig.infinite === false;
|
|
2855
|
+
if (preventSliding) {
|
|
2856
|
+
return;
|
|
2857
|
+
}
|
|
2858
|
+
this.end = this.images.length;
|
|
2868
2859
|
}
|
|
2869
|
-
|
|
2870
|
-
|
|
2860
|
+
else {
|
|
2861
|
+
this.end--;
|
|
2871
2862
|
}
|
|
2872
|
-
this.start = Math.
|
|
2873
|
-
this.end = Math.min(this.end - 1, this.images.length);
|
|
2863
|
+
this.start = this.end - Math.min(this.previewConfig.number, this.images.length);
|
|
2874
2864
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2875
2865
|
}
|
|
2876
|
-
/**
|
|
2877
|
-
* Private method to block/permit sliding between previews.
|
|
2878
|
-
* @param number boundaryIndex is the first or the last index of `images` input array
|
|
2879
|
-
* @returns boolean if true block sliding, otherwise not
|
|
2880
|
-
*/
|
|
2881
|
-
isPreventSliding(boundaryIndex) {
|
|
2882
|
-
if (!this.images || !this.currentImage) {
|
|
2883
|
-
throw new Error('Internal library error - images and currentImage must be defined');
|
|
2884
|
-
}
|
|
2885
|
-
return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
2886
|
-
}
|
|
2887
|
-
/**
|
|
2888
|
-
* Private method to handle navigation changing the previews array and other variables.
|
|
2889
|
-
*/
|
|
2890
|
-
updatePreviews(prev, current) {
|
|
2891
|
-
if (!this.images) {
|
|
2892
|
-
throw new Error('Internal library error - images must be defined');
|
|
2893
|
-
}
|
|
2894
|
-
// to manage infinite sliding I have to reset both `start` and `end` at the beginning
|
|
2895
|
-
// to show again previews from the first image.
|
|
2896
|
-
// This happens when you navigate over the last image to return to the first one
|
|
2897
|
-
let prevIndex;
|
|
2898
|
-
let currentIndex;
|
|
2899
|
-
try {
|
|
2900
|
-
prevIndex = getIndex(prev, this.images);
|
|
2901
|
-
currentIndex = getIndex(current, this.images);
|
|
2902
|
-
}
|
|
2903
|
-
catch (err) {
|
|
2904
|
-
console.error('Cannot get previous and current image indexes in previews');
|
|
2905
|
-
throw err;
|
|
2906
|
-
}
|
|
2907
|
-
if (prevIndex === this.images.length - 1 && currentIndex === 0) {
|
|
2908
|
-
// first image
|
|
2909
|
-
this.setBeginningIndexesPreviews();
|
|
2910
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2911
|
-
return;
|
|
2912
|
-
}
|
|
2913
|
-
// the same for the opposite case, when you navigate back from the fist image to go to the last one.
|
|
2914
|
-
if (prevIndex === 0 && currentIndex === this.images.length - 1) {
|
|
2915
|
-
// last image
|
|
2916
|
-
this.setEndIndexesPreviews();
|
|
2917
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2918
|
-
return;
|
|
2919
|
-
}
|
|
2920
|
-
// otherwise manage standard scenarios
|
|
2921
|
-
if (prevIndex > currentIndex) {
|
|
2922
|
-
this.previous();
|
|
2923
|
-
}
|
|
2924
|
-
else if (prevIndex < currentIndex) {
|
|
2925
|
-
this.next();
|
|
2926
|
-
}
|
|
2927
|
-
}
|
|
2928
2866
|
}
|
|
2929
2867
|
PreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2930
|
-
PreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PreviewsComponent, selector: "ks-previews", inputs: { id: "id", currentImage: "currentImage", images: "images" }, 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]=\"
|
|
2868
|
+
PreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2931
2869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, decorators: [{
|
|
2932
2870
|
type: Component,
|
|
2933
|
-
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]=\"
|
|
2871
|
+
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"] }]
|
|
2934
2872
|
}], ctorParameters: function () { return [{ type: ConfigService }]; }, propDecorators: { id: [{
|
|
2935
2873
|
type: Input
|
|
2936
2874
|
}], currentImage: [{
|
|
2937
2875
|
type: Input
|
|
2938
2876
|
}], images: [{
|
|
2939
2877
|
type: Input
|
|
2878
|
+
}], customTemplate: [{
|
|
2879
|
+
type: Input
|
|
2940
2880
|
}], clickPreview: [{
|
|
2941
2881
|
type: Output
|
|
2942
2882
|
}] } });
|
|
@@ -3060,6 +3000,7 @@ class ModalGalleryComponent {
|
|
|
3060
3000
|
this.images = this.dialogContent.images;
|
|
3061
3001
|
this.currentImage = this.dialogContent.currentImage;
|
|
3062
3002
|
this.libConfig = this.dialogContent.libConfig;
|
|
3003
|
+
this.customPreviewsTemplate = this.dialogContent.previewsTemplate;
|
|
3063
3004
|
this.configService.setConfig(this.id, this.libConfig);
|
|
3064
3005
|
this.updateImagesSubscription = this.modalGalleryService.updateImages$.subscribe((images) => {
|
|
3065
3006
|
this.images = images.map((image) => {
|
|
@@ -3516,10 +3457,10 @@ class ModalGalleryComponent {
|
|
|
3516
3457
|
}
|
|
3517
3458
|
}
|
|
3518
3459
|
ModalGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ModalGalleryComponent, deps: [{ token: DIALOG_DATA }, { token: ModalGalleryService }, { token: KeyboardService }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: IdValidatorService }, { token: ConfigService }, { token: i5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3519
|
-
ModalGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ModalGalleryComponent, selector: "ks-modal-gallery", host: { listeners: { "window:popstate": "onPopState($event)" } }, viewQueries: [{ propertyName: "currentImageComponent", first: true, predicate: CurrentImageComponent, descendants: true, static: true }], ngImport: i0, template: "<div id=\"modal-gallery-wrapper\"\n [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n (clickOutside)=\"onClickOutside($event)\">\n\n <div id=\"flex-min-height-ie-fix\">\n <div id=\"modal-gallery-container\">\n\n <ks-upper-buttons [id]=\"id\"\n [currentImage]=\"currentImage\"\n (delete)=\"onDelete($event)\"\n (navigate)=\"onNavigate($event)\"\n (download)=\"onDownload($event)\"\n (closeButton)=\"onCloseGalleryButton($event)\"\n (fullscreen)=\"onFullScreen($event)\"\n (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n <ks-current-image [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [isOpen]=\"true\"\n (loadImage)=\"onImageLoad($event)\"\n (changeImage)=\"onChangeCurrentImage($event)\"\n (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n <div>\n <ks-dots [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [dotsConfig]=\"dotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n <ks-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n </div>\n </div>\n </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"], components: [{ type: UpperButtonsComponent, selector: "ks-upper-buttons", inputs: ["id", "currentImage"], outputs: ["refresh", "delete", "navigate", "download", "closeButton", "fullscreen", "customEmit"] }, { type: CurrentImageComponent, selector: "ks-current-image", inputs: ["id", "currentImage", "images", "isOpen"], outputs: ["loadImage", "changeImage", "closeGallery"] }, { type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { type: PreviewsComponent, selector: "ks-previews", inputs: ["id", "currentImage", "images"], outputs: ["clickPreview"] }], directives: [{ type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: ["clickOutsideEnable"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3460
|
+
ModalGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ModalGalleryComponent, selector: "ks-modal-gallery", host: { listeners: { "window:popstate": "onPopState($event)" } }, viewQueries: [{ propertyName: "currentImageComponent", first: true, predicate: CurrentImageComponent, descendants: true, static: true }], ngImport: i0, template: "<div id=\"modal-gallery-wrapper\"\n [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n (clickOutside)=\"onClickOutside($event)\">\n\n <div id=\"flex-min-height-ie-fix\">\n <div id=\"modal-gallery-container\">\n\n <ks-upper-buttons [id]=\"id\"\n [currentImage]=\"currentImage\"\n (delete)=\"onDelete($event)\"\n (navigate)=\"onNavigate($event)\"\n (download)=\"onDownload($event)\"\n (closeButton)=\"onCloseGalleryButton($event)\"\n (fullscreen)=\"onFullScreen($event)\"\n (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n <ks-current-image [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [isOpen]=\"true\"\n (loadImage)=\"onImageLoad($event)\"\n (changeImage)=\"onChangeCurrentImage($event)\"\n (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n <div>\n <ks-dots [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [dotsConfig]=\"dotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n <ks-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [customTemplate]=\"customPreviewsTemplate\"\n (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n </div>\n </div>\n </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"], components: [{ type: UpperButtonsComponent, selector: "ks-upper-buttons", inputs: ["id", "currentImage"], outputs: ["refresh", "delete", "navigate", "download", "closeButton", "fullscreen", "customEmit"] }, { type: CurrentImageComponent, selector: "ks-current-image", inputs: ["id", "currentImage", "images", "isOpen"], outputs: ["loadImage", "changeImage", "closeGallery"] }, { type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { type: PreviewsComponent, selector: "ks-previews", inputs: ["id", "currentImage", "images", "customTemplate"], outputs: ["clickPreview"] }], directives: [{ type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: ["clickOutsideEnable"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3520
3461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ModalGalleryComponent, decorators: [{
|
|
3521
3462
|
type: Component,
|
|
3522
|
-
args: [{ selector: 'ks-modal-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"modal-gallery-wrapper\"\n [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n (clickOutside)=\"onClickOutside($event)\">\n\n <div id=\"flex-min-height-ie-fix\">\n <div id=\"modal-gallery-container\">\n\n <ks-upper-buttons [id]=\"id\"\n [currentImage]=\"currentImage\"\n (delete)=\"onDelete($event)\"\n (navigate)=\"onNavigate($event)\"\n (download)=\"onDownload($event)\"\n (closeButton)=\"onCloseGalleryButton($event)\"\n (fullscreen)=\"onFullScreen($event)\"\n (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n <ks-current-image [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [isOpen]=\"true\"\n (loadImage)=\"onImageLoad($event)\"\n (changeImage)=\"onChangeCurrentImage($event)\"\n (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n <div>\n <ks-dots [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [dotsConfig]=\"dotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n <ks-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n </div>\n </div>\n </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"] }]
|
|
3463
|
+
args: [{ selector: 'ks-modal-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"modal-gallery-wrapper\"\n [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n (clickOutside)=\"onClickOutside($event)\">\n\n <div id=\"flex-min-height-ie-fix\">\n <div id=\"modal-gallery-container\">\n\n <ks-upper-buttons [id]=\"id\"\n [currentImage]=\"currentImage\"\n (delete)=\"onDelete($event)\"\n (navigate)=\"onNavigate($event)\"\n (download)=\"onDownload($event)\"\n (closeButton)=\"onCloseGalleryButton($event)\"\n (fullscreen)=\"onFullScreen($event)\"\n (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n <ks-current-image [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [isOpen]=\"true\"\n (loadImage)=\"onImageLoad($event)\"\n (changeImage)=\"onChangeCurrentImage($event)\"\n (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n <div>\n <ks-dots [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [dotsConfig]=\"dotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n <ks-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [customTemplate]=\"customPreviewsTemplate\"\n (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n </div>\n </div>\n </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"] }]
|
|
3523
3464
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
3524
3465
|
type: Inject,
|
|
3525
3466
|
args: [DIALOG_DATA]
|
|
@@ -5769,3 +5710,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
|
5769
5710
|
*/
|
|
5770
5711
|
|
|
5771
5712
|
export { Action, ButtonType, ButtonsStrategy, CarouselComponent, DescriptionStrategy, GalleryModule, GridLayout, Image, ImageEvent, ImageModalEvent, KS_DEFAULT_ACCESSIBILITY_CONFIG, KS_DEFAULT_BTN_CLOSE, KS_DEFAULT_BTN_DELETE, KS_DEFAULT_BTN_DOWNLOAD, KS_DEFAULT_BTN_EXTURL, KS_DEFAULT_BTN_FULL_SCREEN, KS_DEFAULT_SIZE, LineLayout, LoadingType, ModalGalleryComponent, ModalGalleryRef, ModalGalleryService, PlainGalleryComponent, PlainGalleryStrategy };
|
|
5713
|
+
//# sourceMappingURL=ks89-angular-modal-gallery.mjs.map
|