@patternfly/pfe-avatar - npm Package Compare versions

Comparing version 1.11.2 to 1.12.0

dist/pfe-avatar.js

@@ -131,3 +131,3 @@ import PFElement from '../../pfelement/dist/pfelement.js';
 /*!
- * PatternFly Elements: PfeAvatar 1.11.2
+ * PatternFly Elements: PfeAvatar 1.12.0
  * @license
@@ -160,3 +160,3 @@ * Copyright 2021 Red Hat, Inc.
   static get version() {
-    return "1.11.2";
+    return "1.12.0";
   }
@@ -163,0 +163,0 @@

dist/pfe-avatar.min.js

 import t from"../../pfelement/dist/pfelement.min.js";function e(t,e,a){return a<0&&(a+=1),a>1&&(a-=1),6*a<1?t+6*(e-t)*a:2*a<1?e:3*a<2?t+(e-t)*(2/3-a)*6:t}
 /*!
- * PatternFly Elements: PfeAvatar 1.11.2
+ * PatternFly Elements: PfeAvatar 1.12.0
  * @license
@@ -26,3 +26,3 @@ * Copyright 2021 Red Hat, Inc.
 */
-class a extends t{static get version(){return"1.11.2"}get html(){return"\n<style>:host{display:block;position:relative;width:128px;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:128px;height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{border-radius:calc(128px / 8 + 1px);border-radius:calc(var(--pfe-avatar--size,var(--pfe-avatar--width,128px))/ 8 + 1px)}:host([shape=circle]) canvas,:host([shape=circle]) img{border-radius:50%}:host([src]) canvas{display:none}:host([src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none} /*# sourceMappingURL=pfe-avatar.min.css.map */</style>\n<canvas></canvas>\n<img>"}static get tag(){return"pfe-avatar"}static get properties(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:a.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get events(){return{connected:this.tag+":connected"}}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultSize(){return 128}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get customColors(){return this.cssVariable("pfe-avatar--colors")}constructor(){super(a),this._initCanvas=this._initCanvas.bind(this)}connectedCallback(){this._initCanvas(),super.connectedCallback(),this.emitEvent(a.events.connected,{bubbles:!1})}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.cssVariable("pfe-avatar--width"),e=t&&t.replace(/px$/,"")||a.defaultSize;this._canvas.width=e,this._canvas.height=e,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){this.colors=[];return(this.customColors||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let i,r,s;const n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,h=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,o),h),l=Math.max(Math.max(n,o),h),d=l-c;if(s=(l+c)/2,0===d)i=0,r=0;else{r=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-o)/6+d/2)/d,a=((l-h)/6+d/2)/d;n==l?i=a-e:o==l?i=1/3+t-a:h==l&&(i=2/3+e-t),i<0?i+=1:i>1&&(i-=1)}return[i,r,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,i){let r,s,n;const o=Math.max(0,Math.min(1,t)),h=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,i));if(0==h)r=255*c,s=255*c,n=255*c;else{let t,a;a=c<.5?c*(1+h):c+h-h*c,t=2*c-a,r=Math.floor(255*e(t,a,o+1/3)),s=Math.floor(255*e(t,a,o)),n=Math.floor(255*e(t,a,o-1/3))}return[r,s,n]}(...a)}_updateWhenConnected(){this.hasAttribute("pfelement")?this.update():this.addEventListener(a.events.connected,()=>this.update())}update(){if(this.src)this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),i=[t,a],r=[t,a],s=[t,a];switch(e%4){case 0:r[1]++,s[0]++,s[1]++;break;case 1:r[0]++,s[0]++,s[1]++;break;case 2:r[0]++,s[1]++;break;case 3:i[0]++,r[0]++,r[1]++,s[1]++}this._drawMirroredTriangle(i,r,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,i=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",i+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",i+="00"),t.addColorStop(0,a),t.addColorStop(1,i),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a;
+class a extends t{static get version(){return"1.12.0"}get html(){return"\n<style>:host{display:block;position:relative;width:128px;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:128px;height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{border-radius:calc(128px / 8 + 1px);border-radius:calc(var(--pfe-avatar--size,var(--pfe-avatar--width,128px))/ 8 + 1px)}:host([shape=circle]) canvas,:host([shape=circle]) img{border-radius:50%}:host([src]) canvas{display:none}:host([src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none} /*# sourceMappingURL=pfe-avatar.min.css.map */</style>\n<canvas></canvas>\n<img>"}static get tag(){return"pfe-avatar"}static get properties(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:a.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get events(){return{connected:this.tag+":connected"}}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultSize(){return 128}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get customColors(){return this.cssVariable("pfe-avatar--colors")}constructor(){super(a),this._initCanvas=this._initCanvas.bind(this)}connectedCallback(){this._initCanvas(),super.connectedCallback(),this.emitEvent(a.events.connected,{bubbles:!1})}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.cssVariable("pfe-avatar--width"),e=t&&t.replace(/px$/,"")||a.defaultSize;this._canvas.width=e,this._canvas.height=e,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){this.colors=[];return(this.customColors||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let i,r,s;const n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,h=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,o),h),l=Math.max(Math.max(n,o),h),d=l-c;if(s=(l+c)/2,0===d)i=0,r=0;else{r=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-o)/6+d/2)/d,a=((l-h)/6+d/2)/d;n==l?i=a-e:o==l?i=1/3+t-a:h==l&&(i=2/3+e-t),i<0?i+=1:i>1&&(i-=1)}return[i,r,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,i){let r,s,n;const o=Math.max(0,Math.min(1,t)),h=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,i));if(0==h)r=255*c,s=255*c,n=255*c;else{let t,a;a=c<.5?c*(1+h):c+h-h*c,t=2*c-a,r=Math.floor(255*e(t,a,o+1/3)),s=Math.floor(255*e(t,a,o)),n=Math.floor(255*e(t,a,o-1/3))}return[r,s,n]}(...a)}_updateWhenConnected(){this.hasAttribute("pfelement")?this.update():this.addEventListener(a.events.connected,()=>this.update())}update(){if(this.src)this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),i=[t,a],r=[t,a],s=[t,a];switch(e%4){case 0:r[1]++,s[0]++,s[1]++;break;case 1:r[0]++,s[0]++,s[1]++;break;case 2:r[0]++,s[1]++;break;case 3:i[0]++,r[0]++,r[1]++,s[1]++}this._drawMirroredTriangle(i,r,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,i=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",i+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",i+="00"),t.addColorStop(0,a),t.addColorStop(1,i),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a;
 //# sourceMappingURL=pfe-avatar.min.js.map

