ngx-picture - npm Package Compare versions

Comparing version 2.0.10 to 2.0.11

__ivy_ngcc__/bundles/ngx-picture.umd.js

@@ -469,2 +469,11 @@ (function (global, factory) {
 
+    function squidexSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
+        return url ? url + "&width=" + breakpointValue : null;
+    }
+    var SQUIDEX_CONFIG = {
+        breakpoints: DEFAULT_BREAKPOINTS,
+        imageFormats: [],
+        srcInterpolator: squidexSrcInterpolator
+    };
+
     exports.CLOUDINARY_CONFIG = CLOUDINARY_CONFIG;
@@ -477,5 +486,7 @@ exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
     exports.PictureComponent = PictureComponent;
+    exports.SQUIDEX_CONFIG = SQUIDEX_CONFIG;
     exports.cloudinarySrcInterpolator = cloudinarySrcInterpolator;
     exports.graphCmsSrcInterpolator = graphCmsSrcInterpolator;
     exports.imagekitSrcInterpolator = imagekitSrcInterpolator;
+    exports.squidexSrcInterpolator = squidexSrcInterpolator;
 
@@ -482,0 +493,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

__ivy_ngcc__/fesm5/ngx-picture.js

@@ -256,2 +256,11 @@ import { InjectionToken, EventEmitter, Inject, PLATFORM_ID, Optional, ElementRef, ChangeDetectorRef, ContentChild, Input, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 
+function squidexSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
+    return url ? url + "&width=" + breakpointValue : null;
+}
+var SQUIDEX_CONFIG = {
+    breakpoints: DEFAULT_BREAKPOINTS,
+    imageFormats: [],
+    srcInterpolator: squidexSrcInterpolator
+};
+
 /*
@@ -265,4 +274,4 @@ * Public API Surface of ngx-picture
 
-export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator };
+export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, SQUIDEX_CONFIG, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator, squidexSrcInterpolator };
 
 //# sourceMappingURL=ngx-picture.js.map

bundles/ngx-picture.umd.js

@@ -378,2 +378,11 @@ (function (global, factory) {
 
+    function squidexSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
+        return url ? url + "&width=" + breakpointValue : null;
+    }
+    var SQUIDEX_CONFIG = {
+        breakpoints: DEFAULT_BREAKPOINTS,
+        imageFormats: [],
+        srcInterpolator: squidexSrcInterpolator
+    };
+
     exports.CLOUDINARY_CONFIG = CLOUDINARY_CONFIG;
@@ -386,5 +395,7 @@ exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
     exports.PictureComponent = PictureComponent;
+    exports.SQUIDEX_CONFIG = SQUIDEX_CONFIG;
     exports.cloudinarySrcInterpolator = cloudinarySrcInterpolator;
     exports.graphCmsSrcInterpolator = graphCmsSrcInterpolator;
     exports.imagekitSrcInterpolator = imagekitSrcInterpolator;
+    exports.squidexSrcInterpolator = squidexSrcInterpolator;
 
@@ -391,0 +402,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

bundles/ngx-picture.umd.min.js

@@ -15,3 +15,3 @@ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("ngx-window-token")):"function"==typeof define&&define.amd?define("ngx-picture",["exports","@angular/core","@angular/common","ngx-window-token"],t):t((e=e||self)["ngx-picture"]={},e.ng.core,e.ng.common,e.ngxWindowToken)}(this,(function(e,t,n,r){"use strict";
     and limitations under the License.
-    ***************************************************************************** */function o(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var p=e.length-1;p>=0;p--)(o=e[p])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function i(e,t){return function(n,r){t(n,r,e)}}var a={"(min-width: 1280px) and (max-width: 1919.99px)":1280,"(max-width: 599.99px)":300,"(min-width: 600px) and (max-width: 959.99px)":600,"(min-width: 960px) and (max-width: 1279.99px)":960,"(min-width: 1920px)":1920};function p(e,t,n,r){return e?""+e.replace("upload/","upload/w_"+r+"/f_"+t+"/"):null}var c={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:p};function s(e,t,n,r){return e?"https://media.graphcms.com/resize=w:"+r+",fit:scale/output=format:"+("jpeg"===t?"jpg":"webp")+"/"+e.replace("https://media.graphcms.com/",""):null}var u={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:s};function l(e,t,n,r){var o=e.substring(e.lastIndexOf("/"));return e?""+e.replace(o,"/tr:w-"+r+",f-"+t+o):null}var g={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:l},m=new t.InjectionToken("NGX_PICTURE_CONFIG"),d=function(){function e(e,n,r,o,i){this.platformId=e,this.ngxPictureConfig=n,this.window=r,this.elementRef=o,this.changeDetectorRef=i,this.imageFormats=this.ngxPictureConfig.imageFormats,this.breakpoints=this.ngxPictureConfig.breakpoints,this.srcInterpolator=this.ngxPictureConfig.srcInterpolator,this.loaded=new t.EventEmitter,this.show=!1}return e.prototype.ngOnInit=function(){n.isPlatformServer(this.platformId)&&(this.show=!0)},e.prototype.ngAfterViewInit=function(){var e=this;this.lazyLoad&&this.window&&"IntersectionObserver"in this.window?(this.intersectionObserver=new IntersectionObserver((function(t){t.find((function(t){return t.isIntersecting&&t.target===e.elementRef.nativeElement}))&&e.showLazyPicture()}),{}),this.intersectionObserver.observe(this.elementRef.nativeElement)):(this.show=!0,this.changeDetectorRef.detectChanges())},e.prototype.showLazyPicture=function(){this.intersectionObserver.unobserve(this.elementRef.nativeElement),this.show=!0,this.changeDetectorRef.detectChanges()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]},{type:void 0,decorators:[{type:t.Inject,args:[m]}]},{type:void 0,decorators:[{type:t.Optional},{type:t.Inject,args:[r.WINDOW]}]},{type:t.ElementRef},{type:t.ChangeDetectorRef}]},o([t.ContentChild("imgTemplate")],e.prototype,"imgTemplate",void 0),o([t.Input()],e.prototype,"src",void 0),o([t.Input()],e.prototype,"imageFormats",void 0),o([t.Input()],e.prototype,"breakpoints",void 0),o([t.Input()],e.prototype,"alt",void 0),o([t.Input()],e.prototype,"lazyLoad",void 0),o([t.Input()],e.prototype,"srcInterpolator",void 0),o([t.Output()],e.prototype,"loaded",void 0),e=o([t.Component({selector:"ngx-picture",template:'<picture class="ngx-picture__picture" *ngIf="show">\r\n  <ng-container *ngFor="let imageFormat of imageFormats">\r\n    <source\r\n      *ngFor="let breakpoint of breakpoints | keyvalue"\r\n      [srcset]="\r\n        srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n      "\r\n      [media]="breakpoint.key"\r\n      type="image/{{ imageFormat }}"\r\n    />\r\n  </ng-container>\r\n  <ng-container\r\n    [ngTemplateOutlet]="imgTemplate || defaultImageTemplate"\r\n    [ngTemplateOutletContext]="{ $implicit: { src: src, alt: alt } }"\r\n  >\r\n  </ng-container>\r\n  <ng-template #defaultImageTemplate>\r\n    <img\r\n      [src]="src"\r\n      [alt]="alt"\r\n      (load)="loaded.emit($event)"\r\n      class="ngx-picture__picture__img"\r\n      loading="lazy"\r\n      #img\r\n    />\r\n  </ng-template>\r\n</picture>\r\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}"]}),i(0,t.Inject(t.PLATFORM_ID)),i(1,t.Inject(m)),i(2,t.Optional()),i(2,t.Inject(r.WINDOW))],e)}(),h=function(){function e(){}var r;return r=e,e.forRoot=function(e){return{ngModule:r,providers:[{provide:m,useValue:e}]}},e=r=o([t.NgModule({declarations:[d],imports:[n.CommonModule],exports:[d],entryComponents:[d]})],e)}();e.CLOUDINARY_CONFIG=c,e.DEFAULT_BREAKPOINTS=a,e.GRAPH_CMS_CONFIG=u,e.IMAGEKIT_CONFIG=g,e.NGX_PICTURE_CONFIG=m,e.NgxPictureModule=h,e.PictureComponent=d,e.cloudinarySrcInterpolator=p,e.graphCmsSrcInterpolator=s,e.imagekitSrcInterpolator=l,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */function o(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var p=e.length-1;p>=0;p--)(o=e[p])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function i(e,t){return function(n,r){t(n,r,e)}}var a={"(min-width: 1280px) and (max-width: 1919.99px)":1280,"(max-width: 599.99px)":300,"(min-width: 600px) and (max-width: 959.99px)":600,"(min-width: 960px) and (max-width: 1279.99px)":960,"(min-width: 1920px)":1920};function p(e,t,n,r){return e?""+e.replace("upload/","upload/w_"+r+"/f_"+t+"/"):null}var c={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:p};function s(e,t,n,r){return e?"https://media.graphcms.com/resize=w:"+r+",fit:scale/output=format:"+("jpeg"===t?"jpg":"webp")+"/"+e.replace("https://media.graphcms.com/",""):null}var u={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:s};function l(e,t,n,r){var o=e.substring(e.lastIndexOf("/"));return e?""+e.replace(o,"/tr:w-"+r+",f-"+t+o):null}var g={breakpoints:a,imageFormats:["webp","jpg"],srcInterpolator:l},m=new t.InjectionToken("NGX_PICTURE_CONFIG"),d=function(){function e(e,n,r,o,i){this.platformId=e,this.ngxPictureConfig=n,this.window=r,this.elementRef=o,this.changeDetectorRef=i,this.imageFormats=this.ngxPictureConfig.imageFormats,this.breakpoints=this.ngxPictureConfig.breakpoints,this.srcInterpolator=this.ngxPictureConfig.srcInterpolator,this.loaded=new t.EventEmitter,this.show=!1}return e.prototype.ngOnInit=function(){n.isPlatformServer(this.platformId)&&(this.show=!0)},e.prototype.ngAfterViewInit=function(){var e=this;this.lazyLoad&&this.window&&"IntersectionObserver"in this.window?(this.intersectionObserver=new IntersectionObserver((function(t){t.find((function(t){return t.isIntersecting&&t.target===e.elementRef.nativeElement}))&&e.showLazyPicture()}),{}),this.intersectionObserver.observe(this.elementRef.nativeElement)):(this.show=!0,this.changeDetectorRef.detectChanges())},e.prototype.showLazyPicture=function(){this.intersectionObserver.unobserve(this.elementRef.nativeElement),this.show=!0,this.changeDetectorRef.detectChanges()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]},{type:void 0,decorators:[{type:t.Inject,args:[m]}]},{type:void 0,decorators:[{type:t.Optional},{type:t.Inject,args:[r.WINDOW]}]},{type:t.ElementRef},{type:t.ChangeDetectorRef}]},o([t.ContentChild("imgTemplate")],e.prototype,"imgTemplate",void 0),o([t.Input()],e.prototype,"src",void 0),o([t.Input()],e.prototype,"imageFormats",void 0),o([t.Input()],e.prototype,"breakpoints",void 0),o([t.Input()],e.prototype,"alt",void 0),o([t.Input()],e.prototype,"lazyLoad",void 0),o([t.Input()],e.prototype,"srcInterpolator",void 0),o([t.Output()],e.prototype,"loaded",void 0),e=o([t.Component({selector:"ngx-picture",template:'<picture class="ngx-picture__picture" *ngIf="show">\r\n  <ng-container *ngFor="let imageFormat of imageFormats">\r\n    <source\r\n      *ngFor="let breakpoint of breakpoints | keyvalue"\r\n      [srcset]="\r\n        srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n      "\r\n      [media]="breakpoint.key"\r\n      type="image/{{ imageFormat }}"\r\n    />\r\n  </ng-container>\r\n  <ng-container\r\n    [ngTemplateOutlet]="imgTemplate || defaultImageTemplate"\r\n    [ngTemplateOutletContext]="{ $implicit: { src: src, alt: alt } }"\r\n  >\r\n  </ng-container>\r\n  <ng-template #defaultImageTemplate>\r\n    <img\r\n      [src]="src"\r\n      [alt]="alt"\r\n      (load)="loaded.emit($event)"\r\n      class="ngx-picture__picture__img"\r\n      loading="lazy"\r\n      #img\r\n    />\r\n  </ng-template>\r\n</picture>\r\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}"]}),i(0,t.Inject(t.PLATFORM_ID)),i(1,t.Inject(m)),i(2,t.Optional()),i(2,t.Inject(r.WINDOW))],e)}(),h=function(){function e(){}var r;return r=e,e.forRoot=function(e){return{ngModule:r,providers:[{provide:m,useValue:e}]}},e=r=o([t.NgModule({declarations:[d],imports:[n.CommonModule],exports:[d],entryComponents:[d]})],e)}();function f(e,t,n,r){return e?e+"&width="+r:null}var I={breakpoints:a,imageFormats:[],srcInterpolator:f};e.CLOUDINARY_CONFIG=c,e.DEFAULT_BREAKPOINTS=a,e.GRAPH_CMS_CONFIG=u,e.IMAGEKIT_CONFIG=g,e.NGX_PICTURE_CONFIG=m,e.NgxPictureModule=h,e.PictureComponent=d,e.SQUIDEX_CONFIG=I,e.cloudinarySrcInterpolator=p,e.graphCmsSrcInterpolator=s,e.imagekitSrcInterpolator=l,e.squidexSrcInterpolator=f,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-picture.umd.min.js.map

esm2015/public-api.js

@@ -11,2 +11,3 @@ /*
 export * from './lib/picture/picture.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1waWN0dXJlLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFFdEMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsaUNBQWlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LXBpY3R1cmVcclxuICovXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Nsb3VkaW5hcnktY29uZmlnJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGVmYXVsdC1icmVha3BvaW50cyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2dyYXBoLWNtcy1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbWFnZWtpdC1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS1jb25maWcudG9rZW4nO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9waWN0dXJlL3BpY3R1cmUuY29tcG9uZW50JztcclxuIl19
+export * from './lib/squidex-config';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1waWN0dXJlLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFFdEMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXHJcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtcGljdHVyZVxyXG4gKi9cclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY2xvdWRpbmFyeS1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kZWZhdWx0LWJyZWFrcG9pbnRzJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvZ3JhcGgtY21zLWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2ltYWdla2l0LWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLWNvbmZpZy50b2tlbic7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BpY3R1cmUvcGljdHVyZS5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zcXVpZGV4LWNvbmZpZyc7XHJcbiJdfQ==

esm5/public-api.js

@@ -11,2 +11,3 @@ /*
 export * from './lib/picture/picture.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1waWN0dXJlLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFFdEMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsaUNBQWlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LXBpY3R1cmVcclxuICovXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Nsb3VkaW5hcnktY29uZmlnJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGVmYXVsdC1icmVha3BvaW50cyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2dyYXBoLWNtcy1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbWFnZWtpdC1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS1jb25maWcudG9rZW4nO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtcGljdHVyZS5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9waWN0dXJlL3BpY3R1cmUuY29tcG9uZW50JztcclxuIl19
+export * from './lib/squidex-config';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1waWN0dXJlLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFFdEMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXHJcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtcGljdHVyZVxyXG4gKi9cclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY2xvdWRpbmFyeS1jb25maWcnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kZWZhdWx0LWJyZWFrcG9pbnRzJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvZ3JhcGgtY21zLWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2ltYWdla2l0LWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLWNvbmZpZyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLWNvbmZpZy50b2tlbic7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1waWN0dXJlLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BpY3R1cmUvcGljdHVyZS5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zcXVpZGV4LWNvbmZpZyc7XHJcbiJdfQ==

fesm2015/ngx-picture.js

@@ -157,2 +157,11 @@ import { InjectionToken, EventEmitter, Inject, PLATFORM_ID, Optional, ElementRef, ChangeDetectorRef, ContentChild, Input, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 
+function squidexSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
+    return url ? `${url}&width=${breakpointValue}` : null;
+}
+const SQUIDEX_CONFIG = {
+    breakpoints: DEFAULT_BREAKPOINTS,
+    imageFormats: [],
+    srcInterpolator: squidexSrcInterpolator
+};
+
 /*
@@ -166,3 +175,3 @@ * Public API Surface of ngx-picture
 
-export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator };
+export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, SQUIDEX_CONFIG, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator, squidexSrcInterpolator };
 //# sourceMappingURL=ngx-picture.js.map

fesm5/ngx-picture.js

@@ -163,2 +163,11 @@ import { InjectionToken, EventEmitter, Inject, PLATFORM_ID, Optional, ElementRef, ChangeDetectorRef, ContentChild, Input, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 
+function squidexSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
+    return url ? url + "&width=" + breakpointValue : null;
+}
+var SQUIDEX_CONFIG = {
+    breakpoints: DEFAULT_BREAKPOINTS,
+    imageFormats: [],
+    srcInterpolator: squidexSrcInterpolator
+};
+
 /*
@@ -172,3 +181,3 @@ * Public API Surface of ngx-picture
 
-export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator };
+export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, SQUIDEX_CONFIG, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator, squidexSrcInterpolator };
 //# sourceMappingURL=ngx-picture.js.map

lib/picture/picture.component.d.ts

@@ -27,15 +27,6 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, TemplateRef } from '@angular/core';
     private showLazyPicture;
-    static ɵfac: ɵngcc0.ɵɵFactoryDef<PictureComponent>;
-    static ɵcmp: ɵngcc0.ɵɵComponentDefWithMeta<PictureComponent, "ngx-picture", never, {
-    "imageFormats": "imageFormats";
-    "breakpoints": "breakpoints";
-    "srcInterpolator": "srcInterpolator";
-    "src": "src";
-    "alt": "alt";
-    "lazyLoad": "lazyLoad";
-}, {
-    "loaded": "loaded";
-}, ["imgTemplate"]>;
+    static ɵfac: ɵngcc0.ɵɵFactoryDef<PictureComponent, [null, null, { optional: true; }, null, null]>;
+    static ɵcmp: ɵngcc0.ɵɵComponentDefWithMeta<PictureComponent, "ngx-picture", never, { "imageFormats": "imageFormats"; "breakpoints": "breakpoints"; "srcInterpolator": "srcInterpolator"; "src": "src"; "alt": "alt"; "lazyLoad": "lazyLoad"; }, { "loaded": "loaded"; }, ["imgTemplate"], never>;
 }
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGljdHVyZS5jb21wb25lbnQuZC50cyIsInNvdXJjZXMiOlsicGljdHVyZS5jb21wb25lbnQuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0FBRUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUF1QkEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBPbkluaXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5neFBpY3R1cmVDb25maWcgfSBmcm9tICcuLi9uZ3gtcGljdHVyZS1jb25maWcnO1xyXG5leHBvcnQgZGVjbGFyZSB0eXBlIEltYWdlRm9ybWF0ID0gJ2FwbmcnIHwgJ2JtcCcgfCAnZ2lmJyB8ICdqcGVnJyB8ICdwbmcnIHwgJ3N2ZycgfCAndGlmZicgfCAnd2VicCcgfCAnanAyJyB8ICdqeHInO1xyXG5leHBvcnQgZGVjbGFyZSBjbGFzcyBQaWN0dXJlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuICAgIHByaXZhdGUgcGxhdGZvcm1JZDtcclxuICAgIHByaXZhdGUgbmd4UGljdHVyZUNvbmZpZztcclxuICAgIHByaXZhdGUgd2luZG93O1xyXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmO1xyXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjtcclxuICAgIGltZ1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxIVE1MSW1hZ2VFbGVtZW50PjtcclxuICAgIHNyYzogc3RyaW5nO1xyXG4gICAgaW1hZ2VGb3JtYXRzOiBhbnlbXTtcclxuICAgIGJyZWFrcG9pbnRzOiB7XHJcbiAgICAgICAgW2tleTogc3RyaW5nXTogbnVtYmVyO1xyXG4gICAgfTtcclxuICAgIGFsdDogc3RyaW5nO1xyXG4gICAgbGF6eUxvYWQ6IGJvb2xlYW47XHJcbiAgICBzcmNJbnRlcnBvbGF0b3I6ICh1cmw6IHN0cmluZywgaW1hZ2VGb3JtYXQ6IEltYWdlRm9ybWF0LCBicmVha3BvaW50OiBzdHJpbmcsIGJyZWFrcG9pbnRWYWx1ZTogbnVtYmVyKSA9PiBzdHJpbmc7XHJcbiAgICBsb2FkZWQ6IEV2ZW50RW1pdHRlcjxFdmVudD47XHJcbiAgICBzaG93OiBib29sZWFuO1xyXG4gICAgcHJpdmF0ZSBpbnRlcnNlY3Rpb25PYnNlcnZlcjtcclxuICAgIGNvbnN0cnVjdG9yKHBsYXRmb3JtSWQ6IGFueSwgbmd4UGljdHVyZUNvbmZpZzogTmd4UGljdHVyZUNvbmZpZywgd2luZG93OiBhbnksIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZik7XHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkO1xyXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQ7XHJcbiAgICBwcml2YXRlIHNob3dMYXp5UGljdHVyZTtcclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGljdHVyZS5jb21wb25lbnQuZC50cyIsInNvdXJjZXMiOlsicGljdHVyZS5jb21wb25lbnQuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0FBRUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUF1QkEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBPbkluaXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5neFBpY3R1cmVDb25maWcgfSBmcm9tICcuLi9uZ3gtcGljdHVyZS1jb25maWcnO1xyXG5leHBvcnQgZGVjbGFyZSB0eXBlIEltYWdlRm9ybWF0ID0gJ2FwbmcnIHwgJ2JtcCcgfCAnZ2lmJyB8ICdqcGVnJyB8ICdwbmcnIHwgJ3N2ZycgfCAndGlmZicgfCAnd2VicCcgfCAnanAyJyB8ICdqeHInO1xyXG5leHBvcnQgZGVjbGFyZSBjbGFzcyBQaWN0dXJlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuICAgIHByaXZhdGUgcGxhdGZvcm1JZDtcclxuICAgIHByaXZhdGUgbmd4UGljdHVyZUNvbmZpZztcclxuICAgIHByaXZhdGUgd2luZG93O1xyXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmO1xyXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjtcclxuICAgIGltZ1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxIVE1MSW1hZ2VFbGVtZW50PjtcclxuICAgIHNyYzogc3RyaW5nO1xyXG4gICAgaW1hZ2VGb3JtYXRzOiBhbnlbXTtcclxuICAgIGJyZWFrcG9pbnRzOiB7XHJcbiAgICAgICAgW2tleTogc3RyaW5nXTogbnVtYmVyO1xyXG4gICAgfTtcclxuICAgIGFsdDogc3RyaW5nO1xyXG4gICAgbGF6eUxvYWQ6IGJvb2xlYW47XHJcbiAgICBzcmNJbnRlcnBvbGF0b3I6ICh1cmw6IHN0cmluZywgaW1hZ2VGb3JtYXQ6IEltYWdlRm9ybWF0LCBicmVha3BvaW50OiBzdHJpbmcsIGJyZWFrcG9pbnRWYWx1ZTogbnVtYmVyKSA9PiBzdHJpbmc7XHJcbiAgICBsb2FkZWQ6IEV2ZW50RW1pdHRlcjxFdmVudD47XHJcbiAgICBzaG93OiBib29sZWFuO1xyXG4gICAgcHJpdmF0ZSBpbnRlcnNlY3Rpb25PYnNlcnZlcjtcclxuICAgIGNvbnN0cnVjdG9yKHBsYXRmb3JtSWQ6IGFueSwgbmd4UGljdHVyZUNvbmZpZzogTmd4UGljdHVyZUNvbmZpZywgd2luZG93OiBhbnksIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZik7XHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkO1xyXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQ7XHJcbiAgICBwcml2YXRlIHNob3dMYXp5UGljdHVyZTtcclxufVxyXG4iXX0=

ngx-picture.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"cloudinarySrcInterpolator":{"__symbolic":"function","parameters":["url","imageFormat","breakpoint","breakpointValue"],"value":{"__symbolic":"if","condition":{"__symbolic":"reference","name":"url"},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"url"},"member":"replace"},"arguments":["upload/",{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":"upload/w_","right":{"__symbolic":"reference","name":"breakpointValue"}},"right":"/f_"},"right":{"__symbolic":"reference","name":"imageFormat"}},"right":"/"}]},"elseExpression":null}},"CLOUDINARY_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"cloudinarySrcInterpolator"}},"DEFAULT_BREAKPOINTS":{"(min-width: 1280px) and (max-width: 1919.99px)":1280,"(max-width: 599.99px)":300,"(min-width: 600px) and (max-width: 959.99px)":600,"(min-width: 960px) and (max-width: 1279.99px)":960,"(min-width: 1920px)":1920,"$quoted$":["(min-width: 1280px) and (max-width: 1919.99px)","(max-width: 599.99px)","(min-width: 600px) and (max-width: 959.99px)","(min-width: 960px) and (max-width: 1279.99px)","(min-width: 1920px)"]},"graphCmsSrcInterpolator":{"__symbolic":"function","parameters":["url","imageFormat","breakpoint","breakpointValue"],"value":{"__symbolic":"if","condition":{"__symbolic":"reference","name":"url"},"thenExpression":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":"https://media.graphcms.com/resize=w:","right":{"__symbolic":"reference","name":"breakpointValue"}},"right":",fit:scale/output=format:"},"right":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"imageFormat"},"right":"jpeg"},"thenExpression":"jpg","elseExpression":"webp"}},"right":"/"},"right":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"url"},"member":"replace"},"arguments":["https://media.graphcms.com/",""]}},"elseExpression":null}},"GRAPH_CMS_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"graphCmsSrcInterpolator"}},"imagekitSrcInterpolator":{"__symbolic":"function"},"IMAGEKIT_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"imagekitSrcInterpolator"}},"NgxPictureConfig":{"__symbolic":"interface"},"NGX_PICTURE_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":38},"arguments":["NGX_PICTURE_CONFIG"]},"NgxPictureModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PictureComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"PictureComponent"}],"entryComponents":[{"__symbolic":"reference","name":"PictureComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxPictureModule"},"providers":[{"provide":{"__symbolic":"reference","name":"NGX_PICTURE_CONFIG"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}},"ImageFormat":{"__symbolic":"interface"},"PictureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"ngx-picture","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":37,"character":19},"member":"OnPush"},"template":"<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n  <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n    <source\r\n      *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n      [srcset]=\"\r\n        srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n      \"\r\n      [media]=\"breakpoint.key\"\r\n      type=\"image/{{ imageFormat }}\"\r\n    />\r\n  </ng-container>\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n  >\r\n  </ng-container>\r\n  <ng-template #defaultImageTemplate>\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      (load)=\"loaded.emit($event)\"\r\n      class=\"ngx-picture__picture__img\"\r\n      loading=\"lazy\"\r\n      #img\r\n    />\r\n  </ng-template>\r\n</picture>\r\n","styles":[":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}"]}]}],"members":{"imgTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":40,"character":3},"arguments":["imgTemplate"]}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"imageFormats":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"breakpoints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"alt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"lazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"srcInterpolator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":57,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":58,"character":5},"arguments":[{"__symbolic":"reference","name":"NGX_PICTURE_CONFIG"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":59,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":59,"character":17},"arguments":[{"__symbolic":"reference","module":"ngx-window-token","name":"WINDOW","line":59,"character":24}]}],null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"NgxPictureConfig"},null,{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":60,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":61,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"showLazyPicture":[{"__symbolic":"method"}]}}},"origins":{"cloudinarySrcInterpolator":"./lib/cloudinary-config","CLOUDINARY_CONFIG":"./lib/cloudinary-config","DEFAULT_BREAKPOINTS":"./lib/default-breakpoints","graphCmsSrcInterpolator":"./lib/graph-cms-config","GRAPH_CMS_CONFIG":"./lib/graph-cms-config","imagekitSrcInterpolator":"./lib/imagekit-config","IMAGEKIT_CONFIG":"./lib/imagekit-config","NgxPictureConfig":"./lib/ngx-picture-config","NGX_PICTURE_CONFIG":"./lib/ngx-picture-config.token","NgxPictureModule":"./lib/ngx-picture.module","ImageFormat":"./lib/picture/picture.component","PictureComponent":"./lib/picture/picture.component"},"importAs":"ngx-picture"}
+{"__symbolic":"module","version":4,"metadata":{"cloudinarySrcInterpolator":{"__symbolic":"function","parameters":["url","imageFormat","breakpoint","breakpointValue"],"value":{"__symbolic":"if","condition":{"__symbolic":"reference","name":"url"},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"url"},"member":"replace"},"arguments":["upload/",{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":"upload/w_","right":{"__symbolic":"reference","name":"breakpointValue"}},"right":"/f_"},"right":{"__symbolic":"reference","name":"imageFormat"}},"right":"/"}]},"elseExpression":null}},"CLOUDINARY_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"cloudinarySrcInterpolator"}},"DEFAULT_BREAKPOINTS":{"(min-width: 1280px) and (max-width: 1919.99px)":1280,"(max-width: 599.99px)":300,"(min-width: 600px) and (max-width: 959.99px)":600,"(min-width: 960px) and (max-width: 1279.99px)":960,"(min-width: 1920px)":1920,"$quoted$":["(min-width: 1280px) and (max-width: 1919.99px)","(max-width: 599.99px)","(min-width: 600px) and (max-width: 959.99px)","(min-width: 960px) and (max-width: 1279.99px)","(min-width: 1920px)"]},"graphCmsSrcInterpolator":{"__symbolic":"function","parameters":["url","imageFormat","breakpoint","breakpointValue"],"value":{"__symbolic":"if","condition":{"__symbolic":"reference","name":"url"},"thenExpression":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":"https://media.graphcms.com/resize=w:","right":{"__symbolic":"reference","name":"breakpointValue"}},"right":",fit:scale/output=format:"},"right":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"imageFormat"},"right":"jpeg"},"thenExpression":"jpg","elseExpression":"webp"}},"right":"/"},"right":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"url"},"member":"replace"},"arguments":["https://media.graphcms.com/",""]}},"elseExpression":null}},"GRAPH_CMS_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"graphCmsSrcInterpolator"}},"imagekitSrcInterpolator":{"__symbolic":"function"},"IMAGEKIT_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":["webp","jpg"],"srcInterpolator":{"__symbolic":"reference","name":"imagekitSrcInterpolator"}},"NgxPictureConfig":{"__symbolic":"interface"},"NGX_PICTURE_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":38},"arguments":["NGX_PICTURE_CONFIG"]},"NgxPictureModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PictureComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"PictureComponent"}],"entryComponents":[{"__symbolic":"reference","name":"PictureComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxPictureModule"},"providers":[{"provide":{"__symbolic":"reference","name":"NGX_PICTURE_CONFIG"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}},"ImageFormat":{"__symbolic":"interface"},"PictureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"ngx-picture","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":37,"character":19},"member":"OnPush"},"template":"<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n  <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n    <source\r\n      *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n      [srcset]=\"\r\n        srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n      \"\r\n      [media]=\"breakpoint.key\"\r\n      type=\"image/{{ imageFormat }}\"\r\n    />\r\n  </ng-container>\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n  >\r\n  </ng-container>\r\n  <ng-template #defaultImageTemplate>\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      (load)=\"loaded.emit($event)\"\r\n      class=\"ngx-picture__picture__img\"\r\n      loading=\"lazy\"\r\n      #img\r\n    />\r\n  </ng-template>\r\n</picture>\r\n","styles":[":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}"]}]}],"members":{"imgTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":40,"character":3},"arguments":["imgTemplate"]}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"imageFormats":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"breakpoints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"alt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"lazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"srcInterpolator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":57,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":58,"character":5},"arguments":[{"__symbolic":"reference","name":"NGX_PICTURE_CONFIG"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":59,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":59,"character":17},"arguments":[{"__symbolic":"reference","module":"ngx-window-token","name":"WINDOW","line":59,"character":24}]}],null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"NgxPictureConfig"},null,{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":60,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":61,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"showLazyPicture":[{"__symbolic":"method"}]}},"squidexSrcInterpolator":{"__symbolic":"function","parameters":["url","imageFormat","breakpoint","breakpointValue"],"value":{"__symbolic":"if","condition":{"__symbolic":"reference","name":"url"},"thenExpression":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"reference","name":"url"},"right":"&width="},"right":{"__symbolic":"reference","name":"breakpointValue"}},"elseExpression":null}},"SQUIDEX_CONFIG":{"breakpoints":{"__symbolic":"reference","name":"DEFAULT_BREAKPOINTS"},"imageFormats":[],"srcInterpolator":{"__symbolic":"reference","name":"squidexSrcInterpolator"}}},"origins":{"cloudinarySrcInterpolator":"./lib/cloudinary-config","CLOUDINARY_CONFIG":"./lib/cloudinary-config","DEFAULT_BREAKPOINTS":"./lib/default-breakpoints","graphCmsSrcInterpolator":"./lib/graph-cms-config","GRAPH_CMS_CONFIG":"./lib/graph-cms-config","imagekitSrcInterpolator":"./lib/imagekit-config","IMAGEKIT_CONFIG":"./lib/imagekit-config","NgxPictureConfig":"./lib/ngx-picture-config","NGX_PICTURE_CONFIG":"./lib/ngx-picture-config.token","NgxPictureModule":"./lib/ngx-picture.module","ImageFormat":"./lib/picture/picture.component","PictureComponent":"./lib/picture/picture.component","squidexSrcInterpolator":"./lib/squidex-config","SQUIDEX_CONFIG":"./lib/squidex-config"},"importAs":"ngx-picture"}

package.json

 {
   "name": "ngx-picture",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "repository": {
@@ -21,2 +21,3 @@ "type": "git",
     "Graph CMS",
+    "Squidex",
     "ImageKit",
@@ -53,6 +54,6 @@ "serve images in next-gen formats",
   "__processed_by_ivy_ngcc__": {
-    "fesm5": "9.0.4",
-    "main": "9.0.4",
-    "module": "9.0.4",
-    "typings": "9.0.4"
+    "fesm5": "9.1.3",
+    "main": "9.1.3",
+    "module": "9.1.3",
+    "typings": "9.1.3"
   },
@@ -59,0 +60,0 @@ "scripts": {

public-api.d.ts

@@ -9,1 +9,2 @@ export * from './lib/cloudinary-config';
 export * from './lib/picture/picture.component';
+export * from './lib/squidex-config';

README.md

@@ -16,2 +16,3 @@ # ngx-picture
 - [GraphCMS](https://graphcms.com/)
+- [Squidex](https://squidex.io/)
 
@@ -81,3 +82,3 @@ For live demos:
 
-\* Image formats must be in order of precedence. In this example if **webp** s supported it will be used.
+\* Image formats must be in order of precedence. In this example if **webp** is supported it will be used.
 
@@ -84,0 +85,0 @@ ### Using the bundled configurations (Cloudinary, ImageKit and GraphCMS)

No alert changes

Improved metrics

Total package byte prevSize

300588

increased by4.23%

Number of package files

52

increased by6.12%

Lines of code

1932

increased by3.32%

Number of lines in readme file

296

increased by0.34%

No dependency changes