oasys-lib 1.60.8 → 1.60.9
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/esm2022/lib/components/image/image.component.mjs +19 -18
- package/esm2022/lib/components/image/image.mjs +2 -0
- package/fesm2022/oasys-lib.mjs +18 -17
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/lib/components/image/image.component.d.ts +6 -5
- package/lib/components/image/image.component.d.ts.map +1 -1
- package/lib/components/image/image.d.ts +4 -0
- package/lib/components/image/image.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/global/scss-breakpoints.scss +1 -1
|
@@ -3,9 +3,6 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
import * as i1 from "../../services/image.service";
|
|
4
4
|
import * as i2 from "@angular/common";
|
|
5
5
|
export class ImageComponent {
|
|
6
|
-
get class() {
|
|
7
|
-
return `${this.image_fill ? 'imageFill' : ''}`;
|
|
8
|
-
}
|
|
9
6
|
constructor(imageService, el) {
|
|
10
7
|
this.imageService = imageService;
|
|
11
8
|
this.el = el;
|
|
@@ -14,6 +11,22 @@ export class ImageComponent {
|
|
|
14
11
|
this.loading = 'lazy';
|
|
15
12
|
this.preload_aspect_ratio = '1:1';
|
|
16
13
|
}
|
|
14
|
+
// eslint-disable-next-line
|
|
15
|
+
get class() {
|
|
16
|
+
return `${this.image_fill ? 'imageFill' : ''}`;
|
|
17
|
+
}
|
|
18
|
+
ngOnInit() {
|
|
19
|
+
const ratios = this.preload_aspect_ratio.split(':');
|
|
20
|
+
this.imageRatioWidth = parseInt(ratios[0], 10);
|
|
21
|
+
this.imageRatioHeight = parseInt(ratios[1], 10);
|
|
22
|
+
this.imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
|
|
23
|
+
if (!('loading' in HTMLImageElement.prototype)) {
|
|
24
|
+
this.setupLazyLoading();
|
|
25
|
+
}
|
|
26
|
+
if (!this.image_alt_text) {
|
|
27
|
+
console.error(`Image is missing an alt tag, image url is ${this.image_src}`);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
17
30
|
setupLazyLoading() {
|
|
18
31
|
const options = {
|
|
19
32
|
removeAfterObserved: true,
|
|
@@ -32,20 +45,8 @@ export class ImageComponent {
|
|
|
32
45
|
}
|
|
33
46
|
});
|
|
34
47
|
}, options);
|
|
35
|
-
const
|
|
36
|
-
this.intersectionObserver.observe(
|
|
37
|
-
}
|
|
38
|
-
ngOnInit() {
|
|
39
|
-
const ratios = this.preload_aspect_ratio.split(':');
|
|
40
|
-
this.imageRatioWidth = parseInt(ratios[0], 10);
|
|
41
|
-
this.imageRatioHeight = parseInt(ratios[1], 10);
|
|
42
|
-
this.imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
|
|
43
|
-
if (!('loading' in HTMLImageElement.prototype)) {
|
|
44
|
-
this.setupLazyLoading();
|
|
45
|
-
}
|
|
46
|
-
if (!this.image_alt_text) {
|
|
47
|
-
console.error(`Image is missing an alt tag, image url is ${this.image_src}`);
|
|
48
|
-
}
|
|
48
|
+
const imageElementQuery = this.el.nativeElement.querySelector('img');
|
|
49
|
+
this.intersectionObserver.observe(imageElementQuery);
|
|
49
50
|
}
|
|
50
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ImageComponent, deps: [{ token: i1.ImageService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
52
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: ImageComponent, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<picture>\n <source\n srcset=\"{{imageUrlResponse.srcSetUrls}}\"\n type=\"image/webp\"/>\n\n <img\n [ngClass]=\"{'imageFill': image_fill}\"\n [attr.width]=\"imageRatioWidth\"\n [attr.height]=\"imageRatioHeight\"\n [attr.src]=\"imageUrlResponse.fallbackUrl\"\n [attr.loading]=\"loading\"\n [attr.fetchpriority]=\"fetchpriority\"\n [attr.alt]=\"image_alt_text\"\n [ngStyle]=\"{'aspect-ratio': preload_aspect_ratio}\"\n />\n</picture>\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
@@ -69,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
69
70
|
type: HostBinding,
|
|
70
71
|
args: ['class']
|
|
71
72
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
73
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvb2FzeXMtbGliL3NyYy9saWIvY29tcG9uZW50cy9pbWFnZS9pbWFnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vYXN5cy1saWIvc3JjL2xpYi9jb21wb25lbnRzL2ltYWdlL2ltYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsV0FBVyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQVNsRixNQUFNLE9BQU8sY0FBYztJQWV6QixZQUFvQixZQUEwQixFQUFVLEVBQWM7UUFBbEQsaUJBQVksR0FBWixZQUFZLENBQWM7UUFBVSxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBZDdELGNBQVMsR0FBVyxFQUFFLENBQUM7UUFJdkIsa0JBQWEsR0FBdUIsTUFBTSxDQUFDO1FBQzNDLFlBQU8sR0FBaUIsTUFBTSxDQUFDO1FBQy9CLHlCQUFvQixHQUFxQixLQUFLLENBQUM7SUFRaUIsQ0FBQztJQUUxRSwyQkFBMkI7SUFDM0IsSUFBMEIsS0FBSztRQUM3QixPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQztJQUNqRCxDQUFDO0lBRUQsUUFBUTtRQUNOLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDcEQsSUFBSSxDQUFDLGVBQWUsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ2hELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUUzRSxJQUFJLENBQUMsQ0FBQyxTQUFTLElBQUksZ0JBQWdCLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDOUMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7U0FDekI7UUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN4QixPQUFPLENBQUMsS0FBSyxDQUFDLDZDQUE2QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQztTQUM5RTtJQUNILENBQUM7SUFFTyxnQkFBZ0I7UUFDdEIsTUFBTSxPQUFPLEdBQUc7WUFDZCxtQkFBbUIsRUFBRSxJQUFJO1lBQ3pCLElBQUksRUFBRSxJQUFJO1lBQ1YsVUFBVSxFQUFFLE9BQU87WUFDbkIsU0FBUyxFQUFFLElBQUk7U0FDaEIsQ0FBQztRQUVGLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLG9CQUFvQixDQUFDLENBQUMsT0FBTyxFQUFRLEVBQUU7WUFDckUsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQUssRUFBUSxFQUFFO2dCQUM5QixJQUFJLEtBQUssQ0FBQyxjQUFjLEVBQUU7b0JBQ3hCLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztvQkFDaEUsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO29CQUNwRSxZQUFZLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsV0FBVyxDQUFDLENBQUM7b0JBQ3BFLGFBQWEsQ0FBQyxZQUFZLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLENBQUMsQ0FBQztvQkFDdkUsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7aUJBQ25EO1lBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFFWixNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyRSxJQUFJLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDdkQsQ0FBQzsrR0EzRFUsY0FBYzttR0FBZCxjQUFjLG1TQ1QzQixnY0FnQkE7OzRGRFBhLGNBQWM7a0JBTDFCLFNBQVM7K0JBQ0UsVUFBVTs0SEFLWCxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBV29CLEtBQUs7c0JBQTlCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEltYWdlU2VydmljZSwgSW1hZ2VSZXNwb25zZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2ltYWdlLnNlcnZpY2UnO1xuaW1wb3J0IHsgSW1hZ2VBc3BlY3RSYXRpbywgSW1hZ2VGZXRjaFByaW9yaXR5LCBJbWFnZUxvYWRpbmcgfSBmcm9tICcuL2ltYWdlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndWktaW1hZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2UuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbWFnZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEltYWdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgaW1hZ2Vfc3JjOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgaW1hZ2VfYWx0X3RleHQ6IHN0cmluZztcbiAgQElucHV0KCkgaW1hZ2VfZmlsbDogYm9vbGVhbjtcblxuICBASW5wdXQoKSBmZXRjaHByaW9yaXR5OiBJbWFnZUZldGNoUHJpb3JpdHkgPSAnYXV0byc7XG4gIEBJbnB1dCgpIGxvYWRpbmc6IEltYWdlTG9hZGluZyA9ICdsYXp5JztcbiAgQElucHV0KCkgcHJlbG9hZF9hc3BlY3RfcmF0aW86IEltYWdlQXNwZWN0UmF0aW8gPSAnMToxJztcblxuICBpbWFnZVVybFJlc3BvbnNlOiBJbWFnZVJlc3BvbnNlO1xuICBpbWFnZVJhdGlvV2lkdGg6IG51bWJlcjtcbiAgaW1hZ2VSYXRpb0hlaWdodDogbnVtYmVyO1xuXG4gIHByaXZhdGUgaW50ZXJzZWN0aW9uT2JzZXJ2ZXI6IEludGVyc2VjdGlvbk9ic2VydmVyO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgaW1hZ2VTZXJ2aWNlOiBJbWFnZVNlcnZpY2UsIHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHt9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBnZXQgY2xhc3MoKSB7XG4gICAgcmV0dXJuIGAke3RoaXMuaW1hZ2VfZmlsbCA/ICdpbWFnZUZpbGwnIDogJyd9YDtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGNvbnN0IHJhdGlvcyA9IHRoaXMucHJlbG9hZF9hc3BlY3RfcmF0aW8uc3BsaXQoJzonKTtcbiAgICB0aGlzLmltYWdlUmF0aW9XaWR0aCA9IHBhcnNlSW50KHJhdGlvc1swXSwgMTApO1xuICAgIHRoaXMuaW1hZ2VSYXRpb0hlaWdodCA9IHBhcnNlSW50KHJhdGlvc1sxXSwgMTApO1xuICAgIHRoaXMuaW1hZ2VVcmxSZXNwb25zZSA9IHRoaXMuaW1hZ2VTZXJ2aWNlLmdlbmVyYXRlSW1hZ2VVcmwodGhpcy5pbWFnZV9zcmMpO1xuXG4gICAgaWYgKCEoJ2xvYWRpbmcnIGluIEhUTUxJbWFnZUVsZW1lbnQucHJvdG90eXBlKSkge1xuICAgICAgdGhpcy5zZXR1cExhenlMb2FkaW5nKCk7XG4gICAgfVxuXG4gICAgaWYgKCF0aGlzLmltYWdlX2FsdF90ZXh0KSB7XG4gICAgICBjb25zb2xlLmVycm9yKGBJbWFnZSBpcyBtaXNzaW5nIGFuIGFsdCB0YWcsIGltYWdlIHVybCBpcyAke3RoaXMuaW1hZ2Vfc3JjfWApO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgc2V0dXBMYXp5TG9hZGluZygpOiB2b2lkIHtcbiAgICBjb25zdCBvcHRpb25zID0ge1xuICAgICAgcmVtb3ZlQWZ0ZXJPYnNlcnZlZDogdHJ1ZSxcbiAgICAgIHJvb3Q6IG51bGwsXG4gICAgICByb290TWFyZ2luOiAnMjAwcHgnLFxuICAgICAgdGhyZXNob2xkOiAwLjAxXG4gICAgfTtcblxuICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoKGVudHJpZXMpOiB2b2lkID0+IHtcbiAgICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnkpOiB2b2lkID0+IHtcbiAgICAgICAgaWYgKGVudHJ5LmlzSW50ZXJzZWN0aW5nKSB7XG4gICAgICAgICAgY29uc3QgaW1hZ2VFbGVtZW50ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ2ltZycpO1xuICAgICAgICAgIGNvbnN0IHNvdXJjZUVsZW1lbnQgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3Rvcignc291cmNlJyk7XG4gICAgICAgICAgaW1hZ2VFbGVtZW50LnNldEF0dHJpYnV0ZSgnc3JjJywgdGhpcy5pbWFnZVVybFJlc3BvbnNlLmZhbGxiYWNrVXJsKTtcbiAgICAgICAgICBzb3VyY2VFbGVtZW50LnNldEF0dHJpYnV0ZSgnc3Jjc2V0JywgdGhpcy5pbWFnZVVybFJlc3BvbnNlLnNyY1NldFVybHMpO1xuICAgICAgICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIudW5vYnNlcnZlKGVudHJ5LnRhcmdldCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH0sIG9wdGlvbnMpO1xuXG4gICAgY29uc3QgaW1hZ2VFbGVtZW50UXVlcnkgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignaW1nJyk7XG4gICAgdGhpcy5pbnRlcnNlY3Rpb25PYnNlcnZlci5vYnNlcnZlKGltYWdlRWxlbWVudFF1ZXJ5KTtcbiAgfVxufVxuIiwiPHBpY3R1cmU+XG4gIDxzb3VyY2VcbiAgc3Jjc2V0PVwie3tpbWFnZVVybFJlc3BvbnNlLnNyY1NldFVybHN9fVwiXG4gIHR5cGU9XCJpbWFnZS93ZWJwXCIvPlxuXG4gIDxpbWdcbiAgW25nQ2xhc3NdPVwieydpbWFnZUZpbGwnOiBpbWFnZV9maWxsfVwiXG4gIFthdHRyLndpZHRoXT1cImltYWdlUmF0aW9XaWR0aFwiXG4gIFthdHRyLmhlaWdodF09XCJpbWFnZVJhdGlvSGVpZ2h0XCJcbiAgW2F0dHIuc3JjXT1cImltYWdlVXJsUmVzcG9uc2UuZmFsbGJhY2tVcmxcIlxuICBbYXR0ci5sb2FkaW5nXT1cImxvYWRpbmdcIlxuICBbYXR0ci5mZXRjaHByaW9yaXR5XT1cImZldGNocHJpb3JpdHlcIlxuICBbYXR0ci5hbHRdPVwiaW1hZ2VfYWx0X3RleHRcIlxuICBbbmdTdHlsZV09XCJ7J2FzcGVjdC1yYXRpbyc6IHByZWxvYWRfYXNwZWN0X3JhdGlvfVwiXG4gIC8+XG48L3BpY3R1cmU+XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vYXN5cy1saWIvc3JjL2xpYi9jb21wb25lbnRzL2ltYWdlL2ltYWdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBJbWFnZUxvYWRpbmcgPSAnbGF6eScgfCAnZWFnZXInIHwgJ2F1dG8nO1xuXG5leHBvcnQgdHlwZSBJbWFnZUFzcGVjdFJhdGlvID0gJzE6MScgfCAnMzo0JyB8ICczOjUnIHwgJzQ6MycgfCAnNTozJyB8ICc1OjQnIHwgJzEzOjE1JztcblxuZXhwb3J0IHR5cGUgSW1hZ2VGZXRjaFByaW9yaXR5ID0gJ2xvdycgfCAnaGlnaCcgfCAnYXV0byc7XG4iXX0=
|
package/fesm2022/oasys-lib.mjs
CHANGED
|
@@ -1100,9 +1100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
1100
1100
|
}] }]; } });
|
|
1101
1101
|
|
|
1102
1102
|
class ImageComponent {
|
|
1103
|
-
get class() {
|
|
1104
|
-
return `${this.image_fill ? 'imageFill' : ''}`;
|
|
1105
|
-
}
|
|
1106
1103
|
constructor(imageService, el) {
|
|
1107
1104
|
this.imageService = imageService;
|
|
1108
1105
|
this.el = el;
|
|
@@ -1111,6 +1108,22 @@ class ImageComponent {
|
|
|
1111
1108
|
this.loading = 'lazy';
|
|
1112
1109
|
this.preload_aspect_ratio = '1:1';
|
|
1113
1110
|
}
|
|
1111
|
+
// eslint-disable-next-line
|
|
1112
|
+
get class() {
|
|
1113
|
+
return `${this.image_fill ? 'imageFill' : ''}`;
|
|
1114
|
+
}
|
|
1115
|
+
ngOnInit() {
|
|
1116
|
+
const ratios = this.preload_aspect_ratio.split(':');
|
|
1117
|
+
this.imageRatioWidth = parseInt(ratios[0], 10);
|
|
1118
|
+
this.imageRatioHeight = parseInt(ratios[1], 10);
|
|
1119
|
+
this.imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
|
|
1120
|
+
if (!('loading' in HTMLImageElement.prototype)) {
|
|
1121
|
+
this.setupLazyLoading();
|
|
1122
|
+
}
|
|
1123
|
+
if (!this.image_alt_text) {
|
|
1124
|
+
console.error(`Image is missing an alt tag, image url is ${this.image_src}`);
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1114
1127
|
setupLazyLoading() {
|
|
1115
1128
|
const options = {
|
|
1116
1129
|
removeAfterObserved: true,
|
|
@@ -1129,20 +1142,8 @@ class ImageComponent {
|
|
|
1129
1142
|
}
|
|
1130
1143
|
});
|
|
1131
1144
|
}, options);
|
|
1132
|
-
const
|
|
1133
|
-
this.intersectionObserver.observe(
|
|
1134
|
-
}
|
|
1135
|
-
ngOnInit() {
|
|
1136
|
-
const ratios = this.preload_aspect_ratio.split(':');
|
|
1137
|
-
this.imageRatioWidth = parseInt(ratios[0], 10);
|
|
1138
|
-
this.imageRatioHeight = parseInt(ratios[1], 10);
|
|
1139
|
-
this.imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
|
|
1140
|
-
if (!('loading' in HTMLImageElement.prototype)) {
|
|
1141
|
-
this.setupLazyLoading();
|
|
1142
|
-
}
|
|
1143
|
-
if (!this.image_alt_text) {
|
|
1144
|
-
console.error(`Image is missing an alt tag, image url is ${this.image_src}`);
|
|
1145
|
-
}
|
|
1145
|
+
const imageElementQuery = this.el.nativeElement.querySelector('img');
|
|
1146
|
+
this.intersectionObserver.observe(imageElementQuery);
|
|
1146
1147
|
}
|
|
1147
1148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ImageComponent, deps: [{ token: ImageService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1148
1149
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: ImageComponent, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<picture>\n <source\n srcset=\"{{imageUrlResponse.srcSetUrls}}\"\n type=\"image/webp\"/>\n\n <img\n [ngClass]=\"{'imageFill': image_fill}\"\n [attr.width]=\"imageRatioWidth\"\n [attr.height]=\"imageRatioHeight\"\n [attr.src]=\"imageUrlResponse.fallbackUrl\"\n [attr.loading]=\"loading\"\n [attr.fetchpriority]=\"fetchpriority\"\n [attr.alt]=\"image_alt_text\"\n [ngStyle]=\"{'aspect-ratio': preload_aspect_ratio}\"\n />\n</picture>\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|