@ks89/angular-modal-gallery 11.1.1 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/CONTRIBUTING.md +17 -18
- package/LICENSE +1 -1
- package/README.md +10 -6
- package/esm2022/lib/components/accessible.component.mjs +7 -8
- package/esm2022/lib/components/carousel/carousel-previews/carousel-previews.component.mjs +8 -9
- package/esm2022/lib/components/carousel/carousel.component.mjs +9 -10
- package/esm2022/lib/components/components.mjs +2 -2
- package/esm2022/lib/components/current-image/current-image.component.mjs +9 -10
- package/esm2022/lib/components/current-image/loading-spinner/loading-spinner.component.mjs +7 -8
- package/esm2022/lib/components/dots/dots.component.mjs +7 -8
- package/esm2022/lib/components/modal-gallery/attach-to-overlay.service.mjs +6 -7
- package/esm2022/lib/components/modal-gallery/modal-gallery-ref.mjs +2 -2
- package/esm2022/lib/components/modal-gallery/modal-gallery.component.mjs +7 -8
- package/esm2022/lib/components/modal-gallery/modal-gallery.service.mjs +6 -7
- package/esm2022/lib/components/modal-gallery/modal-gallery.tokens.mjs +2 -2
- package/esm2022/lib/components/plain-gallery/plain-gallery.component.mjs +8 -9
- package/esm2022/lib/components/previews/previews.component.mjs +8 -9
- package/esm2022/lib/components/upper-buttons/upper-buttons.component.mjs +7 -8
- package/esm2022/lib/directives/a-tag-bg-image.directive.mjs +7 -8
- package/esm2022/lib/directives/click-outside.directive.mjs +6 -7
- package/esm2022/lib/directives/description.directive.mjs +7 -8
- package/esm2022/lib/directives/direction.directive.mjs +7 -8
- package/esm2022/lib/directives/directives.mjs +2 -2
- package/esm2022/lib/directives/fallback-image.directive.mjs +7 -8
- package/esm2022/lib/directives/keyboard-navigation.directive.mjs +6 -7
- package/esm2022/lib/directives/margin.directive.mjs +7 -8
- package/esm2022/lib/directives/max-size.directive.mjs +7 -8
- package/esm2022/lib/directives/size.directive.mjs +7 -8
- package/esm2022/lib/directives/swipe.directive.mjs +6 -7
- package/esm2022/lib/directives/wrap.directive.mjs +7 -8
- package/esm2022/lib/modal-gallery.module.mjs +7 -8
- package/esm2022/lib/model/accessibility.interface.mjs +2 -2
- package/esm2022/lib/model/action.enum.mjs +2 -2
- package/esm2022/lib/model/buttons-config.interface.mjs +2 -2
- package/esm2022/lib/model/carousel-config.interface.mjs +2 -2
- package/esm2022/lib/model/carousel-image-config.interface.mjs +2 -2
- package/esm2022/lib/model/carousel-preview-config.interface.mjs +2 -2
- package/esm2022/lib/model/current-image-config.interface.mjs +2 -2
- package/esm2022/lib/model/description.interface.mjs +2 -2
- package/esm2022/lib/model/dots-config.interface.mjs +2 -2
- package/esm2022/lib/model/image-internal.class.mjs +2 -2
- package/esm2022/lib/model/image.class.mjs +2 -2
- package/esm2022/lib/model/keyboard-config.interface.mjs +2 -2
- package/esm2022/lib/model/keyboard.enum.mjs +2 -2
- package/esm2022/lib/model/lib-config.interface.mjs +2 -2
- package/esm2022/lib/model/loading-config.interface.mjs +2 -2
- package/esm2022/lib/model/max-size.interface.mjs +2 -2
- package/esm2022/lib/model/modal-gallery-config.interface.mjs +2 -2
- package/esm2022/lib/model/plain-gallery-config.interface.mjs +2 -2
- package/esm2022/lib/model/play-config.interface.mjs +2 -2
- package/esm2022/lib/model/preview-config.interface.mjs +2 -2
- package/esm2022/lib/model/size.interface.mjs +2 -2
- package/esm2022/lib/model/slide-config.interface.mjs +2 -2
- package/esm2022/lib/services/config.service.mjs +7 -8
- package/esm2022/lib/services/id-validator.service.mjs +6 -7
- package/esm2022/lib/utils/image.util.mjs +2 -2
- package/esm2022/lib/utils/user-input.util.mjs +2 -2
- package/esm2022/public-api.mjs +2 -2
- package/fesm2022/ks89-angular-modal-gallery.mjs +145 -145
- package/fesm2022/ks89-angular-modal-gallery.mjs.map +1 -1
- package/lib/model/action.enum.d.ts +2 -2
- package/package.json +9 -9
|
@@ -14,7 +14,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
|
|
|
14
14
|
/*
|
|
15
15
|
The MIT License (MIT)
|
|
16
16
|
|
|
17
|
-
Copyright (
|
|
17
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
18
18
|
|
|
19
19
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
20
20
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -118,7 +118,7 @@ const NOTHING = 0;
|
|
|
118
118
|
/*
|
|
119
119
|
The MIT License (MIT)
|
|
120
120
|
|
|
121
|
-
Copyright (
|
|
121
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
122
122
|
|
|
123
123
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
124
124
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -230,22 +230,22 @@ class AccessibleComponent {
|
|
|
230
230
|
}
|
|
231
231
|
return NOTHING;
|
|
232
232
|
}
|
|
233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccessibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: AccessibleComponent, selector: "ks-accessible", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
235
235
|
}
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccessibleComponent, decorators: [{
|
|
237
237
|
type: Component,
|
|
238
238
|
args: [{
|
|
239
239
|
selector: 'ks-accessible',
|
|
240
240
|
template: ``,
|
|
241
241
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
242
242
|
}]
|
|
243
|
-
}], ctorParameters:
|
|
243
|
+
}], ctorParameters: () => [] });
|
|
244
244
|
|
|
245
245
|
/*
|
|
246
246
|
The MIT License (MIT)
|
|
247
247
|
|
|
248
|
-
Copyright (
|
|
248
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
249
249
|
|
|
250
250
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
251
251
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -301,7 +301,7 @@ class ImageModalEvent extends ImageEvent {
|
|
|
301
301
|
/*
|
|
302
302
|
The MIT License (MIT)
|
|
303
303
|
|
|
304
|
-
Copyright (
|
|
304
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
305
305
|
|
|
306
306
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
307
307
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -337,7 +337,7 @@ var Action;
|
|
|
337
337
|
/*
|
|
338
338
|
The MIT License (MIT)
|
|
339
339
|
|
|
340
|
-
Copyright (
|
|
340
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
341
341
|
|
|
342
342
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
343
343
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -385,7 +385,7 @@ function getIndex(image, arrayOfImages) {
|
|
|
385
385
|
/*
|
|
386
386
|
The MIT License (MIT)
|
|
387
387
|
|
|
388
|
-
Copyright (
|
|
388
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
389
389
|
|
|
390
390
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
391
391
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -459,7 +459,7 @@ const KS_DEFAULT_ACCESSIBILITY_CONFIG = {
|
|
|
459
459
|
/*
|
|
460
460
|
The MIT License (MIT)
|
|
461
461
|
|
|
462
|
-
Copyright (
|
|
462
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
463
463
|
|
|
464
464
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
465
465
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -521,7 +521,7 @@ const WHITELIST_BUTTON_TYPES = [
|
|
|
521
521
|
/*
|
|
522
522
|
The MIT License (MIT)
|
|
523
523
|
|
|
524
|
-
Copyright (
|
|
524
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
525
525
|
|
|
526
526
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
527
527
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -576,7 +576,7 @@ var PlainGalleryStrategy;
|
|
|
576
576
|
/*
|
|
577
577
|
The MIT License (MIT)
|
|
578
578
|
|
|
579
|
-
Copyright (
|
|
579
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
580
580
|
|
|
581
581
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
582
582
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -613,7 +613,7 @@ var LoadingType;
|
|
|
613
613
|
/*
|
|
614
614
|
The MIT License (MIT)
|
|
615
615
|
|
|
616
|
-
Copyright (
|
|
616
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
617
617
|
|
|
618
618
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
619
619
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -717,7 +717,7 @@ const DEFAULT_CONFIG = Object.freeze({
|
|
|
717
717
|
dotsConfig: { visible: true },
|
|
718
718
|
plainGalleryConfig: DEFAULT_PLAIN_CONFIG,
|
|
719
719
|
currentImageConfig: DEFAULT_CURRENT_IMAGE_CONFIG,
|
|
720
|
-
keyboardConfig: undefined,
|
|
720
|
+
keyboardConfig: undefined, // by default nothing, because the library uses default buttons automatically
|
|
721
721
|
carouselConfig: DEFAULT_CURRENT_CAROUSEL_CONFIG,
|
|
722
722
|
carouselImageConfig: DEFAULT_CAROUSEL_IMAGE_CONFIG,
|
|
723
723
|
carouselPreviewsConfig: DEFAULT_CAROUSEL_PREVIEWS_CONFIG,
|
|
@@ -955,10 +955,10 @@ class ConfigService {
|
|
|
955
955
|
this.configMap.set(id, DEFAULT_CONFIG);
|
|
956
956
|
}
|
|
957
957
|
}
|
|
958
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
959
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
959
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ConfigService, providedIn: 'root' }); }
|
|
960
960
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ConfigService, decorators: [{
|
|
962
962
|
type: Injectable,
|
|
963
963
|
args: [{ providedIn: 'root' }]
|
|
964
964
|
}] });
|
|
@@ -994,7 +994,7 @@ function initPlainGalleryConfig(plainGalleryConfig) {
|
|
|
994
994
|
/*
|
|
995
995
|
The MIT License (MIT)
|
|
996
996
|
|
|
997
|
-
Copyright (
|
|
997
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
998
998
|
|
|
999
999
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1000
1000
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1246,18 +1246,18 @@ class ModalGalleryService {
|
|
|
1246
1246
|
positionStrategy
|
|
1247
1247
|
});
|
|
1248
1248
|
}
|
|
1249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1250
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1249
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ModalGalleryService, deps: [{ token: i1.Overlay }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1250
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ModalGalleryService, providedIn: 'root' }); }
|
|
1251
1251
|
}
|
|
1252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ModalGalleryService, decorators: [{
|
|
1253
1253
|
type: Injectable,
|
|
1254
1254
|
args: [{ providedIn: 'root' }]
|
|
1255
|
-
}], ctorParameters:
|
|
1255
|
+
}], ctorParameters: () => [{ type: i1.Overlay }, { type: ConfigService }] });
|
|
1256
1256
|
|
|
1257
1257
|
/*
|
|
1258
1258
|
The MIT License (MIT)
|
|
1259
1259
|
|
|
1260
|
-
Copyright (
|
|
1260
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
1261
1261
|
|
|
1262
1262
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1263
1263
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1316,22 +1316,22 @@ class SizeDirective {
|
|
|
1316
1316
|
this.renderer.setStyle(this.el.nativeElement, 'height', this.sizeConfig.height);
|
|
1317
1317
|
}
|
|
1318
1318
|
}
|
|
1319
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1320
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1320
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SizeDirective, selector: "[ksSize]", inputs: { sizeConfig: "sizeConfig" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1321
1321
|
}
|
|
1322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SizeDirective, decorators: [{
|
|
1323
1323
|
type: Directive,
|
|
1324
1324
|
args: [{
|
|
1325
1325
|
selector: '[ksSize]'
|
|
1326
1326
|
}]
|
|
1327
|
-
}], ctorParameters:
|
|
1327
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { sizeConfig: [{
|
|
1328
1328
|
type: Input
|
|
1329
1329
|
}] } });
|
|
1330
1330
|
|
|
1331
1331
|
/*
|
|
1332
1332
|
The MIT License (MIT)
|
|
1333
1333
|
|
|
1334
|
-
Copyright (
|
|
1334
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
1335
1335
|
|
|
1336
1336
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1337
1337
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1368,15 +1368,15 @@ class FallbackImageDirective {
|
|
|
1368
1368
|
this.renderer.setAttribute(this.el.nativeElement, 'src', this.fallbackImg.toString());
|
|
1369
1369
|
this.fallbackApplied.emit(true);
|
|
1370
1370
|
}
|
|
1371
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1372
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FallbackImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1372
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: { fallbackImg: "fallbackImg" }, outputs: { fallbackApplied: "fallbackApplied" }, host: { listeners: { "error": "onError()" } }, ngImport: i0 }); }
|
|
1373
1373
|
}
|
|
1374
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FallbackImageDirective, decorators: [{
|
|
1375
1375
|
type: Directive,
|
|
1376
1376
|
args: [{
|
|
1377
1377
|
selector: '[ksFallbackImage]'
|
|
1378
1378
|
}]
|
|
1379
|
-
}], ctorParameters:
|
|
1379
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { fallbackImg: [{
|
|
1380
1380
|
type: Input
|
|
1381
1381
|
}], fallbackApplied: [{
|
|
1382
1382
|
type: Output
|
|
@@ -1388,7 +1388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1388
1388
|
/*
|
|
1389
1389
|
The MIT License (MIT)
|
|
1390
1390
|
|
|
1391
|
-
Copyright (
|
|
1391
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
1392
1392
|
|
|
1393
1393
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1394
1394
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1806,13 +1806,13 @@ class CarouselPreviewsComponent extends AccessibleComponent {
|
|
|
1806
1806
|
isPreventSliding(boundaryIndex) {
|
|
1807
1807
|
return getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
1808
1808
|
}
|
|
1809
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CarouselPreviewsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.BreakpointObserver }, { token: i2.DomSanitizer }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1810
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CarouselPreviewsComponent, 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: "<nav *ngIf=\"previewConfig?.visible\"\n 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 <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n [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 </ng-container>\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\n</nav>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1811
1811
|
}
|
|
1812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CarouselPreviewsComponent, decorators: [{
|
|
1813
1813
|
type: Component,
|
|
1814
|
-
args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav *ngIf=\"previewConfig?.visible\"\n 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 <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n [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 </ng-container>\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\n</nav>\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
|
|
1815
|
-
}], ctorParameters:
|
|
1814
|
+
args: [{ selector: 'ks-carousel-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav *ngIf=\"previewConfig?.visible\"\n 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 <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n <img *ngIf=\"preview?.modal?.img\"\n [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 </ng-container>\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\n</nav>\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"] }]
|
|
1815
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.BreakpointObserver }, { type: i2.DomSanitizer }, { type: ConfigService }], propDecorators: { hostMaxWidth: [{
|
|
1816
1816
|
type: HostBinding,
|
|
1817
1817
|
args: ['style.max-width']
|
|
1818
1818
|
}], ariaLabel: [{
|
|
@@ -1831,7 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1831
1831
|
/*
|
|
1832
1832
|
The MIT License (MIT)
|
|
1833
1833
|
|
|
1834
|
-
Copyright (
|
|
1834
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
1835
1835
|
|
|
1836
1836
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1837
1837
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1927,13 +1927,13 @@ class DotsComponent extends AccessibleComponent {
|
|
|
1927
1927
|
trackById(index, item) {
|
|
1928
1928
|
return item.id;
|
|
1929
1929
|
}
|
|
1930
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DotsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: DotsComponent, 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 <ng-container *ngIf=\"!dotsConfig || dotsConfig?.visible\">\n <div class=\"inside dot\"\n *ngFor=\"let img of images; trackBy: trackById; let index = index\"\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 </ng-container>\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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1932
1932
|
}
|
|
1933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DotsComponent, decorators: [{
|
|
1934
1934
|
type: Component,
|
|
1935
1935
|
args: [{ selector: 'ks-dots', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConfig?.dotsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.dotsContainerTitle\">\n <ng-container *ngIf=\"!dotsConfig || dotsConfig?.visible\">\n <div class=\"inside dot\"\n *ngFor=\"let img of images; trackBy: trackById; let index = index\"\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 </ng-container>\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"] }]
|
|
1936
|
-
}], ctorParameters:
|
|
1936
|
+
}], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
|
|
1937
1937
|
type: Input
|
|
1938
1938
|
}], currentImage: [{
|
|
1939
1939
|
type: Input
|
|
@@ -1948,7 +1948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1948
1948
|
/*
|
|
1949
1949
|
The MIT License (MIT)
|
|
1950
1950
|
|
|
1951
|
-
Copyright (
|
|
1951
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
1952
1952
|
|
|
1953
1953
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1954
1954
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -2029,22 +2029,22 @@ class DescriptionDirective {
|
|
|
2029
2029
|
this.renderer.setStyle(this.el.nativeElement, 'margin-right', this.description.style.marginRight ? this.description.style.marginRight : '0px');
|
|
2030
2030
|
}
|
|
2031
2031
|
}
|
|
2032
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2033
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2032
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DescriptionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2033
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: DescriptionDirective, selector: "[ksDescription]", inputs: { description: "description" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2034
2034
|
}
|
|
2035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DescriptionDirective, decorators: [{
|
|
2036
2036
|
type: Directive,
|
|
2037
2037
|
args: [{
|
|
2038
2038
|
selector: '[ksDescription]'
|
|
2039
2039
|
}]
|
|
2040
|
-
}], ctorParameters:
|
|
2040
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { description: [{
|
|
2041
2041
|
type: Input
|
|
2042
2042
|
}] } });
|
|
2043
2043
|
|
|
2044
2044
|
/*
|
|
2045
2045
|
The MIT License (MIT)
|
|
2046
2046
|
|
|
2047
|
-
Copyright (
|
|
2047
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
2048
2048
|
|
|
2049
2049
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
2050
2050
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -2102,22 +2102,22 @@ class MaxSizeDirective {
|
|
|
2102
2102
|
this.renderer.setStyle(this.el.nativeElement, 'max-height', this.maxSizeConfig.maxHeight);
|
|
2103
2103
|
}
|
|
2104
2104
|
}
|
|
2105
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2106
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MaxSizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2106
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: MaxSizeDirective, selector: "[ksMaxSize]", inputs: { maxSizeConfig: "maxSizeConfig" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2107
2107
|
}
|
|
2108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MaxSizeDirective, decorators: [{
|
|
2109
2109
|
type: Directive,
|
|
2110
2110
|
args: [{
|
|
2111
2111
|
selector: '[ksMaxSize]'
|
|
2112
2112
|
}]
|
|
2113
|
-
}], ctorParameters:
|
|
2113
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { maxSizeConfig: [{
|
|
2114
2114
|
type: Input
|
|
2115
2115
|
}] } });
|
|
2116
2116
|
|
|
2117
2117
|
/*
|
|
2118
2118
|
The MIT License (MIT)
|
|
2119
2119
|
|
|
2120
|
-
Copyright (
|
|
2120
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
2121
2121
|
|
|
2122
2122
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
2123
2123
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -2791,16 +2791,16 @@ class CarouselComponent extends AccessibleComponent {
|
|
|
2791
2791
|
}
|
|
2792
2792
|
return !libConfig.carouselSlideInfinite && getIndex(this.currentImage, this.images) === boundaryIndex;
|
|
2793
2793
|
}
|
|
2794
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2794
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CarouselComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: ModalGalleryService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2795
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CarouselComponent, 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 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\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 <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"description\"\n ksDescription [description]=\"carouselImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n\n <a class=\"nav-right\" *ngIf=\"carouselConfig?.showArrows\"\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 <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</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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CarouselPreviewsComponent, selector: "ks-carousel-previews", inputs: ["id", "currentImage", "images"], outputs: ["clickPreview"] }, { kind: "component", type: DotsComponent, selector: "ks-dots", inputs: ["id", "currentImage", "images", "dotsConfig"], outputs: ["clickDot"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: MaxSizeDirective, selector: "[ksMaxSize]", inputs: ["maxSizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2796
2796
|
}
|
|
2797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2797
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
2798
2798
|
type: Component,
|
|
2799
|
-
args: [{ selector: 'ks-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigService], 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 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\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 <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"description\"\n ksDescription [description]=\"carouselImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n\n <a class=\"nav-right\" *ngIf=\"carouselConfig?.showArrows\"\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 <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</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
|
|
2800
|
-
}], ctorParameters:
|
|
2799
|
+
args: [{ selector: 'ks-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigService], 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 ngIf (https://github.com/angular/angular/issues/22972) -->\n <ng-template #content><ng-content></ng-content></ng-template>\n\n <figure class=\"current-figure\" *ngIf=\"currentImage && currentImage.modal\"\n ksSize [sizeConfig]=\"{width: carouselConfig?.maxWidth,\n height: ''}\">\n\n <a class=\"nav-left\" *ngIf=\"carouselConfig?.showArrows\"\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 <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <picture class=\"current-image\" ksMaxSize [maxSizeConfig]=\"{maxWidth: carouselConfig?.maxWidth,\n maxHeight: carouselConfig?.maxHeight}\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"description\"\n ksDescription [description]=\"carouselImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\"></figcaption>\n\n <a class=\"nav-right\" *ngIf=\"carouselConfig?.showArrows\"\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 <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</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"] }]
|
|
2800
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2801
2801
|
type: Inject,
|
|
2802
2802
|
args: [PLATFORM_ID]
|
|
2803
|
-
}] }, { type: i0.NgZone }, { type: ModalGalleryService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }]
|
|
2803
|
+
}] }, { type: i0.NgZone }, { type: ModalGalleryService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
|
|
2804
2804
|
type: HostBinding,
|
|
2805
2805
|
args: ['attr.aria-label']
|
|
2806
2806
|
}], id: [{
|
|
@@ -2909,7 +2909,7 @@ const KS_DEFAULT_BTN_FULL_SCREEN = {
|
|
|
2909
2909
|
/*
|
|
2910
2910
|
The MIT License (MIT)
|
|
2911
2911
|
|
|
2912
|
-
Copyright (c) 2017-
|
|
2912
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
2913
2913
|
|
|
2914
2914
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
2915
2915
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3113,13 +3113,13 @@ class UpperButtonsComponent extends AccessibleComponent {
|
|
|
3113
3113
|
});
|
|
3114
3114
|
return buttons;
|
|
3115
3115
|
}
|
|
3116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: UpperButtonsComponent, 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 <ng-container *ngIf=\"!buttonsConfig || buttonsConfig?.visible\">\n <a *ngFor=\"let btn of buttons; trackBy: trackById; let index = index\"\n 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 </ng-container>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UpperButtonsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: UpperButtonsComponent, 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 <ng-container *ngIf=\"!buttonsConfig || buttonsConfig?.visible\">\n <a *ngFor=\"let btn of buttons; trackBy: trackById; let index = index\"\n 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 </ng-container>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3118
3118
|
}
|
|
3119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UpperButtonsComponent, decorators: [{
|
|
3120
3120
|
type: Component,
|
|
3121
3121
|
args: [{ selector: 'ks-upper-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"buttons-container\">\n\n <ng-container *ngIf=\"!buttonsConfig || buttonsConfig?.visible\">\n <a *ngFor=\"let btn of buttons; trackBy: trackById; let index = index\"\n 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 </ng-container>\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"] }]
|
|
3122
|
-
}], ctorParameters:
|
|
3122
|
+
}], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
|
|
3123
3123
|
type: Input
|
|
3124
3124
|
}], currentImage: [{
|
|
3125
3125
|
type: Input
|
|
@@ -3142,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
3142
3142
|
/*
|
|
3143
3143
|
The MIT License (MIT)
|
|
3144
3144
|
|
|
3145
|
-
Copyright (
|
|
3145
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3146
3146
|
|
|
3147
3147
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3148
3148
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3372,13 +3372,13 @@ class PreviewsComponent extends AccessibleComponent {
|
|
|
3372
3372
|
this.start = this.end - Math.min(this.previewConfig.number, this.images.length);
|
|
3373
3373
|
this.previews = this.images.filter((img, i) => i >= this.start && i < this.end);
|
|
3374
3374
|
}
|
|
3375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PreviewsComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PreviewsComponent, selector: "ks-previews", inputs: { id: "id", currentImage: "currentImage", images: "images", customTemplate: "customTemplate" }, outputs: { clickPreview: "clickPreview" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [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 </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3377
3377
|
}
|
|
3378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PreviewsComponent, decorators: [{
|
|
3379
3379
|
type: Component,
|
|
3380
|
-
args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [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 </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background
|
|
3381
|
-
}], ctorParameters:
|
|
3380
|
+
args: [{ selector: 'ks-previews', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"previews-container\"\n [class.mobile-visible]=\"previewConfig?.mobileVisible\"\n [attr.aria-label]=\"accessibilityConfig?.previewsContainerAriaLabel\"\n [title]=\"accessibilityConfig?.previewsContainerTitle\">\n\n <ng-container *ngIf=\"previewConfig?.visible\">\n <a class=\"nav-left\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollPrevAriaLabel\"\n [tabIndex]=\"displayLeftPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('left', $event)\" (keyup)=\"onNavigationEvent('left', $event)\">\n <div class=\"inside {{ displayLeftPreviewsArrow() ? 'left-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollPrevTitle\"></div>\n </a>\n\n <ng-container *ngFor=\"let preview of previews; trackBy: trackById; let index = index\">\n\n <div class=\"preview-container {{!previewConfig?.clickable ? ' unclickable' : ''}}\"\n (click)=\"onImageEvent(preview, $event, clickAction)\"\n (keyup)=\"onImageEvent(preview, $event, keyboardAction)\"\n >\n <ng-container \n *ngTemplateOutlet=\"!customTemplate ? defaultTemplate : customTemplate ; context:{preview, defaultTemplate}\">\n </ng-container>\n <ng-template #defaultTemplate>\n <img *ngIf=\"preview?.modal?.img\"\n class=\"inside preview-image {{isActive(preview) ? 'active' : ''}}\"\n [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 </ng-template>\n </div>\n\n </ng-container>\n\n\n <a class=\"nav-right\"\n [attr.aria-label]=\"accessibilityConfig?.previewScrollNextAriaLabel\"\n [tabIndex]=\"displayRightPreviewsArrow() ? 0 : -1\" role=\"button\"\n (click)=\"onNavigationEvent('right', $event)\" (keyup)=\"onNavigationEvent('right', $event)\">\n <div class=\"inside {{ displayRightPreviewsArrow() ? 'right-arrow-preview-image' : 'empty-arrow-preview-image'}}\"\n aria-hidden=\"true\"\n [title]=\"accessibilityConfig?.previewScrollNextTitle\"></div>\n </a>\n </ng-container>\n\n</nav>\n", styles: ["@media only screen and (max-width: 767px),only screen and (max-device-width: 767px){.previews-container{display:none}.previews-container>.preview-image{display:none}.previews-container>.nav-left{display:none}.previews-container>.nav-right{display:none}.previews-container.mobile-visible{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container.mobile-visible>.nav-left{display:flex}.previews-container.mobile-visible>.nav-right{display:flex}.previews-container.mobile-visible>.preview-image{cursor:pointer;display:flex;margin-left:2px;margin-right:2px;opacity:.7;height:50px}.previews-container.mobile-visible>.preview-image.active{opacity:1}.previews-container.mobile-visible>.preview-image.unclickable{cursor:not-allowed}.previews-container.mobile-visible>.preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}}@media only screen and (min-device-width: 768px){.previews-container{align-items:center;animation:fadein-semi-visible08 .8s;display:flex;flex-direction:row;justify-content:center;margin-bottom:15px}.previews-container .preview-container{margin-left:2px;margin-right:2px;cursor:pointer}.previews-container .preview-container.unclickable{cursor:not-allowed}.previews-container .preview-container .preview-image{opacity:.7;height:50px}.previews-container .preview-container .preview-image.active{opacity:1}.previews-container .preview-container .preview-image:hover{opacity:1;transition:all .5s ease;transition-property:opacity}.previews-container .nav,.previews-container>.nav-right,.previews-container>.nav-left{color:#919191;cursor:pointer;transition:all .5s}.previews-container .nav:hover,.previews-container>.nav-right:hover,.previews-container>.nav-left:hover{transform:scale(1.1)}.previews-container>.nav-left{margin-right:10px}.previews-container>.nav-right{margin-left:10px}}@keyframes fadein-visible{0%{opacity:0}to{opacity:1}}@keyframes fadein-semi-visible05{0%{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible08{0%{opacity:0}to{opacity:.8}}@keyframes fadein-semi-visible09{0%{opacity:0}to{opacity:.9}}\n", ".arrow-preview-image,.right-arrow-preview-image,.left-arrow-preview-image,.empty-arrow-preview-image{width:15px;height:15px;opacity:.5}.empty-arrow-preview-image{background:#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"] }]
|
|
3381
|
+
}], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
|
|
3382
3382
|
type: Input
|
|
3383
3383
|
}], currentImage: [{
|
|
3384
3384
|
type: Input
|
|
@@ -3393,7 +3393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
3393
3393
|
/*
|
|
3394
3394
|
The MIT License (MIT)
|
|
3395
3395
|
|
|
3396
|
-
Copyright (
|
|
3396
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3397
3397
|
|
|
3398
3398
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3399
3399
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3427,7 +3427,7 @@ const Keyboard = {
|
|
|
3427
3427
|
/*
|
|
3428
3428
|
The MIT License (MIT)
|
|
3429
3429
|
|
|
3430
|
-
Copyright (
|
|
3430
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3431
3431
|
|
|
3432
3432
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3433
3433
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3488,12 +3488,12 @@ class LoadingSpinnerComponent {
|
|
|
3488
3488
|
*/
|
|
3489
3489
|
this.loadingExplosingSquares = LoadingType.EXPLOSING_SQUARES;
|
|
3490
3490
|
}
|
|
3491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3492
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: { loadingConfig: "loadingConfig", accessibilityConfig: "accessibilityConfig" }, ngImport: i0, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n <ng-container [ngSwitch]=\"loadingConfig?.type\">\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingBars\">\n <div class=\"loader-bars\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircular\">\n <div class=\"loader-circular\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingDots\">\n <div class=\"loader-dots\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircles\">\n <div id=\"preloader\">\n <div id=\"loader\"></div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingExplosingSquares\">\n <div class=\"loader\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n </ng-container>\n </ng-container>\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)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(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;animation:load4 1.3s infinite linear;transform:translateZ(0)}@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;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;transform:translateZ(0);animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;animation-delay:-.32s}.loader-bars:after{left:1.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;transform:translateZ(0);animation:load8 1.1s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;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;transform-origin:100% 100%;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{animation-delay:.6s;background-color:#e6e6e6}@keyframes folding{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,to{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}@keyframes text{to{top:35px}}@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;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{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"], dependencies: [{ kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3491
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3492
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: { loadingConfig: "loadingConfig", accessibilityConfig: "accessibilityConfig" }, ngImport: i0, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n <ng-container [ngSwitch]=\"loadingConfig?.type\">\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingBars\">\n <div class=\"loader-bars\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircular\">\n <div class=\"loader-circular\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingDots\">\n <div class=\"loader-dots\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircles\">\n <div id=\"preloader\">\n <div id=\"loader\"></div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingExplosingSquares\">\n <div class=\"loader\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n </ng-container>\n </ng-container>\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"], dependencies: [{ kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3493
3493
|
}
|
|
3494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
|
|
3495
3495
|
type: Component,
|
|
3496
|
-
args: [{ selector: 'ks-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n <ng-container [ngSwitch]=\"loadingConfig?.type\">\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingBars\">\n <div class=\"loader-bars\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircular\">\n <div class=\"loader-circular\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingDots\">\n <div class=\"loader-dots\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircles\">\n <div id=\"preloader\">\n <div id=\"loader\"></div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingExplosingSquares\">\n <div class=\"loader\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n </ng-container>\n </ng-container>\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)}}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotate(0)}to{transform:rotateX(35deg) rotateY(55deg) rotate(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;animation:load4 1.3s infinite linear;transform:translateZ(0)}@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;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;transform:translateZ(0);animation-delay:-.16s}.loader-bars:before,.loader-bars:after{position:absolute;top:0;content:\"\"}.loader-bars:before{left:-1.5em;animation-delay:-.32s}.loader-bars:after{left:1.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;transform:translateZ(0);animation:load8 1.1s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ".cube-folding{width:50px;height:50px;display:inline-block;transform:rotate(45deg);font-size:0}.cube-folding span{position:relative;width:25px;height:25px;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;transform-origin:100% 100%;animation:folding 2.5s infinite linear both}.cube-folding .leaf2{transform:rotate(90deg) scale(1.1)}.cube-folding .leaf2:before{animation-delay:.3s;background-color:#f2f2f2}.cube-folding .leaf3{transform:rotate(270deg) scale(1.1)}.cube-folding .leaf3:before{animation-delay:.9s;background-color:#f2f2f2}.cube-folding .leaf4{transform:rotate(180deg) scale(1.1)}.cube-folding .leaf4:before{animation-delay:.6s;background-color:#e6e6e6}@keyframes folding{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,to{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}@keyframes text{to{top:35px}}@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;animation:spin 2s linear infinite}#loader:before{content:\"\";position:absolute;inset:5px;border-radius:50%;border:3px solid transparent;border-top-color:#d9d9d9;animation:spin 3s linear infinite}#loader:after{content:\"\";position:absolute;inset:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{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"] }]
|
|
3496
|
+
args: [{ selector: 'ks-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.aria-label]=\"accessibilityConfig?.loadingSpinnerAriaLabel\"\n [title]=\"accessibilityConfig?.loadingSpinnerTitle\">\n\n <ng-container [ngSwitch]=\"loadingConfig?.type\">\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingBars\">\n <div class=\"loader-bars\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircular\">\n <div class=\"loader-circular\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingDots\">\n <div class=\"loader-dots\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"loadingCircles\">\n <div id=\"preloader\">\n <div id=\"loader\"></div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"loadingExplosingSquares\">\n <div class=\"loader\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n </ng-container>\n </ng-container>\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"] }]
|
|
3497
3497
|
}], propDecorators: { loadingConfig: [{
|
|
3498
3498
|
type: Input
|
|
3499
3499
|
}], accessibilityConfig: [{
|
|
@@ -3503,7 +3503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
3503
3503
|
/*
|
|
3504
3504
|
The MIT License (MIT)
|
|
3505
3505
|
|
|
3506
|
-
Copyright (
|
|
3506
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3507
3507
|
|
|
3508
3508
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3509
3509
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3545,10 +3545,10 @@ class KeyboardNavigationDirective {
|
|
|
3545
3545
|
}
|
|
3546
3546
|
this.keyboardNavigation.emit(e.code);
|
|
3547
3547
|
}
|
|
3548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3549
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: KeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3549
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: { isOpen: "isOpen" }, outputs: { keyboardNavigation: "keyboardNavigation" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
|
|
3550
3550
|
}
|
|
3551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: KeyboardNavigationDirective, decorators: [{
|
|
3552
3552
|
type: Directive,
|
|
3553
3553
|
args: [{
|
|
3554
3554
|
selector: '[ksKeyboardNavigation]'
|
|
@@ -3565,7 +3565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
3565
3565
|
/*
|
|
3566
3566
|
The MIT License (MIT)
|
|
3567
3567
|
|
|
3568
|
-
Copyright (
|
|
3568
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3569
3569
|
|
|
3570
3570
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3571
3571
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -3649,10 +3649,10 @@ class SwipeDirective {
|
|
|
3649
3649
|
}
|
|
3650
3650
|
}
|
|
3651
3651
|
}
|
|
3652
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3653
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3652
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3653
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SwipeDirective, selector: "[ksSwipe]", outputs: { swipeLeft: "swipeLeft", swipeRight: "swipeRight", swipeUp: "swipeUp", swipeDown: "swipeDown" }, host: { listeners: { "touchstart": "handleTouch($event)", "touchend": "handleTouch($event)", "touchcancel": "handleTouch($event)" } }, ngImport: i0 }); }
|
|
3654
3654
|
}
|
|
3655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SwipeDirective, decorators: [{
|
|
3656
3656
|
type: Directive,
|
|
3657
3657
|
args: [{
|
|
3658
3658
|
selector: '[ksSwipe]'
|
|
@@ -3679,7 +3679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
3679
3679
|
/*
|
|
3680
3680
|
The MIT License (MIT)
|
|
3681
3681
|
|
|
3682
|
-
Copyright (
|
|
3682
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
3683
3683
|
|
|
3684
3684
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3685
3685
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4230,16 +4230,16 @@ class CurrentImageComponent extends AccessibleComponent {
|
|
|
4230
4230
|
throw err;
|
|
4231
4231
|
}
|
|
4232
4232
|
}
|
|
4233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CurrentImageComponent, 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 <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n 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 <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n 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 <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\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:black;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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CurrentImageComponent, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: CurrentImageComponent, 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 <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n 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 <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n 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 <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "ks-loading-spinner", inputs: ["loadingConfig", "accessibilityConfig"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: KeyboardNavigationDirective, selector: "[ksKeyboardNavigation]", inputs: ["isOpen"], outputs: ["keyboardNavigation"] }, { kind: "directive", type: DescriptionDirective, selector: "[ksDescription]", inputs: ["description"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }, { kind: "directive", type: SwipeDirective, selector: "[ksSwipe]", outputs: ["swipeLeft", "swipeRight", "swipeUp", "swipeDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4235
4235
|
}
|
|
4236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: CurrentImageComponent, decorators: [{
|
|
4237
4237
|
type: Component,
|
|
4238
|
-
args: [{ selector: 'ks-current-image', changeDetection: ChangeDetectionStrategy.OnPush, 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 <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n 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 <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n 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 <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\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:black;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"] }]
|
|
4239
|
-
}], ctorParameters:
|
|
4238
|
+
args: [{ selector: 'ks-current-image', changeDetection: ChangeDetectionStrategy.OnPush, 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 <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getLeftPreviewImage() as leftPreview\">\n <img *ngIf=\"!isFirstImage; else firstImage\"\n 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 <ng-template #firstImage>\n <div class=\"current-image-previous hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n\n\n <figure id=\"current-figure\" [style.opacity]=\"loading ? '0' : '1'\">\n <picture class=\"current-image\">\n <ng-container *ngFor=\"let source of currentImage.modal?.sources\">\n <source [media]=\"source.media\" [srcset]=\"source.srcset\">\n </ng-container>\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 <figcaption *ngIf=\"getDescriptionToDisplay() !== ''\"\n class=\"inside description\"\n ksDescription [description]=\"currentImageConfig?.description\"\n [innerHTML]=\"getDescriptionToDisplay()\">\n </figcaption>\n </figure>\n\n <div class=\"right-sub-container\">\n <ng-container *ngIf=\"slideConfig?.sidePreviews?.show\">\n <ng-container *ngIf=\"getRightPreviewImage() as rightPreview\">\n <img *ngIf=\"!isLastImage; else lastImage\"\n 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 <ng-template #lastImage>\n <div class=\"current-image-next hidden\"\n ksSize [sizeConfig]=\"{width: slideConfig?.sidePreviews?.size.width, height: slideConfig?.sidePreviews?.size.height}\">\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"loading && currentImageConfig?.loadingConfig?.enable\">\n <ks-loading-spinner [loadingConfig]=\"currentImageConfig?.loadingConfig\"\n [accessibilityConfig]=\"accessibilityConfig\"></ks-loading-spinner>\n </ng-container>\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"] }]
|
|
4239
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4240
4240
|
type: Inject,
|
|
4241
4241
|
args: [PLATFORM_ID]
|
|
4242
|
-
}] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ConfigService }]
|
|
4242
|
+
}] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ConfigService }], propDecorators: { id: [{
|
|
4243
4243
|
type: Input
|
|
4244
4244
|
}], currentImage: [{
|
|
4245
4245
|
type: Input
|
|
@@ -4266,7 +4266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4266
4266
|
/*
|
|
4267
4267
|
The MIT License (MIT)
|
|
4268
4268
|
|
|
4269
|
-
Copyright (
|
|
4269
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4270
4270
|
|
|
4271
4271
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4272
4272
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4321,15 +4321,15 @@ class WrapDirective {
|
|
|
4321
4321
|
this.renderer.setStyle(this.el.nativeElement, 'width', this.width);
|
|
4322
4322
|
this.renderer.setStyle(this.el.nativeElement, 'flex-wrap', this.wrap ? 'wrap' : 'nowrap');
|
|
4323
4323
|
}
|
|
4324
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4325
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: WrapDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4325
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: WrapDirective, selector: "[ksWrap]", inputs: { wrap: "wrap", width: "width" }, usesOnChanges: true, ngImport: i0 }); }
|
|
4326
4326
|
}
|
|
4327
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: WrapDirective, decorators: [{
|
|
4328
4328
|
type: Directive,
|
|
4329
4329
|
args: [{
|
|
4330
4330
|
selector: '[ksWrap]'
|
|
4331
4331
|
}]
|
|
4332
|
-
}], ctorParameters:
|
|
4332
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { wrap: [{
|
|
4333
4333
|
type: Input
|
|
4334
4334
|
}], width: [{
|
|
4335
4335
|
type: Input
|
|
@@ -4338,7 +4338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4338
4338
|
/*
|
|
4339
4339
|
The MIT License (MIT)
|
|
4340
4340
|
|
|
4341
|
-
Copyright (
|
|
4341
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4342
4342
|
|
|
4343
4343
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4344
4344
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4392,15 +4392,15 @@ class DirectionDirective {
|
|
|
4392
4392
|
this.renderer.setStyle(this.el.nativeElement, 'flex-direction', this.direction);
|
|
4393
4393
|
this.renderer.setStyle(this.el.nativeElement, 'justify-content', this.justify);
|
|
4394
4394
|
}
|
|
4395
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4396
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DirectionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4396
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: DirectionDirective, selector: "[ksDirection]", inputs: { direction: "direction", justify: "justify" }, usesOnChanges: true, ngImport: i0 }); }
|
|
4397
4397
|
}
|
|
4398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DirectionDirective, decorators: [{
|
|
4399
4399
|
type: Directive,
|
|
4400
4400
|
args: [{
|
|
4401
4401
|
selector: '[ksDirection]'
|
|
4402
4402
|
}]
|
|
4403
|
-
}], ctorParameters:
|
|
4403
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { direction: [{
|
|
4404
4404
|
type: Input
|
|
4405
4405
|
}], justify: [{
|
|
4406
4406
|
type: Input
|
|
@@ -4409,7 +4409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4409
4409
|
/*
|
|
4410
4410
|
The MIT License (MIT)
|
|
4411
4411
|
|
|
4412
|
-
Copyright (
|
|
4412
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4413
4413
|
|
|
4414
4414
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4415
4415
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4468,15 +4468,15 @@ class ATagBgImageDirective {
|
|
|
4468
4468
|
}
|
|
4469
4469
|
this.renderer.setStyle(this.el.nativeElement, 'background', bg);
|
|
4470
4470
|
}
|
|
4471
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4472
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4471
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ATagBgImageDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4472
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: { image: "image", style: "style" }, usesOnChanges: true, ngImport: i0 }); }
|
|
4473
4473
|
}
|
|
4474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ATagBgImageDirective, decorators: [{
|
|
4475
4475
|
type: Directive,
|
|
4476
4476
|
args: [{
|
|
4477
4477
|
selector: '[ksATagBgImage]'
|
|
4478
4478
|
}]
|
|
4479
|
-
}], ctorParameters:
|
|
4479
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { image: [{
|
|
4480
4480
|
type: Input
|
|
4481
4481
|
}], style: [{
|
|
4482
4482
|
type: Input
|
|
@@ -4485,7 +4485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4485
4485
|
/*
|
|
4486
4486
|
The MIT License (MIT)
|
|
4487
4487
|
|
|
4488
|
-
Copyright (
|
|
4488
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4489
4489
|
|
|
4490
4490
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4491
4491
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4574,7 +4574,7 @@ class PlainGalleryComponent extends AccessibleComponent {
|
|
|
4574
4574
|
throw new Error('Internal library error - libConfig must be defined');
|
|
4575
4575
|
}
|
|
4576
4576
|
const imagesChange = changes.images;
|
|
4577
|
-
const configChange = changes.
|
|
4577
|
+
const configChange = changes.config;
|
|
4578
4578
|
// I'm using !change.firstChange because the first time will be called both onInit and onChange and I don't
|
|
4579
4579
|
// want to execute initialization two times.
|
|
4580
4580
|
if (configChange &&
|
|
@@ -4702,13 +4702,13 @@ class PlainGalleryComponent extends AccessibleComponent {
|
|
|
4702
4702
|
this.directionStyle = 'row';
|
|
4703
4703
|
}
|
|
4704
4704
|
}
|
|
4705
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4706
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PlainGalleryComponent, deps: [{ token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4706
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: PlainGalleryComponent, 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 <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [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 </ng-container>\n\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 <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n 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 </ng-template>\n\n </ng-container>\n </ng-container>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[ksSize]", inputs: ["sizeConfig"] }, { kind: "directive", type: WrapDirective, selector: "[ksWrap]", inputs: ["wrap", "width"] }, { kind: "directive", type: DirectionDirective, selector: "[ksDirection]", inputs: ["direction", "justify"] }, { kind: "directive", type: ATagBgImageDirective, selector: "[ksATagBgImage]", inputs: ["image", "style"] }, { kind: "directive", type: FallbackImageDirective, selector: "[ksFallbackImage]", inputs: ["fallbackImg"], outputs: ["fallbackApplied"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4707
4707
|
}
|
|
4708
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PlainGalleryComponent, decorators: [{
|
|
4709
4709
|
type: Component,
|
|
4710
4710
|
args: [{ selector: 'ks-plain-gallery', changeDetection: ChangeDetectionStrategy.OnPush, 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 <ng-container *ngFor=\"let imgRow of imageGrid; let i = index\">\n <ng-container *ngFor=\"let imgCol of imgRow; let j = index\">\n\n <ng-container *ngIf=\"!plainGalleryConfig?.advanced?.aTags; else aTags\">\n <img *ngIf=\"imgCol?.modal?.img\"\n [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 </ng-container>\n\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 <ng-template #aTags>\n <a *ngIf=\"imgCol?.modal?.img\"\n 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 </ng-template>\n\n </ng-container>\n </ng-container>\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"] }]
|
|
4711
|
-
}], ctorParameters:
|
|
4711
|
+
}], ctorParameters: () => [{ type: ConfigService }], propDecorators: { id: [{
|
|
4712
4712
|
type: Input
|
|
4713
4713
|
}], images: [{
|
|
4714
4714
|
type: Input
|
|
@@ -4721,7 +4721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4721
4721
|
/*
|
|
4722
4722
|
The MIT License (MIT)
|
|
4723
4723
|
|
|
4724
|
-
Copyright (
|
|
4724
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4725
4725
|
|
|
4726
4726
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4727
4727
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4746,7 +4746,7 @@ const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
|
|
|
4746
4746
|
/*
|
|
4747
4747
|
The MIT License (MIT)
|
|
4748
4748
|
|
|
4749
|
-
Copyright (
|
|
4749
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4750
4750
|
|
|
4751
4751
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4752
4752
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4804,10 +4804,10 @@ class IdValidatorService {
|
|
|
4804
4804
|
this.ids.delete(galleryId);
|
|
4805
4805
|
return true;
|
|
4806
4806
|
}
|
|
4807
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4808
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IdValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4808
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IdValidatorService, providedIn: 'root' }); }
|
|
4809
4809
|
}
|
|
4810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IdValidatorService, decorators: [{
|
|
4811
4811
|
type: Injectable,
|
|
4812
4812
|
args: [{ providedIn: 'root' }]
|
|
4813
4813
|
}] });
|
|
@@ -4815,7 +4815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
4815
4815
|
/*
|
|
4816
4816
|
The MIT License (MIT)
|
|
4817
4817
|
|
|
4818
|
-
Copyright (
|
|
4818
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
4819
4819
|
|
|
4820
4820
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4821
4821
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -4884,10 +4884,10 @@ class ClickOutsideDirective {
|
|
|
4884
4884
|
this.clickOutside.emit(true);
|
|
4885
4885
|
}
|
|
4886
4886
|
}
|
|
4887
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4888
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4888
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: { clickOutsideEnable: "clickOutsideEnable" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
|
|
4889
4889
|
}
|
|
4890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
4891
4891
|
type: Directive,
|
|
4892
4892
|
args: [{
|
|
4893
4893
|
selector: '[ksClickOutside]'
|
|
@@ -5356,19 +5356,19 @@ class ModalGalleryComponent {
|
|
|
5356
5356
|
break;
|
|
5357
5357
|
}
|
|
5358
5358
|
}
|
|
5359
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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 }); }
|
|
5360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ModalGalleryComponent, 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: "component", type: UpperButtonsComponent, selector: "ks-upper-buttons", inputs: ["id", "currentImage"], outputs: ["refresh", "delete", "navigate", "download", "closeButton", "fullscreen", "customEmit"] }, { 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"] }, { kind: "component", type: CurrentImageComponent, selector: "ks-current-image", inputs: ["id", "currentImage", "images", "isOpen"], outputs: ["loadImage", "changeImage", "closeGallery"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ksClickOutside]", inputs: ["clickOutsideEnable"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5361
5361
|
}
|
|
5362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ModalGalleryComponent, decorators: [{
|
|
5363
5363
|
type: Component,
|
|
5364
5364
|
args: [{ selector: 'ks-modal-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"modal-gallery-wrapper\"\n [attr.aria-label]=\"accessibilityConfig.modalGalleryContentAriaLabel\"\n [title]=\"accessibilityConfig.modalGalleryContentTitle\"\n ksClickOutside [clickOutsideEnable]=\"enableCloseOutside\"\n (clickOutside)=\"onClickOutside($event)\">\n\n <div id=\"flex-min-height-ie-fix\">\n <div id=\"modal-gallery-container\">\n\n <ks-upper-buttons [id]=\"id\"\n [currentImage]=\"currentImage\"\n (delete)=\"onDelete($event)\"\n (navigate)=\"onNavigate($event)\"\n (download)=\"onDownload($event)\"\n (closeButton)=\"onCloseGalleryButton($event)\"\n (fullscreen)=\"onFullScreen($event)\"\n (customEmit)=\"onCustomEmit($event)\"></ks-upper-buttons>\n\n <ks-current-image [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [isOpen]=\"true\"\n (loadImage)=\"onImageLoad($event)\"\n (changeImage)=\"onChangeCurrentImage($event)\"\n (closeGallery)=\"onCloseGallery($event)\"></ks-current-image>\n\n <div>\n <ks-dots [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [dotsConfig]=\"dotsConfig\"\n (clickDot)=\"onClickDot($event)\"></ks-dots>\n\n <ks-previews [id]=\"id\"\n [images]=\"images\"\n [currentImage]=\"currentImage\"\n [customTemplate]=\"customPreviewsTemplate\"\n (clickPreview)=\"onClickPreview($event)\"></ks-previews>\n </div>\n </div>\n </div>\n</div>\n", styles: ["#flex-min-height-ie-fix{display:flex;flex-direction:column;justify-content:center}#modal-gallery-container{display:flex;flex-direction:column;justify-content:space-between;min-width:100vw;min-height:100vh}\n"] }]
|
|
5365
|
-
}], ctorParameters:
|
|
5365
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5366
5366
|
type: Inject,
|
|
5367
5367
|
args: [DIALOG_DATA]
|
|
5368
5368
|
}] }, { type: ModalGalleryService }, { type: Object, decorators: [{
|
|
5369
5369
|
type: Inject,
|
|
5370
5370
|
args: [PLATFORM_ID]
|
|
5371
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: IdValidatorService }, { type: ConfigService }, { type: i2.DomSanitizer }]
|
|
5371
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: IdValidatorService }, { type: ConfigService }, { type: i2.DomSanitizer }], propDecorators: { currentImageComponent: [{
|
|
5372
5372
|
type: ViewChild,
|
|
5373
5373
|
args: [CurrentImageComponent, { static: true }]
|
|
5374
5374
|
}], onPopState: [{
|
|
@@ -5385,7 +5385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
5385
5385
|
/*
|
|
5386
5386
|
The MIT License (MIT)
|
|
5387
5387
|
|
|
5388
|
-
Copyright (c) 2017-
|
|
5388
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
5389
5389
|
|
|
5390
5390
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5391
5391
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -5424,7 +5424,7 @@ const COMPONENTS = [
|
|
|
5424
5424
|
/*
|
|
5425
5425
|
The MIT License (MIT)
|
|
5426
5426
|
|
|
5427
|
-
Copyright (
|
|
5427
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
5428
5428
|
|
|
5429
5429
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5430
5430
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -5485,15 +5485,15 @@ class MarginDirective {
|
|
|
5485
5485
|
this.renderer.setStyle(this.el.nativeElement, 'margin-bottom', this.marginBottom);
|
|
5486
5486
|
}
|
|
5487
5487
|
}
|
|
5488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5489
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MarginDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: MarginDirective, selector: "[ksMargin]", inputs: { marginLeft: "marginLeft", marginRight: "marginRight", marginTop: "marginTop", marginBottom: "marginBottom" }, usesOnChanges: true, ngImport: i0 }); }
|
|
5490
5490
|
}
|
|
5491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MarginDirective, decorators: [{
|
|
5492
5492
|
type: Directive,
|
|
5493
5493
|
args: [{
|
|
5494
5494
|
selector: '[ksMargin]'
|
|
5495
5495
|
}]
|
|
5496
|
-
}], ctorParameters:
|
|
5496
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { marginLeft: [{
|
|
5497
5497
|
type: Input
|
|
5498
5498
|
}], marginRight: [{
|
|
5499
5499
|
type: Input
|
|
@@ -5506,7 +5506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
5506
5506
|
/*
|
|
5507
5507
|
The MIT License (MIT)
|
|
5508
5508
|
|
|
5509
|
-
Copyright (
|
|
5509
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
5510
5510
|
|
|
5511
5511
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5512
5512
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -5570,18 +5570,18 @@ class AttachToOverlayService {
|
|
|
5570
5570
|
const containerPortal = new ComponentPortal(ModalGalleryComponent, null, injector);
|
|
5571
5571
|
payload.overlayRef.attach(containerPortal);
|
|
5572
5572
|
}
|
|
5573
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5574
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AttachToOverlayService, deps: [{ token: i0.Injector }, { token: ModalGalleryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5574
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AttachToOverlayService, providedIn: 'root' }); }
|
|
5575
5575
|
}
|
|
5576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AttachToOverlayService, decorators: [{
|
|
5577
5577
|
type: Injectable,
|
|
5578
5578
|
args: [{ providedIn: 'root' }]
|
|
5579
|
-
}], ctorParameters:
|
|
5579
|
+
}], ctorParameters: () => [{ type: i0.Injector }, { type: ModalGalleryService }] });
|
|
5580
5580
|
|
|
5581
5581
|
/*
|
|
5582
5582
|
The MIT License (MIT)
|
|
5583
5583
|
|
|
5584
|
-
Copyright (
|
|
5584
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
5585
5585
|
|
|
5586
5586
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5587
5587
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -5605,9 +5605,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
5605
5605
|
* Module to import it in the root module of your application.
|
|
5606
5606
|
*/
|
|
5607
5607
|
class GalleryModule {
|
|
5608
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5609
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5610
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5608
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5609
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: GalleryModule, declarations: [PlainGalleryComponent, CarouselComponent, CarouselPreviewsComponent, UpperButtonsComponent, DotsComponent, PreviewsComponent, CurrentImageComponent, LoadingSpinnerComponent, AccessibleComponent, ModalGalleryComponent, ClickOutsideDirective, SizeDirective, KeyboardNavigationDirective, WrapDirective, DirectionDirective, ATagBgImageDirective, DescriptionDirective, MarginDirective, MaxSizeDirective, FallbackImageDirective, SwipeDirective], imports: [CommonModule, OverlayModule], exports: [PlainGalleryComponent, CarouselComponent] }); }
|
|
5610
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleryModule, providers: [
|
|
5611
5611
|
{
|
|
5612
5612
|
provide: APP_INITIALIZER,
|
|
5613
5613
|
multi: true,
|
|
@@ -5618,7 +5618,7 @@ class GalleryModule {
|
|
|
5618
5618
|
}
|
|
5619
5619
|
], imports: [CommonModule, OverlayModule] }); }
|
|
5620
5620
|
}
|
|
5621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleryModule, decorators: [{
|
|
5622
5622
|
type: NgModule,
|
|
5623
5623
|
args: [{
|
|
5624
5624
|
imports: [CommonModule, OverlayModule],
|
|
@@ -5640,7 +5640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
5640
5640
|
/*
|
|
5641
5641
|
The MIT License (MIT)
|
|
5642
5642
|
|
|
5643
|
-
Copyright (
|
|
5643
|
+
Copyright (c) 2017-2024 Stefano Cappa (Ks89)
|
|
5644
5644
|
|
|
5645
5645
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5646
5646
|
of this software and associated documentation files (the "Software"), to deal
|