@ks89/angular-modal-gallery - npm Package Compare versions

Comparing version 10.0.1 to 11.0.0-rc.1

CHANGELOG.md

@@ -0,1 +1,12 @@
+# 11.0.0-rc.1
+
+**Migrate from 10.0.0 to 11.0.0 - Check the official guide [HERE](https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/)**
+
+### Features
+
+- remove `hammerjs` dependency (because deprecated) to mange swipe events preferring a custom directive #218 **(BREAKING CHANGE)**
+- remove `mousetrap` dependency to manage ctrl+s/meta+s event to save the current image in modal-gallery component.
+  This in a very important change, because from now you won't be able to customize ctrl+s/meta+s shortcuts #237 **(BREAKING CHANGE)**
+
+
 # 10.0.1
@@ -2,0 +13,0 @@

CONTRIBUTING.md

@@ -13,3 +13,3 @@ Sometimes, shy developers have wonderful ideas. So don't be shy and open an issue! :)
 4. `npm run clean:all`
-5. `cd examples/angular-cli-15`
+5. `cd examples/angular-cli-16`
 6. `npm install`
@@ -35,4 +35,4 @@ 7. `cd ../..`
 
-# C. Run angular-cli-15 example
-1. `cd examples/angular-cli-15`
+# C. Run angular-cli-16 example
+1. `cd examples/angular-cli-16`
 2. `npm start` => if everything is ok (also in browser's console), kill the process and go to the next step
@@ -39,0 +39,0 @@ 3. `npm run build:dev`

lib/components/carousel/carousel-previews/carousel-previews.component.d.ts

@@ -98,3 +98,3 @@ import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
      * init the `previews` array.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -112,3 +112,3 @@ */
      * Also, both `start` and `end` local variables will be updated accordingly.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -163,3 +163,3 @@ */
      * Method to cleanup resources. In fact, it cleans breakpointSubscription.
-     * This is an Angular's lifecycle hook that is called when this component is destroyed.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
      */
@@ -197,3 +197,3 @@ ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CarouselPreviewsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselPreviewsComponent, "ks-carousel-previews", never, { "id": "id"; "currentImage": "currentImage"; "images": "images"; }, { "clickPreview": "clickPreview"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselPreviewsComponent, "ks-carousel-previews", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; }, { "clickPreview": "clickPreview"; }, never, never, false, never>;
 }

lib/components/carousel/carousel.component.d.ts

