@aofl/picture - npm Package Compare versions

Comparing version 3.0.0-beta.35 to 3.0.0-beta.36

dist/index.js

@@ -1,2 +0,2 @@
-module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s="QfWi")}({"7W2i":function(t,e,n){var r=n("SksO");t.exports=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}},Bsl5:function(t,e,n){(t.exports=n("JPst")(!1)).push([t.i,":host{display:inline-block;line-height:0}",""])},JPst:function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var i=(u=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(u)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(s," */")),o=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot).concat(t," */")}));return[n].concat(o).concat([i]).join("\n")}var u,c,s;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];null!=o&&(r[o]=!0)}for(var u=0;u<t.length;u++){var c=t[u];null!=c[0]&&r[c[0]]||(n&&!c[2]?c[2]=n:n&&(c[2]="(".concat(c[2],") and (").concat(n,")")),e.push(c))}},e}},Nsbk:function(t,e){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(e)}t.exports=n},PJYZ:function(t,e){t.exports=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}},QfWi:function(t,e,n){"use strict";n.r(e);var r=n("VkAN"),i=n.n(r),o=n("lwsE"),u=n.n(o),c=n("W8MJ"),s=n.n(c),a=n("a1gu"),l=n.n(a),f=n("Nsbk"),h=n.n(f),p=n("iWIM"),d=n.n(p),g=n("7W2i"),y=n.n(g),m=n("ymFR"),b=n("omuT"),v=n.n(b),w=n("yKgC");function A(){var t=i()(['\n      <canvas width="','" height="','"></canvas>\n      <img alt="','" height="','" width="','" src="','" @load="','">\n    ']);return A=function(){return t},t}var S="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",k=function(t){function e(){var t;return u()(this,e),(t=l()(this,h()(e).call(this))).imgSrc=S,t.src=S,t.widthThreshold=1,t.heightThreshold=1,t}return y()(e,t),s()(e,[{key:"connectedCallback",value:function(){for(var t,n=this,r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];(t=d()(h()(e.prototype),"connectedCallback",this)).call.apply(t,[this].concat(i)),setTimeout((function(){n.checkInViewport()})),this.loadImage(this.src);try{var u=Object(w.findParent)(this,"setImg");u.setImg(this)}catch(t){this.loadImage(this.src)}}},{key:"firstWithinViewport",value:function(){this.stopIsInViewportCheck(),this.loadImage(this.src)}},{key:"render",value:function(){return d()(h()(e.prototype),"render",this).call(this,(function(t,e){return e(A(),t.width,t.height,t.alt,t.height,t.width,t.imgSrc,(function(e){return t.imageLoaded(e)}))}),[v.a])}},{key:"shouldUpdate",value:function(t){return t.has("src")&&"string"==typeof this.src&&this.loadImage(this.src),!0}},{key:"loadImage",value:function(t){!0===this.onceWithinViewport&&(this.imgSrc=t,this.requestUpdate())}},{key:"imageLoaded",value:function(t){void 0===this.width&&(this.width=t.target.width),void 0===this.height&&(this.height=t.target.height),this.dispatchEvent(new CustomEvent("load"))}}],[{key:"is",get:function(){return"aofl-img"}},{key:"properties",get:function(){return{src:{type:String},imgSrc:{type:String,attribute:!1},width:{type:String},height:{type:String},alt:{type:String}}}}]),e}(Object(w.isInViewportMixin)(m.AoflElement));void 0===window.customElements.get(k.is)&&window.customElements.define(k.is,k);var O=k,x=function(t){function e(){return u()(this,e),l()(this,h()(e).apply(this,arguments))}return y()(e,t),s()(e,[{key:"connectedCallback",value:function(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];(t=d()(h()(e.prototype),"connectedCallback",this)).call.apply(t,[this].concat(r));var o=Object(w.findParent)(this,"addSource");if(!o)throw new Error("aofl-source must be used inside of aofl-picture");o.addSource(this)}},{key:"render",value:function(){return d()(h()(e.prototype),"render",this).call(this,(function(t,e){return""}))}}],[{key:"is",get:function(){return"aofl-source"}},{key:"properties",get:function(){return{media:{type:String},srcset:{type:String}}}}]),e}(m.AoflElement);void 0===window.customElements.get(x.is)&&window.customElements.define(x.is,x);var j=x,I=n("Bsl5"),P=n.n(I);function E(){var t=i()(["<slot></slot>"]);return E=function(){return t},t}var M=function(t){function e(){var t;return u()(this,e),(t=l()(this,h()(e).call(this))).img=null,t.defaultSrc=null,t.sources=[],t.updateImageSrc=function(){var n=e.findMatchingSource(t.sources);t.setMediaSrc(n)},t}return y()(e,t),s()(e,[{key:"render",value:function(){return d()(h()(e.prototype),"render",this).call(this,(function(t,e){return e(E())}),[P.a])}},{key:"setImg",value:function(t){null===this.img&&(this.img=t,this.defaultSrc={src:this.img.src,height:this.img.height,width:this.img.width},this.updateImageSrc())}},{key:"addSource",value:function(t){if(void 0===this["disable-sources"]||"false"===this["disable-sources"]){var e=window.matchMedia(t.getAttribute("media")),n={src:t.getAttribute("srcset"),height:t.getAttribute("height"),width:t.getAttribute("width"),mediaQuery:e};this.sources.push(n),e.addListener(this.updateImageSrc),this.updateImageSrc()}}},{key:"setMediaSrc",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.defaultSrc;if(this.img){var e=this.img.src;e!==t.src&&(this.img.setAttribute("src",t.src),t.width&&this.img.setAttribute("width",t.width),t.height&&this.img.setAttribute("height",t.height))}}},{key:"disconnectedCallback",value:function(){for(var t=0;t<this.sources.length;t++)this.sources[t].mediaQuery.removeListener(this.updateImageSrc);d()(h()(e.prototype),"disconnectedCallback",this).call(this)}}],[{key:"findMatchingSource",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=0;e<t.length;e++)if(!0===t[e].mediaQuery.matches)return t[e]}},{key:"is",get:function(){return"aofl-picture"}},{key:"properties",get:function(){return{"disable-sources":{type:String}}}}]),e}(m.AoflElement);void 0===window.customElements.get(M.is)&&window.customElements.define(M.is,M);var _=M;n.d(e,"AoflImg",(function(){return O})),n.d(e,"AoflSource",(function(){return j})),n.d(e,"AoflPicture",(function(){return _}))},SksO:function(t,e){function n(e,r){return t.exports=n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},n(e,r)}t.exports=n},VkAN:function(t,e){t.exports=function(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}},W8MJ:function(t,e){function n(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}t.exports=function(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),t}},a1gu:function(t,e,n){var r=n("cDf5"),i=n("PJYZ");t.exports=function(t,e){return!e||"object"!==r(e)&&"function"!=typeof e?i(t):e}},cDf5:function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=r=function(t){return n(t)}:t.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(e)}t.exports=r},iWIM:function(t,e,n){var r=n("n3AX");function i(e,n,o){return"undefined"!=typeof Reflect&&Reflect.get?t.exports=i=Reflect.get:t.exports=i=function(t,e,n){var i=r(t,e);if(i){var o=Object.getOwnPropertyDescriptor(i,e);return o.get?o.get.call(n):o.value}},i(e,n,o||e)}t.exports=i},lwsE:function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},n3AX:function(t,e,n){var r=n("Nsbk");t.exports=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=r(t)););return t}},omuT:function(t,e,n){(t.exports=n("JPst")(!1)).push([t.i,":host{display:inline-block;position:relative;line-height:0}:host canvas,:host img{width:100%;height:100%}:host img{display:inline-block;position:absolute;top:0;left:0}",""])},yKgC:function(t,e){t.exports=require("@aofl/component-utils")},ymFR:function(t,e){t.exports=require("@aofl/element")}});
+module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s="QfWi")}({"7W2i":function(t,e,n){var r=n("SksO");t.exports=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}},Bsl5:function(t,e,n){(t.exports=n("JPst")(!1)).push([t.i,":host{display:inline-block;line-height:0}",""])},JPst:function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var i=(u=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(u)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(s," */")),o=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot).concat(t," */")}));return[n].concat(o).concat([i]).join("\n")}var u,c,s;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];null!=o&&(r[o]=!0)}for(var u=0;u<t.length;u++){var c=t[u];null!=c[0]&&r[c[0]]||(n&&!c[2]?c[2]=n:n&&(c[2]="(".concat(c[2],") and (").concat(n,")")),e.push(c))}},e}},Nsbk:function(t,e){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(e)}t.exports=n},PJYZ:function(t,e){t.exports=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}},QfWi:function(t,e,n){"use strict";n.r(e);var r=n("VkAN"),i=n.n(r),o=n("lwsE"),u=n.n(o),c=n("W8MJ"),s=n.n(c),a=n("a1gu"),l=n.n(a),f=n("Nsbk"),h=n.n(f),p=n("iWIM"),d=n.n(p),g=n("7W2i"),y=n.n(g),m=n("ymFR"),b=n("omuT"),v=n.n(b),w=n("yKgC");function A(){var t=i()(['\n      <canvas width="','" height="','"></canvas>\n      <img alt="','" height="','" width="','" src="','"\n      @load="','">\n    ']);return A=function(){return t},t}var S="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",k=function(t){function e(){var t;return u()(this,e),(t=l()(this,h()(e).call(this))).imgSrc=S,t.src=S,t.widthThreshold=1,t.heightThreshold=1,t}return y()(e,t),s()(e,[{key:"connectedCallback",value:function(){for(var t,n=this,r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];(t=d()(h()(e.prototype),"connectedCallback",this)).call.apply(t,[this].concat(i)),setTimeout((function(){n.checkInViewport()})),this.loadImage(this.src);try{var u=Object(w.findParent)(this,"setImg");u.setImg(this)}catch(t){this.loadImage(this.src)}}},{key:"firstWithinViewport",value:function(){this.stopIsInViewportCheck(),this.loadImage(this.src)}},{key:"render",value:function(){var t=this;return d()(h()(e.prototype),"render",this).call(this,(function(e,n){return n(A(),t.width,t.height,t.alt,t.height,t.width,t.imgSrc,t.imageLoaded)}),[v.a])}},{key:"shouldUpdate",value:function(t){return t.has("src")&&"string"==typeof this.src&&this.loadImage(this.src),!0}},{key:"loadImage",value:function(t){!0===this.onceWithinViewport&&(this.imgSrc=t,this.requestUpdate())}},{key:"imageLoaded",value:function(t){void 0===this.width&&(this.width=t.target.width),void 0===this.height&&(this.height=t.target.height),this.dispatchEvent(new CustomEvent("load"))}}],[{key:"is",get:function(){return"aofl-img"}},{key:"properties",get:function(){return{src:{type:String},imgSrc:{type:String,attribute:!1},width:{type:String},height:{type:String},alt:{type:String}}}}]),e}(Object(w.isInViewportMixin)(m.AoflElement));void 0===window.customElements.get(k.is)&&window.customElements.define(k.is,k);var O=k,x=function(t){function e(){return u()(this,e),l()(this,h()(e).apply(this,arguments))}return y()(e,t),s()(e,[{key:"connectedCallback",value:function(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];(t=d()(h()(e.prototype),"connectedCallback",this)).call.apply(t,[this].concat(r));var o=Object(w.findParent)(this,"addSource");if(!o)throw new Error("aofl-source must be used inside of aofl-picture");o.addSource(this)}},{key:"render",value:function(){return d()(h()(e.prototype),"render",this).call(this,(function(t,e){return""}))}}],[{key:"is",get:function(){return"aofl-source"}},{key:"properties",get:function(){return{media:{type:String},srcset:{type:String}}}}]),e}(m.AoflElement);void 0===window.customElements.get(x.is)&&window.customElements.define(x.is,x);var j=x,I=n("Bsl5"),P=n.n(I);function E(){var t=i()(["<slot></slot>"]);return E=function(){return t},t}var M=function(t){function e(){var t;return u()(this,e),(t=l()(this,h()(e).call(this))).img=null,t.defaultSrc=null,t.sources=[],t.updateImageSrc=function(){var n=e.findMatchingSource(t.sources);t.setMediaSrc(n)},t}return y()(e,t),s()(e,[{key:"render",value:function(){return d()(h()(e.prototype),"render",this).call(this,(function(t,e){return e(E())}),[P.a])}},{key:"setImg",value:function(t){null===this.img&&(this.img=t,this.defaultSrc={src:this.img.src,height:this.img.height,width:this.img.width},this.updateImageSrc())}},{key:"addSource",value:function(t){if(!this["disable-sources"]){var e=window.matchMedia(t.getAttribute("media")),n={src:t.getAttribute("srcset"),height:t.getAttribute("height"),width:t.getAttribute("width"),mediaQuery:e};this.sources.push(n),e.addListener(this.updateImageSrc),this.updateImageSrc()}}},{key:"setMediaSrc",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.defaultSrc;if(this.img){var e=this.img.src;e!==t.src&&(this.img.setAttribute("src",t.src),t.width&&this.img.setAttribute("width",t.width),t.height&&this.img.setAttribute("height",t.height))}}},{key:"disconnectedCallback",value:function(){for(var t=0;t<this.sources.length;t++)this.sources[t].mediaQuery.removeListener(this.updateImageSrc);d()(h()(e.prototype),"disconnectedCallback",this).call(this)}}],[{key:"findMatchingSource",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=0;e<t.length;e++)if(!0===t[e].mediaQuery.matches)return t[e]}},{key:"is",get:function(){return"aofl-picture"}},{key:"properties",get:function(){return{"disable-sources":{type:Boolean}}}}]),e}(m.AoflElement);void 0===window.customElements.get(M.is)&&window.customElements.define(M.is,M);var _=M;n.d(e,"AoflImg",(function(){return O})),n.d(e,"AoflSource",(function(){return j})),n.d(e,"AoflPicture",(function(){return _}))},SksO:function(t,e){function n(e,r){return t.exports=n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},n(e,r)}t.exports=n},VkAN:function(t,e){t.exports=function(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}},W8MJ:function(t,e){function n(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}t.exports=function(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),t}},a1gu:function(t,e,n){var r=n("cDf5"),i=n("PJYZ");t.exports=function(t,e){return!e||"object"!==r(e)&&"function"!=typeof e?i(t):e}},cDf5:function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=r=function(t){return n(t)}:t.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(e)}t.exports=r},iWIM:function(t,e,n){var r=n("n3AX");function i(e,n,o){return"undefined"!=typeof Reflect&&Reflect.get?t.exports=i=Reflect.get:t.exports=i=function(t,e,n){var i=r(t,e);if(i){var o=Object.getOwnPropertyDescriptor(i,e);return o.get?o.get.call(n):o.value}},i(e,n,o||e)}t.exports=i},lwsE:function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},n3AX:function(t,e,n){var r=n("Nsbk");t.exports=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=r(t)););return t}},omuT:function(t,e,n){(t.exports=n("JPst")(!1)).push([t.i,":host{display:inline-block;position:relative;line-height:0}:host canvas,:host img{width:100%;height:100%}:host img{display:inline-block;position:absolute;top:0;left:0}",""])},yKgC:function(t,e){t.exports=require("@aofl/component-utils")},ymFR:function(t,e){t.exports=require("@aofl/element")}});
 //# sourceMappingURL=index.js.map

