@ks89/angular-modal-gallery 9.1.0-beta.1 → 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 +23 -10
- package/README.md +1 -0
- package/esm2020/lib/components/previews/previews.component.mjs +68 -133
- package/fesm2015/ks89-angular-modal-gallery.mjs +71 -132
- package/fesm2015/ks89-angular-modal-gallery.mjs.map +1 -1
- package/fesm2020/ks89-angular-modal-gallery.mjs +68 -132
- package/fesm2020/ks89-angular-modal-gallery.mjs.map +1 -1
- package/lib/components/previews/previews.component.d.ts +12 -20
- package/package.json +1 -1
|
@@ -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
|
/**
|
|
@@ -2781,159 +2766,109 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2781
2766
|
return item.id;
|
|
2782
2767
|
}
|
|
2783
2768
|
/**
|
|
2784
|
-
*
|
|
2785
|
-
*
|
|
2786
|
-
* @param InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
|
|
2787
|
-
* @param InternalLibImage[] images is the array of all images.
|
|
2769
|
+
* Indicates if the previews 'left arrow' should be displayed or not.
|
|
2770
|
+
* @returns
|
|
2788
2771
|
*/
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
}
|
|
2794
|
-
catch (err) {
|
|
2795
|
-
throw err;
|
|
2796
|
-
}
|
|
2797
|
-
switch (index) {
|
|
2798
|
-
case 0:
|
|
2799
|
-
// first image
|
|
2800
|
-
this.setBeginningIndexesPreviews();
|
|
2801
|
-
break;
|
|
2802
|
-
case images.length - 1:
|
|
2803
|
-
// last image
|
|
2804
|
-
this.setEndIndexesPreviews();
|
|
2805
|
-
break;
|
|
2806
|
-
default:
|
|
2807
|
-
// other images
|
|
2808
|
-
this.setIndexesPreviews();
|
|
2809
|
-
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;
|
|
2810
2776
|
}
|
|
2811
|
-
this.
|
|
2777
|
+
return (this.previewConfig?.arrows && this.start > 0) || !!this.slideConfig?.infinite;
|
|
2812
2778
|
}
|
|
2813
2779
|
/**
|
|
2814
|
-
*
|
|
2780
|
+
* Indicates if the previews 'right arrow' should be displayed or not.
|
|
2781
|
+
* @returns
|
|
2815
2782
|
*/
|
|
2816
|
-
|
|
2817
|
-
if
|
|
2818
|
-
|
|
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;
|
|
2819
2787
|
}
|
|
2820
|
-
this.
|
|
2821
|
-
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;
|
|
2822
2789
|
}
|
|
2823
2790
|
/**
|
|
2824
|
-
* 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.
|
|
2825
2795
|
*/
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
}
|
|
2830
|
-
this.start = this.images.length - 1 - (this.previewConfig.number - 1);
|
|
2831
|
-
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);
|
|
2832
2799
|
}
|
|
2833
2800
|
/**
|
|
2834
2801
|
* Private method to update both `start` and `end` based on the currentImage.
|
|
2835
2802
|
*/
|
|
2836
|
-
setIndexesPreviews() {
|
|
2837
|
-
if (!this.previewConfig || !
|
|
2803
|
+
setIndexesPreviews(currentImage, images) {
|
|
2804
|
+
if (!this.previewConfig || !images || !currentImage) {
|
|
2838
2805
|
throw new Error('Internal library error - previewConfig, currentImage and images must be defined');
|
|
2839
2806
|
}
|
|
2840
|
-
|
|
2841
|
-
|
|
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;
|
|
2842
2823
|
}
|
|
2843
2824
|
/**
|
|
2844
2825
|
* Private method to update the visible previews navigating to the right (next).
|
|
2845
2826
|
*/
|
|
2846
2827
|
next() {
|
|
2847
|
-
if (!this.images) {
|
|
2828
|
+
if (!this.images || !this.previewConfig) {
|
|
2848
2829
|
throw new Error('Internal library error - images must be defined');
|
|
2849
2830
|
}
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
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;
|
|
2853
2838
|
}
|
|
2854
|
-
|
|
2855
|
-
|
|
2839
|
+
else {
|
|
2840
|
+
this.start++;
|
|
2856
2841
|
}
|
|
2857
|
-
this.start
|
|
2858
|
-
this.end = Math.min(this.end + 1, this.images.length);
|
|
2842
|
+
this.end = this.start + Math.min(this.previewConfig.number, this.images.length);
|
|
2859
2843
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2860
2844
|
}
|
|
2861
2845
|
/**
|
|
2862
2846
|
* Private method to update the visible previews navigating to the left (previous).
|
|
2863
2847
|
*/
|
|
2864
2848
|
previous() {
|
|
2865
|
-
if (!this.images) {
|
|
2849
|
+
if (!this.images || !this.previewConfig) {
|
|
2866
2850
|
throw new Error('Internal library error - images must be defined');
|
|
2867
2851
|
}
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
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;
|
|
2871
2859
|
}
|
|
2872
|
-
|
|
2873
|
-
|
|
2860
|
+
else {
|
|
2861
|
+
this.end--;
|
|
2874
2862
|
}
|
|
2875
|
-
this.start = Math.
|
|
2876
|
-
this.end = Math.min(this.end - 1, this.images.length);
|
|
2863
|
+
this.start = this.end - Math.min(this.previewConfig.number, this.images.length);
|
|
2877
2864
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2878
2865
|
}
|
|
2879
|
-
/**
|
|
2880
|
-
* Private method to block/permit sliding between previews.
|
|
2881
|
-
* @param number boundaryIndex is the first or the last index of `images` input array
|
|
2882
|
-
* @returns boolean if true block sliding, otherwise not
|
|
2883
|
-
*/
|
|
2884
|
-
isPreventSliding(boundaryIndex) {
|
|
2885
|
-
if (!this.images || !this.currentImage) {
|
|
2886
|
-
throw new Error('Internal library error - images and currentImage must be defined');
|
|
2887
|
-
}
|
|
2888
|
-
return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
2889
|
-
}
|
|
2890
|
-
/**
|
|
2891
|
-
* Private method to handle navigation changing the previews array and other variables.
|
|
2892
|
-
*/
|
|
2893
|
-
updatePreviews(prev, current) {
|
|
2894
|
-
if (!this.images) {
|
|
2895
|
-
throw new Error('Internal library error - images must be defined');
|
|
2896
|
-
}
|
|
2897
|
-
// to manage infinite sliding I have to reset both `start` and `end` at the beginning
|
|
2898
|
-
// to show again previews from the first image.
|
|
2899
|
-
// This happens when you navigate over the last image to return to the first one
|
|
2900
|
-
let prevIndex;
|
|
2901
|
-
let currentIndex;
|
|
2902
|
-
try {
|
|
2903
|
-
prevIndex = getIndex(prev, this.images);
|
|
2904
|
-
currentIndex = getIndex(current, this.images);
|
|
2905
|
-
}
|
|
2906
|
-
catch (err) {
|
|
2907
|
-
console.error('Cannot get previous and current image indexes in previews');
|
|
2908
|
-
throw err;
|
|
2909
|
-
}
|
|
2910
|
-
if (prevIndex === this.images.length - 1 && currentIndex === 0) {
|
|
2911
|
-
// first image
|
|
2912
|
-
this.setBeginningIndexesPreviews();
|
|
2913
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2914
|
-
return;
|
|
2915
|
-
}
|
|
2916
|
-
// the same for the opposite case, when you navigate back from the fist image to go to the last one.
|
|
2917
|
-
if (prevIndex === 0 && currentIndex === this.images.length - 1) {
|
|
2918
|
-
// last image
|
|
2919
|
-
this.setEndIndexesPreviews();
|
|
2920
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2921
|
-
return;
|
|
2922
|
-
}
|
|
2923
|
-
// otherwise manage standard scenarios
|
|
2924
|
-
if (prevIndex > currentIndex) {
|
|
2925
|
-
this.previous();
|
|
2926
|
-
}
|
|
2927
|
-
else if (prevIndex < currentIndex) {
|
|
2928
|
-
this.next();
|
|
2929
|
-
}
|
|
2930
|
-
}
|
|
2931
2866
|
}
|
|
2932
2867
|
PreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2933
|
-
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]=\"
|
|
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 });
|
|
2934
2869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, decorators: [{
|
|
2935
2870
|
type: Component,
|
|
2936
|
-
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"] }]
|
|
2937
2872
|
}], ctorParameters: function () { return [{ type: ConfigService }]; }, propDecorators: { id: [{
|
|
2938
2873
|
type: Input
|
|
2939
2874
|
}], currentImage: [{
|
|
@@ -5775,3 +5710,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
|
5775
5710
|
*/
|
|
5776
5711
|
|
|
5777
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
|