dist/pfe-avatar.umd.js

@@ -225,3 +225,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PfeAvatar 1.11.2
+   * PatternFly Elements: PfeAvatar 1.12.0
    * @license
@@ -281,3 +281,3 @@ * Copyright 2021 Red Hat, Inc.
       get: function get() {
-        return "1.11.2";
+        return "1.12.0";
       }
@@ -284,0 +284,0 @@ }, {

dist/pfe-avatar.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],e):(t=t||self).PfeAvatar=e(t.PFElement)}(this,function(t){"use strict";function c(t,e,r){return r<0&&(r+=1),1<r&&--r,6*r<1?t+6*(e-t)*r:2*r<1?e:3*r<2?t+(e-t)*(2/3-r)*6:t}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t};function a(t,e){for(var r=0;r<e.length;r++){var a=e[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function i(t,e,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,e);if(void 0!==a){if("value"in a)return a.value;a=a.get;return void 0!==a?a.call(r):void 0}if(null!==(t=Object.getPrototypeOf(t)))return i(t,e,r)}function n(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)}var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},r=(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(s,t),r(s,[{key:"html",get:function(){return"\n<style>:host{display:block;position:relative;width:128px;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:128px;height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{border-radius:calc(128px / 8 + 1px);border-radius:calc(var(--pfe-avatar--size,var(--pfe-avatar--width,128px))/ 8 + 1px)}:host([shape=circle]) canvas,:host([shape=circle]) img{border-radius:50%}:host([src]) canvas{display:none}:host([src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none} /*# sourceMappingURL=pfe-avatar.min.css.map */</style>\n<canvas></canvas>\n<img>"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"customColors",get:function(){return this.cssVariable("pfe-avatar--colors")}}],[{key:"version",get:function(){return"1.11.2"}},{key:"tag",get:function(){return"pfe-avatar"}},{key:"properties",get:function(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:s.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}},{key:"events",get:function(){return{connected:this.tag+":connected"}}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultSize",get:function(){return 128}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(s,[{key:"connectedCallback",value:function(){this._initCanvas(),i(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.emitEvent(s.events.connected,{bubbles:!1})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.cssVariable("pfe-avatar--width"),t=t&&t.replace(/px$/,"")||s.defaultSize;this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"_updateWhenConnected",value:function(){var t=this;this.hasAttribute("pfelement")?this.update():this.addEventListener(s.events.connected,function(){return t.update()})}},{key:"update",value:function(){var t,e;this.src?this.shadowRoot.querySelector("img").src=this.src:(e=(t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2)).split("").map(function(t){return Number(t)}),this._colorIndex=Math.floor(s.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=s.colors[this._colorIndex].color1,this.color2=s.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===s.patterns.squares?this._drawSquarePattern(e):this.pattern===s.patterns.triangles&&this._drawTrianglePattern(e))}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,n(t.map(function(t){return t*i._triangleSize}))),(t=this._ctx).lineTo.apply(t,n(e.map(function(t){return t*i._triangleSize}))),(e=this._ctx).lineTo.apply(e,n(r.map(function(t){return t*i._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var a=this;return this.colors=[],(this.customColors||this.defaultColors).split(/\s+/).forEach(function(t){var e,r=void 0;switch(t.length){case 4:(r=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t+t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t);break;case 7:(r=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){s.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){t=function(t,e,r){var a=void 0,i=void 0,n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,s=Math.max(0,Math.min(255,r))/255,c=Math.min(Math.min(n,o),s),l=((t=Math.max(Math.max(n,o),s))+c)/2;return 0==(e=t-c)?i=a=0:(i=l<.5?e/(t+c):e/(2-t-c),r=((t-n)/6+e/2)/e,c=((t-o)/6+e/2)/e,e=((t-s)/6+e/2)/e,n==t?a=e-c:o==t?a=1/3+r-e:s==t&&(a=2/3+c-r),a<0?a+=1:1<a&&--a),[a,i,l]}.apply(void 0,n(t));return t[2]+=.1<t[2]?-.1:.1,function(t,e,r){var a=void 0,i=void 0,n=void 0,o=Math.max(0,Math.min(1,t)),s=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,r));return n=0==s?i=a=255*t:(r=e=void 0,e=2*t-(r=t<.5?t*(1+s):t+s-s*t),a=Math.floor(255*c(e,r,o+1/3)),i=Math.floor(255*c(e,r,o)),Math.floor(255*c(e,r,o-1/3))),[a,i,n]}.apply(void 0,n(t))}}]),s);function s(){e(this,s);var t=o(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,s));return t._initCanvas=t._initCanvas.bind(t),t}return r._registerColors(),t.create(r),r});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],e):(t=t||self).PfeAvatar=e(t.PFElement)}(this,function(t){"use strict";function c(t,e,r){return r<0&&(r+=1),1<r&&--r,6*r<1?t+6*(e-t)*r:2*r<1?e:3*r<2?t+(e-t)*(2/3-r)*6:t}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t};function a(t,e){for(var r=0;r<e.length;r++){var a=e[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function i(t,e,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,e);if(void 0!==a){if("value"in a)return a.value;a=a.get;return void 0!==a?a.call(r):void 0}if(null!==(t=Object.getPrototypeOf(t)))return i(t,e,r)}function n(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)}var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},r=(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(s,t),r(s,[{key:"html",get:function(){return"\n<style>:host{display:block;position:relative;width:128px;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:128px;height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{border-radius:calc(128px / 8 + 1px);border-radius:calc(var(--pfe-avatar--size,var(--pfe-avatar--width,128px))/ 8 + 1px)}:host([shape=circle]) canvas,:host([shape=circle]) img{border-radius:50%}:host([src]) canvas{display:none}:host([src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none} /*# sourceMappingURL=pfe-avatar.min.css.map */</style>\n<canvas></canvas>\n<img>"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"customColors",get:function(){return this.cssVariable("pfe-avatar--colors")}}],[{key:"version",get:function(){return"1.12.0"}},{key:"tag",get:function(){return"pfe-avatar"}},{key:"properties",get:function(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:s.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}},{key:"events",get:function(){return{connected:this.tag+":connected"}}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultSize",get:function(){return 128}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(s,[{key:"connectedCallback",value:function(){this._initCanvas(),i(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.emitEvent(s.events.connected,{bubbles:!1})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.cssVariable("pfe-avatar--width"),t=t&&t.replace(/px$/,"")||s.defaultSize;this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"_updateWhenConnected",value:function(){var t=this;this.hasAttribute("pfelement")?this.update():this.addEventListener(s.events.connected,function(){return t.update()})}},{key:"update",value:function(){var t,e;this.src?this.shadowRoot.querySelector("img").src=this.src:(e=(t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2)).split("").map(function(t){return Number(t)}),this._colorIndex=Math.floor(s.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=s.colors[this._colorIndex].color1,this.color2=s.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===s.patterns.squares?this._drawSquarePattern(e):this.pattern===s.patterns.triangles&&this._drawTrianglePattern(e))}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,n(t.map(function(t){return t*i._triangleSize}))),(t=this._ctx).lineTo.apply(t,n(e.map(function(t){return t*i._triangleSize}))),(e=this._ctx).lineTo.apply(e,n(r.map(function(t){return t*i._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var a=this;return this.colors=[],(this.customColors||this.defaultColors).split(/\s+/).forEach(function(t){var e,r=void 0;switch(t.length){case 4:(r=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t+t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t);break;case 7:(r=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){s.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){t=function(t,e,r){var a=void 0,i=void 0,n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,s=Math.max(0,Math.min(255,r))/255,c=Math.min(Math.min(n,o),s),l=((t=Math.max(Math.max(n,o),s))+c)/2;return 0==(e=t-c)?i=a=0:(i=l<.5?e/(t+c):e/(2-t-c),r=((t-n)/6+e/2)/e,c=((t-o)/6+e/2)/e,e=((t-s)/6+e/2)/e,n==t?a=e-c:o==t?a=1/3+r-e:s==t&&(a=2/3+c-r),a<0?a+=1:1<a&&--a),[a,i,l]}.apply(void 0,n(t));return t[2]+=.1<t[2]?-.1:.1,function(t,e,r){var a=void 0,i=void 0,n=void 0,o=Math.max(0,Math.min(1,t)),s=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,r));return n=0==s?i=a=255*t:(r=e=void 0,e=2*t-(r=t<.5?t*(1+s):t+s-s*t),a=Math.floor(255*c(e,r,o+1/3)),i=Math.floor(255*c(e,r,o)),Math.floor(255*c(e,r,o-1/3))),[a,i,n]}.apply(void 0,n(t))}}]),s);function s(){e(this,s);var t=o(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,s));return t._initCanvas=t._initCanvas.bind(t),t}return r._registerColors(),t.create(r),r});
 //# sourceMappingURL=pfe-avatar.umd.min.js.map

package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Avatar for PatternFly Elements",
@@ -48,6 +48,6 @@ "keywords": [
   "devDependencies": {
-    "@patternfly/pfe-sass": "^1.11.2"
+    "@patternfly/pfe-sass": "^1.12.0"
   },
   "dependencies": {
-    "@patternfly/pfelement": "^1.11.2"
+    "@patternfly/pfelement": "^1.12.0"
   },
@@ -58,3 +58,3 @@ "generator-pfelement-version": "0.6.8",
   },
-  "gitHead": "5adee443614cd02f28991c3b161bf4f82e2338e4"
+  "gitHead": "0895dfd7fd6e63a61c8e83852ffec30a51d7d40b"
 }

No alert changes

No metric changes

Dependency changes

• Updated@patternfly/pfelement@^1.12.0