modules/image.js

@@ -93,4 +93,5 @@ /**
     return super.render((ctx, html) => html`
-      <canvas width="${ctx.width}" height="${ctx.height}"></canvas>
-      <img alt="${ctx.alt}" height="${ctx.height}" width="${ctx.width}" src="${ctx.imgSrc}" @load="${(e) => ctx.imageLoaded(e)}">
+      <canvas width="${this.width}" height="${this.height}"></canvas>
+      <img alt="${this.alt}" height="${this.height}" width="${this.width}" src="${this.imgSrc}"
+      @load="${this.imageLoaded}">
     `, [styles]);
@@ -97,0 +98,0 @@ }

modules/picture.js

@@ -46,3 +46,3 @@ /**
     return {
-      'disable-sources': {type: String}
+      'disable-sources': {type: Boolean}
     };
@@ -81,3 +81,3 @@ }
   addSource(source) {
-    if (typeof this['disable-sources'] !== 'undefined' && this['disable-sources'] !== 'false') { return; }
+    if (this['disable-sources']) return;
     const mediaQuery = window.matchMedia(source.getAttribute('media'));
@@ -84,0 +84,0 @@ const sourceAttributes = {

package.json

 {
   "name": "@aofl/picture",
-  "version": "3.0.0-beta.35",
+  "version": "3.0.0-beta.36",
   "description": "`<aofl-picture>` serves as a container for zero or more `<aofl-source>` and one `<aofl-img>` elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the `aofl-source` element. `<aofl-img>` embeds an image into the document. It behaves similarly to `<img>` with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this `<aofl-img>` can be combined with `<aofl-picture>` and `<aofl-source>` to provide different images for different display sizes. AoflSource component must be used as a child of aofl-picture and specifies images for different media queries.",
@@ -42,11 +42,12 @@ "main": "index.js",
   "devDependencies": {
-    "@aofl/cli": "^3.0.0-beta.35",
-    "@aofl/component-utils": "^3.0.0-beta.35",
-    "@aofl/element": "^3.0.0-beta.35",
+    "@aofl/cli": "^3.0.0-beta.36",
+    "@aofl/component-utils": "^3.0.0-beta.36",
+    "@aofl/element": "^3.0.0-beta.36",
     "cross-env": "^6.0.3",
     "jsdoc": "^3.6.3",
     "jsdoc-babel": "^0.5.0",
+    "lit-html": "1.1.2",
     "tsd-jsdoc": "^2.4.0"
   },
-  "gitHead": "6506e91bedeb6cd9a30c22f437603e14e02a3ca3"
+  "gitHead": "9eae9fc87437b61f0019ffedccbc3df7c8e02a78"
 }

test/aofl-img.spec.js

@@ -34,3 +34,3 @@ /* eslint no-invalid-this: "off" */
     beforeEach(function() {
-      this.testContainer = getTestContainer();
+      this.testContainer2 = getTestContainer();
 
@@ -42,6 +42,9 @@ const left = -10 * window.innerHeight;
       </div>
-      `, this.testContainer);
+      `, this.testContainer2);
 
-      this.elementOutside = this.testContainer.querySelector('#ImageNotVisibleOnLoad');
+      this.elementOutside = this.testContainer2.querySelector('#ImageNotVisibleOnLoad');
     });
+    afterEach(function() {
+      cleanTestContainer(this.testContainer2);
+    });
 
@@ -62,7 +65,3 @@ it('should not load the image when element is outside the viewport', async function() {
     });
-
-    afterEach(function() {
-      cleanTestContainer(this.testContainer);
-    });
   });
 });

test/aofl-picture.spec.js

@@ -34,22 +34,5 @@ /* eslint no-invalid-this: "off" */
       </aofl-picture>
-
-      <aofl-picture id="MultipleImg">
-        <aofl-source media="(max-width: 320px)" srcset="https://via.placeholder.com/300x150" width="300" height="150"></aofl-source>
-        <aofl-source media="(max-width: 500px)" srcset="https://via.placeholder.com/500x250" width="500" height="250"></aofl-source>
-        <aofl-source media="(max-width: 700px)" srcset="https://via.placeholder.com/700x350" width="700" height="350"></aofl-source>
-        <aofl-img id="main" src="https://via.placeholder.com/1000x500" width="1000" height="500"></aofl-img>
-        <aofl-img src="https://via.placeholder.com/2000x1000" width="1000" height="500"></aofl-img>
-      </aofl-picture>
-
-      <aofl-picture id="SourcesDisabled" disable-sources>
-        <aofl-source media="(max-width: 320px)" srcset="https://via.placeholder.com/300x150" width="300" height="150"></aofl-source>
-        <aofl-source media="(max-width: 500px)" srcset="https://via.placeholder.com/500x250" width="500" height="250"></aofl-source>
-        <aofl-source media="(max-width: 700px)" srcset="https://via.placeholder.com/700x350" width="700" height="350"></aofl-source>
-        <aofl-img src="https://via.placeholder.com/1000x500" width="1000" height="500"></aofl-img>
-      </aofl-picture>
     `, this.testContainer);
 
     this.basicPictureElement = this.testContainer.querySelector('#BasicPicture');
-    this.multipleImgElement = this.testContainer.querySelector('#MultipleImg');
-    this.sourcesDisabledElement = this.testContainer.querySelector('#SourcesDisabled');
   });
@@ -101,44 +84,2 @@
   });
-
-  it('should only take the first aofl-img tag', async function() {
-    try {
-      const element = this.multipleImgElement;
-      const mainImg = element.querySelector('#main');
-      await element.updateComplete;
-
-      expect(element.img).to.be.equal(mainImg);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  });
-
-  it('should not update source when window size changes to 1000px and sources-disabled', async function() {
-    try {
-      const element = this.sourcesDisabledElement;
-      window.parent.document.querySelector('iframe').width = 1000;
-
-      element.requestUpdate();
-      await element.updateComplete;
-      const src = element.querySelector('aofl-img').src;
-
-      expect(src).to.be.equal(this.getSource(1000));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  });
-
-  it('should not update source when window size changes to 200px and sources-disabled', async function() {
-    try {
-      const element = this.sourcesDisabledElement;
-      window.parent.document.querySelector('iframe').width = 200;
-
-      element.requestUpdate();
-      await element.updateComplete;
-      const src = element.querySelector('aofl-img').src;
-
-      expect(src).to.be.equal(this.getSource(1000));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  });
 });

No alert changes

Improved metrics

Number of package files

18

increased by5.88%

Lines of code

775

increased by1.97%

Worsened metrics

Total package byte prevSize

48814

decreased by-0.01%

Dev dependency count

8

increased by14.29%

No dependency changes