@@ -12,2 +12,3 @@ import { AfterContentInit, ChangeDetectorRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { CarouselLibConfig } from '../../model/lib-config.interface';
+import { InternalLibImage } from '../../model/image-internal.class';
 import * as i0 from "@angular/core";
@@ -93,3 +94,3 @@ /**
      */
-    currentImage: Image | undefined;
+    currentImage: InternalLibImage | undefined;
     /**
@@ -114,6 +115,2 @@ * Boolean that it's true when you are watching the first image (currently visible).
     /**
-     * Private object without type to define all swipe actions used by hammerjs.
-     */
-    private SWIPE_ACTION;
-    /**
      * Listener to stop the gallery when the mouse pointer is over the current image.
@@ -165,3 +162,3 @@ */
     /**
-     * Method used by Hammerjs to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+     * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
      * @param action String that represent the direction of the swipe action. 'swiperight' by default.
@@ -223,3 +220,3 @@ */
      * Method to cleanup resources. In fact, this will stop the carousel.
-     * This is an Angular's lifecycle hook that is called when this component is destroyed.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
      */
@@ -283,3 +280,3 @@ ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "ks-carousel", never, { "id": "id"; "images": "images"; "config": "config"; }, { "clickImage": "clickImage"; "changeImage": "changeImage"; "firstImage": "firstImage"; "lastImage": "lastImage"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "ks-carousel", never, { "id": { "alias": "id"; "required": false; }; "images": { "alias": "images"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "clickImage": "clickImage"; "changeImage": "changeImage"; "firstImage": "firstImage"; "lastImage": "lastImage"; }, never, ["*"], false, never>;
 }

lib/components/current-image/current-image.component.d.ts

@@ -116,6 +116,2 @@ import { AfterContentInit, ChangeDetectorRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
     loading: boolean;
-    /**
-     * Private object without type to define all swipe actions used by hammerjs.
-     */
-    private SWIPE_ACTION;
     constructor(platformId: any, ngZone: NgZone, ref: ChangeDetectorRef, configService: ConfigService);
@@ -132,3 +128,3 @@ /**
      * Method ´ngOnInit´ to init configuration.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -140,3 +136,3 @@ */
      * If the gallery is open, then it will also manage boundary arrows and sliding.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -146,3 +142,3 @@ */
     /**
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      */
@@ -225,3 +221,3 @@ ngAfterContentInit(): void;
     /**
-     * Method used by Hammerjs to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+     * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
      * @param action String that represent the direction of the swipe action. 'swiperight' by default.
@@ -246,3 +242,3 @@ */
      * Method to cleanup resources. In fact, this will stop the modal gallery.
-     * This is an Angular's lifecycle hook that is called when this component is destroyed.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
      */
@@ -291,3 +287,3 @@ ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CurrentImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CurrentImageComponent, "ks-current-image", never, { "id": "id"; "currentImage": "currentImage"; "images": "images"; "isOpen": "isOpen"; }, { "loadImage": "loadImage"; "changeImage": "changeImage"; "closeGallery": "closeGallery"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CurrentImageComponent, "ks-current-image", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; }, { "loadImage": "loadImage"; "changeImage": "changeImage"; "closeGallery": "closeGallery"; }, never, never, false, never>;
 }

lib/components/current-image/loading-spinner/loading-spinner.component.d.ts

@@ -12,3 +12,3 @@ import { AccessibilityConfig } from '../../../model/accessibility.interface';
      */
-    loadingConfig: LoadingConfig | undefined;
+    loadingConfig: LoadingConfig;
     /**
@@ -18,3 +18,3 @@ * Object of type `AccessibilityConfig` to init custom accessibility features.
      */
-    accessibilityConfig: AccessibilityConfig | undefined;
+    accessibilityConfig: AccessibilityConfig;
     /**
@@ -56,3 +56,3 @@ * Enum of type `LoadingType` to choose the standard loading spinner.
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSpinnerComponent, "ks-loading-spinner", never, { "loadingConfig": "loadingConfig"; "accessibilityConfig": "accessibilityConfig"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSpinnerComponent, "ks-loading-spinner", never, { "loadingConfig": { "alias": "loadingConfig"; "required": false; }; "accessibilityConfig": { "alias": "accessibilityConfig"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/components/dots/dots.component.d.ts

@@ -18,3 +18,3 @@ import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
      */
-    id: number | undefined;
+    id: number;
     /**
@@ -33,3 +33,3 @@ * Object of type `InternalLibImage` that represent the visible image.
      */
-    dotsConfig: DotsConfig | undefined;
+    dotsConfig: DotsConfig;
     /**
@@ -52,3 +52,3 @@ * Output to emit clicks on dots. The payload contains a number that represent
      * Method ´ngOnInit´ to build `configDots` applying a default value.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -59,3 +59,3 @@ */
      * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      */
@@ -84,3 +84,3 @@ ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DotsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DotsComponent, "ks-dots", never, { "id": "id"; "currentImage": "currentImage"; "images": "images"; "dotsConfig": "dotsConfig"; }, { "clickDot": "clickDot"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DotsComponent, "ks-dots", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "dotsConfig": { "alias": "dotsConfig"; "required": false; }; }, { "clickDot": "clickDot"; }, never, never, false, never>;
 }

lib/components/modal-gallery/modal-gallery.component.d.ts

@@ -10,3 +10,2 @@ import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { CurrentImageComponent, ImageLoadEvent } from '../current-image/current-image.component';
-import { KeyboardService } from '../../services/keyboard.service';
 import { IdValidatorService } from '../../services/id-validator.service';
@@ -25,3 +24,2 @@ import { KeyboardConfig } from '../../model/keyboard-config.interface';
     private modalGalleryService;
-    private keyboardService;
     private platformId;
@@ -103,7 +101,12 @@ private changeDetectorRef;
      */
-    onPopState(e: Event): void;
-    constructor(dialogContent: ModalGalleryConfig, modalGalleryService: ModalGalleryService, keyboardService: KeyboardService, platformId: Object, changeDetectorRef: ChangeDetectorRef, idValidatorService: IdValidatorService, configService: ConfigService, sanitizer: DomSanitizer);
+    onPopState(): void;
     /**
+     * HostListener to catch ctrl+s/meta+s and download the current image.
+     * Inspired by https://netbasal.com/add-keyboard-shortcuts-to-your-angular-app-9bf2e89862b3
+     */
+    onSaveListener(event: KeyboardEvent): void;
+    constructor(dialogContent: ModalGalleryConfig, modalGalleryService: ModalGalleryService, platformId: Object, changeDetectorRef: ChangeDetectorRef, idValidatorService: IdValidatorService, configService: ConfigService, sanitizer: DomSanitizer);
+    /**
      * Method ´ngOnInit´ to init images calling `initImages()`.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -150,3 +153,3 @@ */
     /**
-     * Method called by CurrentImageComponent and triggered via KeyboardService.
+     * Method called by CurrentImageComponent.
      * @param event ImageModalEvent event payload
@@ -158,3 +161,2 @@ * @param action Action that triggered the close method. `Action.NORMAL` by default
      * Method to close the modal gallery specifying the action.
-     * It also reset the `keyboardService` to prevent multiple listeners.
      * @param action Action action type. `Action.NORMAL` by default
@@ -192,15 +194,7 @@ * @param clickOutside boolean that is true if called clicking on the modal background. False by default.
     /**
-     * Method to cleanup resources. In fact, this will reset keyboard's service.
-     * This is an Angular's lifecycle hook that is called when this component is destroyed.
+     * Method to cleanup resources.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
      */
     ngOnDestroy(): void;
     /**
-     * Method to show the modal gallery displaying the currentImage.
-     * It will also register a new `keyboardService` to catch keyboard's events to download the current
-     * image with keyboard's shortcuts. This service, will be removed either when modal gallery component
-     * will be destroyed or when the gallery is closed invoking the `closeGallery` method.
-     * @private
-     */
-    private registerKeyboardService;
-    /**
      * Method to download the current image, only if `downloadable` is true.
@@ -207,0 +201,0 @@ * @private

lib/components/plain-gallery/plain-gallery.component.d.ts

@@ -79,3 +79,3 @@ import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
      * and `imageGrid invoking `initImageGrid()`.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -86,3 +86,3 @@ */
      * Method ´ngOnChanges´ to update both `imageGrid` and`plainGalleryConfig`.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -136,3 +136,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<PlainGalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlainGalleryComponent, "ks-plain-gallery", never, { "id": "id"; "images": "images"; "config": "config"; }, { "clickImage": "clickImage"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlainGalleryComponent, "ks-plain-gallery", never, { "id": { "alias": "id"; "required": false; }; "images": { "alias": "images"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "clickImage": "clickImage"; }, never, never, false, never>;
 }

lib/components/previews/previews.component.d.ts

@@ -21,7 +21,7 @@ import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
      */
-    id: number | undefined;
+    id: number;
     /**
      * Object of type `InternalLibImage` that represent the visible image.
      */
-    currentImage: InternalLibImage | undefined;
+    currentImage: InternalLibImage;
     /**
@@ -31,3 +31,3 @@ * Array of `InternalLibImage` that represent the model of this library with all images,
      */
-    images: InternalLibImage[] | undefined;
+    images: InternalLibImage[];
     /**
@@ -86,3 +86,3 @@ * Optional template reference for the rendering of previews.
      * init the `previews` array.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -100,3 +100,3 @@ */
      * Also, both `start` and `end` local variables will be updated accordingly.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -158,3 +158,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<PreviewsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PreviewsComponent, "ks-previews", never, { "id": "id"; "currentImage": "currentImage"; "images": "images"; "customTemplate": "customTemplate"; }, { "clickPreview": "clickPreview"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PreviewsComponent, "ks-previews", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, { "clickPreview": "clickPreview"; }, never, never, false, never>;
 }

lib/components/upper-buttons/upper-buttons.component.d.ts

@@ -24,7 +24,7 @@ import { EventEmitter, OnInit } from '@angular/core';
      */
-    id: number | undefined;
+    id: number;
     /**
      * Object of type `Image` that represent the visible image.
      */
-    currentImage: Image | undefined;
+    currentImage: Image;
     /**
@@ -88,3 +88,3 @@ * Output to emit clicks on refresh button. The payload contains a `ButtonEvent`.
      * init the `buttons` array.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -133,3 +133,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<UpperButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UpperButtonsComponent, "ks-upper-buttons", never, { "id": "id"; "currentImage": "currentImage"; }, { "refresh": "refresh"; "delete": "delete"; "navigate": "navigate"; "download": "download"; "closeButton": "closeButton"; "fullscreen": "fullscreen"; "customEmit": "customEmit"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpperButtonsComponent, "ks-upper-buttons", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; }, { "refresh": "refresh"; "delete": "delete"; "navigate": "navigate"; "download": "download"; "closeButton": "closeButton"; "fullscreen": "fullscreen"; "customEmit": "customEmit"; }, never, never, false, never>;
 }

lib/directives/a-tag-bg-image.directive.d.ts

@@ -22,3 +22,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -29,3 +29,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -39,3 +39,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<ATagBgImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ATagBgImageDirective, "[ksATagBgImage]", never, { "image": "image"; "style": "style"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ATagBgImageDirective, "[ksATagBgImage]", never, { "image": { "alias": "image"; "required": false; }; "style": { "alias": "style"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/click-outside.directive.d.ts

@@ -19,7 +19,7 @@ import { EventEmitter } from '@angular/core';
      * Method called by Angular itself every click thanks to `@HostListener`.
-     * @param MouseEvent event payload received evey click
+     * @param event MouseEvent
      */
     onClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[ksClickOutside]", never, { "clickOutsideEnable": "clickOutsideEnable"; }, { "clickOutside": "clickOutside"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[ksClickOutside]", never, { "clickOutsideEnable": { "alias": "clickOutsideEnable"; "required": false; }; }, { "clickOutside": "clickOutside"; }, never, never, false, never>;
 }

lib/directives/description.directive.d.ts

@@ -17,3 +17,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -24,3 +24,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -34,3 +34,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DescriptionDirective, "[ksDescription]", never, { "description": "description"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DescriptionDirective, "[ksDescription]", never, { "description": { "alias": "description"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/direction.directive.d.ts

@@ -20,3 +20,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -27,3 +27,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -37,3 +37,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<DirectionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DirectionDirective, "[ksDirection]", never, { "direction": "direction"; "justify": "justify"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DirectionDirective, "[ksDirection]", never, { "direction": { "alias": "direction"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/directives.d.ts

@@ -11,5 +11,6 @@ import { ClickOutsideDirective } from './click-outside.directive';
 import { FallbackImageDirective } from './fallback-image.directive';
+import { SwipeDirective } from './swipe.directive';
 /**
  * Array of all directives.
  */
-export declare const DIRECTIVES: (typeof ClickOutsideDirective | typeof SizeDirective | typeof KeyboardNavigationDirective | typeof WrapDirective | typeof DirectionDirective | typeof ATagBgImageDirective | typeof DescriptionDirective | typeof MarginDirective | typeof MaxSizeDirective | typeof FallbackImageDirective)[];
+export declare const DIRECTIVES: (typeof ClickOutsideDirective | typeof SizeDirective | typeof KeyboardNavigationDirective | typeof WrapDirective | typeof DirectionDirective | typeof ATagBgImageDirective | typeof DescriptionDirective | typeof MarginDirective | typeof MaxSizeDirective | typeof FallbackImageDirective | typeof SwipeDirective)[];

lib/directives/fallback-image.directive.d.ts

@@ -15,3 +15,3 @@ import { ElementRef, EventEmitter, Renderer2 } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<FallbackImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FallbackImageDirective, "[ksFallbackImage]", never, { "fallbackImg": "fallbackImg"; }, { "fallbackApplied": "fallbackApplied"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FallbackImageDirective, "[ksFallbackImage]", never, { "fallbackImg": { "alias": "fallbackImg"; "required": false; }; }, { "fallbackApplied": "fallbackApplied"; }, never, never, false, never>;
 }

lib/directives/keyboard-navigation.directive.d.ts

@@ -14,3 +14,3 @@ import { EventEmitter } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardNavigationDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardNavigationDirective, "[ksKeyboardNavigation]", never, { "isOpen": "isOpen"; }, { "keyboardNavigation": "keyboardNavigation"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardNavigationDirective, "[ksKeyboardNavigation]", never, { "isOpen": { "alias": "isOpen"; "required": false; }; }, { "keyboardNavigation": "keyboardNavigation"; }, never, never, false, never>;
 }

lib/directives/margin.directive.d.ts

@@ -28,3 +28,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -35,3 +35,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -45,3 +45,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<MarginDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MarginDirective, "[ksMargin]", never, { "marginLeft": "marginLeft"; "marginRight": "marginRight"; "marginTop": "marginTop"; "marginBottom": "marginBottom"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MarginDirective, "[ksMargin]", never, { "marginLeft": { "alias": "marginLeft"; "required": false; }; "marginRight": { "alias": "marginRight"; "required": false; }; "marginTop": { "alias": "marginTop"; "required": false; }; "marginBottom": { "alias": "marginBottom"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/max-size.directive.d.ts

@@ -17,3 +17,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -24,3 +24,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -34,3 +34,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<MaxSizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxSizeDirective, "[ksMaxSize]", never, { "maxSizeConfig": "maxSizeConfig"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxSizeDirective, "[ksMaxSize]", never, { "maxSizeConfig": { "alias": "maxSizeConfig"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/size.directive.d.ts

@@ -32,3 +32,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<SizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SizeDirective, "[ksSize]", never, { "sizeConfig": "sizeConfig"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SizeDirective, "[ksSize]", never, { "sizeConfig": { "alias": "sizeConfig"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/directives/wrap.directive.d.ts

@@ -20,3 +20,3 @@ import { ElementRef, OnChanges, OnInit, Renderer2 } from '@angular/core';
      * Method ´ngOnInit´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called only one time!!!
@@ -27,3 +27,3 @@ */
      * Method ´ngOnChanges´ to apply the style of this directive.
-     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
      * In particular, it's called when any data-bound property of a directive changes!!!
@@ -37,3 +37,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<WrapDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrapDirective, "[ksWrap]", never, { "wrap": "wrap"; "width": "width"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrapDirective, "[ksWrap]", never, { "wrap": { "alias": "wrap"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, never, false, never>;
 }

lib/modal-gallery.module.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="hammerjs" />
-import { HammerGestureConfig } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
@@ -24,9 +22,5 @@ import * as i1 from "./components/plain-gallery/plain-gallery.component";
 import * as i20 from "./directives/fallback-image.directive";
-import * as i21 from "@angular/common";
-import * as i22 from "@angular/cdk/overlay";
-export declare class KsHammerGestureConfig extends HammerGestureConfig {
-    buildHammer(element: HTMLElement): HammerManager;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KsHammerGestureConfig, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<KsHammerGestureConfig>;
-}
+import * as i21 from "./directives/swipe.directive";
+import * as i22 from "@angular/common";
+import * as i23 from "@angular/cdk/overlay";
 /**
@@ -37,4 +31,4 @@ * Module to import it in the root module of your application.
     static ɵfac: i0.ɵɵFactoryDeclaration<GalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GalleryModule, [typeof i1.PlainGalleryComponent, typeof i2.CarouselComponent, typeof i3.CarouselPreviewsComponent, typeof i4.UpperButtonsComponent, typeof i5.DotsComponent, typeof i6.PreviewsComponent, typeof i7.CurrentImageComponent, typeof i8.LoadingSpinnerComponent, typeof i9.AccessibleComponent, typeof i10.ModalGalleryComponent, typeof i11.ClickOutsideDirective, typeof i12.SizeDirective, typeof i13.KeyboardNavigationDirective, typeof i14.WrapDirective, typeof i15.DirectionDirective, typeof i16.ATagBgImageDirective, typeof i17.DescriptionDirective, typeof i18.MarginDirective, typeof i19.MaxSizeDirective, typeof i20.FallbackImageDirective], [typeof i21.CommonModule, typeof i22.OverlayModule], [typeof i1.PlainGalleryComponent, typeof i2.CarouselComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GalleryModule, [typeof i1.PlainGalleryComponent, typeof i2.CarouselComponent, typeof i3.CarouselPreviewsComponent, typeof i4.UpperButtonsComponent, typeof i5.DotsComponent, typeof i6.PreviewsComponent, typeof i7.CurrentImageComponent, typeof i8.LoadingSpinnerComponent, typeof i9.AccessibleComponent, typeof i10.ModalGalleryComponent, typeof i11.ClickOutsideDirective, typeof i12.SizeDirective, typeof i13.KeyboardNavigationDirective, typeof i14.WrapDirective, typeof i15.DirectionDirective, typeof i16.ATagBgImageDirective, typeof i17.DescriptionDirective, typeof i18.MarginDirective, typeof i19.MaxSizeDirective, typeof i20.FallbackImageDirective, typeof i21.SwipeDirective], [typeof i22.CommonModule, typeof i23.OverlayModule], [typeof i1.PlainGalleryComponent, typeof i2.CarouselComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GalleryModule>;
 }

lib/model/keyboard.enum.d.ts

@@ -5,3 +5,3 @@ /**
 import { DOWN_ARROW_CODE, ESC_CODE, LEFT_ARROW_CODE, RIGHT_ARROW_CODE, UP_ARROW_CODE } from '../utils/user-input.util';
-declare type Keyboard = Readonly<{
+type Keyboard = Readonly<{
     ESC: typeof ESC_CODE;
@@ -8,0 +8,0 @@ LEFT_ARROW: typeof LEFT_ARROW_CODE;

lib/model/lib-config.interface.d.ts

@@ -13,3 +13,2 @@ import { SlideConfig } from './slide-config.interface';
 import { PlayConfig } from './play-config.interface';
-import { KeyboardServiceConfig } from './keyboard-service-config.interface';
 export interface AccessibleLibConfig {
@@ -23,6 +22,3 @@ accessibilityConfig?: AccessibilityConfig;
 }
-export interface KeyboardServiceLibConfig {
-    keyboardServiceConfig?: KeyboardServiceConfig;
-}
-export interface CarouselLibConfig extends CommonLibConfig, AccessibleLibConfig, KeyboardServiceLibConfig {
+export interface CarouselLibConfig extends CommonLibConfig, AccessibleLibConfig {
     carouselConfig?: CarouselConfig;
@@ -35,3 +31,3 @@ carouselImageConfig?: CarouselImageConfig;
 }
-export interface ModalLibConfig extends CommonLibConfig, AccessibleLibConfig, KeyboardServiceLibConfig {
+export interface ModalLibConfig extends CommonLibConfig, AccessibleLibConfig {
     enableCloseOutside?: boolean;
@@ -38,0 +34,0 @@ keyboardConfig?: KeyboardConfig;

lib/services/config.service.d.ts

@@ -12,3 +12,2 @@ import { SlideConfig } from '../model/slide-config.interface';
 import { BreakpointsConfig, CarouselPreviewConfig } from '../model/carousel-preview-config.interface';
-import { KeyboardServiceConfig } from '../model/keyboard-service-config.interface';
 import { LibConfig } from '../model/lib-config.interface';
@@ -29,3 +28,2 @@ import * as i0 from "@angular/core";
 export declare const DEFAULT_CAROUSEL_PREVIEWS_CONFIG: CarouselPreviewConfig;
-export declare const DEFAULT_KEYBOARD_SERVICE_CONFIG: KeyboardServiceConfig;
 export declare const DEFAULT_SLIDE_CONFIG: SlideConfig;
@@ -32,0 +30,0 @@ export declare const DEFAULT_PREVIEW_CONFIG: PreviewConfig;

lib/utils/image.util.d.ts

 import { Image } from '../model/image.class';
 /**
  * Utility function to get the index of the input `image` from `arrayOfImages`
- * @param Image image to get the index. The image 'id' must be a number >= 0
- * @param Image[] arrayOfImages to search the image within it
+ * @param image Image to get the index. The image 'id' must be a number >= 0
+ * @param arrayOfImages Image[] to search the image within it
  * @returns number the index of the image. -1 if not found.
@@ -7,0 +7,0 @@ * @throws an Error if either image or arrayOfImages are not valid,

package.json

 {
   "name": "@ks89/angular-modal-gallery",
-  "version": "10.0.1",
+  "version": "11.0.0-rc.1",
   "description": "Image gallery for Angular",
@@ -11,3 +11,3 @@ "license": "MIT",
   },
-  "homepage": "https://ks89.github.io/angular-modal-gallery-2021-v9.github.io/",
+  "homepage": "https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/",
   "dependencies": {
@@ -17,8 +17,6 @@ "tslib": ">=2.3.0"
   "peerDependencies": {
-    "@angular/platform-browser": ">=15.0.0",
-    "@angular/common": ">=15.0.0",
-    "@angular/core": ">=15.0.0",
-    "@angular/cdk": ">=15.0.0",
-    "hammerjs": ">=2.0.8",
-    "mousetrap": ">=1.6.5",
+    "@angular/platform-browser": ">=16.0.0",
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0",
+    "@angular/cdk": ">=16.0.0",
     "rxjs": ">=7.5.0"
@@ -59,7 +57,3 @@ },
   },
-  "module": "fesm2015/ks89-angular-modal-gallery.mjs",
-  "es2020": "fesm2020/ks89-angular-modal-gallery.mjs",
-  "esm2020": "esm2020/ks89-angular-modal-gallery.mjs",
-  "fesm2020": "fesm2020/ks89-angular-modal-gallery.mjs",
-  "fesm2015": "fesm2015/ks89-angular-modal-gallery.mjs",
+  "module": "fesm2022/ks89-angular-modal-gallery.mjs",
   "typings": "index.d.ts",
@@ -72,7 +66,5 @@ "exports": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ks89-angular-modal-gallery.mjs",
-      "es2020": "./fesm2020/ks89-angular-modal-gallery.mjs",
-      "es2015": "./fesm2015/ks89-angular-modal-gallery.mjs",
-      "node": "./fesm2015/ks89-angular-modal-gallery.mjs",
-      "default": "./fesm2020/ks89-angular-modal-gallery.mjs"
+      "esm2022": "./esm2022/ks89-angular-modal-gallery.mjs",
+      "esm": "./esm2022/ks89-angular-modal-gallery.mjs",
+      "default": "./fesm2022/ks89-angular-modal-gallery.mjs"
     }
@@ -79,0 +71,0 @@ },

README.md

@@ -123,3 +123,2 @@ <h1 align="center">
 - image **download** with buttons or keyboard shortcuts
-- advanced **keyboard shortcuts** with `mousetrap` (both local and global)
 - fully configurable default buttons to either close, download, navigate to an external url or delete images and so on
@@ -133,3 +132,3 @@ - support custom buttons with both pre and after hooks
 - configurable previews (visible only on bigger screen)
-- and many more... (check the official documentation [HERE](https://ks89.github.io/angular-modal-gallery-2022-v10.github.io/))
+- and many more... (check the official documentation [HERE](https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/))
 
@@ -141,7 +140,7 @@ <br>
 - `npm install --save @ks89/angular-modal-gallery`
-- `npm install --save hammerjs mousetrap @angular/cdk`
-- `npm install --save-dev @types/mousetrap @types/hammerjs`
+- `npm install --save @angular/cdk`
 
 From version @ks89/angular-modal-gallery >= 5.0.0, **font-awesome isn't a mandatory dependency**.
-You can use all default features without font-awesome. For more info, check official [documentation website](https://ks89.github.io/angular-modal-gallery-2022-v10.github.io/).
+You can use all default features without font-awesome. For more info, check official [documentation website](https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/).
+From version @ks89/angular-modal-gallery >= 11.0.0, **mousetrap and hammerjs have been removed as dependencies**.
 
@@ -154,3 +153,3 @@ <br>
 
-[OFFICIAL DOCUMENTATION WEBSITE](https://ks89.github.io/angular-modal-gallery-2022-v10.github.io/)
+[OFFICIAL DOCUMENTATION WEBSITE](https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/)
 
@@ -177,2 +176,3 @@ <br>
 | Angular 15 |        &gt;= 10.0.0         | optional     |
+| Angular 16 |        &gt;= 11.0.0         | optional     |
 
@@ -182,2 +182,3 @@ *Version 8.0.0 requires at least Angular 12.*
 *Version 10.0.0 requires at least Angular 15.*
+*Version 11.0.0 requires at least Angular 16.*
 
@@ -190,2 +191,3 @@ <br>
 
+- 06/01/2023 - 11.0.0-rc.1 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
 - 11/18/2022 - 10.0.1 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
@@ -226,11 +228,6 @@ - 11/17/2022 - 10.0.0 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
 
-1. Question: **I have this error: `Cannot find name 'MousetrapInstance'`. What can I do?**<br>
-   **Answer**: Simply run `npm i --save-dev @types/mousetrap`
-2. Question: **I have this error: `Error: No provider for KeyboardService`. What can I do?**<br>
-   **Answer**: You forgot to add .forRoot(), so KeyboardService will be never available as a service. Please read section "Installation" [HERE](https://ks89.github.io/angular-modal-gallery-2022-v10.github.io/gettingStarted).
-   This is a common design pattern for Angular libraries. For more info check also [this issue](https://github.com/Ks89/angular-modal-gallery/issues/94).
-3. Question: **How can I remove images using DELETE button without issues?**<br>
+1. Question: **How can I remove images using DELETE button without issues?**<br>
    **Answer**: **You cannot change the input image array. Instead, you should reassign it with a newer array** without the deleted element.
    In other words, **you must think in a functional way**, without changing the input array of images.
-   For more information check this official demo [HERE](https://ks89.github.io/angular-modal-gallery-2022-v10.github.io/demo/buttons-strategies).
+   For more information check this official demo [HERE](https://ks89.github.io/angular-modal-gallery-2023-v11.github.io/demo/buttons-strategies).
 
@@ -273,3 +270,3 @@ <br>
 
-Copyright (c) 2017-2022 Stefano Cappa (Ks89)
+Copyright (c) 2017-2023 Stefano Cappa (Ks89)
 
@@ -276,0 +273,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-25%

Number of low supply chain risk alerts

76

decreased by-33.33%

Worsened metrics

Total package byte prevSize

1966425

decreased by-29.61%

Number of package files

123

decreased by-3.15%

Lines of code

15248

decreased by-28.93%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

296

decreased by-1%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes