@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
|
@@ -2717,25 +2717,11 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2717
2717
|
* In particular, it's called when any data-bound property of a directive changes!!!
|
|
2718
2718
|
*/
|
|
2719
2719
|
ngOnChanges(changes) {
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
let
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
prev = currentImage.previousValue;
|
|
2726
|
-
current = currentImage.currentValue;
|
|
2727
|
-
}
|
|
2728
|
-
else {
|
|
2729
|
-
current = this.currentImage;
|
|
2730
|
-
}
|
|
2731
|
-
if (current && images && images.previousValue && images.currentValue) {
|
|
2732
|
-
// I'm in this if statement, if input images are changed (for instance, because I removed one of them with the 'delete button',
|
|
2733
|
-
// or because users changed the images array while modal gallery is still open).
|
|
2734
|
-
// In this case, I have to re-init previews, because the input array of images is changed.
|
|
2735
|
-
this.initPreviews(current, images.currentValue);
|
|
2736
|
-
}
|
|
2737
|
-
if (prev && current && prev.id !== current.id) {
|
|
2738
|
-
this.updatePreviews(prev, current);
|
|
2720
|
+
var _a, _b, _c, _d;
|
|
2721
|
+
let currentImage = (_b = (_a = changes.currentImage) === null || _a === void 0 ? void 0 : _a.currentValue) !== null && _b !== void 0 ? _b : this.currentImage;
|
|
2722
|
+
let images = (_d = (_c = changes.images) === null || _c === void 0 ? void 0 : _c.currentValue) !== null && _d !== void 0 ? _d : this.images;
|
|
2723
|
+
if (this.previewConfig && currentImage && images) {
|
|
2724
|
+
this.initPreviews(currentImage, images);
|
|
2739
2725
|
}
|
|
2740
2726
|
}
|
|
2741
2727
|
/**
|
|
@@ -2786,159 +2772,111 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
2786
2772
|
return item.id;
|
|
2787
2773
|
}
|
|
2788
2774
|
/**
|
|
2789
|
-
*
|
|
2790
|
-
*
|
|
2791
|
-
* @param InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
|
|
2792
|
-
* @param InternalLibImage[] images is the array of all images.
|
|
2775
|
+
* Indicates if the previews 'left arrow' should be displayed or not.
|
|
2776
|
+
* @returns
|
|
2793
2777
|
*/
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
catch (err) {
|
|
2800
|
-
throw err;
|
|
2801
|
-
}
|
|
2802
|
-
switch (index) {
|
|
2803
|
-
case 0:
|
|
2804
|
-
// first image
|
|
2805
|
-
this.setBeginningIndexesPreviews();
|
|
2806
|
-
break;
|
|
2807
|
-
case images.length - 1:
|
|
2808
|
-
// last image
|
|
2809
|
-
this.setEndIndexesPreviews();
|
|
2810
|
-
break;
|
|
2811
|
-
default:
|
|
2812
|
-
// other images
|
|
2813
|
-
this.setIndexesPreviews();
|
|
2814
|
-
break;
|
|
2778
|
+
displayLeftPreviewsArrow() {
|
|
2779
|
+
var _a, _b, _c, _d, _e;
|
|
2780
|
+
// Don't show arrows if requested previews number equals or is greated than total number of imgaes
|
|
2781
|
+
if (((_a = this.previewConfig) === null || _a === void 0 ? void 0 : _a.number) !== undefined && this.images && ((_b = this.previewConfig) === null || _b === void 0 ? void 0 : _b.number) >= ((_c = this.images) === null || _c === void 0 ? void 0 : _c.length)) {
|
|
2782
|
+
return false;
|
|
2815
2783
|
}
|
|
2816
|
-
|
|
2784
|
+
return (((_d = this.previewConfig) === null || _d === void 0 ? void 0 : _d.arrows) && this.start > 0) || !!((_e = this.slideConfig) === null || _e === void 0 ? void 0 : _e.infinite);
|
|
2817
2785
|
}
|
|
2818
2786
|
/**
|
|
2819
|
-
*
|
|
2787
|
+
* Indicates if the previews 'right arrow' should be displayed or not.
|
|
2788
|
+
* @returns
|
|
2820
2789
|
*/
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2790
|
+
displayRightPreviewsArrow() {
|
|
2791
|
+
var _a, _b, _c, _d, _e;
|
|
2792
|
+
// Don't show arrows if requested previews number equals or is greated than total number of imgaes
|
|
2793
|
+
if (((_a = this.previewConfig) === null || _a === void 0 ? void 0 : _a.number) !== undefined && this.images && ((_b = this.previewConfig) === null || _b === void 0 ? void 0 : _b.number) >= ((_c = this.images) === null || _c === void 0 ? void 0 : _c.length)) {
|
|
2794
|
+
return false;
|
|
2824
2795
|
}
|
|
2825
|
-
this.
|
|
2826
|
-
this.end = Math.min(this.previewConfig.number, this.images.length);
|
|
2796
|
+
return (((_d = this.previewConfig) === null || _d === void 0 ? void 0 : _d.arrows) && this.images && this.end < this.images.length) || !!((_e = this.slideConfig) === null || _e === void 0 ? void 0 : _e.infinite);
|
|
2827
2797
|
}
|
|
2828
2798
|
/**
|
|
2829
|
-
* Private method to init
|
|
2799
|
+
* Private method to init previews based on the currentImage and the full array of images.
|
|
2800
|
+
* The current image in mandatory to show always the current preview (as highlighted).
|
|
2801
|
+
* @param InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
|
|
2802
|
+
* @param InternalLibImage[] images is the array of all images.
|
|
2830
2803
|
*/
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
}
|
|
2835
|
-
this.start = this.images.length - 1 - (this.previewConfig.number - 1);
|
|
2836
|
-
this.end = this.images.length;
|
|
2804
|
+
initPreviews(currentImage, images) {
|
|
2805
|
+
this.setIndexesPreviews(currentImage, images);
|
|
2806
|
+
this.previews = images.filter((img, i) => i >= this.start && i < this.end);
|
|
2837
2807
|
}
|
|
2838
2808
|
/**
|
|
2839
2809
|
* Private method to update both `start` and `end` based on the currentImage.
|
|
2840
2810
|
*/
|
|
2841
|
-
setIndexesPreviews() {
|
|
2842
|
-
if (!this.previewConfig || !
|
|
2811
|
+
setIndexesPreviews(currentImage, images) {
|
|
2812
|
+
if (!this.previewConfig || !images || !currentImage) {
|
|
2843
2813
|
throw new Error('Internal library error - previewConfig, currentImage and images must be defined');
|
|
2844
2814
|
}
|
|
2845
|
-
|
|
2846
|
-
|
|
2815
|
+
const previewsNumber = this.previewConfig.number;
|
|
2816
|
+
let start = getIndex(currentImage, images) - Math.floor(previewsNumber / 2);
|
|
2817
|
+
// start is, at a minimum, the first index
|
|
2818
|
+
if (start < 0)
|
|
2819
|
+
start = 0;
|
|
2820
|
+
// end index
|
|
2821
|
+
let end = start + previewsNumber;
|
|
2822
|
+
// end is, at a maximum, the last index
|
|
2823
|
+
if (end > images.length) {
|
|
2824
|
+
start -= end - images.length;
|
|
2825
|
+
if (start < 0)
|
|
2826
|
+
start = 0; // start is, at a minimum, the first index
|
|
2827
|
+
end = images.length;
|
|
2828
|
+
}
|
|
2829
|
+
this.start = start;
|
|
2830
|
+
this.end = end;
|
|
2847
2831
|
}
|
|
2848
2832
|
/**
|
|
2849
2833
|
* Private method to update the visible previews navigating to the right (next).
|
|
2850
2834
|
*/
|
|
2851
2835
|
next() {
|
|
2852
|
-
if (!this.images) {
|
|
2836
|
+
if (!this.images || !this.previewConfig) {
|
|
2853
2837
|
throw new Error('Internal library error - images must be defined');
|
|
2854
2838
|
}
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2839
|
+
if (this.end >= this.images.length) {
|
|
2840
|
+
// check if nextImage should be blocked
|
|
2841
|
+
const preventSliding = !!this.slideConfig && this.slideConfig.infinite === false;
|
|
2842
|
+
if (preventSliding) {
|
|
2843
|
+
return;
|
|
2844
|
+
}
|
|
2845
|
+
this.start = 0;
|
|
2858
2846
|
}
|
|
2859
|
-
|
|
2860
|
-
|
|
2847
|
+
else {
|
|
2848
|
+
this.start++;
|
|
2861
2849
|
}
|
|
2862
|
-
this.start
|
|
2863
|
-
this.end = Math.min(this.end + 1, this.images.length);
|
|
2850
|
+
this.end = this.start + Math.min(this.previewConfig.number, this.images.length);
|
|
2864
2851
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2865
2852
|
}
|
|
2866
2853
|
/**
|
|
2867
2854
|
* Private method to update the visible previews navigating to the left (previous).
|
|
2868
2855
|
*/
|
|
2869
2856
|
previous() {
|
|
2870
|
-
if (!this.images) {
|
|
2857
|
+
if (!this.images || !this.previewConfig) {
|
|
2871
2858
|
throw new Error('Internal library error - images must be defined');
|
|
2872
2859
|
}
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2860
|
+
if (this.start <= 0) {
|
|
2861
|
+
// check if prevImage should be blocked
|
|
2862
|
+
const preventSliding = !!this.slideConfig && this.slideConfig.infinite === false;
|
|
2863
|
+
if (preventSliding) {
|
|
2864
|
+
return;
|
|
2865
|
+
}
|
|
2866
|
+
this.end = this.images.length;
|
|
2876
2867
|
}
|
|
2877
|
-
|
|
2878
|
-
|
|
2868
|
+
else {
|
|
2869
|
+
this.end--;
|
|
2879
2870
|
}
|
|
2880
|
-
this.start = Math.
|
|
2881
|
-
this.end = Math.min(this.end - 1, this.images.length);
|
|
2871
|
+
this.start = this.end - Math.min(this.previewConfig.number, this.images.length);
|
|
2882
2872
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2883
2873
|
}
|
|
2884
|
-
/**
|
|
2885
|
-
* Private method to block/permit sliding between previews.
|
|
2886
|
-
* @param number boundaryIndex is the first or the last index of `images` input array
|
|
2887
|
-
* @returns boolean if true block sliding, otherwise not
|
|
2888
|
-
*/
|
|
2889
|
-
isPreventSliding(boundaryIndex) {
|
|
2890
|
-
if (!this.images || !this.currentImage) {
|
|
2891
|
-
throw new Error('Internal library error - images and currentImage must be defined');
|
|
2892
|
-
}
|
|
2893
|
-
return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
2894
|
-
}
|
|
2895
|
-
/**
|
|
2896
|
-
* Private method to handle navigation changing the previews array and other variables.
|
|
2897
|
-
*/
|
|
2898
|
-
updatePreviews(prev, current) {
|
|
2899
|
-
if (!this.images) {
|
|
2900
|
-
throw new Error('Internal library error - images must be defined');
|
|
2901
|
-
}
|
|
2902
|
-
// to manage infinite sliding I have to reset both `start` and `end` at the beginning
|
|
2903
|
-
// to show again previews from the first image.
|
|
2904
|
-
// This happens when you navigate over the last image to return to the first one
|
|
2905
|
-
let prevIndex;
|
|
2906
|
-
let currentIndex;
|
|
2907
|
-
try {
|
|
2908
|
-
prevIndex = getIndex(prev, this.images);
|
|
2909
|
-
currentIndex = getIndex(current, this.images);
|
|
2910
|
-
}
|
|
2911
|
-
catch (err) {
|
|
2912
|
-
console.error('Cannot get previous and current image indexes in previews');
|
|
2913
|
-
throw err;
|
|
2914
|
-
}
|
|
2915
|
-
if (prevIndex === this.images.length - 1 && currentIndex === 0) {
|
|
2916
|
-
// first image
|
|
2917
|
-
this.setBeginningIndexesPreviews();
|
|
2918
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2919
|
-
return;
|
|
2920
|
-
}
|
|
2921
|
-
// the same for the opposite case, when you navigate back from the fist image to go to the last one.
|
|
2922
|
-
if (prevIndex === 0 && currentIndex === this.images.length - 1) {
|
|
2923
|
-
// last image
|
|
2924
|
-
this.setEndIndexesPreviews();
|
|
2925
|
-
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
2926
|
-
return;
|
|
2927
|
-
}
|
|
2928
|
-
// otherwise manage standard scenarios
|
|
2929
|
-
if (prevIndex > currentIndex) {
|
|
2930
|
-
this.previous();
|
|
2931
|
-
}
|
|
2932
|
-
else if (prevIndex < currentIndex) {
|
|
2933
|
-
this.next();
|
|
2934
|
-
}
|
|
2935
|
-
}
|
|
2936
2874
|
}
|
|
2937
2875
|
PreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2938
|
-
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]=\"
|
|
2876
|
+
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 });
|
|
2939
2877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewsComponent, decorators: [{
|
|
2940
2878
|
type: Component,
|
|
2941
|
-
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]=\"
|
|
2879
|
+
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"] }]
|
|
2942
2880
|
}], ctorParameters: function () { return [{ type: ConfigService }]; }, propDecorators: { id: [{
|
|
2943
2881
|
type: Input
|
|
2944
2882
|
}], currentImage: [{
|
|
@@ -5786,3 +5724,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
|
5786
5724
|
*/
|
|
5787
5725
|
|
|
5788
5726
|
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 };
|
|
5727
|
+
//# sourceMappingURL=ks89-angular-modal-gallery.mjs.map
|