@ks89/angular-modal-gallery 14.0.0 → 15.0.0-alpha.1

package/fesm2022/ks89-angular-modal-gallery.mjs

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, Input, Directive, EventEmitter, HostListener, Output, HostBinding, PLATFORM_ID, Inject, InjectionToken, SecurityContext, ViewChild, Injector, provideAppInitializer, inject, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injectable, input, inject, Renderer2, ElementRef, Directive, output, HostListener, ChangeDetectorRef, HostBinding, PLATFORM_ID, NgZone, InjectionToken, EventEmitter, viewChild, SecurityContext, Injector, provideAppInitializer, NgModule } from '@angular/core';
 import { NgClass, isPlatformBrowser, NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { Subject, timer } from 'rxjs';
 import { map, filter, switchMap, takeUntil } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
-import * as i2 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ComponentPortal } from '@angular/cdk/portal';
 
 /*
@@ -143,8 +141,6 @@ const NOTHING = 0;
  * and another with also the direction (right or left).
  */
 class AccessibleComponent {
-    constructor() {
-    }
     /**
      * Method to handle navigation events with both Keyboard and Mouse.
      * @param direction string of the navigation that can be either 'next' or 'prev'
@@ -240,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     template: ``,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -610,6 +606,40 @@ var LoadingType;
     LoadingType[LoadingType["EXPLOSING_SQUARES"] = 7] = "EXPLOSING_SQUARES";
 })(LoadingType || (LoadingType = {}));
 
+/*
+ The MIT License (MIT)
+
+ Copyright (c) 2017-2025 Stefano Cappa (Ks89)
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+/**
+ * Enum `Keyboard` with keys and their relative codes.
+ */
+const Keyboard = {
+    ESC: ESC_CODE,
+    LEFT_ARROW: LEFT_ARROW_CODE,
+    RIGHT_ARROW: RIGHT_ARROW_CODE,
+    UP_ARROW: UP_ARROW_CODE,
+    DOWN_ARROW: DOWN_ARROW_CODE
+};
+
 /*
  The MIT License (MIT)
 
@@ -647,13 +677,21 @@ const DEFAULT_DESCRIPTION_STYLE = {
     marginTop: '0px',
     marginBottom: '0px',
     marginLeft: '0px',
-    marginRight: '0px'
+    marginRight: '0px',
+    width: '',
+    height: '',
+    position: '',
+    top: '',
+    bottom: '',
+    left: '',
+    right: ''
 };
 const DEFAULT_DESCRIPTION = {
     strategy: DescriptionStrategy.ALWAYS_VISIBLE,
     imageText: 'Image ',
     numberSeparator: '/',
     beforeTextDescription: ' - ',
+    customFullDescription: '',
     style: DEFAULT_DESCRIPTION_STYLE
 };
 const DEFAULT_CAROUSEL_DESCRIPTION = {
@@ -661,6 +699,7 @@ const DEFAULT_CAROUSEL_DESCRIPTION = {
     imageText: 'Image ',
     numberSeparator: '/',
     beforeTextDescription: ' - ',
+    customFullDescription: '',
     style: DEFAULT_DESCRIPTION_STYLE
 };
 const DEFAULT_CURRENT_IMAGE_CONFIG = {
@@ -707,7 +746,13 @@ const DEFAULT_PREVIEW_CONFIG = {
     number: 3,
     arrows: true,
     clickable: true,
-    size: DEFAULT_PREVIEW_SIZE
+    size: DEFAULT_PREVIEW_SIZE,
+    mobileVisible: false
+};
+const DEFAULT_KEYBOARD_CONFIG = {
+    esc: Keyboard.ESC,
+    right: Keyboard.RIGHT_ARROW,
+    left: Keyboard.LEFT_ARROW
 };
 const DEFAULT_CONFIG = Object.freeze({
     slideConfig: DEFAULT_SLIDE_CONFIG,
@@ -717,7 +762,7 @@ const DEFAULT_CONFIG = Object.freeze({
     dotsConfig: { visible: true },
     plainGalleryConfig: DEFAULT_PLAIN_CONFIG,
     currentImageConfig: DEFAULT_CURRENT_IMAGE_CONFIG,
-    keyboardConfig: undefined, // by default nothing, because the library uses default buttons automatically
+    keyboardConfig: DEFAULT_KEYBOARD_CONFIG,
     carouselConfig: DEFAULT_CURRENT_CAROUSEL_CONFIG,
     carouselImageConfig: DEFAULT_CAROUSEL_IMAGE_CONFIG,
     carouselPreviewsConfig: DEFAULT_CAROUSEL_PREVIEWS_CONFIG,
@@ -1018,9 +1063,13 @@ function initPlainGalleryConfig(plainGalleryConfig) {
  * Directive to change the max size of an element.
  */
 class MaxSizeDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * Object of type `MaxSize` to resize the element.
+         */
+        this.maxSizeConfig = input(...(ngDevMode ? [undefined, { debugName: "maxSizeConfig" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -1042,25 +1091,24 @@ class MaxSizeDirective {
      * Private method to change both max-width and max-height of an element.
      */
     applyStyle() {
-        if (!this.maxSizeConfig) {
+        const maxSizeConfig = this.maxSizeConfig();
+        if (!maxSizeConfig) {
             return;
         }
-        if (this.maxSizeConfig.maxWidth) {
-            this.renderer.setStyle(this.el.nativeElement, 'max-width', this.maxSizeConfig.maxWidth);
+        if (maxSizeConfig.maxWidth) {
+            this.renderer.setStyle(this.el.nativeElement, 'max-width', maxSizeConfig.maxWidth);
         }
-        if (this.maxSizeConfig.maxHeight) {
-            this.renderer.setStyle(this.el.nativeElement, 'max-height', this.maxSizeConfig.maxHeight);
+        if (maxSizeConfig.maxHeight) {
+            this.renderer.setStyle(this.el.nativeElement, 'max-height', maxSizeConfig.maxHeight);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MaxSizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: MaxSizeDirective, isStandalone: true, selector: "[ksMaxSize]", inputs: { maxSizeConfig: "maxSizeConfig" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MaxSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: MaxSizeDirective, isStandalone: true, selector: "[ksMaxSize]", inputs: { maxSizeConfig: { classPropertyName: "maxSizeConfig", publicName: "maxSizeConfig", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MaxSizeDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksMaxSize]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { maxSizeConfig: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -1089,9 +1137,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to change the size of an element.
  */
 class SizeDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * Object of type `Size` to resize the element.
+         */
+        this.sizeConfig = input(...(ngDevMode ? [undefined, { debugName: "sizeConfig" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -1113,26 +1165,25 @@ class SizeDirective {
      * Private method to change both width and height of an element.
      */
     applyStyle() {
-        if (!this.sizeConfig) {
+        const sizeConfig = this.sizeConfig();
+        if (!sizeConfig) {
             return;
         }
         // apply [style.width]
-        if (this.sizeConfig.width) {
-            this.renderer.setStyle(this.el.nativeElement, 'width', this.sizeConfig.width);
+        if (sizeConfig.width) {
+            this.renderer.setStyle(this.el.nativeElement, 'width', sizeConfig.width);
         }
-        if (this.sizeConfig.height) {
-            this.renderer.setStyle(this.el.nativeElement, 'height', this.sizeConfig.height);
+        if (sizeConfig.height) {
+            this.renderer.setStyle(this.el.nativeElement, 'height', sizeConfig.height);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: SizeDirective, isStandalone: true, selector: "[ksSize]", inputs: { sizeConfig: "sizeConfig" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: SizeDirective, isStandalone: true, selector: "[ksSize]", inputs: { sizeConfig: { classPropertyName: "sizeConfig", publicName: "sizeConfig", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SizeDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksSize]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { sizeConfig: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -1161,30 +1212,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to add fallback image if the original one is not reachable.
  */
 class FallbackImageDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
-        this.fallbackApplied = new EventEmitter();
+    constructor() {
+        this.fallbackImg = input(...(ngDevMode ? [undefined, { debugName: "fallbackImg" }] : []));
+        this.fallbackApplied = output();
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     onError() {
-        if (!this.fallbackImg) {
+        const fallbackImg = this.fallbackImg();
+        if (!fallbackImg) {
             this.fallbackApplied.emit(false);
             return;
         }
-        this.renderer.setAttribute(this.el.nativeElement, 'src', this.fallbackImg.toString());
+        this.renderer.setAttribute(this.el.nativeElement, 'src', fallbackImg.toString());
         this.fallbackApplied.emit(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FallbackImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: FallbackImageDirective, isStandalone: true, selector: "[ksFallbackImage]", inputs: { fallbackImg: "fallbackImg" }, outputs: { fallbackApplied: "fallbackApplied" }, host: { listeners: { "error": "onError()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FallbackImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: FallbackImageDirective, isStandalone: true, selector: "[ksFallbackImage]", inputs: { fallbackImg: { classPropertyName: "fallbackImg", publicName: "fallbackImg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fallbackApplied: "fallbackApplied" }, host: { listeners: { "error": "onError()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FallbackImageDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksFallbackImage]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { fallbackImg: [{
-                type: Input
-            }], fallbackApplied: [{
-                type: Output
-            }], onError: [{
+        }], propDecorators: { onError: [{
                 type: HostListener,
                 args: ['error']
             }] } });
@@ -1216,9 +1265,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to customize the description.
  */
 class DescriptionDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * Object of type `Description` to resize the element.
+         */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -1240,48 +1293,48 @@ class DescriptionDirective {
      * Private method to change description's style.
      */
     applyStyle() {
-        if (!this.description) {
+        const description = this.description();
+        if (!description) {
             return;
         }
-        if (this.description.style) {
-            this.renderer.setStyle(this.el.nativeElement, 'background', this.description.style.bgColor);
-            this.renderer.setStyle(this.el.nativeElement, 'color', this.description.style.textColor);
-            if (this.description.style.width) {
-                this.renderer.setStyle(this.el.nativeElement, 'width', this.description.style.width);
+        console.log('description ', description);
+        if (description.style) {
+            this.renderer.setStyle(this.el.nativeElement, 'background', description.style.bgColor);
+            this.renderer.setStyle(this.el.nativeElement, 'color', description.style.textColor);
+            if (description.style.width) {
+                this.renderer.setStyle(this.el.nativeElement, 'width', description.style.width);
             }
-            if (this.description.style.height) {
-                this.renderer.setStyle(this.el.nativeElement, 'height', this.description.style.height);
+            if (description.style.height) {
+                this.renderer.setStyle(this.el.nativeElement, 'height', description.style.height);
             }
-            if (this.description.style.position) {
-                this.renderer.setStyle(this.el.nativeElement, 'position', this.description.style.position);
+            if (description.style.position) {
+                this.renderer.setStyle(this.el.nativeElement, 'position', description.style.position);
             }
-            if (this.description.style.top) {
-                this.renderer.setStyle(this.el.nativeElement, 'top', this.description.style.top);
+            if (description.style.top) {
+                this.renderer.setStyle(this.el.nativeElement, 'top', description.style.top);
             }
-            if (this.description.style.bottom) {
-                this.renderer.setStyle(this.el.nativeElement, 'bottom', this.description.style.bottom);
+            if (description.style.bottom) {
+                this.renderer.setStyle(this.el.nativeElement, 'bottom', description.style.bottom);
             }
-            if (this.description.style.left) {
-                this.renderer.setStyle(this.el.nativeElement, 'left', this.description.style.left);
+            if (description.style.left) {
+                this.renderer.setStyle(this.el.nativeElement, 'left', description.style.left);
             }
-            if (this.description.style.right) {
-                this.renderer.setStyle(this.el.nativeElement, 'right', this.description.style.right);
+            if (description.style.right) {
+                this.renderer.setStyle(this.el.nativeElement, 'right', description.style.right);
             }
-            this.renderer.setStyle(this.el.nativeElement, 'margin-top', this.description.style.marginTop ? this.description.style.marginTop : '0px');
-            this.renderer.setStyle(this.el.nativeElement, 'margin-bottom', this.description.style.marginBottom ? this.description.style.marginBottom : '0px');
-            this.renderer.setStyle(this.el.nativeElement, 'margin-left', this.description.style.marginLeft ? this.description.style.marginLeft : '0px');
-            this.renderer.setStyle(this.el.nativeElement, 'margin-right', this.description.style.marginRight ? this.description.style.marginRight : '0px');
+            this.renderer.setStyle(this.el.nativeElement, 'margin-top', description.style.marginTop ? description.style.marginTop : '0px');
+            this.renderer.setStyle(this.el.nativeElement, 'margin-bottom', description.style.marginBottom ? description.style.marginBottom : '0px');
+            this.renderer.setStyle(this.el.nativeElement, 'margin-left', description.style.marginLeft ? description.style.marginLeft : '0px');
+            this.renderer.setStyle(this.el.nativeElement, 'margin-right', description.style.marginRight ? description.style.marginRight : '0px');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DescriptionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: DescriptionDirective, isStandalone: true, selector: "[ksDescription]", inputs: { description: "description" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: DescriptionDirective, isStandalone: true, selector: "[ksDescription]", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DescriptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksDescription]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { description: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -1310,37 +1363,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Component with clickable dots (small circles) to navigate between images inside the modal gallery.
  */
 class DotsComponent extends AccessibleComponent {
-    constructor(configService) {
-        super();
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique id (>=0) of the current instance of this library. This is required when you are using
+         * the service to call modal gallery.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Object of type `InternalLibImage` that represent the visible image.
+         */
+        this.currentImage = input.required(...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+        /**
+         * Array of `InternalLibImage` that represent the model of this library with all images,
+         * thumbs and so on.
+         */
+        this.images = input.required(...(ngDevMode ? [{ debugName: "images" }] : []));
+        /**
+         * Object of type `DotsConfig` to init DotsComponent's features.
+         * For instance, it contains a param to show/hide this component.
+         */
+        this.dotsConfig = input.required(...(ngDevMode ? [{ debugName: "dotsConfig" }] : []));
+        /**
+         * Object of type `AccessibilityConfig` to init custom accessibility features.
+         * For instance, it contains titles, alt texts, aria-labels and so on.
+         */
+        this.accessibilityConfig = input.required(...(ngDevMode ? [{ debugName: "accessibilityConfig" }] : []));
         /**
          * Output to emit clicks on dots. The payload contains a number that represent
          * the index of the clicked dot.
          */
-        this.clickDot = new EventEmitter();
-    }
-    /**
-     * Method ´ngOnInit´ to build `configDots` applying a default value.
-     * This is an angular lifecycle hook, so its called automatically by Angular itself.
-     * In particular, it's called only one time!!!
-     */
-    ngOnInit() {
-        const libConfig = this.configService.getConfig(this.id);
-        if (!libConfig) {
-            throw new Error('Internal library error - libConfig must be defined');
-        }
-        this.accessibilityConfig = libConfig.accessibilityConfig;
-        this.configDots = Object.assign({}, this.dotsConfig);
-    }
-    /**
-     * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
-     * This is an angular lifecycle hook, so its called automatically by Angular itself.
-     */
-    ngOnChanges(changes) {
-        const dotsConfigChanges = changes['dotsConfig'];
-        if (dotsConfigChanges && dotsConfigChanges.currentValue !== dotsConfigChanges.previousValue) {
-            this.configDots = dotsConfigChanges.currentValue;
-        }
+        this.clickDot = output();
     }
     /**
      * Method to check if an image is active (i.e. the current image).
@@ -1349,12 +1402,14 @@ class DotsComponent extends AccessibleComponent {
      * @returns boolean true if is active (and input params are valid), false otherwise
      */
     isActive(index) {
-        if (!this.currentImage || !this.images || this.images.length === 0) {
+        const currentImage = this.currentImage();
+        const images = this.images();
+        if (!currentImage || !images || images.length === 0) {
             return false;
         }
         let imageIndex;
         try {
-            imageIndex = getIndex(this.currentImage, this.images);
+            imageIndex = getIndex(currentImage, images);
         }
         catch (err) {
             console.error(`Internal error while trying to show the active 'dot'`, err);
@@ -1373,23 +1428,13 @@ class DotsComponent extends AccessibleComponent {
             this.clickDot.emit(index);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DotsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DotsComponent, isStandalone: true, selector: "ks-dots", inputs: { id: "id", currentImage: "currentImage", images: "images", dotsConfig: "dotsConfig" }, outputs: { clickDot: "clickDot" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConfig?.dotsContainerAriaLabel\"\n     [title]=\"accessibilityConfig?.dotsContainerTitle\">\n  @if (!dotsConfig || dotsConfig?.visible) {\n    @for (img of images; let index = $index; track img.id) {\n      <div class=\"inside dot\"\n           [ngClass]=\"{'active': isActive(index)}\"\n           [attr.aria-label]=\"accessibilityConfig?.dotAriaLabel + ' ' + (index + 1)\"\n           [tabIndex]=\"0\" role=\"navigation\"\n           (click)=\"onDotEvent(index, $event)\" (keyup)=\"onDotEvent(index, $event)\"></div>\n    }\n  }\n</nav>\n", styles: [".dots-container{display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.dots-container>.dot{background:#fff;border-radius:5px;height:10px;margin-left:4px;margin-right:4px;width:10px;cursor:pointer;opacity:.5}.dots-container>.dot:hover{opacity:.9;transition:all .5s ease;transition-property:opacity}.dots-container>.dot.active{cursor:pointer;opacity:.9}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DotsComponent, isStandalone: true, selector: "ks-dots", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, currentImage: { classPropertyName: "currentImage", publicName: "currentImage", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, dotsConfig: { classPropertyName: "dotsConfig", publicName: "dotsConfig", isSignal: true, isRequired: true, transformFunction: null }, accessibilityConfig: { classPropertyName: "accessibilityConfig", publicName: "accessibilityConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clickDot: "clickDot" }, usesInheritance: true, ngImport: i0, template: "@let accessibilityConf = accessibilityConfig();\n@let dotsConf = dotsConfig();\n<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConf?.dotsContainerAriaLabel\"\n     [title]=\"accessibilityConf?.dotsContainerTitle\">\n  @if (!dotsConf || dotsConf?.visible) {\n    @for (img of images(); let index = $index; track img.id) {\n      <div class=\"inside dot\"\n           [ngClass]=\"{'active': isActive(index)}\"\n           [attr.aria-label]=\"accessibilityConf?.dotAriaLabel + ' ' + (index + 1)\"\n           [tabIndex]=\"0\" role=\"navigation\"\n           (click)=\"onDotEvent(index, $event)\" (keyup)=\"onDotEvent(index, $event)\"></div>\n    }\n  }\n</nav>\n", styles: [".dots-container{display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.dots-container>.dot{background:#fff;border-radius:5px;height:10px;margin-left:4px;margin-right:4px;width:10px;cursor:pointer;opacity:.5}.dots-container>.dot:hover{opacity:.9;transition:all .5s ease;transition-property:opacity}.dots-container>.dot.active{cursor:pointer;opacity:.9}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-dots', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConfig?.dotsContainerAriaLabel\"\n     [title]=\"accessibilityConfig?.dotsContainerTitle\">\n  @if (!dotsConfig || dotsConfig?.visible) {\n    @for (img of images; let index = $index; track img.id) {\n      <div class=\"inside dot\"\n           [ngClass]=\"{'active': isActive(index)}\"\n           [attr.aria-label]=\"accessibilityConfig?.dotAriaLabel + ' ' + (index + 1)\"\n           [tabIndex]=\"0\" role=\"navigation\"\n           (click)=\"onDotEvent(index, $event)\" (keyup)=\"onDotEvent(index, $event)\"></div>\n    }\n  }\n</nav>\n", styles: [".dots-container{display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.dots-container>.dot{background:#fff;border-radius:5px;height:10px;margin-left:4px;margin-right:4px;width:10px;cursor:pointer;opacity:.5}.dots-container>.dot:hover{opacity:.9;transition:all .5s ease;transition-property:opacity}.dots-container>.dot.active{cursor:pointer;opacity:.9}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
-                type: Input
-            }], currentImage: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], dotsConfig: [{
-                type: Input
-            }], clickDot: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ks-dots', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "@let accessibilityConf = accessibilityConfig();\n@let dotsConf = dotsConfig();\n<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConf?.dotsContainerAriaLabel\"\n     [title]=\"accessibilityConf?.dotsContainerTitle\">\n  @if (!dotsConf || dotsConf?.visible) {\n    @for (img of images(); let index = $index; track img.id) {\n      <div class=\"inside dot\"\n           [ngClass]=\"{'active': isActive(index)}\"\n           [attr.aria-label]=\"accessibilityConf?.dotAriaLabel + ' ' + (index + 1)\"\n           [tabIndex]=\"0\" role=\"navigation\"\n           (click)=\"onDotEvent(index, $event)\" (keyup)=\"onDotEvent(index, $event)\"></div>\n    }\n  }\n</nav>\n", styles: [".dots-container{display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.dots-container>.dot{background:#fff;border-radius:5px;height:10px;margin-left:4px;margin-right:4px;width:10px;cursor:pointer;opacity:.5}.dots-container>.dot:hover{opacity:.9;transition:all .5s ease;transition-property:opacity}.dots-container>.dot.active{cursor:pointer;opacity:.9}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n"] }]
+        }] });
 
 /*
  The MIT License (MIT)
@@ -1422,14 +1467,8 @@ const DEFAULT_MAX_HEIGHT = '200px';
  * Component with image previews for carousel
  */
 class CarouselPreviewsComponent extends AccessibleComponent {
-    constructor(ref, breakpointObserver, 
-    // sanitizer is used only to sanitize style before add it to background property when legacyIE11Mode is enabled
-    sanitizer, configService) {
+    constructor() {
         super();
-        this.ref = ref;
-        this.breakpointObserver = breakpointObserver;
-        this.sanitizer = sanitizer;
-        this.configService = configService;
         /**
          * Variable to change the max-width of the host component
          */
@@ -1439,9 +1478,23 @@ class CarouselPreviewsComponent extends AccessibleComponent {
          */
         this.ariaLabel = `Carousel previews`;
         /**
-         * Output to emit the clicked preview. The payload contains the `InternalLibImage` associated to the clicked preview.
+         * Unique id (>=0) of the current instance of the carousel. This is useful when you are using
+         * the carousel's feature to open modal gallery.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Object of type `Image` that represent the visible image.
+         */
+        this.currentImage = input.required(...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+        /**
+         * Array of `Image` that represent the model of this library with all images,
+         * thumbs and so on.
+         */
+        this.images = input([], ...(ngDevMode ? [{ debugName: "images" }] : []));
+        /**
+         * Output to emit the clicked preview. The payload contains the `Image` associated to the clicked preview.
          */
-        this.clickPreview = new EventEmitter();
+        this.clickPreview = output();
         /**
          * Enum of type `Action` that represents a mouse click on a button.
          * Declared here to be used inside the template.
@@ -1453,7 +1506,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
          */
         this.keyboardAction = Action.KEYBOARD;
         /**
-         * Array of `InternalLibImage` exposed to the template. This field is initialized
+         * Array of `Image` exposed to the template. This field is initialized
          * applying transformations, default values and so on to the input of the same type.
          */
         this.previews = [];
@@ -1461,8 +1514,13 @@ class CarouselPreviewsComponent extends AccessibleComponent {
          * Variable with the preview's maxHeight
          */
         this.previewMaxHeight = DEFAULT_MAX_HEIGHT;
+        this.ref = inject(ChangeDetectorRef);
+        this.breakpointObserver = inject(BreakpointObserver);
+        // sanitizer is used only to sanitize style before add it to background property when legacyIE11Mode is enabled
+        this.sanitizer = inject(DomSanitizer);
+        this.configService = inject(ConfigService);
         // listen for width changes and update preview heights accordingly
-        this.breakpointSubscription = breakpointObserver
+        this.breakpointSubscription = this.breakpointObserver
             .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
             .subscribe((result) => {
             if (!this.previewConfig || !this.previewConfig.breakpoints) {
@@ -1507,7 +1565,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
      * In particular, it's called only one time!!!
      */
     ngOnInit() {
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(this.id());
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -1523,7 +1581,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
         }
         this.previewMaxHeight = this.previewConfig.maxHeight;
         // init previews based on currentImage and the full array of images
-        this.initPreviews(this.currentImage, this.images);
+        this.initPreviews(this.currentImage(), this.images());
         // apply custom height based on responsive breakpoints
         // This is required, because the breakpointSubscription is not triggered at creation,
         // but only when the width changes
@@ -1550,14 +1608,15 @@ class CarouselPreviewsComponent extends AccessibleComponent {
     }
     /**
      * Method to check if an image is active (i.e. a preview image).
-     * @param preview InternalLibImage is an image to check if it's active or not
+     * @param preview Image is an image to check if it's active or not
      * @returns boolean true if is active, false otherwise
      */
     isActive(preview) {
-        if (!preview || !this.currentImage) {
+        const currentImage = this.currentImage();
+        if (!preview || !currentImage) {
             return false;
         }
-        return preview.id === this.currentImage.id;
+        return preview.id === currentImage.id;
     }
     /**
      * Method ´ngOnChanges´ to update `previews` array.
@@ -1585,8 +1644,8 @@ class CarouselPreviewsComponent extends AccessibleComponent {
             let prevIndex;
             let currentIndex;
             try {
-                prevIndex = getIndex(prev, this.images);
-                currentIndex = getIndex(current, this.images);
+                prevIndex = getIndex(prev, this.images());
+                currentIndex = getIndex(current, this.images());
             }
             catch (err) {
                 console.error('Cannot get previous and current image indexes in previews');
@@ -1594,17 +1653,18 @@ class CarouselPreviewsComponent extends AccessibleComponent {
             }
             // apply a formula to get a values to be used to decide if go next, return back or stay without doing anything
             const calc = Math.floor((this.end - this.start) / 2) + this.start;
-            if (prevIndex === this.images.length - 1 && currentIndex === 0) {
+            const images = this.images();
+            if (prevIndex === images.length - 1 && currentIndex === 0) {
                 // first image
                 this.setBeginningIndexesPreviews();
-                this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+                this.previews = images.filter((img, i) => i >= this.start && i < this.end);
                 return;
             }
             // the same for the opposite case, when you navigate back from the fist image to go to the last one.
-            if (prevIndex === 0 && currentIndex === this.images.length - 1) {
+            if (prevIndex === 0 && currentIndex === images.length - 1) {
                 // last image
                 this.setEndIndexesPreviews();
-                this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+                this.previews = images.filter((img, i) => i >= this.start && i < this.end);
                 return;
             }
             if (this.previewConfig && this.previewConfig.number % 2 === 0) {
@@ -1628,7 +1688,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
     /**
      * Method called by events from both keyboard and mouse on a preview.
      * This will trigger the `clickpreview` output with the input preview as its payload.
-     * @param preview InternalLibImage that triggered this method
+     * @param preview Image that triggered this method
      * @param event KeyboardEvent | MouseEvent payload
      * @param action Action that triggered this event (Action.NORMAL by default)
      */
@@ -1636,7 +1696,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
         if (!this.previewConfig || !this.previewConfig.clickable) {
             return;
         }
-        const clickedImageIndex = this.images.indexOf(preview);
+        const clickedImageIndex = this.images().indexOf(preview);
         const result = super.handleImageEvent(event);
         if (result === NEXT) {
             this.clickPreview.emit({ action, result: clickedImageIndex });
@@ -1717,8 +1777,8 @@ class CarouselPreviewsComponent extends AccessibleComponent {
     /**
      * Private method to init previews based on the currentImage and the full array of images.
      * The current image in mandatory to show always the current preview (as highlighted).
-     * @param currentImage InternalLibImage to decide how to show previews, because I always want to see the current image as highlighted
-     * @param images InternalLibImage[] is the array of all images.
+     * @param currentImage Image to decide how to show previews, because I always want to see the current image as highlighted
+     * @param images Image[] is the array of all images.
      */
     initPreviews(currentImage, images) {
         let index;
@@ -1753,7 +1813,7 @@ class CarouselPreviewsComponent extends AccessibleComponent {
             throw new Error('Internal library error - previewConfig and number must be defined');
         }
         this.start = 0;
-        this.end = Math.min(this.previewConfig.number, this.images.length);
+        this.end = Math.min(this.previewConfig.number, this.images().length);
     }
     /**
      * Private method to init both `start` and `end` to the end.
@@ -1762,23 +1822,24 @@ class CarouselPreviewsComponent extends AccessibleComponent {
         if (!this.previewConfig || this.previewConfig.number === undefined) {
             throw new Error('Internal library error - previewConfig and number must be defined');
         }
-        this.start = this.images.length - 1 - (this.previewConfig.number - 1);
-        this.end = this.images.length;
+        this.start = this.images().length - 1 - (this.previewConfig.number - 1);
+        this.end = this.images().length;
     }
     /**
      * Private method to update the visible previews navigating to the right (next).
      */
     next() {
         // check if nextImage should be blocked
-        if (this.isPreventSliding(this.images.length - 1)) {
+        const images = this.images();
+        if (this.isPreventSliding(images.length - 1)) {
             return;
         }
-        if (this.end === this.images.length) {
+        if (this.end === images.length) {
             return;
         }
         this.start++;
-        this.end = Math.min(this.end + 1, this.images.length);
-        this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+        this.end = Math.min(this.end + 1, images.length);
+        this.previews = images.filter((img, i) => i >= this.start && i < this.end);
     }
     /**
      * Private method to update the visible previews navigating to the left (previous).
@@ -1792,8 +1853,8 @@ class CarouselPreviewsComponent extends AccessibleComponent {
             return;
         }
         this.start = Math.max(this.start - 1, 0);
-        this.end = Math.min(this.end - 1, this.images.length);
-        this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+        this.end = Math.min(this.end - 1, this.images().length);
+        this.previews = this.images().filter((img, i) => i >= this.start && i < this.end);
     }
     /**
      * Private method to block/permit sliding between previews.
@@ -1801,28 +1862,20 @@ class CarouselPreviewsComponent extends AccessibleComponent {
      * @returns boolean if true block sliding, otherwise not
      */
     isPreventSliding(boundaryIndex) {
-        return getIndex(this.currentImage, this.images) === boundaryIndex;
+        return getIndex(this.currentImage(), this.images()) === boundaryIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselPreviewsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.BreakpointObserver }, { token: i2.DomSanitizer }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CarouselPreviewsComponent, isStandalone: true, selector: "ks-carousel-previews", inputs: { id: "id", currentImage: "currentImage", images: "images" }, outputs: { clickPreview: "clickPreview" }, host: { properties: { "style.max-width": "this.hostMaxWidth", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (previewConfig?.visible) {\n  <nav class=\"previews-container\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n       [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n    </a>\n\n    <div class=\"preview-inner-container\">\n      @for (preview of previews; track preview.id) {\n        @if (preview?.modal?.img) {\n          <img [loading]=\"preview.loading\"\n               [attr.fetchpriority]=\"preview.fetchpriority\"\n               class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n               [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n               ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n               ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n                                   height: previewMaxHeight}\"\n               [attr.aria-label]=\"getAriaLabel(preview)\"\n               [title]=\"getTitle(preview)\"\n               alt=\"{{getAlt(preview)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\" />\n        }\n      }\n    </div>\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n    </a>\n  </nav>\n}\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#000;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CarouselPreviewsComponent, isStandalone: true, selector: "ks-carousel-previews", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, currentImage: { classPropertyName: "currentImage", publicName: "currentImage", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPreview: "clickPreview" }, host: { properties: { "style.max-width": "this.hostMaxWidth", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (previewConfig?.visible) {\n  <nav class=\"previews-container\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n       [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n    </a>\n\n    <div class=\"preview-inner-container\">\n      @for (preview of previews; track preview.id) {\n        @if (preview?.modal?.img) {\n          <img loading=\"{{preview.loading}}\"\n               [attr.fetchpriority]=\"preview.fetchpriority\"\n               class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n               [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n               ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n               ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n                                   height: previewMaxHeight}\"\n               [attr.aria-label]=\"getAriaLabel(preview)\"\n               [title]=\"getTitle(preview)\"\n               alt=\"{{getAlt(preview)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\" />\n        }\n      }\n    </div>\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && end < images().length ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && end < images().length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n    </a>\n  </nav>\n}\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#000;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselPreviewsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FallbackImageDirective, SizeDirective], template: "@if (previewConfig?.visible) {\n  <nav class=\"previews-container\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n       [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n    </a>\n\n    <div class=\"preview-inner-container\">\n      @for (preview of previews; track preview.id) {\n        @if (preview?.modal?.img) {\n          <img [loading]=\"preview.loading\"\n               [attr.fetchpriority]=\"preview.fetchpriority\"\n               class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n               [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n               ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n               ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n                                   height: previewMaxHeight}\"\n               [attr.aria-label]=\"getAriaLabel(preview)\"\n               [title]=\"getTitle(preview)\"\n               alt=\"{{getAlt(preview)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\" />\n        }\n      }\n    </div>\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && end < images.length ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && end < images.length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n    </a>\n  </nav>\n}\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#000;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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.BreakpointObserver }, { type: i2.DomSanitizer }, { type: ConfigService }], propDecorators: { hostMaxWidth: [{
+            args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FallbackImageDirective, SizeDirective], template: "@if (previewConfig?.visible) {\n  <nav class=\"previews-container\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewsContainerAriaLabel\"\n       [title]=\"accessibilityConfig?.carouselPreviewsContainerTitle\">\n\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollPrevAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && start > 0 ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && start > 0 ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollPrevTitle\"></div>\n    </a>\n\n    <div class=\"preview-inner-container\">\n      @for (preview of previews; track preview.id) {\n        @if (preview?.modal?.img) {\n          <img loading=\"{{preview.loading}}\"\n               [attr.fetchpriority]=\"preview.fetchpriority\"\n               class=\"inside preview-image{{isActive(preview) ? ' active' : ''}}{{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n               [src]=\"preview.plain?.img ? preview.plain?.img : preview.modal.img\"\n               ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n               ksSize [sizeConfig]=\"{width: previewConfig?.width!,\n                                   height: previewMaxHeight}\"\n               [attr.aria-label]=\"getAriaLabel(preview)\"\n               [title]=\"getTitle(preview)\"\n               alt=\"{{getAlt(preview)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"onImageEvent(preview, $event, clickAction)\" (keyup)=\"onImageEvent(preview, $event, keyboardAction)\" />\n        }\n      }\n    </div>\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.carouselPreviewScrollNextAriaLabel\"\n       [tabIndex]=\"previewConfig?.arrows && end < images().length ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{previewConfig?.arrows && end < images().length ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.carouselPreviewScrollNextTitle\"></div>\n    </a>\n  </nav>\n}\n", styles: [":host{position:relative;margin-top:3px;margin-bottom:3px;width:100%}.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:0}.previews-container>.preview-inner-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}.previews-container>.preview-inner-container>.preview-image{cursor:pointer;object-fit:cover}.previews-container>.preview-inner-container>.preview-image.unclickable{cursor:not-allowed}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{position:absolute;top:calc(50% - 7px);color:#919191;z-index:1000;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px;left:10px}.previews-container>.nav-left>.left-arrow-preview-image{opacity:1}.previews-container>.nav-right{margin-left:10px;right:10px}.previews-container>.nav-right>.right-arrow-preview-image{opacity:1}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#000;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"] }]
+        }], ctorParameters: () => [], propDecorators: { hostMaxWidth: [{
                 type: HostBinding,
                 args: ['style.max-width']
             }], ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
-            }], id: [{
-                type: Input
-            }], currentImage: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], clickPreview: [{
-                type: Output
             }] } });
 
 /*
@@ -1848,331 +1901,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.
  */
+// The idea to create a carousel with two Subjects came from ng-bootstrap
+// So a big thank you to the ng-bootstrap team for the interesting implementation that I used here with some customizations.
 /**
- * Class that represents the modal dialog instance.
- * It is returned by the open method.
+ * Component with configurable inline/plain carousel.
  */
-class ModalGalleryRef {
-    constructor(overlayRef) {
-        this.overlayRef = overlayRef;
-        this.close = new Subject();
-        this.close$ = this.close.asObservable();
-        this.show = new Subject();
-        this.show$ = this.show.asObservable();
-        this.firstImage = new Subject();
-        this.firstImage$ = this.firstImage.asObservable();
-        this.lastImage = new Subject();
-        this.lastImage$ = this.lastImage.asObservable();
-        this.hasData = new Subject();
-        this.hasData$ = this.hasData.asObservable();
-        this.buttonBeforeHook = new Subject();
-        this.buttonBeforeHook$ = this.buttonBeforeHook.asObservable();
-        this.buttonAfterHook = new Subject();
-        this.buttonAfterHook$ = this.buttonAfterHook.asObservable();
-    }
-    /**
-     * Close modal dialog, disposing the Overlay.
-     */
-    closeModal() {
-        this.overlayRef.dispose();
-    }
-    /**
-     * Method to emit close event.
-     * @param event ImageModalEvent event payload
-     */
-    emitClose(event) {
-        this.close.next(event);
-    }
-    /**
-     * Method to emit show event.
-     * @param event ImageModalEvent event payload
-     */
-    emitShow(event) {
-        this.show.next(event);
-    }
-    /**
-     * Method to emit firstImage event.
-     * @param event ImageModalEvent event payload
-     */
-    emitFirstImage(event) {
-        this.firstImage.next(event);
-    }
-    /**
-     * Method to emit lastImage event.
-     * @param event ImageModalEvent event payload
-     */
-    emitLastImage(event) {
-        this.lastImage.next(event);
-    }
-    /**
-     * Method to emit hasData event.
-     * @param event ImageModalEvent event payload
-     */
-    emitHasData(event) {
-        this.hasData.next(event);
-    }
-    /**
-     * Method to emit buttonBeforeHook event.
-     * @param event ImageModalEvent event payload
-     */
-    emitButtonBeforeHook(event) {
-        this.buttonBeforeHook.next(event);
-    }
+class CarouselComponent extends AccessibleComponent {
     /**
-     * Method to emit buttonAfterHook event.
-     * @param event ImageModalEvent event payload
+     * Listener to stop the gallery when the mouse pointer is over the current image.
      */
-    emitButtonAfterHook(event) {
-        this.buttonAfterHook.next(event);
-    }
-}
-
-const DEFAULT_DIALOG_CONFIG = {
-    hasBackdrop: true,
-    backdropClass: 'ks-modal-gallery-backdrop',
-    panelClass: 'ks-modal-gallery-panel'
-};
-class ModalGalleryService {
-    constructor(overlay, configService) {
-        this.overlay = overlay;
-        this.configService = configService;
-        this.updateImages = new Subject();
-        this.updateImages$ = this.updateImages.asObservable();
-        this.triggerAttachToOverlay = new EventEmitter();
+    onMouseEnter() {
+        const id = this.id();
+        if (id === null || id === undefined) {
+            throw new Error('Internal library error - id must be defined');
+        }
+        const libConfig = this.configService.getConfig(id);
+        if (!libConfig) {
+            throw new Error('Internal library error - libConfig must be defined');
+        }
+        if (!libConfig.carouselPlayConfig || !libConfig.carouselPlayConfig.pauseOnHover) {
+            return;
+        }
+        this.stopCarousel();
     }
     /**
-     * Method to open modal gallery passing the configuration
-     * @param config ModalGalleryConfig that contains: id, array of images, current image and optionally the configuration object
-     * @return ModalGalleryRef | undefined is the object used to listen for events.
+     * Listener to play the gallery when the mouse pointer leave the current image.
      */
-    open(config) {
-        // Returns an OverlayRef which is a PortalHost
-        const overlayRef = this.createOverlay();
-        // Instantiate a reference to the dialog
-        this.dialogRef = new ModalGalleryRef(overlayRef);
-        // Attach dialog container
-        this.triggerAttachToOverlay.emit({
-            overlayRef,
-            config,
-            dialogRef: this.dialogRef
-        });
-        overlayRef.backdropClick().subscribe(() => {
-            if (this.dialogRef) {
-                this.dialogRef.closeModal();
-            }
-        });
-        return this.dialogRef;
+    onMouseLeave() {
+        const id = this.id();
+        if (id === null || id === undefined) {
+            throw new Error('Internal library error - id must be defined');
+        }
+        const libConfig = this.configService.getConfig(id);
+        if (!libConfig) {
+            throw new Error('Internal library error - libConfig must be defined');
+        }
+        if (!libConfig.carouselPlayConfig || !libConfig.carouselPlayConfig.pauseOnHover || !libConfig.carouselPlayConfig.autoPlay) {
+            return;
+        }
+        this.playCarousel();
     }
     /**
-     * Method to close a modal gallery previously opened.
-     * @param id Unique identifier of the modal gallery
-     * @param clickOutside boolean is true if closed clicking on the modal backdrop, false otherwise.
+     * Listener to navigate carousel images with keyboard (left).
      */
-    close(id, clickOutside) {
+    onKeyDownLeft() {
+        const id = this.id();
+        if (id === null || id === undefined) {
+            throw new Error('Internal library error - id must be defined');
+        }
         const libConfig = this.configService.getConfig(id);
-        if (clickOutside) {
-            if (this.dialogRef && libConfig && libConfig.enableCloseOutside) {
-                this.dialogRef.closeModal();
-            }
+        if (!libConfig) {
+            throw new Error('Internal library error - libConfig must be defined');
         }
-        else {
-            if (this.dialogRef) {
-                this.dialogRef.closeModal();
-            }
+        if (!libConfig.carouselConfig || !libConfig.carouselConfig.keyboardEnable) {
+            return;
         }
-    }
-    /**
-     * Method to update images array.
-     * @param images Image[] updated array of images
-     */
-    updateModalImages(images) {
-        this.updateImages.next(images);
-    }
-    /**
-     * Method to emit close event.
-     * @param event ImageModalEvent is the event payload
-     */
-    emitClose(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitClose(event);
-    }
-    /**
-     * Method to emit show event.
-     * @param event ImageModalEvent is the event payload
-     */
-    emitShow(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitShow(event);
-    }
-    /**
-     * Method to emit firstImage event.
-     * @param event ImageModalEvent is the event payload
-     */
-    emitFirstImage(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitFirstImage(event);
-    }
-    /**
-     * Method to emit lastImage event.
-     * @param event ImageModalEvent is the event payload
-     */
-    emitLastImage(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitLastImage(event);
-    }
-    /**
-     * Method to emit hasData event.
-     * @param event ImageModalEvent is the event payload
-     */
-    emitHasData(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitHasData(event);
-    }
-    /**
-     * Method to emit buttonBeforeHook event.
-     * @param event ButtonEvent is the event payload
-     */
-    emitButtonBeforeHook(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitButtonBeforeHook(event);
-    }
-    /**
-     * Method to emit buttonAfterHook event.
-     * @param event ButtonEvent is the event payload
-     */
-    emitButtonAfterHook(event) {
-        if (!this.dialogRef) {
-            return;
-        }
-        this.dialogRef.emitButtonAfterHook(event);
-    }
-    /**
-     * Private method to create an Overlay using Angular CDK APIs
-     * @private
-     */
-    createOverlay() {
-        const overlayConfig = this.getOverlayConfig();
-        return this.overlay.create(overlayConfig);
-    }
-    /**
-     * Private method to create an OverlayConfig instance
-     * @private
-     */
-    getOverlayConfig() {
-        const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
-        return new OverlayConfig({
-            hasBackdrop: DEFAULT_DIALOG_CONFIG.hasBackdrop,
-            backdropClass: DEFAULT_DIALOG_CONFIG.backdropClass,
-            panelClass: DEFAULT_DIALOG_CONFIG.panelClass,
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            positionStrategy
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, deps: [{ token: i1$1.Overlay }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: ConfigService }] });
-
-/*
- The MIT License (MIT)
-
- Copyright (c) 2017-2025 Stefano Cappa (Ks89)
-
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated documentation files (the "Software"), to deal
- in the Software without restriction, including without limitation the rights
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- copies of the Software, and to permit persons to whom the Software is
- furnished to do so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in all
- copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- SOFTWARE.
- */
-// The idea to create a carousel with two Subjects came from ng-bootstrap
-// So a big thank you to the ng-bootstrap team for the interesting implementation that I used here with some customizations.
-/**
- * Component with configurable inline/plain carousel.
- */
-class CarouselComponent extends AccessibleComponent {
-    /**
-     * Listener to stop the gallery when the mouse pointer is over the current image.
-     */
-    onMouseEnter() {
-        if (this.id === null || this.id === undefined) {
-            throw new Error('Internal library error - id must be defined');
-        }
-        const libConfig = this.configService.getConfig(this.id);
-        if (!libConfig) {
-            throw new Error('Internal library error - libConfig must be defined');
-        }
-        if (!libConfig.carouselPlayConfig || !libConfig.carouselPlayConfig.pauseOnHover) {
-            return;
-        }
-        this.stopCarousel();
-    }
-    /**
-     * Listener to play the gallery when the mouse pointer leave the current image.
-     */
-    onMouseLeave() {
-        if (this.id === null || this.id === undefined) {
-            throw new Error('Internal library error - id must be defined');
-        }
-        const libConfig = this.configService.getConfig(this.id);
-        if (!libConfig) {
-            throw new Error('Internal library error - libConfig must be defined');
-        }
-        if (!libConfig.carouselPlayConfig || !libConfig.carouselPlayConfig.pauseOnHover || !libConfig.carouselPlayConfig.autoPlay) {
-            return;
-        }
-        this.playCarousel();
-    }
-    /**
-     * Listener to navigate carousel images with keyboard (left).
-     */
-    onKeyDownLeft() {
-        if (this.id === null || this.id === undefined) {
-            throw new Error('Internal library error - id must be defined');
-        }
-        const libConfig = this.configService.getConfig(this.id);
-        if (!libConfig) {
-            throw new Error('Internal library error - libConfig must be defined');
-        }
-        if (!libConfig.carouselConfig || !libConfig.carouselConfig.keyboardEnable) {
-            return;
-        }
-        this.prevImage();
+        this.prevImage();
     }
     /**
      * Listener to navigate carousel images with keyboard (right).
      */
     onKeyDownLRight() {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -2181,40 +1975,45 @@ class CarouselComponent extends AccessibleComponent {
         }
         this.nextImage();
     }
-    constructor(
-    // tslint:disable-next-line:no-any
-    platformId, ngZone, modalGalleryService, configService, ref) {
+    constructor(ngZone, configService, ref) {
         super();
-        this.platformId = platformId;
         this.ngZone = ngZone;
-        this.modalGalleryService = modalGalleryService;
         this.configService = configService;
         this.ref = ref;
         /**
          * Attribute to set ariaLabel of the host component
          */
         this.ariaLabel = `Carousel`;
+        /**
+         * Unique id (>=0) of the current instance of the carousel. This is useful when you are using
+         * the carousel's feature to open modal gallery.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * Array of `InternalLibImage` that represent the model of this library with all images,
          * thumbs and so on.
          */
-        this.images = [];
+        this.images = input([], ...(ngDevMode ? [{ debugName: "images" }] : []));
+        /**
+         * CarouselLibConfig object to configure carousel.
+         */
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
         /**
          * Output to emit an event when an image is clicked.
          */
-        this.clickImage = new EventEmitter();
+        this.clickImage = output();
         /**
          * Output to emit an event when current image is changed.
          */
-        this.changeImage = new EventEmitter();
+        this.changeImage = output();
         /**
          * Output to emit an event when the current image is the first one.
          */
-        this.firstImage = new EventEmitter();
+        this.firstImage = output();
         /**
          * Output to emit an event when the current image is the last one.
          */
-        this.lastImage = new EventEmitter();
+        this.lastImage = output();
         /**
          * Enum of type `Action` that represents a mouse click on a button.
          * Declared here to be used inside the template.
@@ -2243,20 +2042,23 @@ class CarouselComponent extends AccessibleComponent {
          * Subject to stop the carousel.
          */
         this.stop$ = new Subject();
+        this.platformId = inject(PLATFORM_ID);
     }
     ngOnInit() {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        if (!this.images || this.images.length === 0) {
+        const images = this.images();
+        if (!images || images.length === 0) {
             throw new Error('Internal library error - images array must be defined and with at least an element');
         }
-        this.configService.setConfig(this.id, this.config);
-        const libConfig = this.configService.getConfig(this.id);
+        this.configService.setConfig(id, this.config());
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
-        this.currentImage = this.images[0];
+        this.currentImage = images[0];
         this.carouselDotsConfig = libConfig.carouselDotsConfig;
         this.accessibilityConfig = libConfig.accessibilityConfig;
         this.carouselSlideInfinite = libConfig.carouselSlideInfinite;
@@ -2265,11 +2067,12 @@ class CarouselComponent extends AccessibleComponent {
         this.manageSlideConfig();
     }
     ngOnChanges(changes) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
         // this.configService.setConfig(this.id, this.config);
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -2278,7 +2081,7 @@ class CarouselComponent extends AccessibleComponent {
         if (configChange &&
             !configChange.firstChange &&
             (configChange.previousValue.carouselDotsConfig?.visible !== configChange.currentValue.carouselDotsConfig?.visible || (!configChange.previousValue.carouselDotsConfig && !configChange.currentValue.carouselDotsConfig))) {
-            this.configService.setConfig(this.id, {
+            this.configService.setConfig(id, {
                 carouselDotsConfig: configChange.currentValue?.carouselDotsConfig
             });
             this.carouselDotsConfig = configChange.currentValue?.carouselDotsConfig;
@@ -2288,7 +2091,7 @@ class CarouselComponent extends AccessibleComponent {
         if (configChange &&
             !configChange.firstChange &&
             (configChange.previousValue.carouselConfig?.showArrows !== configChange.currentValue.carouselConfig?.showArrows || (!configChange.previousValue.carouselConfig && !configChange.currentValue.carouselConfig))) {
-            this.configService.setConfig(this.id, {
+            this.configService.setConfig(id, {
                 carouselConfig: configChange.currentValue?.carouselConfig
             });
             this.carouselConfig = configChange.currentValue?.carouselConfig;
@@ -2298,7 +2101,7 @@ class CarouselComponent extends AccessibleComponent {
         if (configChange &&
             !configChange.firstChange &&
             (configChange.previousValue.carouselPlayConfig?.autoPlay !== configChange.currentValue.carouselPlayConfig?.autoPlay || (!configChange.previousValue.carouselPlayConfig && !configChange.currentValue.carouselPlayConfig))) {
-            this.configService.setConfig(this.id, {
+            this.configService.setConfig(id, {
                 carouselPlayConfig: configChange.currentValue?.carouselPlayConfig
             });
             // this.configPlay = playConfigChange.currentValue;
@@ -2317,10 +2120,11 @@ class CarouselComponent extends AccessibleComponent {
         // interval doesn't play well with SSR and protractor,
         // so we should run it in the browser and outside Angular
         if (isPlatformBrowser(this.platformId)) {
-            if (this.id === null || this.id === undefined) {
+            const id = this.id();
+            if (id === null || id === undefined) {
                 throw new Error('Internal library error - id must be defined');
             }
-            const libConfig = this.configService.getConfig(this.id);
+            const libConfig = this.configService.getConfig(id);
             if (!libConfig || !libConfig.carouselPlayConfig) {
                 throw new Error('Internal library error - libConfig and carouselPlayConfig must be defined');
             }
@@ -2344,7 +2148,7 @@ class CarouselComponent extends AccessibleComponent {
      * @param index number of the clicked dot
      */
     onClickDot(index) {
-        this.changeCurrentImage(this.images[index], Action.NORMAL);
+        this.changeCurrentImage(this.images()[index], Action.NORMAL);
     }
     /**
      * Method called by events from both keyboard and mouse on a navigation arrow.
@@ -2366,17 +2170,18 @@ class CarouselComponent extends AccessibleComponent {
      * Also, if modalGalleryEnable is true, you can open the modal-gallery.
      */
     onClickCurrentImage() {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig || !libConfig.carouselConfig || !this.currentImage) {
             throw new Error('Internal library error - libConfig, carouselConfig and currentImage must be defined');
         }
         if (!libConfig.carouselConfig.modalGalleryEnable) {
             return;
         }
-        const index = getIndex(this.currentImage, this.images);
+        const index = getIndex(this.currentImage, this.images());
         this.clickImage.emit(index);
     }
     /**
@@ -2388,10 +2193,11 @@ class CarouselComponent extends AccessibleComponent {
      * @throws an Error if description isn't available
      */
     getDescriptionToDisplay(image = this.currentImage) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -2418,10 +2224,11 @@ class CarouselComponent extends AccessibleComponent {
      * @param action String that represent the direction of the swipe action. 'swiperight' by default.
      */
     swipe(action = 'swiperight') {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig || !libConfig.carouselImageConfig) {
             throw new Error('Internal library error - libConfig and carouselImageConfig must be defined');
         }
@@ -2470,7 +2277,7 @@ class CarouselComponent extends AccessibleComponent {
      */
     nextImage(action = Action.NORMAL) {
         // check if nextImage should be blocked
-        if (this.isPreventSliding(this.images.length - 1)) {
+        if (this.isPreventSliding(this.images().length - 1)) {
             return;
         }
         this.changeCurrentImage(this.getNextImage(), action);
@@ -2482,7 +2289,7 @@ class CarouselComponent extends AccessibleComponent {
      * @param event an ImageEvent object with the relative action and the index of the clicked preview.
      */
     onClickPreview(event) {
-        const imageFound = this.images[event.result];
+        const imageFound = this.images()[event.result];
         if (!!imageFound) {
             this.manageSlideConfig();
             this.changeCurrentImage(imageFound, event.action);
@@ -2511,7 +2318,7 @@ class CarouselComponent extends AccessibleComponent {
         if (!image) {
             return '';
         }
-        return image.modal && image.modal.description ? image.modal.description : `Image ${getIndex(image, this.images) + 1}`;
+        return image.modal && image.modal.description ? image.modal.description : `Image ${getIndex(image, this.images()) + 1}`;
     }
     // TODO remove this because duplicated
     /**
@@ -2523,10 +2330,11 @@ class CarouselComponent extends AccessibleComponent {
      * @throws an Error if description isn't available
      */
     getTitleToDisplay(image = this.currentImage) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig || !libConfig.carouselImageConfig) {
             throw new Error('Internal library error - libConfig and carouselImageConfig must be defined');
         }
@@ -2565,15 +2373,16 @@ class CarouselComponent extends AccessibleComponent {
      * @param action Enum of type `Action` that represents the source action that triggered the change.
      */
     changeCurrentImage(image, action) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
         this.currentImage = image;
-        const index = getIndex(image, this.images);
+        const index = getIndex(image, this.images());
         // emit first/last event based on newIndex value
         this.emitBoundaryEvent(action, index);
         // emit current visible image index
-        this.changeImage.emit(new ImageEvent(this.id, action, index + 1));
+        this.changeImage.emit(new ImageEvent(id, action, index + 1));
     }
     /**
      * Private method to get the next index.
@@ -2584,15 +2393,15 @@ class CarouselComponent extends AccessibleComponent {
         if (!this.currentImage) {
             throw new Error('Internal library error - currentImage must be defined');
         }
-        const currentIndex = getIndex(this.currentImage, this.images);
+        const currentIndex = getIndex(this.currentImage, this.images());
         let newIndex;
-        if (currentIndex >= 0 && currentIndex < this.images.length - 1) {
+        if (currentIndex >= 0 && currentIndex < this.images().length - 1) {
             newIndex = currentIndex + 1;
         }
         else {
             newIndex = 0; // start from the first index
         }
-        return this.images[newIndex];
+        return this.images()[newIndex];
     }
     /**
      * Private method to get the previous index.
@@ -2603,15 +2412,15 @@ class CarouselComponent extends AccessibleComponent {
         if (!this.currentImage) {
             throw new Error('Internal library error - currentImage must be defined');
         }
-        const currentIndex = getIndex(this.currentImage, this.images);
+        const currentIndex = getIndex(this.currentImage, this.images());
         let newIndex;
-        if (currentIndex > 0 && currentIndex <= this.images.length - 1) {
+        if (currentIndex > 0 && currentIndex <= this.images().length - 1) {
             newIndex = currentIndex - 1;
         }
         else {
-            newIndex = this.images.length - 1; // start from the last index
+            newIndex = this.images().length - 1; // start from the last index
         }
-        return this.images[newIndex];
+        return this.images()[newIndex];
     }
     /**
      * Private method to build a text description.
@@ -2621,10 +2430,11 @@ class CarouselComponent extends AccessibleComponent {
      * @returns String description built concatenating image fields with a specific logic.
      */
     buildTextDescription(image, imageWithoutDescription) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig || !libConfig.carouselImageConfig) {
             throw new Error('Internal library error - libConfig and carouselImageConfig must be defined');
         }
@@ -2639,12 +2449,12 @@ class CarouselComponent extends AccessibleComponent {
         if (configCurrentImageCarousel.description.customFullDescription && configCurrentImageCarousel.description.customFullDescription !== '') {
             return configCurrentImageCarousel.description.customFullDescription;
         }
-        const currentIndex = getIndex(image, this.images);
+        const currentIndex = getIndex(image, this.images());
         // If the current image hasn't a description,
         // prevent to write the ' - ' (or this.description.beforeTextDescription)
         const prevDescription = configCurrentImageCarousel.description.imageText ? configCurrentImageCarousel.description.imageText : '';
         const midSeparator = configCurrentImageCarousel.description.numberSeparator ? configCurrentImageCarousel.description.numberSeparator : '';
-        const middleDescription = currentIndex + 1 + midSeparator + this.images.length;
+        const middleDescription = currentIndex + 1 + midSeparator + this.images().length;
         if (imageWithoutDescription) {
             return prevDescription + middleDescription;
         }
@@ -2658,7 +2468,8 @@ class CarouselComponent extends AccessibleComponent {
      * @param currentIndex number is the index of the current image
      */
     handleBoundaries(currentIndex) {
-        if (this.images.length === 1) {
+        const images = this.images();
+        if (images.length === 1) {
             this.isFirstImage = true;
             this.isLastImage = true;
             return;
@@ -2669,7 +2480,7 @@ class CarouselComponent extends AccessibleComponent {
                 this.isFirstImage = true;
                 this.isLastImage = false;
                 break;
-            case this.images.length - 1:
+            case images.length - 1:
                 // execute this only if infinite sliding is disabled
                 this.isFirstImage = false;
                 this.isLastImage = true;
@@ -2685,10 +2496,11 @@ class CarouselComponent extends AccessibleComponent {
      * This is based on the slideConfig input to enable/disable 'infinite sliding'.
      */
     manageSlideConfig() {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -2697,7 +2509,7 @@ class CarouselComponent extends AccessibleComponent {
         }
         let index;
         try {
-            index = getIndex(this.currentImage, this.images);
+            index = getIndex(this.currentImage, this.images());
         }
         catch (err) {
             console.error('Cannot get the current image index in current-image');
@@ -2719,16 +2531,17 @@ class CarouselComponent extends AccessibleComponent {
      * @param indexToCheck is the index number of the image (the first or the last one).
      */
     emitBoundaryEvent(action, indexToCheck) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             return;
         }
         // to emit first/last event
         switch (indexToCheck) {
             case 0:
-                this.firstImage.emit(new ImageEvent(this.id, action, true));
+                this.firstImage.emit(new ImageEvent(id, action, true));
                 break;
-            case this.images.length - 1:
-                this.lastImage.emit(new ImageEvent(this.id, action, true));
+            case this.images().length - 1:
+                this.lastImage.emit(new ImageEvent(id, action, true));
                 break;
         }
     }
@@ -2742,45 +2555,29 @@ class CarouselComponent extends AccessibleComponent {
      *  either the first or the last one.
      */
     isPreventSliding(boundaryIndex) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
         if (!this.currentImage) {
             throw new Error('Internal library error - currentImage must be defined');
         }
-        return !libConfig.carouselSlideInfinite && getIndex(this.currentImage, this.images) === boundaryIndex;
+        return !libConfig.carouselSlideInfinite && getIndex(this.currentImage, this.images()) === boundaryIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: ModalGalleryService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CarouselComponent, isStandalone: true, selector: "ks-carousel", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage", changeImage: "changeImage", firstImage: "firstImage", lastImage: "lastImage" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown.arrowLeft": "onKeyDownLeft()", "keydown.arrowRight": "onKeyDownLRight()" }, properties: { "attr.aria-label": "this.ariaLabel" } }, providers: [ConfigService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main id=\"carousel-container\"\n      [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.carouselContainerTitle\"\n      ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                               maxHeight: ''}\">\n\n\n  <!-- Workaround to support 2 ng-content in the same template in 2 @if (https://github.com/angular/angular/issues/22972) -->\n  <!-- Is this still required??? Issue is closed!-->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n\n  @if (currentImage && currentImage.modal) {\n    <figure class=\"current-figure\"\n            ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth, height: ''}\">\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-left\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n          <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n        </a>\n      }\n\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n        maxHeight: carouselConfig?.maxHeight}\">\n        @for (source of currentImage.modal?.sources; let i = $index; track i) {\n          <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n        }\n        <img [id]=\"currentImage.id\"\n             [loading]=\"currentImage.loading\"\n             [attr.fetchpriority]=\"currentImage.fetchpriority\"\n             [style.object-fit]=\"carouselConfig?.objectFit\"\n             ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                                      maxHeight: carouselConfig?.maxHeight}\"\n             [src]=\"currentImage.modal.img\"\n             ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n             [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n             [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n             alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onClickCurrentImage()\"\n             (swipeleft)=\"swipe($event.type)\"\n             (swiperight)=\"swipe($event.type)\" />\n      </picture>\n      @if (getDescriptionToDisplay() !== '') {\n        <figcaption class=\"description\"\n                    ksDescription [description]=\"carouselImageConfig?.description\"\n                    [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n      }\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-right\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n          <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n        </a>\n      }\n\n      <div id=\"dots\">\n        <ks-dots [id]=\"id\"\n                 [currentImage]=\"currentImage\"\n                 [images]=\"images\"\n                 [dotsConfig]=\"carouselDotsConfig\"\n                 (clickDot)=\"onClickDot($event)\"></ks-dots>\n      </div>\n\n    </figure>\n  }\n\n</main>\n\n<ks-carousel-previews [id]=\"id\"\n                      [images]=\"images\"\n                      [currentImage]=\"currentImage\"\n                      (clickPreview)=\"onClickPreview($event)\"></ks-carousel-previews>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: MaxSizeDirective, selector: "[ksMaxSize]", inputs: ["maxSizeConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { kind: "component", type: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: ["id", "currentImage", "images"], outputs: ["clickPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.NgZone }, { token: ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CarouselComponent, isStandalone: true, selector: "ks-carousel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickImage: "clickImage", changeImage: "changeImage", firstImage: "firstImage", lastImage: "lastImage" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown.arrowLeft": "onKeyDownLeft()", "keydown.arrowRight": "onKeyDownLRight()" }, properties: { "attr.aria-label": "this.ariaLabel" } }, providers: [ConfigService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main id=\"carousel-container\"\n      [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.carouselContainerTitle\"\n      ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                               maxHeight: ''}\">\n\n\n  <!-- Workaround to support 2 ng-content in the same template in 2 @if (https://github.com/angular/angular/issues/22972) -->\n  <!-- Is this still required??? Issue is closed!-->\n  <ng-template #content>\n    <ng-content />\n  </ng-template>\n\n  @if (currentImage && currentImage.modal) {\n    <figure class=\"current-figure\"\n            ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth, height: ''}\">\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-left\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n          <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig?.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n        </a>\n      }\n\n      <ng-container *ngTemplateOutlet=\"content\" />\n      <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n        maxHeight: carouselConfig?.maxHeight}\">\n        @for (source of currentImage.modal?.sources; let i = $index; track i) {\n          <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n        }\n        <img [id]=\"currentImage.id\"\n             loading=\"{{ currentImage.loading }}\"\n             [attr.fetchpriority]=\"currentImage.fetchpriority\"\n             [style.object-fit]=\"carouselConfig?.objectFit\"\n             ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                                      maxHeight: carouselConfig?.maxHeight}\"\n             [src]=\"currentImage.modal.img\"\n             ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n             [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n             [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n             alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onClickCurrentImage()\"\n             (swipeleft)=\"swipe($event.type)\"\n             (swiperight)=\"swipe($event.type)\" />\n      </picture>\n      @if (getDescriptionToDisplay() !== '') {\n        <figcaption class=\"description\"\n                    ksDescription [description]=\"carouselImageConfig?.description\"\n                    [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n      }\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-right\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n          <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig?.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n        </a>\n      }\n\n      @if (carouselDotsConfig) {\n        <div id=\"dots\">\n          <ks-dots [id]=\"id()\"\n                   [currentImage]=\"currentImage\"\n                   [images]=\"images()\"\n                   [dotsConfig]=\"carouselDotsConfig\"\n                   [accessibilityConfig]=\"accessibilityConfig!\"\n                   (clickDot)=\"onClickDot($event)\" />\n        </div>\n      }\n\n    </figure>\n  }\n\n</main>\n\n@if (currentImage) {\n  <ks-carousel-previews [id]=\"id()\"\n                        [images]=\"images()\"\n                        [currentImage]=\"currentImage\"\n                        (clickPreview)=\"onClickPreview($event)\" />\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: MaxSizeDirective, selector: "[ksMaxSize]", inputs: ["maxSizeConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig", "accessibilityConfig"], outputs: ["clickDot"] }, { kind: "component", type: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: ["id", "currentImage", "images"], outputs: ["clickPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ks-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigService], imports: [MaxSizeDirective, SizeDirective, NgTemplateOutlet,
-                        FallbackImageDirective, DescriptionDirective, DotsComponent, CarouselPreviewsComponent], template: "<main id=\"carousel-container\"\n      [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.carouselContainerTitle\"\n      ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                               maxHeight: ''}\">\n\n\n  <!-- Workaround to support 2 ng-content in the same template in 2 @if (https://github.com/angular/angular/issues/22972) -->\n  <!-- Is this still required??? Issue is closed!-->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n\n  @if (currentImage && currentImage.modal) {\n    <figure class=\"current-figure\"\n            ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth, height: ''}\">\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-left\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n          <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n        </a>\n      }\n\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n        maxHeight: carouselConfig?.maxHeight}\">\n        @for (source of currentImage.modal?.sources; let i = $index; track i) {\n          <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n        }\n        <img [id]=\"currentImage.id\"\n             [loading]=\"currentImage.loading\"\n             [attr.fetchpriority]=\"currentImage.fetchpriority\"\n             [style.object-fit]=\"carouselConfig?.objectFit\"\n             ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                                      maxHeight: carouselConfig?.maxHeight}\"\n             [src]=\"currentImage.modal.img\"\n             ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n             [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n             [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n             alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onClickCurrentImage()\"\n             (swipeleft)=\"swipe($event.type)\"\n             (swiperight)=\"swipe($event.type)\" />\n      </picture>\n      @if (getDescriptionToDisplay() !== '') {\n        <figcaption class=\"description\"\n                    ksDescription [description]=\"carouselImageConfig?.description\"\n                    [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n      }\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-right\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n          <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n        </a>\n      }\n\n      <div id=\"dots\">\n        <ks-dots [id]=\"id\"\n                 [currentImage]=\"currentImage\"\n                 [images]=\"images\"\n                 [dotsConfig]=\"carouselDotsConfig\"\n                 (clickDot)=\"onClickDot($event)\"></ks-dots>\n      </div>\n\n    </figure>\n  }\n\n</main>\n\n<ks-carousel-previews [id]=\"id\"\n                      [images]=\"images\"\n                      [currentImage]=\"currentImage\"\n                      (clickPreview)=\"onClickPreview($event)\"></ks-carousel-previews>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.NgZone }, { type: ModalGalleryService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
+                        FallbackImageDirective, DescriptionDirective, DotsComponent, CarouselPreviewsComponent], template: "<main id=\"carousel-container\"\n      [attr.aria-label]=\"accessibilityConfig?.carouselContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.carouselContainerTitle\"\n      ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                               maxHeight: ''}\">\n\n\n  <!-- Workaround to support 2 ng-content in the same template in 2 @if (https://github.com/angular/angular/issues/22972) -->\n  <!-- Is this still required??? Issue is closed!-->\n  <ng-template #content>\n    <ng-content />\n  </ng-template>\n\n  @if (currentImage && currentImage.modal) {\n    <figure class=\"current-figure\"\n            ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth, height: ''}\">\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-left\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselPrevImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\">\n          <div class=\"inside {{(isFirstImage && !carouselSlideInfinite) || !carouselConfig?.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselPrevImageTitle\"></div>\n        </a>\n      }\n\n      <ng-container *ngTemplateOutlet=\"content\" />\n      <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n        maxHeight: carouselConfig?.maxHeight}\">\n        @for (source of currentImage.modal?.sources; let i = $index; track i) {\n          <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n        }\n        <img [id]=\"currentImage.id\"\n             loading=\"{{ currentImage.loading }}\"\n             [attr.fetchpriority]=\"currentImage.fetchpriority\"\n             [style.object-fit]=\"carouselConfig?.objectFit\"\n             ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n                                      maxHeight: carouselConfig?.maxHeight}\"\n             [src]=\"currentImage.modal.img\"\n             ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n             [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n             [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n             alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onClickCurrentImage()\"\n             (swipeleft)=\"swipe($event.type)\"\n             (swiperight)=\"swipe($event.type)\" />\n      </picture>\n      @if (getDescriptionToDisplay() !== '') {\n        <figcaption class=\"description\"\n                    ksDescription [description]=\"carouselImageConfig?.description\"\n                    [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n      }\n\n      @if (carouselConfig?.showArrows) {\n        <a class=\"nav-right\"\n           [attr.aria-label]=\"accessibilityConfig?.carouselNextImageAriaLabel\"\n           [tabIndex]=\"isLastImage && !carouselSlideInfinite ? -1 : 0\" role=\"button\"\n           (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\">\n          <div class=\"inside {{(isLastImage && !carouselSlideInfinite) || !carouselConfig?.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n               aria-hidden=\"true\"\n               [title]=\"accessibilityConfig?.carouselNextImageTitle\"></div>\n        </a>\n      }\n\n      @if (carouselDotsConfig) {\n        <div id=\"dots\">\n          <ks-dots [id]=\"id()\"\n                   [currentImage]=\"currentImage\"\n                   [images]=\"images()\"\n                   [dotsConfig]=\"carouselDotsConfig\"\n                   [accessibilityConfig]=\"accessibilityConfig!\"\n                   (clickDot)=\"onClickDot($event)\" />\n        </div>\n      }\n\n    </figure>\n  }\n\n</main>\n\n@if (currentImage) {\n  <ks-carousel-previews [id]=\"id()\"\n                        [images]=\"images()\"\n                        [currentImage]=\"currentImage\"\n                        (clickPreview)=\"onClickPreview($event)\" />\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}#carousel-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}#carousel-container>.current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}#carousel-container>.current-figure .nav,#carousel-container>.current-figure>.nav-right,#carousel-container>.current-figure>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s;top:50%;position:absolute}#carousel-container>.current-figure .nav:hover,#carousel-container>.current-figure>.nav-right:hover,#carousel-container>.current-figure>.nav-left:hover{transform:scale(1.1)}#carousel-container>.current-figure>.nav-left{left:5px}#carousel-container>.current-figure>.nav-right{right:5px}#carousel-container>.current-figure>.current-image{display:block}#carousel-container>.current-figure>.current-image>img{width:100%;height:auto;display:block}#carousel-container>.current-figure>figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}#carousel-container>.current-figure>figcaption .description{font-weight:700;text-align:center}#carousel-container>.current-figure>#dots{position:absolute;bottom:20px;width:100%}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
-            }], id: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], clickImage: [{
-                type: Output
-            }], changeImage: [{
-                type: Output
-            }], firstImage: [{
-                type: Output
-            }], lastImage: [{
-                type: Output
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -2898,37 +2695,50 @@ const KS_DEFAULT_BTN_FULL_SCREEN = {
  * Also it emits click events as outputs.
  */
 class UpperButtonsComponent extends AccessibleComponent {
-    constructor(configService) {
-        super();
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique id (>=0) of the current instance of this library. This is required when you are using
+         * the service to call modal gallery.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Object of type `Image` that represent the visible image.
+         */
+        this.currentImage = input.required(...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+        /**
+         * Object of type `ButtonsConfig` to init UpperButtonsComponent's features.
+         * For instance, it contains an array of buttons.
+         */
+        this.buttonsConfig = input.required(...(ngDevMode ? [{ debugName: "buttonsConfig" }] : []));
         /**
          * Output to emit clicks on refresh button. The payload contains a `ButtonEvent`.
          */
-        this.refresh = new EventEmitter();
+        this.refresh = output();
         /**
          * Output to emit clicks on delete button. The payload contains a `ButtonEvent`.
          */
-        this.delete = new EventEmitter();
+        this.delete = output();
         /**
          * Output to emit clicks on navigate button. The payload contains a `ButtonEvent`.
          */
-        this.navigate = new EventEmitter();
+        this.navigate = output();
         /**
          * Output to emit clicks on download button. The payload contains a `ButtonEvent`.
          */
-        this.download = new EventEmitter();
+        this.download = output();
         /**
          * Output to emit clicks on close button. The payload contains a `ButtonEvent`.
          */
-        this.closeButton = new EventEmitter();
+        this.closeButton = output();
         /**
          * Output to emit clicks on full-screen button. The payload contains a `ButtonEvent`.
          */
-        this.fullscreen = new EventEmitter();
+        this.fullscreen = output();
         /**
          * Output to emit clicks on all custom buttons. The payload contains a `ButtonEvent`.
          */
-        this.customEmit = new EventEmitter();
+        this.customEmit = output();
         /**
          * Default buttons array for standard configuration
          */
@@ -2957,12 +2767,10 @@ class UpperButtonsComponent extends AccessibleComponent {
      * In particular, it's called only one time!!!
      */
     ngOnInit() {
-        const libConfig = this.configService.getConfig(this.id);
-        if (!libConfig || !libConfig.buttonsConfig) {
-            throw new Error('Internal library error - libConfig and buttonsConfig must be defined');
+        if (!this.buttonsConfig()) {
+            throw new Error('No buttons configured');
         }
-        this.buttonsConfig = libConfig.buttonsConfig;
-        switch (this.buttonsConfig.strategy) {
+        switch (this.buttonsConfig().strategy) {
             case ButtonsStrategy.SIMPLE:
                 this.buttons = this.addButtonIds(this.simpleButtonsDefault);
                 break;
@@ -2973,7 +2781,7 @@ class UpperButtonsComponent extends AccessibleComponent {
                 this.buttons = this.addButtonIds(this.fullButtonsDefault);
                 break;
             case ButtonsStrategy.CUSTOM:
-                this.buttons = this.addButtonIds(this.validateCustomButtons(this.buttonsConfig.buttons));
+                this.buttons = this.addButtonIds(this.validateCustomButtons(this.buttonsConfig().buttons));
                 break;
             case ButtonsStrategy.DEFAULT:
             default:
@@ -2999,14 +2807,15 @@ class UpperButtonsComponent extends AccessibleComponent {
             // (I'll fill this value inside the parent of this component
             image: null,
             action,
-            galleryId: this.id
+            galleryId: this.id()
         };
+        const currentImage = this.currentImage();
         switch (button.type) {
             case ButtonType.DELETE:
                 this.triggerOnMouseAndKeyboard(this.delete, event, dataToEmit);
                 break;
             case ButtonType.EXTURL:
-                if (!this.currentImage || !this.currentImage.modal || !this.currentImage.modal.extUrl) {
+                if (!currentImage || !currentImage.modal || !currentImage.modal.extUrl) {
                     return;
                 }
                 this.triggerOnMouseAndKeyboard(this.navigate, event, dataToEmit);
@@ -3066,7 +2875,7 @@ class UpperButtonsComponent extends AccessibleComponent {
      * Private method to validate custom buttons received as input.
      * @param buttons ButtonConfig[] config array. [] by default.
      * @returns ButtonConfig[] the same input buttons config array
-     * @throws an error is exists a button with an unknown type
+     * @throws an error if exists a button with an unknown type
      */
     validateCustomButtons(buttons = []) {
         buttons.forEach((val) => {
@@ -3077,31 +2886,13 @@ class UpperButtonsComponent extends AccessibleComponent {
         });
         return buttons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UpperButtonsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UpperButtonsComponent, isStandalone: true, selector: "ks-upper-buttons", inputs: { id: "id", currentImage: "currentImage" }, outputs: { refresh: "refresh", delete: "delete", navigate: "navigate", download: "download", closeButton: "closeButton", fullscreen: "fullscreen", customEmit: "customEmit" }, usesInheritance: true, ngImport: i0, template: "<header class=\"buttons-container\">\n\n  @if (!buttonsConfig || buttonsConfig?.visible) {\n    @for (btn of buttons; track trackById) {\n      <a class=\"upper-button\"\n         ksSize [sizeConfig]=\"{width: btn.size?.width!, height: btn.size?.height!}\"\n         [ngStyle]=\"{'font-size': btn.fontSize}\"\n         [attr.aria-label]=\"btn.ariaLabel\"\n         [tabIndex]=\"0\" role=\"button\"\n         (click)=\"onEvent(btn, $event)\" (keyup)=\"onEvent(btn, $event)\">\n        <div class=\"inside {{btn.className}}\" aria-hidden=\"true\" title=\"{{btn.title}}\"></div>\n      </a>\n    }\n  }\n</header>\n", styles: [".buttons-container{display:flex;flex-direction:row;justify-content:flex-end}.buttons-container>.upper-button{align-self:center;margin-right:30px;margin-top:28px;font-size:50px;text-decoration:none;cursor:pointer;animation:animatezoom .6s;color:#fff}@keyframes animatezoom{0%{transform:scale(0)}to{transform:scale(1)}}.base-btn,.copy,.refresh-image,.close-image,.download-image,.ext-url-image,.delete-image,.fullscreen-image,.rotate-image{width:30px;height:30px;background-size:30px;opacity:.8;transition:all .5s}.base-btn:hover,.copy:hover,.refresh-image:hover,.close-image:hover,.download-image:hover,.ext-url-image:hover,.delete-image:hover,.fullscreen-image:hover,.rotate-image:hover{transform:scale(1.2)}.rotate-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMzLDJjNy43NDYsMCwxNS4wMjgsMy4wMTcsMjAuNTA1LDguNDk0YzEwLjEzOCwxMC4xMzcsMTEuMzEsMjYuMzk2LDIuNzQsMzcuODQ5TDUyLDUyLjU4OVY0NGgtMnYxMWwxLDFoMTF2LTJoLTguNTgyICAgIGw0LjI5Mi00LjI5M2wwLjA5Mi0wLjEwNmM5LjIxMS0xMi4yNDcsNy45NzItMjkuNjY3LTIuODgzLTQwLjUyMUM0OS4wNjQsMy4yMjUsNDEuMjgsMCwzMywwVjJ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTcuNzU1LDE1LjY1N0wxMiwxMS40MTFWMjBoMlY5bC0xLTFIMnYyaDguNTgyTDYuMjksMTQuMjkzbC0wLjA5MiwwLjEwNkMtMy4wMTMsMjYuNjQ2LTEuNzczLDQ0LjA2Niw5LjA4MSw1NC45MiAgICBDMTQuOTM2LDYwLjc3NSwyMi43Miw2NCwzMSw2NHYtMmMtNy43NDYsMC0xNS4wMjgtMy4wMTctMjAuNTA1LTguNDk0QzAuMzU3LDQzLjM2OS0wLjgxNCwyNy4xMSw3Ljc1NSwxNS42NTd6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.fullscreen-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMgNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzIDUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNNTIuOTIzLDAuNjE4Yy0wLjEwMS0wLjI0NC0wLjI5Ni0wLjQzOS0wLjU0MS0wLjU0MUM1Mi4yNiwwLjAyNyw1Mi4xMywwLDUyLDBINDBjLTAuNTUyLDAtMSwwLjQ0OC0xLDFzMC40NDgsMSwxLDFoOS41ODYgICBMMzMuMjkzLDE4LjI5M2MtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMzMy40ODgsMTkuOTAyLDMzLjc0NCwyMCwzNCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M0w1MSwzLjQxNFYxMyAgIGMwLDAuNTUyLDAuNDQ4LDEsMSwxczEtMC40NDgsMS0xVjFDNTMsMC44Nyw1Mi45NzMsMC43NCw1Mi45MjMsMC42MTh6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTE4LjI5MywzMy4yOTNMMiw0OS41ODZWNDBjMC0wLjU1Mi0wLjQ0OC0xLTEtMXMtMSwwLjQ0OC0xLDF2MTJjMCwwLjEzLDAuMDI3LDAuMjYsMC4wNzcsMC4zODIgICBjMC4xMDEsMC4yNDQsMC4yOTYsMC40MzksMC41NDEsMC41NDFDMC43NCw1Mi45NzMsMC44Nyw1MywxLDUzaDEyYzAuNTUyLDAsMS0wLjQ0OCwxLTFzLTAuNDQ4LTEtMS0xSDMuNDE0bDE2LjI5My0xNi4yOTMgICBjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNFMxOC42ODQsMzIuOTAyLDE4LjI5MywzMy4yOTN6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTEsMTRjMC41NTIsMCwxLTAuNDQ4LDEtMVYzLjQxNGwxNi4yOTIsMTYuMjkyYzAuMTk1LDAuMTk1LDAuNDUxLDAuMjkzLDAuNzA3LDAuMjkzczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzICAgYzAuMzkxLTAuMzkxLDAuMzkxLTEuMDIzLDAtMS40MTRMMy40MTQsMkgxM2MwLjU1MiwwLDEtMC40NDgsMS0xcy0wLjQ0OC0xLTEtMUgxQzAuODcsMCwwLjc0LDAuMDI3LDAuNjE4LDAuMDc3ICAgQzAuMzczLDAuMTc5LDAuMTc5LDAuMzczLDAuMDc3LDAuNjE4QzAuMDI3LDAuNzQsMCwwLjg3LDAsMXYxMkMwLDEzLjU1MiwwLjQ0OCwxNCwxLDE0eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik01MiwzOWMtMC41NTIsMC0xLDAuNDQ4LTEsMXY5LjU4NkwzNC43MDcsMzMuMjkyYy0wLjM5MS0wLjM5MS0xLjAyMy0wLjM5MS0xLjQxNCwwcy0wLjM5MSwxLjAyMywwLDEuNDE0TDQ5LjU4Niw1MUg0MCAgIGMtMC41NTIsMC0xLDAuNDQ4LTEsMXMwLjQ0OCwxLDEsMWgxMmMwLjEzLDAsMC4yNi0wLjAyNywwLjM4Mi0wLjA3N2MwLjI0NC0wLjEwMSwwLjQzOS0wLjI5NiwwLjU0MS0wLjU0MSAgIEM1Mi45NzMsNTIuMjYsNTMsNTIuMTMsNTMsNTJWNDBDNTMsMzkuNDQ4LDUyLjU1MiwzOSw1MiwzOXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.delete-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni40IDQ4Ni40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODYuNCA0ODYuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ0Niw3MEgzNDQuOFY1My41YzAtMjkuNS0yNC01My41LTUzLjUtNTMuNWgtOTYuMmMtMjkuNSwwLTUzLjUsMjQtNTMuNSw1My41VjcwSDQwLjRjLTcuNSwwLTEzLjUsNi0xMy41LDEzLjUgICAgUzMyLjksOTcsNDAuNCw5N2gyNC40djMxNy4yYzAsMzkuOCwzMi40LDcyLjIsNzIuMiw3Mi4yaDIxMi40YzM5LjgsMCw3Mi4yLTMyLjQsNzIuMi03Mi4yVjk3SDQ0NmM3LjUsMCwxMy41LTYsMTMuNS0xMy41ICAgIFM0NTMuNSw3MCw0NDYsNzB6IE0xNjguNiw1My41YzAtMTQuNiwxMS45LTI2LjUsMjYuNS0yNi41aDk2LjJjMTQuNiwwLDI2LjUsMTEuOSwyNi41LDI2LjVWNzBIMTY4LjZWNTMuNXogTTM5NC42LDQxNC4yICAgIGMwLDI0LjktMjAuMyw0NS4yLTQ1LjIsNDUuMkgxMzdjLTI0LjksMC00NS4yLTIwLjMtNDUuMi00NS4yVjk3aDMwMi45djMxNy4ySDM5NC42eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0yNDMuMiw0MTFjNy41LDAsMTMuNS02LDEzLjUtMTMuNVYxNTguOWMwLTcuNS02LTEzLjUtMTMuNS0xMy41cy0xMy41LDYtMTMuNSwxMy41djIzOC41ICAgIEMyMjkuNyw0MDQuOSwyMzUuNyw0MTEsMjQzLjIsNDExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNTUuMSwzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzE0MS42LDM5MC4xLDE0Ny43LDM5Ni4xLDE1NS4xLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0zMzEuMywzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzMxNy44LDM5MC4xLDMyMy44LDM5Ni4xLDMzMS4zLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.ext-url-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPjxnPjxwYXRoIGQ9Ik00ODAsMjg4djExMmMwLDQ0LjE4My0zNS44MTcsODAtODAsODBIMTEyYy00NC4xODMsMC04MC0zNS44MTctODAtODBWMTEyYzAtNDQuMTgzLDM1LjgxNy04MCw4MC04MGg5NlYwaC05NiAgICAgQzUwLjE0NCwwLDAsNTAuMTQ0LDAsMTEydjI4OGMwLDYxLjg1Niw1MC4xNDQsMTEyLDExMiwxMTJoMjg4YzYxLjg1NiwwLDExMi01MC4xNDQsMTEyLTExMlYyODhINDgweiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNzYsNDE2aDMyVjI4OGMwLTEyNS43NiwxMDcuNTItMTI4LDExMi0xMjhoMTA1LjQ0bC04NC42NCw4NC42NGwyMi41NiwyMi41NmwxMTItMTEyYzYuMjA0LTYuMjQxLDYuMjA0LTE2LjMxOSwwLTIyLjU2ICAgICBsLTExMi0xMTJsLTIyLjcyLDIyLjcybDg0LjgsODQuNjRIMzIwYy0xLjQ0LDAtMTQ0LDEuNzYtMTQ0LDE2MFY0MTZ6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.download-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3MS4yIDQ3MS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzEuMiA0NzEuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ1Ny43LDIzMC4xNWMtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXYxMjIuOGMwLDMzLjQtMjcuMiw2MC41LTYwLjUsNjAuNUg4Ny41Yy0zMy40LDAtNjAuNS0yNy4yLTYwLjUtNjAuNXYtMTI0LjggICAgYzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MTI0LjhjMCw0OC4zLDM5LjMsODcuNSw4Ny41LDg3LjVoMjk2LjJjNDguMywwLDg3LjUtMzkuMyw4Ny41LTg3LjV2LTEyMi44ICAgIEM0NzEuMiwyMzYuMjUsNDY1LjIsMjMwLjE1LDQ1Ny43LDIzMC4xNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMjI2LjEsMzQ2Ljc1YzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGw4NS44LTg1LjhjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC02Mi43LDYyLjggICAgVjMwLjc1YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjczLjlsLTYyLjgtNjIuOGMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xICAgIEwyMjYuMSwzNDYuNzV6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.close-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3NS4yIDQ3NS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzUuMiA0NzUuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQwNS42LDY5LjZDMzYwLjcsMjQuNywzMDEuMSwwLDIzNy42LDBzLTEyMy4xLDI0LjctMTY4LDY5LjZTMCwxNzQuMSwwLDIzNy42czI0LjcsMTIzLjEsNjkuNiwxNjhzMTA0LjUsNjkuNiwxNjgsNjkuNiAgICBzMTIzLjEtMjQuNywxNjgtNjkuNnM2OS42LTEwNC41LDY5LjYtMTY4UzQ1MC41LDExNC41LDQwNS42LDY5LjZ6IE0zODYuNSwzODYuNWMtMzkuOCwzOS44LTkyLjcsNjEuNy0xNDguOSw2MS43ICAgIHMtMTA5LjEtMjEuOS0xNDguOS02MS43Yy04Mi4xLTgyLjEtODIuMS0yMTUuNywwLTI5Ny44QzEyOC41LDQ4LjksMTgxLjQsMjcsMjM3LjYsMjdzMTA5LjEsMjEuOSwxNDguOSw2MS43ICAgIEM0NjguNiwxNzAuOCw0NjguNiwzMDQuNCwzODYuNSwzODYuNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMzQyLjMsMTMyLjljLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC04NS42LDg1LjZMMTUyLDEzMi45Yy01LjMtNS4zLTEzLjgtNS4zLTE5LjEsMGMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjEgICAgbDg1LjYsODUuNmwtODUuNiw4NS42Yy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsODUuNi04NS42bDg1LjYsODUuNmMyLjYsMi42LDYuMSw0LDkuNSw0ICAgIGMzLjUsMCw2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xbC04NS40LTg1LjZsODUuNi04NS42QzM0Ny42LDE0Ni43LDM0Ny42LDEzOC4yLDM0Mi4zLDEzMi45eiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.refresh-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43MTEgNDg5LjcxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg5LjcxMSA0ODkuNzExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48Zz48cGF0aCBkPSJNMTEyLjE1Niw5Ny4xMTFjNzIuMy02NS40LDE4MC41LTY2LjQsMjUzLjgtNi43bC01OC4xLDIuMmMtNy41LDAuMy0xMy4zLDYuNS0xMywxNGMwLjMsNy4zLDYuMywxMywxMy41LDEzICAgIGMwLjIsMCwwLjMsMCwwLjUsMGw4OS4yLTMuM2M3LjMtMC4zLDEzLTYuMiwxMy0xMy41di0xYzAtMC4yLDAtMC4zLDAtMC41di0wLjFsMCwwbC0zLjMtODguMmMtMC4zLTcuNS02LjYtMTMuMy0xNC0xMyAgICBjLTcuNSwwLjMtMTMuMyw2LjUtMTMsMTRsMi4xLDU1LjNjLTM2LjMtMjkuNy04MS00Ni45LTEyOC44LTQ5LjNjLTU5LjItMy0xMTYuMSwxNy4zLTE2MCw1Ny4xYy02MC40LDU0LjctODYsMTM3LjktNjYuOCwyMTcuMSAgICBjMS41LDYuMiw3LDEwLjMsMTMuMSwxMC4zYzEuMSwwLDIuMS0wLjEsMy4yLTAuNGM3LjItMS44LDExLjctOS4xLDkuOS0xNi4zQzM2LjY1NiwyMTguMjExLDU5LjA1NiwxNDUuMTExLDExMi4xNTYsOTcuMTExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik00NjIuNDU2LDE5NS41MTFjLTEuOC03LjItOS4xLTExLjctMTYuMy05LjljLTcuMiwxLjgtMTEuNyw5LjEtOS45LDE2LjNjMTYuOSw2OS42LTUuNiwxNDIuNy01OC43LDE5MC43ICAgIGMtMzcuMywzMy43LTg0LjEsNTAuMy0xMzAuNyw1MC4zYy00NC41LDAtODguOS0xNS4xLTEyNC43LTQ0LjlsNTguOC01LjNjNy40LTAuNywxMi45LTcuMiwxMi4yLTE0LjdzLTcuMi0xMi45LTE0LjctMTIuMmwtODguOSw4ICAgIGMtNy40LDAuNy0xMi45LDcuMi0xMi4yLDE0LjdsOCw4OC45YzAuNiw3LDYuNSwxMi4zLDEzLjQsMTIuM2MwLjQsMCwwLjgsMCwxLjItMC4xYzcuNC0wLjcsMTIuOS03LjIsMTIuMi0xNC43bC00LjgtNTQuMSAgICBjMzYuMywyOS40LDgwLjgsNDYuNSwxMjguMyw0OC45YzMuOCwwLjIsNy42LDAuMywxMS4zLDAuM2M1NS4xLDAsMTA3LjUtMjAuMiwxNDguNy01Ny40ICAgIEM0NTYuMDU2LDM1Ny45MTEsNDgxLjY1NiwyNzQuODExLDQ2Mi40NTYsMTk1LjUxMXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==)}.copy{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}\n"], dependencies: [{ kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UpperButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UpperButtonsComponent, isStandalone: true, selector: "ks-upper-buttons", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, currentImage: { classPropertyName: "currentImage", publicName: "currentImage", isSignal: true, isRequired: true, transformFunction: null }, buttonsConfig: { classPropertyName: "buttonsConfig", publicName: "buttonsConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { refresh: "refresh", delete: "delete", navigate: "navigate", download: "download", closeButton: "closeButton", fullscreen: "fullscreen", customEmit: "customEmit" }, usesInheritance: true, ngImport: i0, template: "<header class=\"buttons-container\">\n\n  @if (!buttonsConfig() || buttonsConfig()?.visible) {\n    @for (btn of buttons; track trackById) {\n      <a class=\"upper-button\"\n         ksSize [sizeConfig]=\"{width: btn.size?.width!, height: btn.size?.height!}\"\n         [ngStyle]=\"{'font-size': btn.fontSize}\"\n         [attr.aria-label]=\"btn.ariaLabel\"\n         [tabIndex]=\"0\" role=\"button\"\n         (click)=\"onEvent(btn, $event)\" (keyup)=\"onEvent(btn, $event)\">\n        <div class=\"inside {{btn.className}}\" aria-hidden=\"true\" title=\"{{btn.title}}\"></div>\n      </a>\n    }\n  }\n</header>\n", styles: [".buttons-container{display:flex;flex-direction:row;justify-content:flex-end}.buttons-container>.upper-button{align-self:center;margin-right:30px;margin-top:28px;font-size:50px;text-decoration:none;cursor:pointer;animation:animatezoom .6s;color:#fff}@keyframes animatezoom{0%{transform:scale(0)}to{transform:scale(1)}}.base-btn,.copy,.refresh-image,.close-image,.download-image,.ext-url-image,.delete-image,.fullscreen-image,.rotate-image{width:30px;height:30px;background-size:30px;opacity:.8;transition:all .5s}.base-btn:hover,.copy:hover,.refresh-image:hover,.close-image:hover,.download-image:hover,.ext-url-image:hover,.delete-image:hover,.fullscreen-image:hover,.rotate-image:hover{transform:scale(1.2)}.rotate-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMzLDJjNy43NDYsMCwxNS4wMjgsMy4wMTcsMjAuNTA1LDguNDk0YzEwLjEzOCwxMC4xMzcsMTEuMzEsMjYuMzk2LDIuNzQsMzcuODQ5TDUyLDUyLjU4OVY0NGgtMnYxMWwxLDFoMTF2LTJoLTguNTgyICAgIGw0LjI5Mi00LjI5M2wwLjA5Mi0wLjEwNmM5LjIxMS0xMi4yNDcsNy45NzItMjkuNjY3LTIuODgzLTQwLjUyMUM0OS4wNjQsMy4yMjUsNDEuMjgsMCwzMywwVjJ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTcuNzU1LDE1LjY1N0wxMiwxMS40MTFWMjBoMlY5bC0xLTFIMnYyaDguNTgyTDYuMjksMTQuMjkzbC0wLjA5MiwwLjEwNkMtMy4wMTMsMjYuNjQ2LTEuNzczLDQ0LjA2Niw5LjA4MSw1NC45MiAgICBDMTQuOTM2LDYwLjc3NSwyMi43Miw2NCwzMSw2NHYtMmMtNy43NDYsMC0xNS4wMjgtMy4wMTctMjAuNTA1LTguNDk0QzAuMzU3LDQzLjM2OS0wLjgxNCwyNy4xMSw3Ljc1NSwxNS42NTd6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.fullscreen-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMgNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzIDUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNNTIuOTIzLDAuNjE4Yy0wLjEwMS0wLjI0NC0wLjI5Ni0wLjQzOS0wLjU0MS0wLjU0MUM1Mi4yNiwwLjAyNyw1Mi4xMywwLDUyLDBINDBjLTAuNTUyLDAtMSwwLjQ0OC0xLDFzMC40NDgsMSwxLDFoOS41ODYgICBMMzMuMjkzLDE4LjI5M2MtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMzMy40ODgsMTkuOTAyLDMzLjc0NCwyMCwzNCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M0w1MSwzLjQxNFYxMyAgIGMwLDAuNTUyLDAuNDQ4LDEsMSwxczEtMC40NDgsMS0xVjFDNTMsMC44Nyw1Mi45NzMsMC43NCw1Mi45MjMsMC42MTh6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTE4LjI5MywzMy4yOTNMMiw0OS41ODZWNDBjMC0wLjU1Mi0wLjQ0OC0xLTEtMXMtMSwwLjQ0OC0xLDF2MTJjMCwwLjEzLDAuMDI3LDAuMjYsMC4wNzcsMC4zODIgICBjMC4xMDEsMC4yNDQsMC4yOTYsMC40MzksMC41NDEsMC41NDFDMC43NCw1Mi45NzMsMC44Nyw1MywxLDUzaDEyYzAuNTUyLDAsMS0wLjQ0OCwxLTFzLTAuNDQ4LTEtMS0xSDMuNDE0bDE2LjI5My0xNi4yOTMgICBjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNFMxOC42ODQsMzIuOTAyLDE4LjI5MywzMy4yOTN6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTEsMTRjMC41NTIsMCwxLTAuNDQ4LDEtMVYzLjQxNGwxNi4yOTIsMTYuMjkyYzAuMTk1LDAuMTk1LDAuNDUxLDAuMjkzLDAuNzA3LDAuMjkzczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzICAgYzAuMzkxLTAuMzkxLDAuMzkxLTEuMDIzLDAtMS40MTRMMy40MTQsMkgxM2MwLjU1MiwwLDEtMC40NDgsMS0xcy0wLjQ0OC0xLTEtMUgxQzAuODcsMCwwLjc0LDAuMDI3LDAuNjE4LDAuMDc3ICAgQzAuMzczLDAuMTc5LDAuMTc5LDAuMzczLDAuMDc3LDAuNjE4QzAuMDI3LDAuNzQsMCwwLjg3LDAsMXYxMkMwLDEzLjU1MiwwLjQ0OCwxNCwxLDE0eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik01MiwzOWMtMC41NTIsMC0xLDAuNDQ4LTEsMXY5LjU4NkwzNC43MDcsMzMuMjkyYy0wLjM5MS0wLjM5MS0xLjAyMy0wLjM5MS0xLjQxNCwwcy0wLjM5MSwxLjAyMywwLDEuNDE0TDQ5LjU4Niw1MUg0MCAgIGMtMC41NTIsMC0xLDAuNDQ4LTEsMXMwLjQ0OCwxLDEsMWgxMmMwLjEzLDAsMC4yNi0wLjAyNywwLjM4Mi0wLjA3N2MwLjI0NC0wLjEwMSwwLjQzOS0wLjI5NiwwLjU0MS0wLjU0MSAgIEM1Mi45NzMsNTIuMjYsNTMsNTIuMTMsNTMsNTJWNDBDNTMsMzkuNDQ4LDUyLjU1MiwzOSw1MiwzOXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.delete-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni40IDQ4Ni40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODYuNCA0ODYuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ0Niw3MEgzNDQuOFY1My41YzAtMjkuNS0yNC01My41LTUzLjUtNTMuNWgtOTYuMmMtMjkuNSwwLTUzLjUsMjQtNTMuNSw1My41VjcwSDQwLjRjLTcuNSwwLTEzLjUsNi0xMy41LDEzLjUgICAgUzMyLjksOTcsNDAuNCw5N2gyNC40djMxNy4yYzAsMzkuOCwzMi40LDcyLjIsNzIuMiw3Mi4yaDIxMi40YzM5LjgsMCw3Mi4yLTMyLjQsNzIuMi03Mi4yVjk3SDQ0NmM3LjUsMCwxMy41LTYsMTMuNS0xMy41ICAgIFM0NTMuNSw3MCw0NDYsNzB6IE0xNjguNiw1My41YzAtMTQuNiwxMS45LTI2LjUsMjYuNS0yNi41aDk2LjJjMTQuNiwwLDI2LjUsMTEuOSwyNi41LDI2LjVWNzBIMTY4LjZWNTMuNXogTTM5NC42LDQxNC4yICAgIGMwLDI0LjktMjAuMyw0NS4yLTQ1LjIsNDUuMkgxMzdjLTI0LjksMC00NS4yLTIwLjMtNDUuMi00NS4yVjk3aDMwMi45djMxNy4ySDM5NC42eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0yNDMuMiw0MTFjNy41LDAsMTMuNS02LDEzLjUtMTMuNVYxNTguOWMwLTcuNS02LTEzLjUtMTMuNS0xMy41cy0xMy41LDYtMTMuNSwxMy41djIzOC41ICAgIEMyMjkuNyw0MDQuOSwyMzUuNyw0MTEsMjQzLjIsNDExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNTUuMSwzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzE0MS42LDM5MC4xLDE0Ny43LDM5Ni4xLDE1NS4xLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0zMzEuMywzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzMxNy44LDM5MC4xLDMyMy44LDM5Ni4xLDMzMS4zLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.ext-url-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPjxnPjxwYXRoIGQ9Ik00ODAsMjg4djExMmMwLDQ0LjE4My0zNS44MTcsODAtODAsODBIMTEyYy00NC4xODMsMC04MC0zNS44MTctODAtODBWMTEyYzAtNDQuMTgzLDM1LjgxNy04MCw4MC04MGg5NlYwaC05NiAgICAgQzUwLjE0NCwwLDAsNTAuMTQ0LDAsMTEydjI4OGMwLDYxLjg1Niw1MC4xNDQsMTEyLDExMiwxMTJoMjg4YzYxLjg1NiwwLDExMi01MC4xNDQsMTEyLTExMlYyODhINDgweiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNzYsNDE2aDMyVjI4OGMwLTEyNS43NiwxMDcuNTItMTI4LDExMi0xMjhoMTA1LjQ0bC04NC42NCw4NC42NGwyMi41NiwyMi41NmwxMTItMTEyYzYuMjA0LTYuMjQxLDYuMjA0LTE2LjMxOSwwLTIyLjU2ICAgICBsLTExMi0xMTJsLTIyLjcyLDIyLjcybDg0LjgsODQuNjRIMzIwYy0xLjQ0LDAtMTQ0LDEuNzYtMTQ0LDE2MFY0MTZ6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.download-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3MS4yIDQ3MS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzEuMiA0NzEuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ1Ny43LDIzMC4xNWMtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXYxMjIuOGMwLDMzLjQtMjcuMiw2MC41LTYwLjUsNjAuNUg4Ny41Yy0zMy40LDAtNjAuNS0yNy4yLTYwLjUtNjAuNXYtMTI0LjggICAgYzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MTI0LjhjMCw0OC4zLDM5LjMsODcuNSw4Ny41LDg3LjVoMjk2LjJjNDguMywwLDg3LjUtMzkuMyw4Ny41LTg3LjV2LTEyMi44ICAgIEM0NzEuMiwyMzYuMjUsNDY1LjIsMjMwLjE1LDQ1Ny43LDIzMC4xNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMjI2LjEsMzQ2Ljc1YzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGw4NS44LTg1LjhjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC02Mi43LDYyLjggICAgVjMwLjc1YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjczLjlsLTYyLjgtNjIuOGMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xICAgIEwyMjYuMSwzNDYuNzV6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.close-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3NS4yIDQ3NS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzUuMiA0NzUuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQwNS42LDY5LjZDMzYwLjcsMjQuNywzMDEuMSwwLDIzNy42LDBzLTEyMy4xLDI0LjctMTY4LDY5LjZTMCwxNzQuMSwwLDIzNy42czI0LjcsMTIzLjEsNjkuNiwxNjhzMTA0LjUsNjkuNiwxNjgsNjkuNiAgICBzMTIzLjEtMjQuNywxNjgtNjkuNnM2OS42LTEwNC41LDY5LjYtMTY4UzQ1MC41LDExNC41LDQwNS42LDY5LjZ6IE0zODYuNSwzODYuNWMtMzkuOCwzOS44LTkyLjcsNjEuNy0xNDguOSw2MS43ICAgIHMtMTA5LjEtMjEuOS0xNDguOS02MS43Yy04Mi4xLTgyLjEtODIuMS0yMTUuNywwLTI5Ny44QzEyOC41LDQ4LjksMTgxLjQsMjcsMjM3LjYsMjdzMTA5LjEsMjEuOSwxNDguOSw2MS43ICAgIEM0NjguNiwxNzAuOCw0NjguNiwzMDQuNCwzODYuNSwzODYuNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMzQyLjMsMTMyLjljLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC04NS42LDg1LjZMMTUyLDEzMi45Yy01LjMtNS4zLTEzLjgtNS4zLTE5LjEsMGMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjEgICAgbDg1LjYsODUuNmwtODUuNiw4NS42Yy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsODUuNi04NS42bDg1LjYsODUuNmMyLjYsMi42LDYuMSw0LDkuNSw0ICAgIGMzLjUsMCw2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xbC04NS40LTg1LjZsODUuNi04NS42QzM0Ny42LDE0Ni43LDM0Ny42LDEzOC4yLDM0Mi4zLDEzMi45eiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.refresh-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43MTEgNDg5LjcxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg5LjcxMSA0ODkuNzExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48Zz48cGF0aCBkPSJNMTEyLjE1Niw5Ny4xMTFjNzIuMy02NS40LDE4MC41LTY2LjQsMjUzLjgtNi43bC01OC4xLDIuMmMtNy41LDAuMy0xMy4zLDYuNS0xMywxNGMwLjMsNy4zLDYuMywxMywxMy41LDEzICAgIGMwLjIsMCwwLjMsMCwwLjUsMGw4OS4yLTMuM2M3LjMtMC4zLDEzLTYuMiwxMy0xMy41di0xYzAtMC4yLDAtMC4zLDAtMC41di0wLjFsMCwwbC0zLjMtODguMmMtMC4zLTcuNS02LjYtMTMuMy0xNC0xMyAgICBjLTcuNSwwLjMtMTMuMyw2LjUtMTMsMTRsMi4xLDU1LjNjLTM2LjMtMjkuNy04MS00Ni45LTEyOC44LTQ5LjNjLTU5LjItMy0xMTYuMSwxNy4zLTE2MCw1Ny4xYy02MC40LDU0LjctODYsMTM3LjktNjYuOCwyMTcuMSAgICBjMS41LDYuMiw3LDEwLjMsMTMuMSwxMC4zYzEuMSwwLDIuMS0wLjEsMy4yLTAuNGM3LjItMS44LDExLjctOS4xLDkuOS0xNi4zQzM2LjY1NiwyMTguMjExLDU5LjA1NiwxNDUuMTExLDExMi4xNTYsOTcuMTExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik00NjIuNDU2LDE5NS41MTFjLTEuOC03LjItOS4xLTExLjctMTYuMy05LjljLTcuMiwxLjgtMTEuNyw5LjEtOS45LDE2LjNjMTYuOSw2OS42LTUuNiwxNDIuNy01OC43LDE5MC43ICAgIGMtMzcuMywzMy43LTg0LjEsNTAuMy0xMzAuNyw1MC4zYy00NC41LDAtODguOS0xNS4xLTEyNC43LTQ0LjlsNTguOC01LjNjNy40LTAuNywxMi45LTcuMiwxMi4yLTE0LjdzLTcuMi0xMi45LTE0LjctMTIuMmwtODguOSw4ICAgIGMtNy40LDAuNy0xMi45LDcuMi0xMi4yLDE0LjdsOCw4OC45YzAuNiw3LDYuNSwxMi4zLDEzLjQsMTIuM2MwLjQsMCwwLjgsMCwxLjItMC4xYzcuNC0wLjcsMTIuOS03LjIsMTIuMi0xNC43bC00LjgtNTQuMSAgICBjMzYuMywyOS40LDgwLjgsNDYuNSwxMjguMyw0OC45YzMuOCwwLjIsNy42LDAuMywxMS4zLDAuM2M1NS4xLDAsMTA3LjUtMjAuMiwxNDguNy01Ny40ICAgIEM0NTYuMDU2LDM1Ny45MTEsNDgxLjY1NiwyNzQuODExLDQ2Mi40NTYsMTk1LjUxMXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==)}.copy{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}\n"], dependencies: [{ kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UpperButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-upper-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SizeDirective, NgStyle], template: "<header class=\"buttons-container\">\n\n  @if (!buttonsConfig || buttonsConfig?.visible) {\n    @for (btn of buttons; track trackById) {\n      <a class=\"upper-button\"\n         ksSize [sizeConfig]=\"{width: btn.size?.width!, height: btn.size?.height!}\"\n         [ngStyle]=\"{'font-size': btn.fontSize}\"\n         [attr.aria-label]=\"btn.ariaLabel\"\n         [tabIndex]=\"0\" role=\"button\"\n         (click)=\"onEvent(btn, $event)\" (keyup)=\"onEvent(btn, $event)\">\n        <div class=\"inside {{btn.className}}\" aria-hidden=\"true\" title=\"{{btn.title}}\"></div>\n      </a>\n    }\n  }\n</header>\n", styles: [".buttons-container{display:flex;flex-direction:row;justify-content:flex-end}.buttons-container>.upper-button{align-self:center;margin-right:30px;margin-top:28px;font-size:50px;text-decoration:none;cursor:pointer;animation:animatezoom .6s;color:#fff}@keyframes animatezoom{0%{transform:scale(0)}to{transform:scale(1)}}.base-btn,.copy,.refresh-image,.close-image,.download-image,.ext-url-image,.delete-image,.fullscreen-image,.rotate-image{width:30px;height:30px;background-size:30px;opacity:.8;transition:all .5s}.base-btn:hover,.copy:hover,.refresh-image:hover,.close-image:hover,.download-image:hover,.ext-url-image:hover,.delete-image:hover,.fullscreen-image:hover,.rotate-image:hover{transform:scale(1.2)}.rotate-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMzLDJjNy43NDYsMCwxNS4wMjgsMy4wMTcsMjAuNTA1LDguNDk0YzEwLjEzOCwxMC4xMzcsMTEuMzEsMjYuMzk2LDIuNzQsMzcuODQ5TDUyLDUyLjU4OVY0NGgtMnYxMWwxLDFoMTF2LTJoLTguNTgyICAgIGw0LjI5Mi00LjI5M2wwLjA5Mi0wLjEwNmM5LjIxMS0xMi4yNDcsNy45NzItMjkuNjY3LTIuODgzLTQwLjUyMUM0OS4wNjQsMy4yMjUsNDEuMjgsMCwzMywwVjJ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTcuNzU1LDE1LjY1N0wxMiwxMS40MTFWMjBoMlY5bC0xLTFIMnYyaDguNTgyTDYuMjksMTQuMjkzbC0wLjA5MiwwLjEwNkMtMy4wMTMsMjYuNjQ2LTEuNzczLDQ0LjA2Niw5LjA4MSw1NC45MiAgICBDMTQuOTM2LDYwLjc3NSwyMi43Miw2NCwzMSw2NHYtMmMtNy43NDYsMC0xNS4wMjgtMy4wMTctMjAuNTA1LTguNDk0QzAuMzU3LDQzLjM2OS0wLjgxNCwyNy4xMSw3Ljc1NSwxNS42NTd6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.fullscreen-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMgNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzIDUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNNTIuOTIzLDAuNjE4Yy0wLjEwMS0wLjI0NC0wLjI5Ni0wLjQzOS0wLjU0MS0wLjU0MUM1Mi4yNiwwLjAyNyw1Mi4xMywwLDUyLDBINDBjLTAuNTUyLDAtMSwwLjQ0OC0xLDFzMC40NDgsMSwxLDFoOS41ODYgICBMMzMuMjkzLDE4LjI5M2MtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMzMy40ODgsMTkuOTAyLDMzLjc0NCwyMCwzNCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M0w1MSwzLjQxNFYxMyAgIGMwLDAuNTUyLDAuNDQ4LDEsMSwxczEtMC40NDgsMS0xVjFDNTMsMC44Nyw1Mi45NzMsMC43NCw1Mi45MjMsMC42MTh6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTE4LjI5MywzMy4yOTNMMiw0OS41ODZWNDBjMC0wLjU1Mi0wLjQ0OC0xLTEtMXMtMSwwLjQ0OC0xLDF2MTJjMCwwLjEzLDAuMDI3LDAuMjYsMC4wNzcsMC4zODIgICBjMC4xMDEsMC4yNDQsMC4yOTYsMC40MzksMC41NDEsMC41NDFDMC43NCw1Mi45NzMsMC44Nyw1MywxLDUzaDEyYzAuNTUyLDAsMS0wLjQ0OCwxLTFzLTAuNDQ4LTEtMS0xSDMuNDE0bDE2LjI5My0xNi4yOTMgICBjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNFMxOC42ODQsMzIuOTAyLDE4LjI5MywzMy4yOTN6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTEsMTRjMC41NTIsMCwxLTAuNDQ4LDEtMVYzLjQxNGwxNi4yOTIsMTYuMjkyYzAuMTk1LDAuMTk1LDAuNDUxLDAuMjkzLDAuNzA3LDAuMjkzczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzICAgYzAuMzkxLTAuMzkxLDAuMzkxLTEuMDIzLDAtMS40MTRMMy40MTQsMkgxM2MwLjU1MiwwLDEtMC40NDgsMS0xcy0wLjQ0OC0xLTEtMUgxQzAuODcsMCwwLjc0LDAuMDI3LDAuNjE4LDAuMDc3ICAgQzAuMzczLDAuMTc5LDAuMTc5LDAuMzczLDAuMDc3LDAuNjE4QzAuMDI3LDAuNzQsMCwwLjg3LDAsMXYxMkMwLDEzLjU1MiwwLjQ0OCwxNCwxLDE0eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik01MiwzOWMtMC41NTIsMC0xLDAuNDQ4LTEsMXY5LjU4NkwzNC43MDcsMzMuMjkyYy0wLjM5MS0wLjM5MS0xLjAyMy0wLjM5MS0xLjQxNCwwcy0wLjM5MSwxLjAyMywwLDEuNDE0TDQ5LjU4Niw1MUg0MCAgIGMtMC41NTIsMC0xLDAuNDQ4LTEsMXMwLjQ0OCwxLDEsMWgxMmMwLjEzLDAsMC4yNi0wLjAyNywwLjM4Mi0wLjA3N2MwLjI0NC0wLjEwMSwwLjQzOS0wLjI5NiwwLjU0MS0wLjU0MSAgIEM1Mi45NzMsNTIuMjYsNTMsNTIuMTMsNTMsNTJWNDBDNTMsMzkuNDQ4LDUyLjU1MiwzOSw1MiwzOXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.delete-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni40IDQ4Ni40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODYuNCA0ODYuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ0Niw3MEgzNDQuOFY1My41YzAtMjkuNS0yNC01My41LTUzLjUtNTMuNWgtOTYuMmMtMjkuNSwwLTUzLjUsMjQtNTMuNSw1My41VjcwSDQwLjRjLTcuNSwwLTEzLjUsNi0xMy41LDEzLjUgICAgUzMyLjksOTcsNDAuNCw5N2gyNC40djMxNy4yYzAsMzkuOCwzMi40LDcyLjIsNzIuMiw3Mi4yaDIxMi40YzM5LjgsMCw3Mi4yLTMyLjQsNzIuMi03Mi4yVjk3SDQ0NmM3LjUsMCwxMy41LTYsMTMuNS0xMy41ICAgIFM0NTMuNSw3MCw0NDYsNzB6IE0xNjguNiw1My41YzAtMTQuNiwxMS45LTI2LjUsMjYuNS0yNi41aDk2LjJjMTQuNiwwLDI2LjUsMTEuOSwyNi41LDI2LjVWNzBIMTY4LjZWNTMuNXogTTM5NC42LDQxNC4yICAgIGMwLDI0LjktMjAuMyw0NS4yLTQ1LjIsNDUuMkgxMzdjLTI0LjksMC00NS4yLTIwLjMtNDUuMi00NS4yVjk3aDMwMi45djMxNy4ySDM5NC42eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0yNDMuMiw0MTFjNy41LDAsMTMuNS02LDEzLjUtMTMuNVYxNTguOWMwLTcuNS02LTEzLjUtMTMuNS0xMy41cy0xMy41LDYtMTMuNSwxMy41djIzOC41ICAgIEMyMjkuNyw0MDQuOSwyMzUuNyw0MTEsMjQzLjIsNDExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNTUuMSwzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzE0MS42LDM5MC4xLDE0Ny43LDM5Ni4xLDE1NS4xLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0zMzEuMywzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzMxNy44LDM5MC4xLDMyMy44LDM5Ni4xLDMzMS4zLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.ext-url-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPjxnPjxwYXRoIGQ9Ik00ODAsMjg4djExMmMwLDQ0LjE4My0zNS44MTcsODAtODAsODBIMTEyYy00NC4xODMsMC04MC0zNS44MTctODAtODBWMTEyYzAtNDQuMTgzLDM1LjgxNy04MCw4MC04MGg5NlYwaC05NiAgICAgQzUwLjE0NCwwLDAsNTAuMTQ0LDAsMTEydjI4OGMwLDYxLjg1Niw1MC4xNDQsMTEyLDExMiwxMTJoMjg4YzYxLjg1NiwwLDExMi01MC4xNDQsMTEyLTExMlYyODhINDgweiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNzYsNDE2aDMyVjI4OGMwLTEyNS43NiwxMDcuNTItMTI4LDExMi0xMjhoMTA1LjQ0bC04NC42NCw4NC42NGwyMi41NiwyMi41NmwxMTItMTEyYzYuMjA0LTYuMjQxLDYuMjA0LTE2LjMxOSwwLTIyLjU2ICAgICBsLTExMi0xMTJsLTIyLjcyLDIyLjcybDg0LjgsODQuNjRIMzIwYy0xLjQ0LDAtMTQ0LDEuNzYtMTQ0LDE2MFY0MTZ6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.download-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3MS4yIDQ3MS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzEuMiA0NzEuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ1Ny43LDIzMC4xNWMtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXYxMjIuOGMwLDMzLjQtMjcuMiw2MC41LTYwLjUsNjAuNUg4Ny41Yy0zMy40LDAtNjAuNS0yNy4yLTYwLjUtNjAuNXYtMTI0LjggICAgYzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MTI0LjhjMCw0OC4zLDM5LjMsODcuNSw4Ny41LDg3LjVoMjk2LjJjNDguMywwLDg3LjUtMzkuMyw4Ny41LTg3LjV2LTEyMi44ICAgIEM0NzEuMiwyMzYuMjUsNDY1LjIsMjMwLjE1LDQ1Ny43LDIzMC4xNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMjI2LjEsMzQ2Ljc1YzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGw4NS44LTg1LjhjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC02Mi43LDYyLjggICAgVjMwLjc1YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjczLjlsLTYyLjgtNjIuOGMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xICAgIEwyMjYuMSwzNDYuNzV6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.close-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3NS4yIDQ3NS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzUuMiA0NzUuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQwNS42LDY5LjZDMzYwLjcsMjQuNywzMDEuMSwwLDIzNy42LDBzLTEyMy4xLDI0LjctMTY4LDY5LjZTMCwxNzQuMSwwLDIzNy42czI0LjcsMTIzLjEsNjkuNiwxNjhzMTA0LjUsNjkuNiwxNjgsNjkuNiAgICBzMTIzLjEtMjQuNywxNjgtNjkuNnM2OS42LTEwNC41LDY5LjYtMTY4UzQ1MC41LDExNC41LDQwNS42LDY5LjZ6IE0zODYuNSwzODYuNWMtMzkuOCwzOS44LTkyLjcsNjEuNy0xNDguOSw2MS43ICAgIHMtMTA5LjEtMjEuOS0xNDguOS02MS43Yy04Mi4xLTgyLjEtODIuMS0yMTUuNywwLTI5Ny44QzEyOC41LDQ4LjksMTgxLjQsMjcsMjM3LjYsMjdzMTA5LjEsMjEuOSwxNDguOSw2MS43ICAgIEM0NjguNiwxNzAuOCw0NjguNiwzMDQuNCwzODYuNSwzODYuNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMzQyLjMsMTMyLjljLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC04NS42LDg1LjZMMTUyLDEzMi45Yy01LjMtNS4zLTEzLjgtNS4zLTE5LjEsMGMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjEgICAgbDg1LjYsODUuNmwtODUuNiw4NS42Yy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsODUuNi04NS42bDg1LjYsODUuNmMyLjYsMi42LDYuMSw0LDkuNSw0ICAgIGMzLjUsMCw2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xbC04NS40LTg1LjZsODUuNi04NS42QzM0Ny42LDE0Ni43LDM0Ny42LDEzOC4yLDM0Mi4zLDEzMi45eiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.refresh-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43MTEgNDg5LjcxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg5LjcxMSA0ODkuNzExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48Zz48cGF0aCBkPSJNMTEyLjE1Niw5Ny4xMTFjNzIuMy02NS40LDE4MC41LTY2LjQsMjUzLjgtNi43bC01OC4xLDIuMmMtNy41LDAuMy0xMy4zLDYuNS0xMywxNGMwLjMsNy4zLDYuMywxMywxMy41LDEzICAgIGMwLjIsMCwwLjMsMCwwLjUsMGw4OS4yLTMuM2M3LjMtMC4zLDEzLTYuMiwxMy0xMy41di0xYzAtMC4yLDAtMC4zLDAtMC41di0wLjFsMCwwbC0zLjMtODguMmMtMC4zLTcuNS02LjYtMTMuMy0xNC0xMyAgICBjLTcuNSwwLjMtMTMuMyw2LjUtMTMsMTRsMi4xLDU1LjNjLTM2LjMtMjkuNy04MS00Ni45LTEyOC44LTQ5LjNjLTU5LjItMy0xMTYuMSwxNy4zLTE2MCw1Ny4xYy02MC40LDU0LjctODYsMTM3LjktNjYuOCwyMTcuMSAgICBjMS41LDYuMiw3LDEwLjMsMTMuMSwxMC4zYzEuMSwwLDIuMS0wLjEsMy4yLTAuNGM3LjItMS44LDExLjctOS4xLDkuOS0xNi4zQzM2LjY1NiwyMTguMjExLDU5LjA1NiwxNDUuMTExLDExMi4xNTYsOTcuMTExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik00NjIuNDU2LDE5NS41MTFjLTEuOC03LjItOS4xLTExLjctMTYuMy05LjljLTcuMiwxLjgtMTEuNyw5LjEtOS45LDE2LjNjMTYuOSw2OS42LTUuNiwxNDIuNy01OC43LDE5MC43ICAgIGMtMzcuMywzMy43LTg0LjEsNTAuMy0xMzAuNyw1MC4zYy00NC41LDAtODguOS0xNS4xLTEyNC43LTQ0LjlsNTguOC01LjNjNy40LTAuNywxMi45LTcuMiwxMi4yLTE0LjdzLTcuMi0xMi45LTE0LjctMTIuMmwtODguOSw4ICAgIGMtNy40LDAuNy0xMi45LDcuMi0xMi4yLDE0LjdsOCw4OC45YzAuNiw3LDYuNSwxMi4zLDEzLjQsMTIuM2MwLjQsMCwwLjgsMCwxLjItMC4xYzcuNC0wLjcsMTIuOS03LjIsMTIuMi0xNC43bC00LjgtNTQuMSAgICBjMzYuMywyOS40LDgwLjgsNDYuNSwxMjguMyw0OC45YzMuOCwwLjIsNy42LDAuMywxMS4zLDAuM2M1NS4xLDAsMTA3LjUtMjAuMiwxNDguNy01Ny40ICAgIEM0NTYuMDU2LDM1Ny45MTEsNDgxLjY1NiwyNzQuODExLDQ2Mi40NTYsMTk1LjUxMXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==)}.copy{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
-                type: Input
-            }], currentImage: [{
-                type: Input
-            }], refresh: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], navigate: [{
-                type: Output
-            }], download: [{
-                type: Output
-            }], closeButton: [{
-                type: Output
-            }], fullscreen: [{
-                type: Output
-            }], customEmit: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ks-upper-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SizeDirective, NgStyle], template: "<header class=\"buttons-container\">\n\n  @if (!buttonsConfig() || buttonsConfig()?.visible) {\n    @for (btn of buttons; track trackById) {\n      <a class=\"upper-button\"\n         ksSize [sizeConfig]=\"{width: btn.size?.width!, height: btn.size?.height!}\"\n         [ngStyle]=\"{'font-size': btn.fontSize}\"\n         [attr.aria-label]=\"btn.ariaLabel\"\n         [tabIndex]=\"0\" role=\"button\"\n         (click)=\"onEvent(btn, $event)\" (keyup)=\"onEvent(btn, $event)\">\n        <div class=\"inside {{btn.className}}\" aria-hidden=\"true\" title=\"{{btn.title}}\"></div>\n      </a>\n    }\n  }\n</header>\n", styles: [".buttons-container{display:flex;flex-direction:row;justify-content:flex-end}.buttons-container>.upper-button{align-self:center;margin-right:30px;margin-top:28px;font-size:50px;text-decoration:none;cursor:pointer;animation:animatezoom .6s;color:#fff}@keyframes animatezoom{0%{transform:scale(0)}to{transform:scale(1)}}.base-btn,.copy,.refresh-image,.close-image,.download-image,.ext-url-image,.delete-image,.fullscreen-image,.rotate-image{width:30px;height:30px;background-size:30px;opacity:.8;transition:all .5s}.base-btn:hover,.copy:hover,.refresh-image:hover,.close-image:hover,.download-image:hover,.ext-url-image:hover,.delete-image:hover,.fullscreen-image:hover,.rotate-image:hover{transform:scale(1.2)}.rotate-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMzLDJjNy43NDYsMCwxNS4wMjgsMy4wMTcsMjAuNTA1LDguNDk0YzEwLjEzOCwxMC4xMzcsMTEuMzEsMjYuMzk2LDIuNzQsMzcuODQ5TDUyLDUyLjU4OVY0NGgtMnYxMWwxLDFoMTF2LTJoLTguNTgyICAgIGw0LjI5Mi00LjI5M2wwLjA5Mi0wLjEwNmM5LjIxMS0xMi4yNDcsNy45NzItMjkuNjY3LTIuODgzLTQwLjUyMUM0OS4wNjQsMy4yMjUsNDEuMjgsMCwzMywwVjJ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTcuNzU1LDE1LjY1N0wxMiwxMS40MTFWMjBoMlY5bC0xLTFIMnYyaDguNTgyTDYuMjksMTQuMjkzbC0wLjA5MiwwLjEwNkMtMy4wMTMsMjYuNjQ2LTEuNzczLDQ0LjA2Niw5LjA4MSw1NC45MiAgICBDMTQuOTM2LDYwLjc3NSwyMi43Miw2NCwzMSw2NHYtMmMtNy43NDYsMC0xNS4wMjgtMy4wMTctMjAuNTA1LTguNDk0QzAuMzU3LDQzLjM2OS0wLjgxNCwyNy4xMSw3Ljc1NSwxNS42NTd6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.fullscreen-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMgNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzIDUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNNTIuOTIzLDAuNjE4Yy0wLjEwMS0wLjI0NC0wLjI5Ni0wLjQzOS0wLjU0MS0wLjU0MUM1Mi4yNiwwLjAyNyw1Mi4xMywwLDUyLDBINDBjLTAuNTUyLDAtMSwwLjQ0OC0xLDFzMC40NDgsMSwxLDFoOS41ODYgICBMMzMuMjkzLDE4LjI5M2MtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMzMy40ODgsMTkuOTAyLDMzLjc0NCwyMCwzNCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M0w1MSwzLjQxNFYxMyAgIGMwLDAuNTUyLDAuNDQ4LDEsMSwxczEtMC40NDgsMS0xVjFDNTMsMC44Nyw1Mi45NzMsMC43NCw1Mi45MjMsMC42MTh6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTE4LjI5MywzMy4yOTNMMiw0OS41ODZWNDBjMC0wLjU1Mi0wLjQ0OC0xLTEtMXMtMSwwLjQ0OC0xLDF2MTJjMCwwLjEzLDAuMDI3LDAuMjYsMC4wNzcsMC4zODIgICBjMC4xMDEsMC4yNDQsMC4yOTYsMC40MzksMC41NDEsMC41NDFDMC43NCw1Mi45NzMsMC44Nyw1MywxLDUzaDEyYzAuNTUyLDAsMS0wLjQ0OCwxLTFzLTAuNDQ4LTEtMS0xSDMuNDE0bDE2LjI5My0xNi4yOTMgICBjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNFMxOC42ODQsMzIuOTAyLDE4LjI5MywzMy4yOTN6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTEsMTRjMC41NTIsMCwxLTAuNDQ4LDEtMVYzLjQxNGwxNi4yOTIsMTYuMjkyYzAuMTk1LDAuMTk1LDAuNDUxLDAuMjkzLDAuNzA3LDAuMjkzczAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzICAgYzAuMzkxLTAuMzkxLDAuMzkxLTEuMDIzLDAtMS40MTRMMy40MTQsMkgxM2MwLjU1MiwwLDEtMC40NDgsMS0xcy0wLjQ0OC0xLTEtMUgxQzAuODcsMCwwLjc0LDAuMDI3LDAuNjE4LDAuMDc3ICAgQzAuMzczLDAuMTc5LDAuMTc5LDAuMzczLDAuMDc3LDAuNjE4QzAuMDI3LDAuNzQsMCwwLjg3LDAsMXYxMkMwLDEzLjU1MiwwLjQ0OCwxNCwxLDE0eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik01MiwzOWMtMC41NTIsMC0xLDAuNDQ4LTEsMXY5LjU4NkwzNC43MDcsMzMuMjkyYy0wLjM5MS0wLjM5MS0xLjAyMy0wLjM5MS0xLjQxNCwwcy0wLjM5MSwxLjAyMywwLDEuNDE0TDQ5LjU4Niw1MUg0MCAgIGMtMC41NTIsMC0xLDAuNDQ4LTEsMXMwLjQ0OCwxLDEsMWgxMmMwLjEzLDAsMC4yNi0wLjAyNywwLjM4Mi0wLjA3N2MwLjI0NC0wLjEwMSwwLjQzOS0wLjI5NiwwLjU0MS0wLjU0MSAgIEM1Mi45NzMsNTIuMjYsNTMsNTIuMTMsNTMsNTJWNDBDNTMsMzkuNDQ4LDUyLjU1MiwzOSw1MiwzOXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.delete-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni40IDQ4Ni40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODYuNCA0ODYuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ0Niw3MEgzNDQuOFY1My41YzAtMjkuNS0yNC01My41LTUzLjUtNTMuNWgtOTYuMmMtMjkuNSwwLTUzLjUsMjQtNTMuNSw1My41VjcwSDQwLjRjLTcuNSwwLTEzLjUsNi0xMy41LDEzLjUgICAgUzMyLjksOTcsNDAuNCw5N2gyNC40djMxNy4yYzAsMzkuOCwzMi40LDcyLjIsNzIuMiw3Mi4yaDIxMi40YzM5LjgsMCw3Mi4yLTMyLjQsNzIuMi03Mi4yVjk3SDQ0NmM3LjUsMCwxMy41LTYsMTMuNS0xMy41ICAgIFM0NTMuNSw3MCw0NDYsNzB6IE0xNjguNiw1My41YzAtMTQuNiwxMS45LTI2LjUsMjYuNS0yNi41aDk2LjJjMTQuNiwwLDI2LjUsMTEuOSwyNi41LDI2LjVWNzBIMTY4LjZWNTMuNXogTTM5NC42LDQxNC4yICAgIGMwLDI0LjktMjAuMyw0NS4yLTQ1LjIsNDUuMkgxMzdjLTI0LjksMC00NS4yLTIwLjMtNDUuMi00NS4yVjk3aDMwMi45djMxNy4ySDM5NC42eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0yNDMuMiw0MTFjNy41LDAsMTMuNS02LDEzLjUtMTMuNVYxNTguOWMwLTcuNS02LTEzLjUtMTMuNS0xMy41cy0xMy41LDYtMTMuNSwxMy41djIzOC41ICAgIEMyMjkuNyw0MDQuOSwyMzUuNyw0MTEsMjQzLjIsNDExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNTUuMSwzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzE0MS42LDM5MC4xLDE0Ny43LDM5Ni4xLDE1NS4xLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0zMzEuMywzOTYuMWM3LjUsMCwxMy41LTYsMTMuNS0xMy41VjE3My43YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjA4LjkgICAgQzMxNy44LDM5MC4xLDMyMy44LDM5Ni4xLDMzMS4zLDM5Ni4xeiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.ext-url-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPjxnPjxwYXRoIGQ9Ik00ODAsMjg4djExMmMwLDQ0LjE4My0zNS44MTcsODAtODAsODBIMTEyYy00NC4xODMsMC04MC0zNS44MTctODAtODBWMTEyYzAtNDQuMTgzLDM1LjgxNy04MCw4MC04MGg5NlYwaC05NiAgICAgQzUwLjE0NCwwLDAsNTAuMTQ0LDAsMTEydjI4OGMwLDYxLjg1Niw1MC4xNDQsMTEyLDExMiwxMTJoMjg4YzYxLjg1NiwwLDExMi01MC4xNDQsMTEyLTExMlYyODhINDgweiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik0xNzYsNDE2aDMyVjI4OGMwLTEyNS43NiwxMDcuNTItMTI4LDExMi0xMjhoMTA1LjQ0bC04NC42NCw4NC42NGwyMi41NiwyMi41NmwxMTItMTEyYzYuMjA0LTYuMjQxLDYuMjA0LTE2LjMxOSwwLTIyLjU2ICAgICBsLTExMi0xMTJsLTIyLjcyLDIyLjcybDg0LjgsODQuNjRIMzIwYy0xLjQ0LDAtMTQ0LDEuNzYtMTQ0LDE2MFY0MTZ6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.download-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3MS4yIDQ3MS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzEuMiA0NzEuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQ1Ny43LDIzMC4xNWMtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXYxMjIuOGMwLDMzLjQtMjcuMiw2MC41LTYwLjUsNjAuNUg4Ny41Yy0zMy40LDAtNjAuNS0yNy4yLTYwLjUtNjAuNXYtMTI0LjggICAgYzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MTI0LjhjMCw0OC4zLDM5LjMsODcuNSw4Ny41LDg3LjVoMjk2LjJjNDguMywwLDg3LjUtMzkuMyw4Ny41LTg3LjV2LTEyMi44ICAgIEM0NzEuMiwyMzYuMjUsNDY1LjIsMjMwLjE1LDQ1Ny43LDIzMC4xNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMjI2LjEsMzQ2Ljc1YzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGw4NS44LTg1LjhjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC02Mi43LDYyLjggICAgVjMwLjc1YzAtNy41LTYtMTMuNS0xMy41LTEzLjVzLTEzLjUsNi0xMy41LDEzLjV2MjczLjlsLTYyLjgtNjIuOGMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xICAgIEwyMjYuMSwzNDYuNzV6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}.close-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3NS4yIDQ3NS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzUuMiA0NzUuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTQwNS42LDY5LjZDMzYwLjcsMjQuNywzMDEuMSwwLDIzNy42LDBzLTEyMy4xLDI0LjctMTY4LDY5LjZTMCwxNzQuMSwwLDIzNy42czI0LjcsMTIzLjEsNjkuNiwxNjhzMTA0LjUsNjkuNiwxNjgsNjkuNiAgICBzMTIzLjEtMjQuNywxNjgtNjkuNnM2OS42LTEwNC41LDY5LjYtMTY4UzQ1MC41LDExNC41LDQwNS42LDY5LjZ6IE0zODYuNSwzODYuNWMtMzkuOCwzOS44LTkyLjcsNjEuNy0xNDguOSw2MS43ICAgIHMtMTA5LjEtMjEuOS0xNDguOS02MS43Yy04Mi4xLTgyLjEtODIuMS0yMTUuNywwLTI5Ny44QzEyOC41LDQ4LjksMTgxLjQsMjcsMjM3LjYsMjdzMTA5LjEsMjEuOSwxNDguOSw2MS43ICAgIEM0NjguNiwxNzAuOCw0NjguNiwzMDQuNCwzODYuNSwzODYuNXoiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMzQyLjMsMTMyLjljLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwbC04NS42LDg1LjZMMTUyLDEzMi45Yy01LjMtNS4zLTEzLjgtNS4zLTE5LjEsMGMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjEgICAgbDg1LjYsODUuNmwtODUuNiw4NS42Yy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsODUuNi04NS42bDg1LjYsODUuNmMyLjYsMi42LDYuMSw0LDkuNSw0ICAgIGMzLjUsMCw2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xbC04NS40LTg1LjZsODUuNi04NS42QzM0Ny42LDE0Ni43LDM0Ny42LDEzOC4yLDM0Mi4zLDEzMi45eiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+)}.refresh-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43MTEgNDg5LjcxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg5LjcxMSA0ODkuNzExOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48Zz48cGF0aCBkPSJNMTEyLjE1Niw5Ny4xMTFjNzIuMy02NS40LDE4MC41LTY2LjQsMjUzLjgtNi43bC01OC4xLDIuMmMtNy41LDAuMy0xMy4zLDYuNS0xMywxNGMwLjMsNy4zLDYuMywxMywxMy41LDEzICAgIGMwLjIsMCwwLjMsMCwwLjUsMGw4OS4yLTMuM2M3LjMtMC4zLDEzLTYuMiwxMy0xMy41di0xYzAtMC4yLDAtMC4zLDAtMC41di0wLjFsMCwwbC0zLjMtODguMmMtMC4zLTcuNS02LjYtMTMuMy0xNC0xMyAgICBjLTcuNSwwLjMtMTMuMyw2LjUtMTMsMTRsMi4xLDU1LjNjLTM2LjMtMjkuNy04MS00Ni45LTEyOC44LTQ5LjNjLTU5LjItMy0xMTYuMSwxNy4zLTE2MCw1Ny4xYy02MC40LDU0LjctODYsMTM3LjktNjYuOCwyMTcuMSAgICBjMS41LDYuMiw3LDEwLjMsMTMuMSwxMC4zYzEuMSwwLDIuMS0wLjEsMy4yLTAuNGM3LjItMS44LDExLjctOS4xLDkuOS0xNi4zQzM2LjY1NiwyMTguMjExLDU5LjA1NiwxNDUuMTExLDExMi4xNTYsOTcuMTExeiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik00NjIuNDU2LDE5NS41MTFjLTEuOC03LjItOS4xLTExLjctMTYuMy05LjljLTcuMiwxLjgtMTEuNyw5LjEtOS45LDE2LjNjMTYuOSw2OS42LTUuNiwxNDIuNy01OC43LDE5MC43ICAgIGMtMzcuMywzMy43LTg0LjEsNTAuMy0xMzAuNyw1MC4zYy00NC41LDAtODguOS0xNS4xLTEyNC43LTQ0LjlsNTguOC01LjNjNy40LTAuNywxMi45LTcuMiwxMi4yLTE0LjdzLTcuMi0xMi45LTE0LjctMTIuMmwtODguOSw4ICAgIGMtNy40LDAuNy0xMi45LDcuMi0xMi4yLDE0LjdsOCw4OC45YzAuNiw3LDYuNSwxMi4zLDEzLjQsMTIuM2MwLjQsMCwwLjgsMCwxLjItMC4xYzcuNC0wLjcsMTIuOS03LjIsMTIuMi0xNC43bC00LjgtNTQuMSAgICBjMzYuMywyOS40LDgwLjgsNDYuNSwxMjguMyw0OC45YzMuOCwwLjIsNy42LDAuMywxMS4zLDAuM2M1NS4xLDAsMTA3LjUtMjAuMiwxNDguNy01Ny40ICAgIEM0NTYuMDU2LDM1Ny45MTEsNDgxLjY1NiwyNzQuODExLDQ2Mi40NTYsMTk1LjUxMXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==)}.copy{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=)}\n"] }]
+        }] });
 
 /*
  The MIT License (MIT)
@@ -3130,13 +2921,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Component with image previews
  */
 class PreviewsComponent extends AccessibleComponent {
-    constructor(configService) {
-        super();
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique id (>=0) of the current instance of this library. This is required when you are using
+         * the service to call modal-gallery.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Object of type `Image` that represent the visible image.
+         */
+        this.currentImage = input.required(...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+        /**
+         * Array of `Image` that represent the model of this library with all images,
+         * thumbs and so on.
+         */
+        this.images = input.required(...(ngDevMode ? [{ debugName: "images" }] : []));
+        /**
+         * Optional template reference for the rendering of previews.
+         * Template may access the following context variables:
+         * - preview: the `Image` object
+         * - defaultTemplate: the template used by default to render the preview (in case the need is to wrap it)
+         */
+        this.customTemplate = input(...(ngDevMode ? [undefined, { debugName: "customTemplate" }] : []));
         /**
          * Output to emit the clicked preview. The payload contains the `ImageEvent` associated to the clicked preview.
          */
-        this.clickPreview = new EventEmitter();
+        this.clickPreview = output();
         /**
          * Enum of type `Action` that represents a mouse click on a button.
          * Declared here to be used inside the template.
@@ -3148,11 +2959,12 @@ class PreviewsComponent extends AccessibleComponent {
          */
         this.keyboardAction = Action.KEYBOARD;
         /**
-         * Array of `InternalLibImage` exposed to the template. This field is initialized
+         * Array of `Image` exposed to the template. This field is initialized
          * applying transformations, default values and so on to the input of the same type.
          */
         this.previews = [];
         this.defaultPreviewSize = DEFAULT_PREVIEW_SIZE;
+        this.configService = inject(ConfigService);
     }
     /**
      * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
@@ -3161,25 +2973,25 @@ class PreviewsComponent extends AccessibleComponent {
      * In particular, it's called only one time!!!
      */
     ngOnInit() {
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(this.id());
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
         this.accessibilityConfig = libConfig.accessibilityConfig;
         this.slideConfig = libConfig.slideConfig;
         this.previewConfig = libConfig.previewConfig;
-        this.initPreviews(this.currentImage, this.images);
+        this.initPreviews(this.currentImage(), this.images());
     }
     /**
      * Method to check if an image is active (i.e. a preview image).
-     * @param preview InternalLibImage is an image to check if it's active or not
+     * @param preview Image is an image to check if it's active or not
      * @returns boolean true if is active, false otherwise
      */
     isActive(preview) {
         if (!preview) {
             return false;
         }
-        return preview.id === this.currentImage.id;
+        return preview.id === this.currentImage().id;
     }
     /**
      * Method ´ngOnChanges´ to update `previews` array.
@@ -3188,8 +3000,8 @@ class PreviewsComponent extends AccessibleComponent {
      * In particular, it's called when any data-bound property of a directive changes!!!
      */
     ngOnChanges(changes) {
-        let currentImage = changes['currentImage']?.currentValue ?? this.currentImage;
-        let images = changes['images']?.currentValue ?? this.images;
+        let currentImage = changes['currentImage']?.currentValue ?? this.currentImage();
+        let images = changes['images']?.currentValue ?? this.images();
         if (this.previewConfig && currentImage && images) {
             this.initPreviews(currentImage, images);
         }
@@ -3197,7 +3009,7 @@ class PreviewsComponent extends AccessibleComponent {
     /**
      * Method called by events from both keyboard and mouse on a preview.
      * This will trigger the `clickpreview` output with the input preview as its payload.
-     * @param preview InternalLibImage that triggered this method
+     * @param preview Image that triggered this method
      * @param event KeyboardEvent | MouseEvent payload
      * @param action Action that triggered the source event or `Action.NORMAL` if not specified
      */
@@ -3210,7 +3022,7 @@ class PreviewsComponent extends AccessibleComponent {
         }
         const result = super.handleImageEvent(event);
         if (result === NEXT || result === PREV) {
-            this.clickPreview.emit(new ImageModalEvent(this.id, action, getIndex(preview, this.images)));
+            this.clickPreview.emit(new ImageModalEvent(this.id(), action, getIndex(preview, this.images())));
         }
     }
     /**
@@ -3235,7 +3047,8 @@ class PreviewsComponent extends AccessibleComponent {
      */
     isDisplayLeftPreviewsArrow() {
         // Don't show arrows if the preview number is greater or equals than total number of images
-        if (this.previewConfig?.number !== undefined && this.images && this.previewConfig?.number >= this.images?.length) {
+        const images = this.images();
+        if (this.previewConfig?.number !== undefined && images && this.previewConfig?.number >= images?.length) {
             return false;
         }
         return (this.previewConfig?.arrows && this.start > 0) || !!this.slideConfig?.infinite;
@@ -3246,16 +3059,17 @@ class PreviewsComponent extends AccessibleComponent {
      */
     isDisplayRightPreviewsArrow() {
         // Don't show arrows if the preview number is greater or equals than total number of images
-        if (this.previewConfig?.number !== undefined && this.images && this.previewConfig?.number >= this.images?.length) {
+        const images = this.images();
+        if (this.previewConfig?.number !== undefined && images && this.previewConfig?.number >= images?.length) {
             return false;
         }
-        return (this.previewConfig?.arrows && this.images && this.end < this.images.length) || !!this.slideConfig?.infinite;
+        return (this.previewConfig?.arrows && images && this.end < images.length) || !!this.slideConfig?.infinite;
     }
     /**
      * Private method to init previews based on the currentImage and the full array of images.
      * The current image in mandatory to show always the current preview (as highlighted).
-     * @param currentImage InternalLibImage to decide how to show previews, because I always want to see the current image as highlighted
-     * @param images InternalLibImage[] is the array of all images.
+     * @param currentImage Image to decide how to show previews, because I always want to see the current image as highlighted
+     * @param images Image[] is the array of all images.
      */
     initPreviews(currentImage, images) {
         this.setIndexesPreviews(currentImage, images);
@@ -3292,7 +3106,7 @@ class PreviewsComponent extends AccessibleComponent {
         if (!this.previewConfig) {
             throw new Error('Internal library error - previewConfig must be defined');
         }
-        if (this.end >= this.images.length) {
+        if (this.end >= this.images().length) {
             // check if nextImage should be blocked
             const preventSliding = !!this.slideConfig && this.slideConfig.infinite === false;
             if (preventSliding) {
@@ -3303,8 +3117,8 @@ class PreviewsComponent extends AccessibleComponent {
         else {
             this.start++;
         }
-        this.end = this.start + Math.min(this.previewConfig.number, this.images.length);
-        this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+        this.end = this.start + Math.min(this.previewConfig.number, this.images().length);
+        this.previews = this.images().filter((img, i) => i >= this.start && i < this.end);
     }
     /**
      * Private method to update the visible previews navigating to the left (previous).
@@ -3319,31 +3133,21 @@ class PreviewsComponent extends AccessibleComponent {
             if (preventSliding) {
                 return;
             }
-            this.end = this.images.length;
+            this.end = this.images().length;
         }
         else {
             this.end--;
         }
-        this.start = this.end - Math.min(this.previewConfig.number, this.images.length);
-        this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
+        this.start = this.end - Math.min(this.previewConfig.number, this.images().length);
+        this.previews = this.images().filter((img, i) => i >= this.start && i < this.end);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PreviewsComponent, isStandalone: true, 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  @if (previewConfig?.visible) {\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n       [tabIndex]=\"isDisplayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{ isDisplayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n    </a>\n\n    @for (preview of previews; track preview.id) {\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          @if (preview?.modal?.img) {\n            <img class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n                 [loading]=\"preview.loading\"\n                 [attr.fetchpriority]=\"preview.fetchpriority\"\n                 [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n                 ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n                 ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n                                      height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n                 [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n                 [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n                 alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n                 [tabIndex]=\"0\" role=\"img\"\n            />\n          }\n        </ng-template>\n      </div>\n    }\n\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n       [tabIndex]=\"isDisplayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{ isDisplayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n    </a>\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:#000;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PreviewsComponent, isStandalone: true, selector: "ks-previews", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, currentImage: { classPropertyName: "currentImage", publicName: "currentImage", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, 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  @if (previewConfig?.visible) {\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n       [tabIndex]=\"isDisplayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{ isDisplayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n    </a>\n\n    @for (preview of previews; track preview.id) {\n      <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n           (click)=\"onImageEvent(preview, $event, clickAction)\"\n           (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n      >\n        <ng-container *ngTemplateOutlet=\"!customTemplate() ? defaultTemplate : customTemplate() ; context:{preview, defaultTemplate}\" />\n        <ng-template #defaultTemplate>\n          @if (preview?.modal?.img) {\n            <img class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n                 loading=\"{{preview.loading}}\"\n                 [attr.fetchpriority]=\"preview.fetchpriority\"\n                 [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n                 ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n                 ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n                                      height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n                 [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n                 [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n                 alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n                 [tabIndex]=\"0\" role=\"img\"\n            />\n          }\n        </ng-template>\n      </div>\n    }\n\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n       [tabIndex]=\"isDisplayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{ isDisplayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n    </a>\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:#000;opacity:0}.left-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.left-arrow-preview-image:hover{transform:scale(1.2)}.right-arrow-preview-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);background-size:15px;transition:all .5s}.right-arrow-preview-image:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FallbackImageDirective, SizeDirective], template: "<nav class=\"previews-container\"\n     [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n     [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n     [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n  @if (previewConfig?.visible) {\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n       [tabIndex]=\"isDisplayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{ isDisplayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n    </a>\n\n    @for (preview of previews; track preview.id) {\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          @if (preview?.modal?.img) {\n            <img class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n                 [loading]=\"preview.loading\"\n                 [attr.fetchpriority]=\"preview.fetchpriority\"\n                 [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n                 ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n                 ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n                                      height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n                 [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n                 [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n                 alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n                 [tabIndex]=\"0\" role=\"img\"\n            />\n          }\n        </ng-template>\n      </div>\n    }\n\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n       [tabIndex]=\"isDisplayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{ isDisplayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n    </a>\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:#000;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"] }]
-        }], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
-                type: Input
-            }], currentImage: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], customTemplate: [{
-                type: Input
-            }], clickPreview: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FallbackImageDirective, SizeDirective], template: "<nav class=\"previews-container\"\n     [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n     [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n     [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n  @if (previewConfig?.visible) {\n    <a class=\"nav-left\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n       [tabIndex]=\"isDisplayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{ isDisplayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n    </a>\n\n    @for (preview of previews; track preview.id) {\n      <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n           (click)=\"onImageEvent(preview, $event, clickAction)\"\n           (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n      >\n        <ng-container *ngTemplateOutlet=\"!customTemplate() ? defaultTemplate : customTemplate() ; context:{preview, defaultTemplate}\" />\n        <ng-template #defaultTemplate>\n          @if (preview?.modal?.img) {\n            <img class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n                 loading=\"{{preview.loading}}\"\n                 [attr.fetchpriority]=\"preview.fetchpriority\"\n                 [src]=\"preview.plain?.img ? preview.plain?.img! : preview.modal.img\"\n                 ksFallbackImage [fallbackImg]=\"preview.plain?.fallbackImg ? preview.plain?.fallbackImg : preview.modal.fallbackImg\"\n                 ksSize [sizeConfig]=\"{width: previewConfig?.size ? previewConfig?.size?.width! : defaultPreviewSize.width,\n                                      height: previewConfig?.size ? previewConfig?.size?.height! : defaultPreviewSize.height}\"\n                 [attr.aria-label]=\"preview.modal.ariaLabel ? preview.modal.ariaLabel : ''\"\n                 [title]=\"(preview.modal.title || preview.modal.title === '') ? preview.modal.title : ''\"\n                 alt=\"{{preview.modal.alt ? preview.modal.alt : ''}}\"\n                 [tabIndex]=\"0\" role=\"img\"\n            />\n          }\n        </ng-template>\n      </div>\n    }\n\n\n    <a class=\"nav-right\"\n       [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n       [tabIndex]=\"isDisplayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{ isDisplayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n    </a>\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:#000;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"] }]
+        }] });
 
 /*
  The MIT License (MIT)
@@ -3369,48 +3173,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  SOFTWARE.
  */
 /**
- * Enum `Keyboard` with keys and their relative codes.
- */
-const Keyboard = {
-    ESC: ESC_CODE,
-    LEFT_ARROW: LEFT_ARROW_CODE,
-    RIGHT_ARROW: RIGHT_ARROW_CODE,
-    UP_ARROW: UP_ARROW_CODE,
-    DOWN_ARROW: DOWN_ARROW_CODE
-};
-
-/*
- The MIT License (MIT)
-
- Copyright (c) 2017-2025 Stefano Cappa (Ks89)
-
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated documentation files (the "Software"), to deal
- in the Software without restriction, including without limitation the rights
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- copies of the Software, and to permit persons to whom the Software is
- furnished to do so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in all
- copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- SOFTWARE.
- */
-/**
- * Directive to manage keyboard navigation.
+ * Directive to manage keyboard navigation.
  */
 class KeyboardNavigationDirective {
     constructor() {
+        /**
+         * Boolean input to skip keyboard navigation.
+         */
+        this.isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         /**
          * Output to emit keyboard `code` of the pressed key (keydown).
          */
-        this.keyboardNavigation = new EventEmitter();
+        this.keyboardNavigation = output();
     }
     /**
      * Listener to catch keyboard's events and call the right method based on the key.
@@ -3419,22 +3193,18 @@ class KeyboardNavigationDirective {
      * @param e KeyboardEvent caught by the listener.
      */
     onKeyDown(e) {
-        if (!this.isOpen) {
+        if (!this.isOpen()) {
             return;
         }
         this.keyboardNavigation.emit(e.code);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: KeyboardNavigationDirective, isStandalone: true, selector: "[ksKeyboardNavigation]", inputs: { isOpen: "isOpen" }, outputs: { keyboardNavigation: "keyboardNavigation" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: KeyboardNavigationDirective, isStandalone: true, selector: "[ksKeyboardNavigation]", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { keyboardNavigation: "keyboardNavigation" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksKeyboardNavigation]' }]
-        }], propDecorators: { isOpen: [{
-                type: Input
-            }], keyboardNavigation: [{
-                type: Output
-            }], onKeyDown: [{
+        }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
             }] } });
@@ -3472,19 +3242,19 @@ class SwipeDirective {
         /**
          * Output to emit swipe left event. Payload is empty.
          */
-        this.swipeLeft = new EventEmitter();
+        this.swipeLeft = output();
         /**
          * Output to emit swipe right event. Payload is empty.
          */
-        this.swipeRight = new EventEmitter();
+        this.swipeRight = output();
         /**
          * Output to emit swipe up event. Payload is empty.
          */
-        this.swipeUp = new EventEmitter();
+        this.swipeUp = output();
         /**
          * Output to emit swipe down event. Payload is empty.
          */
-        this.swipeDown = new EventEmitter();
+        this.swipeDown = output();
     }
     /**
      * Method called by Angular itself every click thanks to `@HostListener`.
@@ -3532,15 +3302,7 @@ class SwipeDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SwipeDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksSwipe]' }]
-        }], propDecorators: { swipeLeft: [{
-                type: Output
-            }], swipeRight: [{
-                type: Output
-            }], swipeUp: [{
-                type: Output
-            }], swipeDown: [{
-                type: Output
-            }], handleTouch: [{
+        }], propDecorators: { handleTouch: [{
                 type: HostListener,
                 args: ['touchstart', ['$event']]
             }, {
@@ -3579,6 +3341,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  */
 class LoadingSpinnerComponent {
     constructor() {
+        /**
+         * Object of type `LoadingConfig` exposed to the template.
+         * It contains a field to choose a loading spinner.
+         */
+        this.loadingConfig = input(...(ngDevMode ? [undefined, { debugName: "loadingConfig" }] : []));
+        /**
+         * Object of type `AccessibilityConfig` to init custom accessibility features.
+         * For instance, it contains titles, alt texts, aria-labels and so on.
+         */
+        this.accessibilityConfig = input(...(ngDevMode ? [undefined, { debugName: "accessibilityConfig" }] : []));
         /**
          * Enum of type `LoadingType` to choose the standard loading spinner.
          * Declared here to be used inside the template.
@@ -3616,16 +3388,12 @@ class LoadingSpinnerComponent {
         this.loadingExplosingSquares = LoadingType.EXPLOSING_SQUARES;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LoadingSpinnerComponent, isStandalone: true, selector: "ks-loading-spinner", inputs: { loadingConfig: "loadingConfig", accessibilityConfig: "accessibilityConfig" }, ngImport: i0, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n     [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n  @switch (loadingConfig?.type) {\n    @case (loadingStandard) {\n      <div class=\"cssload-loader\">\n        <div class=\"cssload-inner cssload-one\"></div>\n        <div class=\"cssload-inner cssload-two\"></div>\n        <div class=\"cssload-inner cssload-three\"></div>\n      </div>\n    }\n    @case (loadingBars) {\n      <div class=\"loader-bars\">\n      </div>\n    }\n    @case (loadingCircular) {\n      <div class=\"loader-circular\">\n      </div>\n    }\n    @case (loadingDots) {\n      <div class=\"loader-dots\">\n      </div>\n    }\n    @case (loadingCubeFlipping) {\n      <div class=\"cube-wrapper\">\n        <div class=\"cube-folding\">\n          <span class=\"leaf1\"></span>\n          <span class=\"leaf2\"></span>\n          <span class=\"leaf3\"></span>\n          <span class=\"leaf4\"></span>\n        </div>\n      </div>\n    }\n    @case (loadingCircles) {\n      <div id=\"preloader\">\n        <div id=\"loader\"></div>\n      </div>\n    }\n    @case (loadingExplosingSquares) {\n      <div class=\"loader\">\n        <span></span>\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  }\n</div>\n", styles: [".cssload-loader{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;perspective:800px}.cssload-inner{position:absolute;width:100%;height:100%;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.cssload-inner.cssload-one{left:0%;top:0%;animation:cssload-rotate-one .6s linear infinite;-o-animation:cssload-rotate-one .6s linear infinite;-ms-animation:cssload-rotate-one .6s linear infinite;-webkit-animation:cssload-rotate-one .6s linear infinite;-moz-animation:cssload-rotate-one .6s linear infinite;border-bottom:3px solid rgba(255,255,255,.99)}.cssload-inner.cssload-two{right:0%;top:0%;animation:cssload-rotate-two .6s linear infinite;-o-animation:cssload-rotate-two .6s linear infinite;-ms-animation:cssload-rotate-two .6s linear infinite;-webkit-animation:cssload-rotate-two .6s linear infinite;-moz-animation:cssload-rotate-two .6s linear infinite;border-right:3px solid rgb(255,255,255)}.cssload-inner.cssload-three{right:0%;bottom:0%;animation:cssload-rotate-three .6s linear infinite;-o-animation:cssload-rotate-three .6s linear infinite;-ms-animation:cssload-rotate-three .6s linear infinite;-webkit-animation:cssload-rotate-three .6s linear infinite;-moz-animation:cssload-rotate-three .6s linear infinite;border-top:3px solid rgb(255,255,255)}@keyframes cssload-rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(35deg) rotateY(-45deg) rotate(360deg)}}@-o-keyframes cssload-rotate-one{0%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-one{0%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-one{0%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@-o-keyframes cssload-rotate-two{0%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-two{0%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-two{0%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(360deg)}}@-o-keyframes cssload-rotate-three{0%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-three{0%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-three{0%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}\n", ".loader-dots{position:absolute;inset:0;color:#fefcff;font-size:10px;margin:auto;width:1em;height:1em;border-radius:50%;text-indent:-9999em;-webkit-animation:load4 1.3s infinite linear;animation:load4 1.3s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}\n", ".loader-bars,.loader-bars:before,.loader-bars:after{background:#fefcff;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader-bars{position:absolute;inset:0;color:#fefcff;text-indent:-9999em;margin:auto;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader-bars:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}\n", ".loader-circular,.loader-circular:after{border-radius:50%;width:10em;height:10em}.loader-circular{position:absolute;inset:0;margin:auto;font-size:10px;text-indent:-9999em;border-top:1.1em solid rgba(255,255,255,.2);border-right:1.1em solid rgba(255,255,255,.2);border-bottom:1.1em solid rgba(255,255,255,.2);border-left:1.1em solid #ffffff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);display:inline-block}.cube-folding span:before{content:\"\";background-color:#fff;position:absolute;left:0;top:0;display:block;width:25px;height:25px;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-animation:folding 2.5s infinite linear both;-webkit-animation:folding 2.5s infinite linear both;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{-moz-transform:rotateZ(90deg) scale(1.1);-ms-transform:rotateZ(90deg) scale(1.1);-webkit-transform:rotateZ(90deg) scale(1.1);transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{-moz-animation-delay:.3s;-webkit-animation-delay:.3s;animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{-moz-transform:rotateZ(270deg) scale(1.1);-ms-transform:rotateZ(270deg) scale(1.1);-webkit-transform:rotateZ(270deg) scale(1.1);transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{-moz-animation-delay:.9s;-webkit-animation-delay:.9s;animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{-moz-transform:rotateZ(180deg) scale(1.1);-ms-transform:rotateZ(180deg) scale(1.1);-webkit-transform:rotateZ(180deg) scale(1.1);transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s;background-color:#e6e6e6}@-moz-keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@-webkit-keyframes folding{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);-ms-transform:perspective(140px) rotateX(-180deg);-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);-ms-transform:perspective(140px) rotateX(0deg);-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);-ms-transform:perspective(140px) rotateY(180deg);-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.cube-wrapper{position:fixed;left:50%;top:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;text-align:center}@-moz-keyframes text{to{top:35px}}@-webkit-keyframes text{to{top:35px}}@keyframes text{to{top:35px}}@-moz-keyframes shadow{to{bottom:-18px;width:100px}}@-webkit-keyframes shadow{to{bottom:-18px;width:100px}}@keyframes shadow{to{bottom:-18px;width:100px}}\n", "#preloader{position:fixed;top:0;left:0;width:100%;height:100%}#loader{display:block;position:relative;left:50%;top:50%;width:100px;height:100px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#b4b4b4;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}\n", "@keyframes loader{0%,10%,to{width:60px;height:60px}65%{width:150px;height:150px}}@keyframes loaderBlock{0%,30%{transform:rotate(0)}55%{background-color:#b4b4b4}to{transform:rotate(90deg)}}@keyframes loaderBlockInverse{0%,20%{transform:rotate(0)}55%{background-color:#d9d9d9}to{transform:rotate(-90deg)}}.loader{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%) rotate(45deg) translateZ(0);animation:loader 1.2s infinite ease-in-out}.loader span{position:absolute;display:block;width:40px;height:40px;background-color:#fff;animation:loaderBlock 1.2s infinite ease-in-out both}.loader span:nth-child(1){top:0;left:0}.loader span:nth-child(2){top:0;right:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(3){bottom:0;left:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(4){bottom:0;right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LoadingSpinnerComponent, isStandalone: true, selector: "ks-loading-spinner", inputs: { loadingConfig: { classPropertyName: "loadingConfig", publicName: "loadingConfig", isSignal: true, isRequired: false, transformFunction: null }, accessibilityConfig: { classPropertyName: "accessibilityConfig", publicName: "accessibilityConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [attr.aria-label]=\"accessibilityConfig()?.loadingSpinnerAriaLabel\"\n     [title]=\"accessibilityConfig()?.loadingSpinnerTitle\">\n\n  @if (loadingConfig()) {\n    @switch (loadingConfig()?.type) {\n      @case (loadingStandard) {\n        <div class=\"cssload-loader\">\n          <div class=\"cssload-inner cssload-one\"></div>\n          <div class=\"cssload-inner cssload-two\"></div>\n          <div class=\"cssload-inner cssload-three\"></div>\n        </div>\n      }\n      @case (loadingBars) {\n        <div class=\"loader-bars\">\n        </div>\n      }\n      @case (loadingCircular) {\n        <div class=\"loader-circular\">\n        </div>\n      }\n      @case (loadingDots) {\n        <div class=\"loader-dots\">\n        </div>\n      }\n      @case (loadingCubeFlipping) {\n        <div class=\"cube-wrapper\">\n          <div class=\"cube-folding\">\n            <span class=\"leaf1\"></span>\n            <span class=\"leaf2\"></span>\n            <span class=\"leaf3\"></span>\n            <span class=\"leaf4\"></span>\n          </div>\n        </div>\n      }\n      @case (loadingCircles) {\n        <div id=\"preloader\">\n          <div id=\"loader\"></div>\n        </div>\n      }\n      @case (loadingExplosingSquares) {\n        <div class=\"loader\">\n          <span></span>\n          <span></span>\n          <span></span>\n          <span></span>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [".cssload-loader{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;perspective:800px}.cssload-inner{position:absolute;width:100%;height:100%;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.cssload-inner.cssload-one{left:0%;top:0%;animation:cssload-rotate-one .6s linear infinite;-o-animation:cssload-rotate-one .6s linear infinite;-ms-animation:cssload-rotate-one .6s linear infinite;-webkit-animation:cssload-rotate-one .6s linear infinite;-moz-animation:cssload-rotate-one .6s linear infinite;border-bottom:3px solid rgba(255,255,255,.99)}.cssload-inner.cssload-two{right:0%;top:0%;animation:cssload-rotate-two .6s linear infinite;-o-animation:cssload-rotate-two .6s linear infinite;-ms-animation:cssload-rotate-two .6s linear infinite;-webkit-animation:cssload-rotate-two .6s linear infinite;-moz-animation:cssload-rotate-two .6s linear infinite;border-right:3px solid rgb(255,255,255)}.cssload-inner.cssload-three{right:0%;bottom:0%;animation:cssload-rotate-three .6s linear infinite;-o-animation:cssload-rotate-three .6s linear infinite;-ms-animation:cssload-rotate-three .6s linear infinite;-webkit-animation:cssload-rotate-three .6s linear infinite;-moz-animation:cssload-rotate-three .6s linear infinite;border-top:3px solid rgb(255,255,255)}@keyframes cssload-rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(35deg) rotateY(-45deg) rotate(360deg)}}@-o-keyframes cssload-rotate-one{0%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-one{0%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-one{0%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@-o-keyframes cssload-rotate-two{0%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-two{0%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-two{0%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(360deg)}}@-o-keyframes cssload-rotate-three{0%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-three{0%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-three{0%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}\n", ".loader-dots{position:absolute;inset:0;color:#fefcff;font-size:10px;margin:auto;width:1em;height:1em;border-radius:50%;text-indent:-9999em;-webkit-animation:load4 1.3s infinite linear;animation:load4 1.3s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}\n", ".loader-bars,.loader-bars:before,.loader-bars:after{background:#fefcff;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader-bars{position:absolute;inset:0;color:#fefcff;text-indent:-9999em;margin:auto;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader-bars:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}\n", ".loader-circular,.loader-circular:after{border-radius:50%;width:10em;height:10em}.loader-circular{position:absolute;inset:0;margin:auto;font-size:10px;text-indent:-9999em;border-top:1.1em solid rgba(255,255,255,.2);border-right:1.1em solid rgba(255,255,255,.2);border-bottom:1.1em solid rgba(255,255,255,.2);border-left:1.1em solid #ffffff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);display:inline-block}.cube-folding span:before{content:\"\";background-color:#fff;position:absolute;left:0;top:0;display:block;width:25px;height:25px;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-animation:folding 2.5s infinite linear both;-webkit-animation:folding 2.5s infinite linear both;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{-moz-transform:rotateZ(90deg) scale(1.1);-ms-transform:rotateZ(90deg) scale(1.1);-webkit-transform:rotateZ(90deg) scale(1.1);transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{-moz-animation-delay:.3s;-webkit-animation-delay:.3s;animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{-moz-transform:rotateZ(270deg) scale(1.1);-ms-transform:rotateZ(270deg) scale(1.1);-webkit-transform:rotateZ(270deg) scale(1.1);transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{-moz-animation-delay:.9s;-webkit-animation-delay:.9s;animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{-moz-transform:rotateZ(180deg) scale(1.1);-ms-transform:rotateZ(180deg) scale(1.1);-webkit-transform:rotateZ(180deg) scale(1.1);transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s;background-color:#e6e6e6}@-moz-keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@-webkit-keyframes folding{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);-ms-transform:perspective(140px) rotateX(-180deg);-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);-ms-transform:perspective(140px) rotateX(0deg);-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);-ms-transform:perspective(140px) rotateY(180deg);-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.cube-wrapper{position:fixed;left:50%;top:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;text-align:center}@-moz-keyframes text{to{top:35px}}@-webkit-keyframes text{to{top:35px}}@keyframes text{to{top:35px}}@-moz-keyframes shadow{to{bottom:-18px;width:100px}}@-webkit-keyframes shadow{to{bottom:-18px;width:100px}}@keyframes shadow{to{bottom:-18px;width:100px}}\n", "#preloader{position:fixed;top:0;left:0;width:100%;height:100%}#loader{display:block;position:relative;left:50%;top:50%;width:100px;height:100px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#b4b4b4;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}\n", "@keyframes loader{0%,10%,to{width:60px;height:60px}65%{width:150px;height:150px}}@keyframes loaderBlock{0%,30%{transform:rotate(0)}55%{background-color:#b4b4b4}to{transform:rotate(90deg)}}@keyframes loaderBlockInverse{0%,20%{transform:rotate(0)}55%{background-color:#d9d9d9}to{transform:rotate(-90deg)}}.loader{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%) rotate(45deg) translateZ(0);animation:loader 1.2s infinite ease-in-out}.loader span{position:absolute;display:block;width:40px;height:40px;background-color:#fff;animation:loaderBlock 1.2s infinite ease-in-out both}.loader span:nth-child(1){top:0;left:0}.loader span:nth-child(2){top:0;right:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(3){bottom:0;left:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(4){bottom:0;right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n     [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n  @switch (loadingConfig?.type) {\n    @case (loadingStandard) {\n      <div class=\"cssload-loader\">\n        <div class=\"cssload-inner cssload-one\"></div>\n        <div class=\"cssload-inner cssload-two\"></div>\n        <div class=\"cssload-inner cssload-three\"></div>\n      </div>\n    }\n    @case (loadingBars) {\n      <div class=\"loader-bars\">\n      </div>\n    }\n    @case (loadingCircular) {\n      <div class=\"loader-circular\">\n      </div>\n    }\n    @case (loadingDots) {\n      <div class=\"loader-dots\">\n      </div>\n    }\n    @case (loadingCubeFlipping) {\n      <div class=\"cube-wrapper\">\n        <div class=\"cube-folding\">\n          <span class=\"leaf1\"></span>\n          <span class=\"leaf2\"></span>\n          <span class=\"leaf3\"></span>\n          <span class=\"leaf4\"></span>\n        </div>\n      </div>\n    }\n    @case (loadingCircles) {\n      <div id=\"preloader\">\n        <div id=\"loader\"></div>\n      </div>\n    }\n    @case (loadingExplosingSquares) {\n      <div class=\"loader\">\n        <span></span>\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  }\n</div>\n", styles: [".cssload-loader{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;perspective:800px}.cssload-inner{position:absolute;width:100%;height:100%;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.cssload-inner.cssload-one{left:0%;top:0%;animation:cssload-rotate-one .6s linear infinite;-o-animation:cssload-rotate-one .6s linear infinite;-ms-animation:cssload-rotate-one .6s linear infinite;-webkit-animation:cssload-rotate-one .6s linear infinite;-moz-animation:cssload-rotate-one .6s linear infinite;border-bottom:3px solid rgba(255,255,255,.99)}.cssload-inner.cssload-two{right:0%;top:0%;animation:cssload-rotate-two .6s linear infinite;-o-animation:cssload-rotate-two .6s linear infinite;-ms-animation:cssload-rotate-two .6s linear infinite;-webkit-animation:cssload-rotate-two .6s linear infinite;-moz-animation:cssload-rotate-two .6s linear infinite;border-right:3px solid rgb(255,255,255)}.cssload-inner.cssload-three{right:0%;bottom:0%;animation:cssload-rotate-three .6s linear infinite;-o-animation:cssload-rotate-three .6s linear infinite;-ms-animation:cssload-rotate-three .6s linear infinite;-webkit-animation:cssload-rotate-three .6s linear infinite;-moz-animation:cssload-rotate-three .6s linear infinite;border-top:3px solid rgb(255,255,255)}@keyframes cssload-rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(35deg) rotateY(-45deg) rotate(360deg)}}@-o-keyframes cssload-rotate-one{0%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-one{0%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-one{0%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@-o-keyframes cssload-rotate-two{0%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-two{0%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-two{0%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(360deg)}}@-o-keyframes cssload-rotate-three{0%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-three{0%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-three{0%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}\n", ".loader-dots{position:absolute;inset:0;color:#fefcff;font-size:10px;margin:auto;width:1em;height:1em;border-radius:50%;text-indent:-9999em;-webkit-animation:load4 1.3s infinite linear;animation:load4 1.3s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}\n", ".loader-bars,.loader-bars:before,.loader-bars:after{background:#fefcff;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader-bars{position:absolute;inset:0;color:#fefcff;text-indent:-9999em;margin:auto;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader-bars:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}\n", ".loader-circular,.loader-circular:after{border-radius:50%;width:10em;height:10em}.loader-circular{position:absolute;inset:0;margin:auto;font-size:10px;text-indent:-9999em;border-top:1.1em solid rgba(255,255,255,.2);border-right:1.1em solid rgba(255,255,255,.2);border-bottom:1.1em solid rgba(255,255,255,.2);border-left:1.1em solid #ffffff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);display:inline-block}.cube-folding span:before{content:\"\";background-color:#fff;position:absolute;left:0;top:0;display:block;width:25px;height:25px;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-animation:folding 2.5s infinite linear both;-webkit-animation:folding 2.5s infinite linear both;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{-moz-transform:rotateZ(90deg) scale(1.1);-ms-transform:rotateZ(90deg) scale(1.1);-webkit-transform:rotateZ(90deg) scale(1.1);transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{-moz-animation-delay:.3s;-webkit-animation-delay:.3s;animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{-moz-transform:rotateZ(270deg) scale(1.1);-ms-transform:rotateZ(270deg) scale(1.1);-webkit-transform:rotateZ(270deg) scale(1.1);transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{-moz-animation-delay:.9s;-webkit-animation-delay:.9s;animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{-moz-transform:rotateZ(180deg) scale(1.1);-ms-transform:rotateZ(180deg) scale(1.1);-webkit-transform:rotateZ(180deg) scale(1.1);transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s;background-color:#e6e6e6}@-moz-keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@-webkit-keyframes folding{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);-ms-transform:perspective(140px) rotateX(-180deg);-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);-ms-transform:perspective(140px) rotateX(0deg);-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);-ms-transform:perspective(140px) rotateY(180deg);-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.cube-wrapper{position:fixed;left:50%;top:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;text-align:center}@-moz-keyframes text{to{top:35px}}@-webkit-keyframes text{to{top:35px}}@keyframes text{to{top:35px}}@-moz-keyframes shadow{to{bottom:-18px;width:100px}}@-webkit-keyframes shadow{to{bottom:-18px;width:100px}}@keyframes shadow{to{bottom:-18px;width:100px}}\n", "#preloader{position:fixed;top:0;left:0;width:100%;height:100%}#loader{display:block;position:relative;left:50%;top:50%;width:100px;height:100px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#b4b4b4;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}\n", "@keyframes loader{0%,10%,to{width:60px;height:60px}65%{width:150px;height:150px}}@keyframes loaderBlock{0%,30%{transform:rotate(0)}55%{background-color:#b4b4b4}to{transform:rotate(90deg)}}@keyframes loaderBlockInverse{0%,20%{transform:rotate(0)}55%{background-color:#d9d9d9}to{transform:rotate(-90deg)}}.loader{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%) rotate(45deg) translateZ(0);animation:loader 1.2s infinite ease-in-out}.loader span{position:absolute;display:block;width:40px;height:40px;background-color:#fff;animation:loaderBlock 1.2s infinite ease-in-out both}.loader span:nth-child(1){top:0;left:0}.loader span:nth-child(2){top:0;right:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(3){bottom:0;left:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(4){bottom:0;right:0}\n"] }]
-        }], propDecorators: { loadingConfig: [{
-                type: Input
-            }], accessibilityConfig: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ks-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.aria-label]=\"accessibilityConfig()?.loadingSpinnerAriaLabel\"\n     [title]=\"accessibilityConfig()?.loadingSpinnerTitle\">\n\n  @if (loadingConfig()) {\n    @switch (loadingConfig()?.type) {\n      @case (loadingStandard) {\n        <div class=\"cssload-loader\">\n          <div class=\"cssload-inner cssload-one\"></div>\n          <div class=\"cssload-inner cssload-two\"></div>\n          <div class=\"cssload-inner cssload-three\"></div>\n        </div>\n      }\n      @case (loadingBars) {\n        <div class=\"loader-bars\">\n        </div>\n      }\n      @case (loadingCircular) {\n        <div class=\"loader-circular\">\n        </div>\n      }\n      @case (loadingDots) {\n        <div class=\"loader-dots\">\n        </div>\n      }\n      @case (loadingCubeFlipping) {\n        <div class=\"cube-wrapper\">\n          <div class=\"cube-folding\">\n            <span class=\"leaf1\"></span>\n            <span class=\"leaf2\"></span>\n            <span class=\"leaf3\"></span>\n            <span class=\"leaf4\"></span>\n          </div>\n        </div>\n      }\n      @case (loadingCircles) {\n        <div id=\"preloader\">\n          <div id=\"loader\"></div>\n        </div>\n      }\n      @case (loadingExplosingSquares) {\n        <div class=\"loader\">\n          <span></span>\n          <span></span>\n          <span></span>\n          <span></span>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [".cssload-loader{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;perspective:800px}.cssload-inner{position:absolute;width:100%;height:100%;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.cssload-inner.cssload-one{left:0%;top:0%;animation:cssload-rotate-one .6s linear infinite;-o-animation:cssload-rotate-one .6s linear infinite;-ms-animation:cssload-rotate-one .6s linear infinite;-webkit-animation:cssload-rotate-one .6s linear infinite;-moz-animation:cssload-rotate-one .6s linear infinite;border-bottom:3px solid rgba(255,255,255,.99)}.cssload-inner.cssload-two{right:0%;top:0%;animation:cssload-rotate-two .6s linear infinite;-o-animation:cssload-rotate-two .6s linear infinite;-ms-animation:cssload-rotate-two .6s linear infinite;-webkit-animation:cssload-rotate-two .6s linear infinite;-moz-animation:cssload-rotate-two .6s linear infinite;border-right:3px solid rgb(255,255,255)}.cssload-inner.cssload-three{right:0%;bottom:0%;animation:cssload-rotate-three .6s linear infinite;-o-animation:cssload-rotate-three .6s linear infinite;-ms-animation:cssload-rotate-three .6s linear infinite;-webkit-animation:cssload-rotate-three .6s linear infinite;-moz-animation:cssload-rotate-three .6s linear infinite;border-top:3px solid rgb(255,255,255)}@keyframes cssload-rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(35deg) rotateY(-45deg) rotate(360deg)}}@-o-keyframes cssload-rotate-one{0%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-one{0%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-one{0%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@-o-keyframes cssload-rotate-two{0%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-two{0%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-two{0%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}to{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(360deg)}}@-o-keyframes cssload-rotate-three{0%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-ms-keyframes cssload-rotate-three{0%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}@-moz-keyframes cssload-rotate-three{0%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}to{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}\n", ".loader-dots{position:absolute;inset:0;color:#fefcff;font-size:10px;margin:auto;width:1em;height:1em;border-radius:50%;text-indent:-9999em;-webkit-animation:load4 1.3s infinite linear;animation:load4 1.3s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em}12.5%{box-shadow:0 -3em,2em -2em 0 .2em,3em 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em,3em 0 0 .2em,2em 2em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0,2em 2em 0 .2em,0 3em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em,0 3em 0 .2em,-2em 2em,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em,-2em 2em 0 .2em,-3em 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0 0 .2em,-2em -2em}87.5%{box-shadow:0 -3em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em,-3em 0,-2em -2em 0 .2em}}\n", ".loader-bars,.loader-bars:before,.loader-bars:after{background:#fefcff;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader-bars{position:absolute;inset:0;color:#fefcff;text-indent:-9999em;margin:auto;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader-bars:after{left:1.5em}@-webkit-keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}\n", ".loader-circular,.loader-circular:after{border-radius:50%;width:10em;height:10em}.loader-circular{position:absolute;inset:0;margin:auto;font-size:10px;text-indent:-9999em;border-top:1.1em solid rgba(255,255,255,.2);border-right:1.1em solid rgba(255,255,255,.2);border-bottom:1.1em solid rgba(255,255,255,.2);border-left:1.1em solid #ffffff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);display:inline-block}.cube-folding span:before{content:\"\";background-color:#fff;position:absolute;left:0;top:0;display:block;width:25px;height:25px;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-animation:folding 2.5s infinite linear both;-webkit-animation:folding 2.5s infinite linear both;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{-moz-transform:rotateZ(90deg) scale(1.1);-ms-transform:rotateZ(90deg) scale(1.1);-webkit-transform:rotateZ(90deg) scale(1.1);transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{-moz-animation-delay:.3s;-webkit-animation-delay:.3s;animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{-moz-transform:rotateZ(270deg) scale(1.1);-ms-transform:rotateZ(270deg) scale(1.1);-webkit-transform:rotateZ(270deg) scale(1.1);transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{-moz-animation-delay:.9s;-webkit-animation-delay:.9s;animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{-moz-transform:rotateZ(180deg) scale(1.1);-ms-transform:rotateZ(180deg) scale(1.1);-webkit-transform:rotateZ(180deg) scale(1.1);transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s;background-color:#e6e6e6}@-moz-keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@-webkit-keyframes folding{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes folding{0%,10%{-moz-transform:perspective(140px) rotateX(-180deg);-ms-transform:perspective(140px) rotateX(-180deg);-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-moz-transform:perspective(140px) rotateX(0deg);-ms-transform:perspective(140px) rotateX(0deg);-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-moz-transform:perspective(140px) rotateY(180deg);-ms-transform:perspective(140px) rotateY(180deg);-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.cube-wrapper{position:fixed;left:50%;top:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;text-align:center}@-moz-keyframes text{to{top:35px}}@-webkit-keyframes text{to{top:35px}}@keyframes text{to{top:35px}}@-moz-keyframes shadow{to{bottom:-18px;width:100px}}@-webkit-keyframes shadow{to{bottom:-18px;width:100px}}@keyframes shadow{to{bottom:-18px;width:100px}}\n", "#preloader{position:fixed;top:0;left:0;width:100%;height:100%}#loader{display:block;position:relative;left:50%;top:50%;width:100px;height:100px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#b4b4b4;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}\n", "@keyframes loader{0%,10%,to{width:60px;height:60px}65%{width:150px;height:150px}}@keyframes loaderBlock{0%,30%{transform:rotate(0)}55%{background-color:#b4b4b4}to{transform:rotate(90deg)}}@keyframes loaderBlockInverse{0%,20%{transform:rotate(0)}55%{background-color:#d9d9d9}to{transform:rotate(-90deg)}}.loader{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%) rotate(45deg) translateZ(0);animation:loader 1.2s infinite ease-in-out}.loader span{position:absolute;display:block;width:40px;height:40px;background-color:#fff;animation:loaderBlock 1.2s infinite ease-in-out both}.loader span:nth-child(1){top:0;left:0}.loader span:nth-child(2){top:0;right:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(3){bottom:0;left:0;animation:loaderBlockInverse 1.2s infinite ease-in-out both}.loader span:nth-child(4){bottom:0;right:0}\n"] }]
+        }] });
 
 /*
  The MIT License (MIT)
@@ -3654,31 +3422,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Component with the current image with some additional elements like arrows and side previews.
  */
 class CurrentImageComponent extends AccessibleComponent {
-    // use public ChangeDetectorRef to be able to call it from spec files to trigger change detection
-    // tslint:disable-next-line:no-any
-    constructor(platformId, ngZone, ref, configService) {
-        super();
-        this.platformId = platformId;
-        this.ngZone = ngZone;
-        this.ref = ref;
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique id (>=0) of the current instance of this library. This is useful when you are using
+         * the service to call modal gallery without open it manually.
+         */
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Object of type `InternalLibImage` that represent the visible image.
+         */
+        this.currentImage = input.required(...(ngDevMode ? [{ debugName: "currentImage" }] : []));
+        /**
+         * Array of `InternalLibImage` that represent the model of this library with all images,
+         * thumbs and so on.
+         */
+        this.images = input.required(...(ngDevMode ? [{ debugName: "images" }] : []));
         /**
          * Boolean that it is true if the modal gallery is visible.
          * If yes, also this component should be visible.
          */
-        this.isOpen = false;
+        this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         /**
          * Output to emit an event when images are loaded. The payload contains an `ImageLoadEvent`.
          */
-        this.loadImage = new EventEmitter();
+        this.loadImage = output();
         /**
          * Output to emit any changes of the current image. The payload contains an `ImageModalEvent`.
          */
-        this.changeImage = new EventEmitter();
+        this.changeImage = output();
         /**
          * Output to emit an event when the modal gallery is closed. The payload contains an `ImageModalEvent`.
          */
-        this.closeGallery = new EventEmitter();
+        this.closeGallery = output();
         /**
          * Subject to play modal-gallery.
          */
@@ -3717,6 +3493,11 @@ class CurrentImageComponent extends AccessibleComponent {
          * True by default
          */
         this.loading = true;
+        this.platformId = inject(PLATFORM_ID);
+        this.ngZone = inject(NgZone);
+        this.configService = inject(ConfigService);
+        // this must be public for testing purposes
+        this.ref = inject(ChangeDetectorRef);
     }
     /**
      * Listener to stop the gallery when the mouse pointer is over the current image.
@@ -3750,7 +3531,7 @@ class CurrentImageComponent extends AccessibleComponent {
      * In particular, it's called only one time!!!
      */
     ngOnInit() {
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(this.id());
         if (!libConfig || !libConfig.buttonsConfig) {
             throw new Error('Internal library error - libConfig and buttonsConfig must be defined');
         }
@@ -3766,7 +3547,7 @@ class CurrentImageComponent extends AccessibleComponent {
      * In particular, it's called when any data-bound property of a directive changes!!!
      */
     ngOnChanges(changes) {
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(this.id());
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -3816,7 +3597,7 @@ class CurrentImageComponent extends AccessibleComponent {
         const left = this.keyboardConfig && this.keyboardConfig.left ? this.keyboardConfig.left : Keyboard.LEFT_ARROW;
         switch (code) {
             case esc:
-                this.closeGallery.emit(new ImageModalEvent(this.id, Action.KEYBOARD, true));
+                this.closeGallery.emit(new ImageModalEvent(this.id(), Action.KEYBOARD, true));
                 break;
             case right:
                 this.nextImage(Action.KEYBOARD);
@@ -3834,7 +3615,7 @@ class CurrentImageComponent extends AccessibleComponent {
      * @returns String description of the image (or the current image if not provided)
      * @throws an Error if description isn't available
      */
-    getDescriptionToDisplay(image = this.currentImage) {
+    getDescriptionToDisplay(image = this.currentImage()) {
         if (!this.currentImageConfig || !this.currentImageConfig.description) {
             throw new Error('Description input must be a valid object implementing the Description interface');
         }
@@ -3855,11 +3636,11 @@ class CurrentImageComponent extends AccessibleComponent {
      * @param image Image to get its alt description. If not provided it will be the current image
      * @returns String alt description of the image (or the current image if not provided)
      */
-    getAltDescriptionByImage(image = this.currentImage) {
+    getAltDescriptionByImage(image = this.currentImage()) {
         if (!image) {
             return '';
         }
-        return image.modal && image.modal.description ? image.modal.description : `Image ${getIndex(image, this.images) + 1}`;
+        return image.modal && image.modal.description ? image.modal.description : `Image ${getIndex(image, this.images()) + 1}`;
     }
     /**
      * Method to get the title attributes based on descriptions.
@@ -3869,7 +3650,7 @@ class CurrentImageComponent extends AccessibleComponent {
      * @returns String title of the image based on descriptions
      * @throws an Error if description isn't available
      */
-    getTitleToDisplay(image = this.currentImage) {
+    getTitleToDisplay(image = this.currentImage()) {
         if (!this.currentImageConfig || !this.currentImageConfig.description) {
             throw new Error('Description input must be a valid object implementing the Description interface');
         }
@@ -3884,15 +3665,15 @@ class CurrentImageComponent extends AccessibleComponent {
         if (!this.slideConfig) {
             throw new Error('Internal library error - slideConfig must be defined');
         }
-        const currentIndex = getIndex(this.currentImage, this.images);
+        const currentIndex = getIndex(this.currentImage(), this.images());
         if (currentIndex === 0 && this.slideConfig.infinite) {
             // the current image is the first one,
             // so the previous one is the last image
             // because infinite is true
-            return this.images[this.images.length - 1];
+            return this.images()[this.images().length - 1];
         }
         this.handleBoundaries(currentIndex);
-        return this.images[Math.max(currentIndex - 1, 0)];
+        return this.images()[Math.max(currentIndex - 1, 0)];
     }
     /**
      * Method to get the right side preview image.
@@ -3902,15 +3683,16 @@ class CurrentImageComponent extends AccessibleComponent {
         if (!this.slideConfig) {
             throw new Error('Internal library error - slideConfig must be defined');
         }
-        const currentIndex = getIndex(this.currentImage, this.images);
-        if (currentIndex === this.images.length - 1 && this.slideConfig.infinite) {
+        const currentIndex = getIndex(this.currentImage(), this.images());
+        const images = this.images();
+        if (currentIndex === images.length - 1 && this.slideConfig.infinite) {
             // the current image is the last one,
             // so the next one is the first image
             // because infinite is true
-            return this.images[0];
+            return images[0];
         }
         this.handleBoundaries(currentIndex);
-        return this.images[Math.min(currentIndex + 1, this.images.length - 1)];
+        return images[Math.min(currentIndex + 1, images.length - 1)];
     }
     /**
      * Method called by events from both keyboard and mouse on an image.
@@ -3964,7 +3746,7 @@ class CurrentImageComponent extends AccessibleComponent {
         }
         const prevImage = this.getPrevImage();
         this.loading = !prevImage.previouslyLoaded;
-        this.changeImage.emit(new ImageModalEvent(this.id, action, getIndex(prevImage, this.images)));
+        this.changeImage.emit(new ImageModalEvent(this.id(), action, getIndex(prevImage, this.images())));
         this.start$.next();
     }
     /**
@@ -3974,12 +3756,13 @@ class CurrentImageComponent extends AccessibleComponent {
      */
     nextImage(action = Action.NORMAL) {
         // check if nextImage should be blocked
-        if (this.isPreventSliding(this.images.length - 1)) {
+        const images = this.images();
+        if (this.isPreventSliding(images.length - 1)) {
             return;
         }
         const nextImage = this.getNextImage();
         this.loading = !nextImage.previouslyLoaded;
-        this.changeImage.emit(new ImageModalEvent(this.id, action, getIndex(nextImage, this.images)));
+        this.changeImage.emit(new ImageModalEvent(this.id(), action, getIndex(nextImage, images)));
         this.start$.next();
     }
     /**
@@ -3990,8 +3773,8 @@ class CurrentImageComponent extends AccessibleComponent {
     onImageLoad(event) {
         const loadImageData = {
             status: true,
-            index: getIndex(this.currentImage, this.images),
-            id: this.currentImage.id
+            index: getIndex(this.currentImage(), this.images()),
+            id: this.currentImage().id
         };
         this.loadImage.emit(loadImageData);
         this.loading = false;
@@ -4032,8 +3815,8 @@ class CurrentImageComponent extends AccessibleComponent {
      * @param image image to get the index, or the visible image, if not passed
      * @returns number the index of the image
      */
-    getIndexToDelete(image = this.currentImage) {
-        return getIndex(image, this.images);
+    getIndexToDelete(image = this.currentImage()) {
+        return getIndex(image, this.images());
     }
     /**
      * Method to play modal gallery.
@@ -4060,7 +3843,8 @@ class CurrentImageComponent extends AccessibleComponent {
      * @param currentIndex number is the index of the current image
      */
     handleBoundaries(currentIndex) {
-        if (this.images.length === 1) {
+        const images = this.images();
+        if (images.length === 1) {
             this.isFirstImage = true;
             this.isLastImage = true;
             this.ref.markForCheck();
@@ -4080,7 +3864,7 @@ class CurrentImageComponent extends AccessibleComponent {
                     this.isLastImage = false;
                     this.ref.markForCheck();
                     break;
-                case this.images.length - 1:
+                case images.length - 1:
                     this.isFirstImage = false;
                     this.isLastImage = true;
                     this.ref.markForCheck();
@@ -4103,7 +3887,7 @@ class CurrentImageComponent extends AccessibleComponent {
      *  either the first or the last one.
      */
     isPreventSliding(boundaryIndex) {
-        return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.images) === boundaryIndex;
+        return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage(), this.images()) === boundaryIndex;
     }
     /**
      * Private method to get the next index.
@@ -4111,15 +3895,15 @@ class CurrentImageComponent extends AccessibleComponent {
      * That happens because all modal images are shown like in a circle.
      */
     getNextImage() {
-        const currentIndex = getIndex(this.currentImage, this.images);
+        const currentIndex = getIndex(this.currentImage(), this.images());
         let newIndex;
-        if (currentIndex >= 0 && currentIndex < this.images.length - 1) {
+        if (currentIndex >= 0 && currentIndex < this.images().length - 1) {
             newIndex = currentIndex + 1;
         }
         else {
             newIndex = 0; // start from the first index
         }
-        return this.images[newIndex];
+        return this.images()[newIndex];
     }
     /**
      * Private method to get the previous index.
@@ -4127,15 +3911,15 @@ class CurrentImageComponent extends AccessibleComponent {
      * That happens because all modal images are shown like in a circle.
      */
     getPrevImage() {
-        const currentIndex = getIndex(this.currentImage, this.images);
+        const currentIndex = getIndex(this.currentImage(), this.images());
         let newIndex;
-        if (currentIndex > 0 && currentIndex <= this.images.length - 1) {
+        if (currentIndex > 0 && currentIndex <= this.images().length - 1) {
             newIndex = currentIndex - 1;
         }
         else {
-            newIndex = this.images.length - 1; // start from the last index
+            newIndex = this.images().length - 1; // start from the last index
         }
-        return this.images[newIndex];
+        return this.images()[newIndex];
     }
     /**
      * Private method to build a text description.
@@ -4152,12 +3936,12 @@ class CurrentImageComponent extends AccessibleComponent {
         if (this.currentImageConfig.description.customFullDescription && this.currentImageConfig.description.customFullDescription !== '') {
             return this.currentImageConfig.description.customFullDescription;
         }
-        const currentIndex = getIndex(image, this.images);
+        const currentIndex = getIndex(image, this.images());
         // If the current image hasn't a description,
         // prevent to write the ' - ' (or this.description.beforeTextDescription)
         const prevDescription = this.currentImageConfig.description.imageText ? this.currentImageConfig.description.imageText : '';
         const midSeparator = this.currentImageConfig.description.numberSeparator ? this.currentImageConfig.description.numberSeparator : '';
-        const middleDescription = currentIndex + 1 + midSeparator + this.images.length;
+        const middleDescription = currentIndex + 1 + midSeparator + this.images().length;
         if (imageWithoutDescription) {
             return prevDescription + middleDescription;
         }
@@ -4170,8 +3954,8 @@ class CurrentImageComponent extends AccessibleComponent {
      */
     updateIndexes() {
         try {
-            if (this.isOpen) {
-                const index = getIndex(this.currentImage, this.images);
+            if (this.isOpen()) {
+                const index = getIndex(this.currentImage(), this.images());
                 this.handleBoundaries(index);
             }
         }
@@ -4180,33 +3964,14 @@ class CurrentImageComponent extends AccessibleComponent {
             throw err;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrentImageComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CurrentImageComponent, isStandalone: true, selector: "ks-current-image", inputs: { id: "id", currentImage: "currentImage", images: "images", isOpen: "isOpen" }, outputs: { loadImage: "loadImage", changeImage: "changeImage", closeGallery: "closeGallery" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main class=\"main-image-container\"\n      ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n      [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n  <div class=\"left-sub-container\">\n    <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n       [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n    </a>\n\n    @let leftPreview = getLeftPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isFirstImage) {\n        <img class=\"inside current-image-previous\"\n             [loading]=\"leftPreview.loading\"\n             [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n             [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n             [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n             [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n             alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-previous hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n      }\n    }\n  </div>\n\n\n  <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n    <picture class=\"current-image\">\n      @for (source of currentImage.modal?.sources; let i = $index; track i) {\n        <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n      }\n      <img [id]=\"currentImage.id\"\n           [loading]=\"currentImage.loading\"\n           [attr.fetchpriority]=\"currentImage.fetchpriority\"\n           class=\"inside\"\n           [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n           [src]=\"currentImage.modal.img\"\n           ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n           [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n           [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n           alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n           [tabIndex]=\"0\" role=\"img\"\n           (load)=\"onImageLoad($event)\"\n           (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n           ksSwipe\n           (swipeLeft)=\"swipe('swipeleft')\"\n           (swipeRight)=\"swipe('swiperight')\" />\n    </picture>\n    @if (getDescriptionToDisplay() !== '') {\n      <figcaption class=\"inside description\"\n                  ksDescription [description]=\"currentImageConfig?.description\"\n                  [innerHTML]=\"getDescriptionToDisplay()\">\n      </figcaption>\n    }\n  </figure>\n\n  <div class=\"right-sub-container\">\n    @let rightPreview = getRightPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isLastImage) {\n        <img class=\"inside current-image-next\"\n             [loading]=\"rightPreview.loading\"\n             [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n             [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n             [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n             [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n             alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-next hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n      }\n    }\n\n    @if (loading && currentImageConfig?.loadingConfig?.enable) {\n      <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n                          [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n    }\n\n    <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n       [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n    </a>\n  </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrentImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CurrentImageComponent, isStandalone: true, selector: "ks-current-image", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, currentImage: { classPropertyName: "currentImage", publicName: "currentImage", isSignal: true, isRequired: true, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadImage: "loadImage", changeImage: "changeImage", closeGallery: "closeGallery" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<main class=\"main-image-container\"\n      ksKeyboardNavigation [isOpen]=\"isOpen()\" (keyboardNavigation)=\"onKeyPress($event)\"\n      [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n  <div class=\"left-sub-container\">\n    <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n       [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n    </a>\n\n    @let leftPreview = getLeftPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isFirstImage) {\n        <img class=\"inside current-image-previous\"\n             loading=\"{{ leftPreview.loading }}\"\n             [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n             [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"\n             [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n             [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n             alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-previous hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"></div>\n      }\n    }\n  </div>\n\n\n  <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n    <picture class=\"current-image\">\n      @for (source of currentImage().modal?.sources; let i = $index; track i) {\n        <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n      }\n      <img [id]=\"currentImage().id\"\n           loading=\"{{ currentImage().loading }}\"\n           [attr.fetchpriority]=\"currentImage().fetchpriority\"\n           class=\"inside\"\n           [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n           [src]=\"currentImage().modal.img\"\n           ksFallbackImage [fallbackImg]=\"currentImage().modal.fallbackImg\"\n           [attr.aria-label]=\"currentImage().modal.ariaLabel\"\n           [title]=\"(currentImage().modal.title || currentImage().modal.title === '') ? currentImage().modal.title : getTitleToDisplay()\"\n           alt=\"{{currentImage().modal.alt ? currentImage().modal.alt : getAltDescriptionByImage()}}\"\n           [tabIndex]=\"0\" role=\"img\"\n           (load)=\"onImageLoad($event)\"\n           (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n           ksSwipe\n           (swipeLeft)=\"swipe('swipeleft')\"\n           (swipeRight)=\"swipe('swiperight')\" />\n    </picture>\n    @if (getDescriptionToDisplay() !== '') {\n      <figcaption class=\"inside description\"\n                  ksDescription [description]=\"currentImageConfig?.description\"\n                  [innerHTML]=\"getDescriptionToDisplay()\">\n      </figcaption>\n    }\n  </figure>\n\n  <div class=\"right-sub-container\">\n    @let rightPreview = getRightPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isLastImage) {\n        <img class=\"inside current-image-next\"\n             loading=\"{{ rightPreview.loading }}\"\n             [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n             [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"\n             [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n             [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n             alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-next hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"></div>\n      }\n    }\n\n    @if (loading && currentImageConfig?.loadingConfig?.enable) {\n      <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n                          [accessibilityConfig]=\"accessibilityConfig\" />\n    }\n\n    <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n       [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n    </a>\n  </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"], dependencies: [{ kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CurrentImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ks-current-image', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyboardNavigationDirective, FallbackImageDirective, SizeDirective,
-                        SwipeDirective, NgClass, DescriptionDirective, LoadingSpinnerComponent], template: "<main class=\"main-image-container\"\n      ksKeyboardNavigation [isOpen]=\"isOpen\" (keyboardNavigation)=\"onKeyPress($event)\"\n      [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n  <div class=\"left-sub-container\">\n    <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n       [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n    </a>\n\n    @let leftPreview = getLeftPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isFirstImage) {\n        <img class=\"inside current-image-previous\"\n             [loading]=\"leftPreview.loading\"\n             [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n             [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n             [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n             [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n             alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-previous hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n      }\n    }\n  </div>\n\n\n  <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n    <picture class=\"current-image\">\n      @for (source of currentImage.modal?.sources; let i = $index; track i) {\n        <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n      }\n      <img [id]=\"currentImage.id\"\n           [loading]=\"currentImage.loading\"\n           [attr.fetchpriority]=\"currentImage.fetchpriority\"\n           class=\"inside\"\n           [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n           [src]=\"currentImage.modal.img\"\n           ksFallbackImage [fallbackImg]=\"currentImage.modal.fallbackImg\"\n           [attr.aria-label]=\"currentImage.modal.ariaLabel\"\n           [title]=\"(currentImage.modal.title || currentImage.modal.title === '') ? currentImage.modal.title : getTitleToDisplay()\"\n           alt=\"{{currentImage.modal.alt ? currentImage.modal.alt : getAltDescriptionByImage()}}\"\n           [tabIndex]=\"0\" role=\"img\"\n           (load)=\"onImageLoad($event)\"\n           (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n           ksSwipe\n           (swipeLeft)=\"swipe('swipeleft')\"\n           (swipeRight)=\"swipe('swiperight')\" />\n    </picture>\n    @if (getDescriptionToDisplay() !== '') {\n      <figcaption class=\"inside description\"\n                  ksDescription [description]=\"currentImageConfig?.description\"\n                  [innerHTML]=\"getDescriptionToDisplay()\">\n      </figcaption>\n    }\n  </figure>\n\n  <div class=\"right-sub-container\">\n    @let rightPreview = getRightPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isLastImage) {\n        <img class=\"inside current-image-next\"\n             [loading]=\"rightPreview.loading\"\n             [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n             [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"\n             [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n             [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n             alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-next hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n      }\n    }\n\n    @if (loading && currentImageConfig?.loadingConfig?.enable) {\n      <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n                          [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n    }\n\n    <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n       [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n    </a>\n  </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ConfigService }], propDecorators: { id: [{
-                type: Input
-            }], currentImage: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], 
-        // @ts-ignore
-        isOpen: [{
-                type: Input
-            }], loadImage: [{
-                type: Output
-            }], changeImage: [{
-                type: Output
-            }], closeGallery: [{
-                type: Output
-            }], onMouseEnter: [{
+                        SwipeDirective, NgClass, DescriptionDirective, LoadingSpinnerComponent], template: "<main class=\"main-image-container\"\n      ksKeyboardNavigation [isOpen]=\"isOpen()\" (keyboardNavigation)=\"onKeyPress($event)\"\n      [attr.aria-label]=\"accessibilityConfig?.mainContainerAriaLabel\"\n      [title]=\"accessibilityConfig?.mainContainerTitle\">\n\n  <div class=\"left-sub-container\">\n    <a class=\"nav-left {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainPrevImageAriaLabel\"\n       [tabIndex]=\"isFirstImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n      <div class=\"inside {{isFirstImage ? 'empty-arrow-image' : 'left-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isFirstImage ? '' : accessibilityConfig?.mainPrevImageTitle\"></div>\n    </a>\n\n    @let leftPreview = getLeftPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isFirstImage) {\n        <img class=\"inside current-image-previous\"\n             loading=\"{{ leftPreview.loading }}\"\n             [attr.fetchpriority]=\"leftPreview.fetchpriority\"\n             [src]=\"leftPreview.plain?.img ? leftPreview.plain?.img : leftPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"leftPreview.plain?.fallbackImg ? leftPreview.plain?.fallbackImg : leftPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"\n             [attr.aria-label]=\"leftPreview.modal.ariaLabel\"\n             [title]=\"(leftPreview.modal.title || leftPreview.modal.title === '') ? leftPreview.modal.title : getDescriptionToDisplay(leftPreview)\"\n             alt=\"{{leftPreview.modal.alt ? leftPreview.modal.alt : getAltDescriptionByImage(leftPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('left', $event, clickAction)\" (keyup)=\"onNavigationEvent('left', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-previous hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"></div>\n      }\n    }\n  </div>\n\n\n  <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n    <picture class=\"current-image\">\n      @for (source of currentImage().modal?.sources; let i = $index; track i) {\n        <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n      }\n      <img [id]=\"currentImage().id\"\n           loading=\"{{ currentImage().loading }}\"\n           [attr.fetchpriority]=\"currentImage().fetchpriority\"\n           class=\"inside\"\n           [ngClass]=\"currentImageConfig?.navigateOnClick ? '' : 'unclickable'\"\n           [src]=\"currentImage().modal.img\"\n           ksFallbackImage [fallbackImg]=\"currentImage().modal.fallbackImg\"\n           [attr.aria-label]=\"currentImage().modal.ariaLabel\"\n           [title]=\"(currentImage().modal.title || currentImage().modal.title === '') ? currentImage().modal.title : getTitleToDisplay()\"\n           alt=\"{{currentImage().modal.alt ? currentImage().modal.alt : getAltDescriptionByImage()}}\"\n           [tabIndex]=\"0\" role=\"img\"\n           (load)=\"onImageLoad($event)\"\n           (click)=\"onImageEvent($event, clickAction)\" (keyup)=\"onImageEvent($event, keyboardAction)\"\n           ksSwipe\n           (swipeLeft)=\"swipe('swipeleft')\"\n           (swipeRight)=\"swipe('swiperight')\" />\n    </picture>\n    @if (getDescriptionToDisplay() !== '') {\n      <figcaption class=\"inside description\"\n                  ksDescription [description]=\"currentImageConfig?.description\"\n                  [innerHTML]=\"getDescriptionToDisplay()\">\n      </figcaption>\n    }\n  </figure>\n\n  <div class=\"right-sub-container\">\n    @let rightPreview = getRightPreviewImage();\n    @if (slideConfig?.sidePreviews?.show && leftPreview) {\n      @if (!isLastImage) {\n        <img class=\"inside current-image-next\"\n             loading=\"{{ rightPreview.loading }}\"\n             [attr.fetchpriority]=\"rightPreview.fetchpriority\"\n             [src]=\"rightPreview.plain?.img ? rightPreview.plain?.img : rightPreview.modal.img\"\n             ksFallbackImage [fallbackImg]=\"rightPreview.plain?.fallbackImg ? rightPreview.plain?.fallbackImg : rightPreview.modal.fallbackImg\"\n             [hidden]=\"loading\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"\n             [attr.aria-label]=\"rightPreview.modal.ariaLabel\"\n             [title]=\"(rightPreview.modal.title || rightPreview.modal.title === '') ? rightPreview.modal.title : getDescriptionToDisplay(rightPreview)\"\n             alt=\"{{rightPreview.modal.alt ? rightPreview.modal.alt : getAltDescriptionByImage(rightPreview)}}\"\n             [tabIndex]=\"0\" role=\"img\"\n             (click)=\"onNavigationEvent('right', $event, clickAction)\" (keyup)=\"onNavigationEvent('right', $event, keyboardAction)\" />\n      } @else {\n        <div class=\"current-image-next hidden\"\n             ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size?.width, height: slideConfig?.sidePreviews?.size?.height}\"></div>\n      }\n    }\n\n    @if (loading && currentImageConfig?.loadingConfig?.enable) {\n      <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n                          [accessibilityConfig]=\"accessibilityConfig\" />\n    }\n\n    <a class=\"nav-right {{isFirstImage ? 'no-pointer' : ''}}\"\n       [attr.aria-label]=\"accessibilityConfig?.mainNextImageAriaLabel\"\n       [tabIndex]=\"isLastImage ? -1 : 0\" role=\"button\"\n       (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n      <div class=\"inside {{isLastImage ? 'empty-arrow-image' : 'right-arrow-image'}}\"\n           aria-hidden=\"true\"\n           [title]=\"isLastImage ? '' : accessibilityConfig?.mainNextImageTitle\"></div>\n    </a>\n  </div>\n</main>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center}.main-image-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.main-image-container .nav,.main-image-container>.right-sub-container>.nav-right,.main-image-container>.left-sub-container>.nav-left{animation:animatezoom 1s;cursor:pointer;transition:all .5s}.main-image-container .nav:hover,.main-image-container>.right-sub-container>.nav-right:hover,.main-image-container>.left-sub-container>.nav-left:hover{transform:scale(1.1)}.main-image-container>.left-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.left-sub-container>.nav-left{margin-right:5px;margin-left:15px}.main-image-container>.left-sub-container>.nav-left.no-pointer{cursor:default!important}.main-image-container>.right-sub-container{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.main-image-container>.right-sub-container>.nav-right{margin-right:15px;margin-left:5px}.main-image-container>.right-sub-container>.nav-right.no-pointer{cursor:default!important}.main-image-container #current-figure{animation:fadein-visible .8s;text-align:center;margin:0;position:relative}.main-image-container #current-figure>.current-image{display:block}.main-image-container #current-figure>.current-image>img{max-width:100%;height:auto;display:block}.main-image-container #current-figure>.current-image>img.unclickable{cursor:not-allowed}.main-image-container #current-figure figcaption{padding:10px;position:absolute;bottom:0;left:0;right:0}.main-image-container #current-figure figcaption .description{font-weight:700;text-align:center}.current-image>img{height:auto;max-width:80vw;max-height:60vh;cursor:pointer}@media screen and (min-width: 70vw){.current-image>img{max-width:70vw}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-image,.right-arrow-image,.left-arrow-image,.empty-arrow-image{width:30px;height:30px;background-size:30px}.empty-arrow-image{background:#000;opacity:0}.left-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMTQ1LjE4OCwyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xcy0xMy44LTUuMy0xOS4xLDBsLTIyNS4xLDIyNS4xYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWwyMjUuMSwyMjUgICBjMi42LDIuNiw2LjEsNCw5LjUsNHM2LjktMS4zLDkuNS00YzUuMy01LjMsNS4zLTEzLjgsMC0xOS4xTDE0NS4xODgsMjM4LjU3NXoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.left-arrow-image:hover{transform:scale(1.2)}.right-arrow-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48cGF0aCBkPSJNMzYwLjczMSwyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xLDBzLTUuMywxMy44LDAsMTkuMWwyMTUuNSwyMTUuNWwtMjE1LjUsMjE1LjUgICBjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xYzIuNiwyLjYsNi4xLDQsOS41LDRjMy40LDAsNi45LTEuMyw5LjUtNGwyMjUuMS0yMjUuMUMzNjUuOTMxLDI0Mi44NzUsMzY1LjkzMSwyMzQuMjc1LDM2MC43MzEsMjI5LjA3NXogICAiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);opacity:.8;transition:all .5s}.right-arrow-image:hover{transform:scale(1.2)}\n", "@media only screen and (max-width: 1024px),only screen and (max-device-width: 1024px){.current-image-previous,.current-image-next{display:none}}@media only screen and (min-device-width: 1025px){.current-image-preview,.current-image-next,.current-image-previous{height:auto;cursor:pointer;opacity:.5;animation:fadein-semi-visible05 .8s;filter:alpha(opacity=50)}.current-image-preview:hover,.current-image-next:hover,.current-image-previous:hover{opacity:1;transition-property:opacity;transition:all .5s ease}.current-image-previous{margin-left:10px;margin-right:5px}.current-image-next{margin-right:10px;margin-left:5px}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}\n"] }]
+        }], propDecorators: { onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -4241,9 +4006,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to change the flex-wrap css property of an element.
  */
 class WrapDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * Boolean input that it's true to add 'flex-wrap: wrap', 'flex-wrap: nowrap' otherwise.
+         */
+        this.wrap = input.required(...(ngDevMode ? [{ debugName: "wrap" }] : []));
+        /**
+         * String input to force the width of the element to be able to see wrapping.
+         */
+        this.width = input.required(...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -4265,24 +4038,16 @@ class WrapDirective {
      * Private method to change both width and flex-wrap css properties.
      */
     applyStyle() {
-        // TODO is this right???? If wrap is false I cannot apply width and flex-wrap
-        if (!this.wrap) {
-            return;
-        }
-        this.renderer.setStyle(this.el.nativeElement, 'width', this.width);
-        this.renderer.setStyle(this.el.nativeElement, 'flex-wrap', this.wrap ? 'wrap' : 'nowrap');
+        this.renderer.setStyle(this.el.nativeElement, 'width', this.width());
+        this.renderer.setStyle(this.el.nativeElement, 'flex-wrap', this.wrap() ? 'wrap' : 'nowrap');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WrapDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: WrapDirective, isStandalone: true, selector: "[ksWrap]", inputs: { wrap: "wrap", width: "width" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: WrapDirective, isStandalone: true, selector: "[ksWrap]", inputs: { wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WrapDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksWrap]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { wrap: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -4311,9 +4076,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to change the flex-direction of an element, based on two inputs (`direction` and `justify`).
  */
 class DirectionDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * String input to set the css flex-direction of an element.
+         */
+        this.direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+        /**
+         * String input to set the css justify-content of an element.
+         */
+        this.justify = input(...(ngDevMode ? [undefined, { debugName: "justify" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -4335,23 +4108,21 @@ class DirectionDirective {
      * Private method to change both direction and justify of an element.
      */
     applyStyle() {
-        if (!this.direction || !this.justify) {
+        const direction = this.direction();
+        const justify = this.justify();
+        if (!direction || !justify) {
             return;
         }
-        this.renderer.setStyle(this.el.nativeElement, 'flex-direction', this.direction);
-        this.renderer.setStyle(this.el.nativeElement, 'justify-content', this.justify);
+        this.renderer.setStyle(this.el.nativeElement, 'flex-direction', direction);
+        this.renderer.setStyle(this.el.nativeElement, 'justify-content', justify);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DirectionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: DirectionDirective, isStandalone: true, selector: "[ksDirection]", inputs: { direction: "direction", justify: "justify" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: DirectionDirective, isStandalone: true, selector: "[ksDirection]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DirectionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksDirection]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { direction: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -4380,9 +4151,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Directive to add an image to an `<a>` tag with some additional custom properties.
  */
 class ATagBgImageDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * Object of type `Image` that represents the image to add to the `<a>` tag.
+         */
+        this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
+        /**
+         * Additional style to customize the background attribute.
+         * Empty string by default.
+         */
+        this.style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -4404,28 +4184,25 @@ class ATagBgImageDirective {
      * Private method to add an image as background of an `<a>` tag.
      */
     applyStyle() {
-        if (!this.image || (!this.image.plain && !this.image.modal)) {
+        const image = this.image();
+        if (!image || (!image.plain && !image.modal)) {
             return;
         }
-        const imgPath = this.image.plain && this.image.plain.img ? this.image.plain.img : this.image.modal.img;
-        let bg = `url("${imgPath}") ${this.style}`;
-        const fallbackImgPath = this.image.plain && this.image.plain.fallbackImg ? this.image.plain.fallbackImg : this.image.modal.fallbackImg;
+        const imgPath = image.plain && image.plain.img ? image.plain.img : image.modal.img;
+        let bg = `url("${imgPath}") ${this.style()}`;
+        const fallbackImgPath = image.plain && image.plain.fallbackImg ? image.plain.fallbackImg : image.modal.fallbackImg;
         if (!!fallbackImgPath) {
-            bg += `, url("${fallbackImgPath}") ${this.style}`;
+            bg += `, url("${fallbackImgPath}") ${this.style()}`;
         }
         this.renderer.setStyle(this.el.nativeElement, 'background', bg);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ATagBgImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: ATagBgImageDirective, isStandalone: true, selector: "[ksATagBgImage]", inputs: { image: "image", style: "style" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ATagBgImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: ATagBgImageDirective, isStandalone: true, selector: "[ksATagBgImage]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ATagBgImageDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksATagBgImage]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { image: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -4458,17 +4235,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Also, it emits click events as outputs.
  */
 class PlainGalleryComponent extends AccessibleComponent {
-    constructor(configService) {
-        super();
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique id (>=0) of the current instance of this library. This is required when you are using
+         * the service to call modal gallery.
+         */
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         /**
          * Array of `Image` that represent the model of this library with all images, thumbs and so on.
          */
-        this.images = [];
+        this.images = input([], ...(ngDevMode ? [{ debugName: "images" }] : []));
+        /**
+         * PlainLibConfig object to configure plain-gallery.
+         */
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
         /**
          * Output to emit an event when an image is clicked.
          */
-        this.clickImage = new EventEmitter();
+        this.clickImage = output();
         /**
          * Bi-dimensional array of `Image` object to store images to display as plain gallery.
          * [] by default.
@@ -4485,6 +4270,7 @@ class PlainGalleryComponent extends AccessibleComponent {
          * In this way, `wrapStyle` (flex-wrap css property) will be used as requested.
          */
         this.widthStyle = '';
+        this.configService = inject(ConfigService);
     }
     /**
      * Method ´ngOnInit´ to init both `configPlainGallery` calling `initPlainGalleryConfig()`
@@ -4493,11 +4279,12 @@ class PlainGalleryComponent extends AccessibleComponent {
      * In particular, it's called only one time!!!
      */
     ngOnInit() {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        this.configService.setConfig(this.id, this.config);
-        const libConfig = this.configService.getConfig(this.id);
+        this.configService.setConfig(id, this.config());
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -4511,10 +4298,11 @@ class PlainGalleryComponent extends AccessibleComponent {
      * In particular, it's called when any data-bound property of a directive changes!!!
      */
     ngOnChanges(changes) {
-        if (this.id === null || this.id === undefined) {
+        const id = this.id();
+        if (id === null || id === undefined) {
             throw new Error('Internal library error - id must be defined');
         }
-        const libConfig = this.configService.getConfig(this.id);
+        const libConfig = this.configService.getConfig(id);
         if (!libConfig) {
             throw new Error('Internal library error - libConfig must be defined');
         }
@@ -4538,7 +4326,7 @@ class PlainGalleryComponent extends AccessibleComponent {
      * @param img is the Image to show
      */
     showModalGalleryByImage(img) {
-        const index = this.images.findIndex((val) => val && img && val.id === img.id);
+        const index = this.images().findIndex((val) => val && img && val.id === img.id);
         this.showModalGallery(index);
     }
     /**
@@ -4563,7 +4351,7 @@ class PlainGalleryComponent extends AccessibleComponent {
         if (!image) {
             return '';
         }
-        return image.plain && image.plain.description ? image.plain.description : `Image ${getIndex(image, this.images) + 1}`;
+        return image.plain && image.plain.description ? image.plain.description : `Image ${getIndex(image, this.images()) + 1}`;
     }
     /**
      * Method to get the title for an image.
@@ -4578,8 +4366,8 @@ class PlainGalleryComponent extends AccessibleComponent {
         else if (image.modal && image.modal.description) {
             description = image.modal.description;
         }
-        const currentIndex = getIndex(image, this.images);
-        const prevDescription = 'Image ' + (currentIndex + 1) + '/' + this.images.length;
+        const currentIndex = getIndex(image, this.images());
+        const prevDescription = 'Image ' + (currentIndex + 1) + '/' + this.images().length;
         let currImgDescription = description ? description : '';
         if (currImgDescription !== '') {
             currImgDescription = ' - ' + currImgDescription;
@@ -4606,7 +4394,7 @@ class PlainGalleryComponent extends AccessibleComponent {
         this.imageGrid = [];
         if (this.plainGalleryConfig.layout instanceof LineLayout) {
             const layout = this.plainGalleryConfig.layout;
-            const row = this.images.filter((val, i) => i < layout.breakConfig.length || layout.breakConfig.length === -1);
+            const row = this.images().filter((val, i) => i < layout.breakConfig.length || layout.breakConfig.length === -1);
             this.imageGrid = [row];
             this.size = this.plainGalleryConfig.layout.size;
             switch (this.plainGalleryConfig.strategy) {
@@ -4622,37 +4410,31 @@ class PlainGalleryComponent extends AccessibleComponent {
         }
         if (this.plainGalleryConfig.layout instanceof GridLayout) {
             const layout = this.plainGalleryConfig.layout;
-            const count = Math.ceil(this.images.length / layout.breakConfig.length);
+            const count = Math.ceil(this.images().length / layout.breakConfig.length);
             let start = 0;
             let end = layout.breakConfig.length - 1;
             for (let j = 0; j < count; j++) {
-                const row = this.images.filter((val, i) => i >= start && i <= end);
+                const row = this.images().filter((val, i) => i >= start && i <= end);
                 this.imageGrid.push(row);
                 start = end + 1;
                 end = start + layout.breakConfig.length - 1;
             }
             this.size = this.plainGalleryConfig.layout.size;
-            const pixels = +layout.size.width.replace('px', '');
-            this.widthStyle = pixels * layout.breakConfig.length + pixels / 2 + 'px';
+            if (layout.size.width) {
+                const pixels = +(layout.size.width).replace('px', '');
+                this.widthStyle = pixels * layout.breakConfig.length + pixels / 2 + 'px';
+            }
             this.wrapStyle = layout.breakConfig.wrap;
             this.directionStyle = 'row';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PlainGalleryComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PlainGalleryComponent, isStandalone: true, selector: "ks-plain-gallery", inputs: { id: "id", images: "images", config: "config" }, outputs: { clickImage: "clickImage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"plain-container\"\n     ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n     ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n     [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n  @for (imgRow of imageGrid; let i = $index; track i) {\n    @for (imgCol of imgRow; let j = $index; track j) {\n      @if (!plainGalleryConfig?.advanced?.aTags) {\n        @if (imgCol?.modal?.img) {\n          <img [loading]=\"imgCol.loading\"\n               [attr.fetchpriority]=\"imgCol.fetchpriority\"\n               [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n               ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n               class=\"image\"\n               ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n               [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n               [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n               alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\" />\n        }\n      } @else {\n        <!-- Add directive to set background with the image url as param to pass thumb or img-->\n          <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n        @if (imgCol?.modal?.img) {\n          <a class=\"a-tag-image\"\n             ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n             ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n             [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n             [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n             [tabIndex]=\"0\"\n             (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n        }\n      }\n    }\n  }\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"], dependencies: [{ kind: "directive", type: WrapDirective, selector: "[ksWrap]", inputs: ["wrap", "width"] }, { kind: "directive", type: DirectionDirective, selector: "[ksDirection]", inputs: ["direction", "justify"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: ["image", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PlainGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PlainGalleryComponent, isStandalone: true, selector: "ks-plain-gallery", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickImage: "clickImage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"plain-container\"\n     ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n     ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n     [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n  @for (imgRow of imageGrid; let i = $index; track i) {\n    @for (imgCol of imgRow; let j = $index; track j) {\n      @if (!plainGalleryConfig?.advanced?.aTags) {\n        @if (imgCol?.modal?.img) {\n          <img loading=\"{{imgCol.loading}}\"\n               [attr.fetchpriority]=\"imgCol.fetchpriority\"\n               [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n               ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n               class=\"image\"\n               ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n               [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n               [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n               alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\" />\n        }\n      } @else {\n        <!-- Add directive to set background with the image url as param to pass thumb or img-->\n          <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n        @if (imgCol?.modal?.img) {\n          <a class=\"a-tag-image\"\n             ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n             ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n             [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n             [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n             [tabIndex]=\"0\"\n             (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n        }\n      }\n    }\n  }\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"], dependencies: [{ kind: "directive", type: WrapDirective, selector: "[ksWrap]", inputs: ["wrap", "width"] }, { kind: "directive", type: DirectionDirective, selector: "[ksDirection]", inputs: ["direction", "justify"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: ["image", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PlainGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-plain-gallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [WrapDirective, DirectionDirective, FallbackImageDirective, SizeDirective, ATagBgImageDirective], template: "<div class=\"plain-container\"\n     ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n     ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n     [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n  @for (imgRow of imageGrid; let i = $index; track i) {\n    @for (imgCol of imgRow; let j = $index; track j) {\n      @if (!plainGalleryConfig?.advanced?.aTags) {\n        @if (imgCol?.modal?.img) {\n          <img [loading]=\"imgCol.loading\"\n               [attr.fetchpriority]=\"imgCol.fetchpriority\"\n               [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n               ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n               class=\"image\"\n               ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n               [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n               [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n               alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\" />\n        }\n      } @else {\n        <!-- Add directive to set background with the image url as param to pass thumb or img-->\n          <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n        @if (imgCol?.modal?.img) {\n          <a class=\"a-tag-image\"\n             ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n             ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n             [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n             [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n             [tabIndex]=\"0\"\n             (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n        }\n      }\n    }\n  }\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], clickImage: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ks-plain-gallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [WrapDirective, DirectionDirective, FallbackImageDirective, SizeDirective, ATagBgImageDirective], template: "<div class=\"plain-container\"\n     ksWrap [wrap]=\"wrapStyle\" [width]=\"widthStyle\"\n     ksDirection [direction]=\"directionStyle\" [justify]=\"justifyStyle\"\n     [attr.aria-label]=\"accessibilityConfig?.plainGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig?.plainGalleryContentTitle\">\n\n  @for (imgRow of imageGrid; let i = $index; track i) {\n    @for (imgCol of imgRow; let j = $index; track j) {\n      @if (!plainGalleryConfig?.advanced?.aTags) {\n        @if (imgCol?.modal?.img) {\n          <img loading=\"{{imgCol.loading}}\"\n               [attr.fetchpriority]=\"imgCol.fetchpriority\"\n               [src]=\"imgCol.plain?.img! ? imgCol.plain?.img! : imgCol.modal.img\"\n               ksFallbackImage [fallbackImg]=\"imgCol.plain?.fallbackImg ? imgCol.plain?.fallbackImg : imgCol.modal.fallbackImg\"\n               class=\"image\"\n               ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n               [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n               [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n               alt=\"{{imgCol.plain?.alt! ? imgCol.plain?.alt! : getAltPlainDescriptionByImage(imgCol)}}\"\n               [tabIndex]=\"0\" role=\"img\"\n               (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\" />\n        }\n      } @else {\n        <!-- Add directive to set background with the image url as param to pass thumb or img-->\n          <!-- to do something like this <a style=\"background: url('path to image') 50% 50%/cover\">.-->\n        @if (imgCol?.modal?.img) {\n          <a class=\"a-tag-image\"\n             ksATagBgImage [image]=\"imgCol\" [style]=\"plainGalleryConfig?.advanced?.additionalBackground\"\n             ksSize [sizeConfig]=\"{width: size?.width!, height: size?.height!}\"\n             [attr.aria-label]=\"imgCol.plain?.ariaLabel\"\n             [title]=\"(imgCol.plain?.title || imgCol.plain?.title === '') ? imgCol.plain?.title : getTitleDisplay(imgCol)\"\n             [tabIndex]=\"0\"\n             (click)=\"showModalGalleryByImage(imgCol)\" (keyup)=\"onNavigationEvent($event, imgCol)\"></a>\n        }\n      }\n    }\n  }\n\n</div>\n\n", styles: [".plain-container{align-items:center;display:flex}.plain-container .image{cursor:pointer;height:auto;margin:2px;width:50px}.plain-container .a-tag-image{cursor:pointer;margin:2px}\n"] }]
+        }] });
 
 /*
  The MIT License (MIT)
@@ -4679,93 +4461,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  */
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
 
-/*
- The MIT License (MIT)
-
- Copyright (c) 2017-2025 Stefano Cappa (Ks89)
-
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated documentation files (the "Software"), to deal
- in the Software without restriction, including without limitation the rights
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- copies of the Software, and to permit persons to whom the Software is
- furnished to do so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in all
- copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- SOFTWARE.
- */
-/**
- * Directive to close the modal gallery clicking on the semi-transparent background.
- * In fact, it listens for a click on all elements that aren't 'inside' and it emits
- * an event using `@Output clickOutside`.
- */
-class ClickOutsideDirective {
-    constructor() {
-        /**
-         * Output to emit an event if the clicked element class doesn't contain 'inside' or it is 'hidden'. The payload is a boolean.
-         */
-        this.clickOutside = new EventEmitter();
-    }
-    /**
-     * Method called by Angular itself every click thanks to `@HostListener`.
-     * @param event MouseEvent
-     */
-    onClick(event) {
-        event.stopPropagation();
-        // tslint:disable-next-line:no-any
-        const target = event.target;
-        if (!this.clickOutsideEnable || !target) {
-            return;
-        }
-        let isInside = false;
-        let isHidden = false;
-        if (typeof target.className !== 'string') {
-            // it happens with @fortawesome/fontawesome 5
-            // for some reason className is an object with 2 empty properties inside
-            isInside = true;
-        }
-        else {
-            // in normal scenarios, use classname, because it's a simple string
-            isInside = target.className && target.className.includes('inside');
-            isHidden = target.className.includes('hidden');
-        }
-        // if inside => don't close modal gallery
-        // if hidden => close modal gallery
-        /*
-            i i' h | close
-            0 1  0 |   1 => close modal gallery
-            0 1  1 |   1 => close modal gallery
-            1 0  0 |   0
-            1 0  1 |   1 => close modal gallery
-         */
-        if (!isInside || isHidden) {
-            // close modal gallery
-            this.clickOutside.emit(true);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: ClickOutsideDirective, isStandalone: true, selector: "[ksClickOutside]", inputs: { clickOutsideEnable: "clickOutsideEnable" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ksClickOutside]' }]
-        }], propDecorators: { clickOutsideEnable: [{
-                type: Input
-            }], clickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 /*
  The MIT License (MIT)
 
@@ -4835,47 +4530,399 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class ModalGalleryComponent {
+/*
+ The MIT License (MIT)
+
+ Copyright (c) 2017-2025 Stefano Cappa (Ks89)
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+/**
+ * Class that represents the modal dialog instance.
+ * It is returned by the open method.
+ */
+class ModalGalleryRef {
+    constructor(overlayRef) {
+        this.close = new Subject();
+        this.close$ = this.close.asObservable();
+        this.show = new Subject();
+        this.show$ = this.show.asObservable();
+        this.firstImage = new Subject();
+        this.firstImage$ = this.firstImage.asObservable();
+        this.lastImage = new Subject();
+        this.lastImage$ = this.lastImage.asObservable();
+        this.hasData = new Subject();
+        this.hasData$ = this.hasData.asObservable();
+        this.buttonBeforeHook = new Subject();
+        this.buttonBeforeHook$ = this.buttonBeforeHook.asObservable();
+        this.buttonAfterHook = new Subject();
+        this.buttonAfterHook$ = this.buttonAfterHook.asObservable();
+        this.overlayRef = overlayRef;
+    }
     /**
-     * HostListener to catch the browser back button and destroy the gallery.
-     * This prevents unexpected behavior about scrolling.
-     * Added to fix this issue: https://github.com/Ks89/angular-modal-gallery/issues/159
+     * Close modal dialog, disposing the Overlay.
      */
-    onPopState() {
-        this.closeGallery();
+    closeModal() {
+        this.overlayRef.dispose();
     }
     /**
-     * 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
+     * Method to emit close event.
+     * @param event ImageModalEvent event payload
      */
-    onSaveListener(event) {
-        event.preventDefault();
-        this.downloadImage();
+    emitClose(event) {
+        this.close.next(event);
     }
-    constructor(dialogContent, modalGalleryService, 
-    // tslint:disable-next-line:ban-types
-    platformId, changeDetectorRef, idValidatorService, configService, sanitizer) {
-        this.dialogContent = dialogContent;
-        this.modalGalleryService = modalGalleryService;
-        this.platformId = platformId;
-        this.changeDetectorRef = changeDetectorRef;
-        this.idValidatorService = idValidatorService;
-        this.configService = configService;
-        this.sanitizer = sanitizer;
-        /**
-         * Boolean to enable modal-gallery close behaviour when clicking
-         * on the semi-transparent background. Enabled by default.
-         */
-        this.enableCloseOutside = true;
-        /**
-         * Object of type `AccessibilityConfig` to init custom accessibility features.
-         * For instance, it contains titles, alt texts, aria-labels and so on.
-         */
-        this.accessibilityConfig = KS_DEFAULT_ACCESSIBILITY_CONFIG;
-        /**
-         * Boolean to open the modal gallery. False by default.
+    /**
+     * Method to emit show event.
+     * @param event ImageModalEvent event payload
+     */
+    emitShow(event) {
+        this.show.next(event);
+    }
+    /**
+     * Method to emit firstImage event.
+     * @param event ImageModalEvent event payload
+     */
+    emitFirstImage(event) {
+        this.firstImage.next(event);
+    }
+    /**
+     * Method to emit lastImage event.
+     * @param event ImageModalEvent event payload
+     */
+    emitLastImage(event) {
+        this.lastImage.next(event);
+    }
+    /**
+     * Method to emit hasData event.
+     * @param event ImageModalEvent event payload
+     */
+    emitHasData(event) {
+        this.hasData.next(event);
+    }
+    /**
+     * Method to emit buttonBeforeHook event.
+     * @param event ImageModalEvent event payload
+     */
+    emitButtonBeforeHook(event) {
+        this.buttonBeforeHook.next(event);
+    }
+    /**
+     * Method to emit buttonAfterHook event.
+     * @param event ImageModalEvent event payload
+     */
+    emitButtonAfterHook(event) {
+        this.buttonAfterHook.next(event);
+    }
+}
+
+const DEFAULT_DIALOG_CONFIG = {
+    hasBackdrop: true,
+    backdropClass: 'ks-modal-gallery-backdrop',
+    panelClass: 'ks-modal-gallery-panel'
+};
+class ModalGalleryService {
+    constructor() {
+        this.updateImages = new Subject();
+        this.updateImages$ = this.updateImages.asObservable();
+        this.triggerAttachToOverlay = new EventEmitter();
+        this.overlay = inject(Overlay);
+        this.configService = inject(ConfigService);
+    }
+    /**
+     * Method to open modal gallery passing the configuration
+     * @param config ModalGalleryConfig that contains: id, array of images, current image and optionally the configuration object
+     * @return ModalGalleryRef | undefined is the object used to listen for events.
+     */
+    open(config) {
+        // Returns an OverlayRef which is a PortalHost
+        const overlayRef = this.createOverlay();
+        // Instantiate a reference to the dialog
+        this.dialogRef = new ModalGalleryRef(overlayRef);
+        // Attach dialog container
+        this.triggerAttachToOverlay.emit({
+            overlayRef,
+            config,
+            dialogRef: this.dialogRef
+        });
+        overlayRef.backdropClick().subscribe(() => {
+            if (this.dialogRef) {
+                this.dialogRef.closeModal();
+            }
+        });
+        return this.dialogRef;
+    }
+    /**
+     * Method to close a modal gallery previously opened.
+     * @param id Unique identifier of the modal gallery
+     * @param clickOutside boolean is true if closed clicking on the modal backdrop, false otherwise.
+     */
+    close(id, clickOutside) {
+        const libConfig = this.configService.getConfig(id);
+        if (clickOutside) {
+            if (this.dialogRef && libConfig && libConfig.enableCloseOutside) {
+                this.dialogRef.closeModal();
+            }
+        }
+        else {
+            if (this.dialogRef) {
+                this.dialogRef.closeModal();
+            }
+        }
+    }
+    /**
+     * Method to update images array.
+     * @param images Image[] updated array of images
+     */
+    updateModalImages(images) {
+        this.updateImages.next(images);
+    }
+    /**
+     * Method to emit close event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitClose(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitClose(event);
+    }
+    /**
+     * Method to emit show event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitShow(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitShow(event);
+    }
+    /**
+     * Method to emit firstImage event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitFirstImage(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitFirstImage(event);
+    }
+    /**
+     * Method to emit lastImage event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitLastImage(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitLastImage(event);
+    }
+    /**
+     * Method to emit hasData event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitHasData(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitHasData(event);
+    }
+    /**
+     * Method to emit buttonBeforeHook event.
+     * @param event ButtonEvent is the event payload
+     */
+    emitButtonBeforeHook(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitButtonBeforeHook(event);
+    }
+    /**
+     * Method to emit buttonAfterHook event.
+     * @param event ButtonEvent is the event payload
+     */
+    emitButtonAfterHook(event) {
+        if (!this.dialogRef) {
+            return;
+        }
+        this.dialogRef.emitButtonAfterHook(event);
+    }
+    /**
+     * Private method to create an Overlay using Angular CDK APIs
+     * @private
+     */
+    createOverlay() {
+        const overlayConfig = this.getOverlayConfig();
+        return this.overlay.create(overlayConfig);
+    }
+    /**
+     * Private method to create an OverlayConfig instance
+     * @private
+     */
+    getOverlayConfig() {
+        const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
+        return new OverlayConfig({
+            hasBackdrop: DEFAULT_DIALOG_CONFIG.hasBackdrop,
+            backdropClass: DEFAULT_DIALOG_CONFIG.backdropClass,
+            panelClass: DEFAULT_DIALOG_CONFIG.panelClass,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ The MIT License (MIT)
+
+ Copyright (c) 2017-2025 Stefano Cappa (Ks89)
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+/**
+ * Directive to close the modal gallery clicking on the semi-transparent background.
+ * In fact, it listens for a click on all elements that aren't 'inside' and it emits
+ * an event using `@Output clickOutside`.
+ */
+class ClickOutsideDirective {
+    constructor() {
+        /**
+         * Boolean to enable this directive.
+         */
+        this.clickOutsideEnable = input(...(ngDevMode ? [undefined, { debugName: "clickOutsideEnable" }] : []));
+        /**
+         * Output to emit an event if the clicked element class doesn't contain 'inside' or it is 'hidden'. The payload is a boolean.
+         */
+        this.clickOutside = output();
+    }
+    /**
+     * Method called by Angular itself every click thanks to `@HostListener`.
+     * @param event MouseEvent
+     */
+    onClick(event) {
+        event.stopPropagation();
+        // tslint:disable-next-line:no-any
+        const target = event.target;
+        if (!this.clickOutsideEnable() || !target) {
+            return;
+        }
+        let isInside = false;
+        let isHidden = false;
+        if (typeof target.className !== 'string') {
+            // it happens with @fortawesome/fontawesome 5
+            // for some reason className is an object with 2 empty properties inside
+            isInside = true;
+        }
+        else {
+            // in normal scenarios, use classname, because it's a simple string
+            isInside = target.className && target.className.includes('inside');
+            isHidden = target.className.includes('hidden');
+        }
+        // if inside => don't close modal gallery
+        // if hidden => close modal gallery
+        /*
+            i i' h | close
+            0 1  0 |   1 => close modal gallery
+            0 1  1 |   1 => close modal gallery
+            1 0  0 |   0
+            1 0  1 |   1 => close modal gallery
+         */
+        if (!isInside || isHidden) {
+            // close modal gallery
+            this.clickOutside.emit(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: ClickOutsideDirective, isStandalone: true, selector: "[ksClickOutside]", inputs: { clickOutsideEnable: { classPropertyName: "clickOutsideEnable", publicName: "clickOutsideEnable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ksClickOutside]' }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class ModalGalleryComponent {
+    /**
+     * HostListener to catch the browser back button and destroy the gallery.
+     * This prevents unexpected behavior about scrolling.
+     * Added to fix this issue: https://github.com/Ks89/angular-modal-gallery/issues/159
+     */
+    onPopState() {
+        this.closeGallery();
+    }
+    /**
+     * 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) {
+        event.preventDefault();
+        this.downloadImage();
+    }
+    constructor() {
+        /**
+         * Reference to the CurrentImageComponent to invoke methods on it.
+         */
+        this.currentImageComponent = viewChild(CurrentImageComponent, ...(ngDevMode ? [{ debugName: "currentImageComponent" }] : []));
+        /**
+         * Boolean to enable modal-gallery close behaviour when clicking
+         * on the semi-transparent background. Enabled by default.
+         */
+        this.enableCloseOutside = true;
+        /**
+         * Object of type `AccessibilityConfig` to init custom accessibility features.
+         * For instance, it contains titles, alt texts, aria-labels and so on.
+         */
+        this.accessibilityConfig = KS_DEFAULT_ACCESSIBILITY_CONFIG;
+        /**
+         * Boolean to open the modal gallery. False by default.
          */
         this.showGallery = false;
+        this.dialogContent = inject(DIALOG_DATA);
+        this.platformId = inject(PLATFORM_ID);
+        this.modalGalleryService = inject(ModalGalleryService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.idValidatorService = inject(IdValidatorService);
+        this.sanitizer = inject(DomSanitizer);
+        this.configService = inject(ConfigService);
         this.id = this.dialogContent.id;
         this.images = this.dialogContent.images;
         this.currentImage = this.dialogContent.currentImage;
@@ -4913,6 +4960,7 @@ class ModalGalleryComponent {
             throw new Error('Internal library error - libConfig and dotsConfig must be defined');
         }
         this.dotsConfig = libConfig.dotsConfig;
+        this.buttonsConfig = libConfig.buttonsConfig;
         setTimeout(() => {
             this.initImages();
         }, 0);
@@ -4982,16 +5030,17 @@ class ModalGalleryComponent {
         if (this.images.length === 1) {
             this.closeGallery();
         }
-        if (!this.currentImageComponent) {
+        const currentImageComponent = this.currentImageComponent();
+        if (!currentImageComponent) {
             throw new Error('currentImageComponent must be defined');
         }
-        const imageIndexToDelete = this.currentImageComponent.getIndexToDelete(event.image);
+        const imageIndexToDelete = currentImageComponent.getIndexToDelete(event.image);
         if (imageIndexToDelete === this.images.length - 1) {
             // last image
-            this.currentImageComponent.prevImage();
+            currentImageComponent.prevImage();
         }
         else {
-            this.currentImageComponent.nextImage();
+            currentImageComponent.nextImage();
         }
         this.modalGalleryService.emitButtonAfterHook(eventToEmit);
     }
@@ -5290,22 +5339,13 @@ class ModalGalleryComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryComponent, deps: [{ token: DIALOG_DATA }, { token: ModalGalleryService }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: IdValidatorService }, { token: ConfigService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ModalGalleryComponent, isStandalone: true, selector: "ks-modal-gallery", host: { listeners: { "window:popstate": "onPopState()", "document:keydown.code.control.keyS": "onSaveListener($event)", "document:keydown.code.meta.keyS": "onSaveListener($event)" } }, viewQueries: [{ propertyName: "currentImageComponent", first: true, predicate: CurrentImageComponent, descendants: true, static: true }], ngImport: i0, template: "<div id=\"modal-gallery-wrapper\"\n     [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n     ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n     (clickOutside)=\"onClickOutside($event)\">\n\n  <div id=\"flex-min-height-ie-fix\">\n    <div id=\"modal-gallery-container\">\n\n      <ks-upper-buttons [id]=\"id\"\n                        [currentImage]=\"currentImage\"\n                        (delete)=\"onDelete($event)\"\n                        (navigate)=\"onNavigate($event)\"\n                        (download)=\"onDownload($event)\"\n                        (closeButton)=\"onCloseGalleryButton($event)\"\n                        (fullscreen)=\"onFullScreen($event)\"\n                        (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n      <ks-current-image [id]=\"id\"\n                        [images]=\"images\"\n                        [currentImage]=\"currentImage\"\n                        [isOpen]=\"true\"\n                        (loadImage)=\"onImageLoad($event)\"\n                        (changeImage)=\"onChangeCurrentImage($event)\"\n                        (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n      <div>\n        <ks-dots [id]=\"id\"\n                 [images]=\"images\"\n                 [currentImage]=\"currentImage\"\n                 [dotsConfig]=\"dotsConfig\"\n                 (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n        <ks-previews [id]=\"id\"\n                     [images]=\"images\"\n                     [currentImage]=\"currentImage\"\n                     [customTemplate]=\"customPreviewsTemplate\"\n                     (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"], dependencies: [{ kind: "directive", type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: ["clickOutsideEnable"], outputs: ["clickOutside"] }, { kind: "component", type: UpperButtonsComponent, selector: "ks-upper-buttons", inputs: ["id", "currentImage"], outputs: ["refresh", "delete", "navigate", "download", "closeButton", "fullscreen", "customEmit"] }, { kind: "component", type: CurrentImageComponent, selector: "ks-current-image", inputs: ["id", "currentImage", "images", "isOpen"], outputs: ["loadImage", "changeImage", "closeGallery"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { kind: "component", type: PreviewsComponent, selector: "ks-previews", inputs: ["id", "currentImage", "images", "customTemplate"], outputs: ["clickPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: ModalGalleryComponent, isStandalone: true, selector: "ks-modal-gallery", host: { listeners: { "window:popstate": "onPopState()", "document:keydown.code.control.keyS": "onSaveListener($event)", "document:keydown.code.meta.keyS": "onSaveListener($event)" } }, viewQueries: [{ propertyName: "currentImageComponent", first: true, predicate: CurrentImageComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"modal-gallery-wrapper\"\n     [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n     ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n     (clickOutside)=\"onClickOutside($event)\">\n\n  <div id=\"flex-min-height-ie-fix\">\n    <div id=\"modal-gallery-container\">\n\n      <ks-upper-buttons [id]=\"id\"\n                        [currentImage]=\"currentImage\"\n                        [buttonsConfig]=\"buttonsConfig\"\n                        (delete)=\"onDelete($event)\"\n                        (navigate)=\"onNavigate($event)\"\n                        (download)=\"onDownload($event)\"\n                        (closeButton)=\"onCloseGalleryButton($event)\"\n                        (fullscreen)=\"onFullScreen($event)\"\n                        (customEmit)=\"onCustomEmit($event)\" />\n\n      <ks-current-image [id]=\"id\"\n                        [images]=\"images\"\n                        [currentImage]=\"currentImage\"\n                        [isOpen]=\"true\"\n                        (loadImage)=\"onImageLoad($event)\"\n                        (changeImage)=\"onChangeCurrentImage($event)\"\n                        (closeGallery)=\"onCloseGallery($event)\" />\n\n      <div>\n        <ks-dots [id]=\"id\"\n                 [images]=\"images\"\n                 [currentImage]=\"currentImage\"\n                 [dotsConfig]=\"dotsConfig\"\n                 [accessibilityConfig]=\"accessibilityConfig\"\n                 (clickDot)=\"onClickDot($event)\" />\n\n        <ks-previews [id]=\"id\"\n                     [images]=\"images\"\n                     [currentImage]=\"currentImage\"\n                     [customTemplate]=\"customPreviewsTemplate\"\n                     (clickPreview)=\"onClickPreview($event)\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"], dependencies: [{ kind: "directive", type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: ["clickOutsideEnable"], outputs: ["clickOutside"] }, { kind: "component", type: UpperButtonsComponent, selector: "ks-upper-buttons", inputs: ["id", "currentImage", "buttonsConfig"], outputs: ["refresh", "delete", "navigate", "download", "closeButton", "fullscreen", "customEmit"] }, { kind: "component", type: CurrentImageComponent, selector: "ks-current-image", inputs: ["id", "currentImage", "images", "isOpen"], outputs: ["loadImage", "changeImage", "closeGallery"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig", "accessibilityConfig"], outputs: ["clickDot"] }, { kind: "component", type: PreviewsComponent, selector: "ks-previews", inputs: ["id", "currentImage", "images", "customTemplate"], outputs: ["clickPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ModalGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ks-modal-gallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClickOutsideDirective, UpperButtonsComponent, CurrentImageComponent, DotsComponent, PreviewsComponent], template: "<div id=\"modal-gallery-wrapper\"\n     [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n     ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n     (clickOutside)=\"onClickOutside($event)\">\n\n  <div id=\"flex-min-height-ie-fix\">\n    <div id=\"modal-gallery-container\">\n\n      <ks-upper-buttons [id]=\"id\"\n                        [currentImage]=\"currentImage\"\n                        (delete)=\"onDelete($event)\"\n                        (navigate)=\"onNavigate($event)\"\n                        (download)=\"onDownload($event)\"\n                        (closeButton)=\"onCloseGalleryButton($event)\"\n                        (fullscreen)=\"onFullScreen($event)\"\n                        (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n      <ks-current-image [id]=\"id\"\n                        [images]=\"images\"\n                        [currentImage]=\"currentImage\"\n                        [isOpen]=\"true\"\n                        (loadImage)=\"onImageLoad($event)\"\n                        (changeImage)=\"onChangeCurrentImage($event)\"\n                        (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n      <div>\n        <ks-dots [id]=\"id\"\n                 [images]=\"images\"\n                 [currentImage]=\"currentImage\"\n                 [dotsConfig]=\"dotsConfig\"\n                 (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n        <ks-previews [id]=\"id\"\n                     [images]=\"images\"\n                     [currentImage]=\"currentImage\"\n                     [customTemplate]=\"customPreviewsTemplate\"\n                     (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }, { type: ModalGalleryService }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ChangeDetectorRef }, { type: IdValidatorService }, { type: ConfigService }, { type: i2.DomSanitizer }], propDecorators: { currentImageComponent: [{
-                type: ViewChild,
-                args: [CurrentImageComponent, { static: true }]
-            }], onPopState: [{
+            args: [{ selector: 'ks-modal-gallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClickOutsideDirective, UpperButtonsComponent, CurrentImageComponent, DotsComponent, PreviewsComponent], template: "<div id=\"modal-gallery-wrapper\"\n     [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n     [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n     ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n     (clickOutside)=\"onClickOutside($event)\">\n\n  <div id=\"flex-min-height-ie-fix\">\n    <div id=\"modal-gallery-container\">\n\n      <ks-upper-buttons [id]=\"id\"\n                        [currentImage]=\"currentImage\"\n                        [buttonsConfig]=\"buttonsConfig\"\n                        (delete)=\"onDelete($event)\"\n                        (navigate)=\"onNavigate($event)\"\n                        (download)=\"onDownload($event)\"\n                        (closeButton)=\"onCloseGalleryButton($event)\"\n                        (fullscreen)=\"onFullScreen($event)\"\n                        (customEmit)=\"onCustomEmit($event)\" />\n\n      <ks-current-image [id]=\"id\"\n                        [images]=\"images\"\n                        [currentImage]=\"currentImage\"\n                        [isOpen]=\"true\"\n                        (loadImage)=\"onImageLoad($event)\"\n                        (changeImage)=\"onChangeCurrentImage($event)\"\n                        (closeGallery)=\"onCloseGallery($event)\" />\n\n      <div>\n        <ks-dots [id]=\"id\"\n                 [images]=\"images\"\n                 [currentImage]=\"currentImage\"\n                 [dotsConfig]=\"dotsConfig\"\n                 [accessibilityConfig]=\"accessibilityConfig\"\n                 (clickDot)=\"onClickDot($event)\" />\n\n        <ks-previews [id]=\"id\"\n                     [images]=\"images\"\n                     [currentImage]=\"currentImage\"\n                     [customTemplate]=\"customPreviewsTemplate\"\n                     (clickPreview)=\"onClickPreview($event)\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onPopState: [{
                 type: HostListener,
                 args: ['window:popstate']
             }], onSaveListener: [{
@@ -5382,9 +5422,25 @@ const COMPONENTS = [
  * Directive to change margins of an element.
  */
 class MarginDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
+    constructor() {
+        /**
+         * String to set the margin of an element.
+         */
+        this.marginLeft = input(...(ngDevMode ? [undefined, { debugName: "marginLeft" }] : []));
+        /**
+         * String to set the margin of an element.
+         */
+        this.marginRight = input(...(ngDevMode ? [undefined, { debugName: "marginRight" }] : []));
+        /**
+         * String to set the margin of an element.
+         */
+        this.marginTop = input(...(ngDevMode ? [undefined, { debugName: "marginTop" }] : []));
+        /**
+         * String to set the margin of an element.
+         */
+        this.marginBottom = input(...(ngDevMode ? [undefined, { debugName: "marginBottom" }] : []));
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     /**
      * Method ´ngOnInit´ to apply the style of this directive.
@@ -5406,34 +5462,30 @@ class MarginDirective {
      * Private method to change both width and height of an element.
      */
     applyStyle() {
-        if (this.marginLeft) {
-            this.renderer.setStyle(this.el.nativeElement, 'margin-left', this.marginLeft);
+        const marginLeft = this.marginLeft();
+        if (marginLeft) {
+            this.renderer.setStyle(this.el.nativeElement, 'margin-left', marginLeft);
         }
-        if (this.marginRight) {
-            this.renderer.setStyle(this.el.nativeElement, 'margin-right', this.marginRight);
+        const marginRight = this.marginRight();
+        if (marginRight) {
+            this.renderer.setStyle(this.el.nativeElement, 'margin-right', marginRight);
         }
-        if (this.marginTop) {
-            this.renderer.setStyle(this.el.nativeElement, 'margin-top', this.marginTop);
+        const marginTop = this.marginTop();
+        if (marginTop) {
+            this.renderer.setStyle(this.el.nativeElement, 'margin-top', marginTop);
         }
-        if (this.marginBottom) {
-            this.renderer.setStyle(this.el.nativeElement, 'margin-bottom', this.marginBottom);
+        const marginBottom = this.marginBottom();
+        if (marginBottom) {
+            this.renderer.setStyle(this.el.nativeElement, 'margin-bottom', marginBottom);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MarginDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: MarginDirective, isStandalone: true, selector: "[ksMargin]", inputs: { marginLeft: "marginLeft", marginRight: "marginRight", marginTop: "marginTop", marginBottom: "marginBottom" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MarginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: MarginDirective, isStandalone: true, selector: "[ksMargin]", inputs: { marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MarginDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ksMargin]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { marginLeft: [{
-                type: Input
-            }], marginRight: [{
-                type: Input
-            }], marginTop: [{
-                type: Input
-            }], marginBottom: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  The MIT License (MIT)
@@ -5476,9 +5528,9 @@ const DIRECTIVES = [
 ];
 
 class AttachToOverlayService {
-    constructor(injector, modalGalleryService) {
-        this.injector = injector;
-        this.modalGalleryService = modalGalleryService;
+    constructor() {
+        this.injector = inject(Injector);
+        this.modalGalleryService = inject(ModalGalleryService);
     }
     /**
      * To be called by a provider with the APP_INITIALIZER token.
@@ -5502,13 +5554,13 @@ class AttachToOverlayService {
         const containerPortal = new ComponentPortal(ModalGalleryComponent, null, injector);
         payload.overlayRef.attach(containerPortal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AttachToOverlayService, deps: [{ token: i0.Injector }, { token: ModalGalleryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AttachToOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AttachToOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AttachToOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: ModalGalleryService }] });
+        }] });
 
 /*
  The MIT License (MIT)