@patternfly/pfe-avatar - npm Package Compare versions

Comparing version 2.0.0-next.1 to 2.0.0-next.2

custom-elements.json

@@ -37,3 +37,3 @@ {
               "static": true,
-              "default": "'{{version}}'",
+              "default": "2.0.0-next.2",
               "readonly": true
@@ -428,3 +428,11 @@ },
           "tagName": "pfe-avatar",
-          "customElement": true
+          "customElement": true,
+          "demos": [
+            {
+              "url": "https://patternflyelements.org/components/avatar/demo/",
+              "source": {
+                "href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pfe-avatar/demo/pfe-avatar.html"
+              }
+            }
+          ]
         }
@@ -431,0 +439,0 @@ ],

package.json

 {
   "name": "@patternfly/pfe-avatar",
   "license": "MIT",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "customElements": "custom-elements.json",
@@ -68,5 +68,5 @@ "type": "module",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.3",
-    "lit": "^2.1.2"
+    "@patternfly/pfe-core": "^2.0.0-next.8",
+    "lit": "2.3.0"
   }
 }

pfe-avatar.js

@@ -1,2 +0,2 @@
-var V=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var u=(n,e,t,r)=>{for(var i=r>1?void 0:r?z(e,t):e,a=n.length-1,l;a>=0;a--)(l=n[a])&&(i=(r?l(e,t,i):l(i))||i);return r&&i&&V(e,t,i),i};import{LitElement as B,html as k}from"lit";import{property as _,customElement as G,query as j}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{Logger as q}from"@patternfly/pfe-core/controllers/logger.js";import{CssVariableController as E}from"@patternfly/pfe-core/controllers/css-variable-controller.js";import{pfelement as I,bound as $,observed as x}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as N}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";function S(n){let e=5381,t=n.length;for(;t;)e=e*33^n.charCodeAt(--t);return e>>>0}function b(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),6*t<1?n+(e-n)*6*t:2*t<1?e:3*t<2?n+(e-n)*(2/3-t)*6:n}function y(n,e,t){let r,i,a,l=Math.max(0,Math.min(1,n)),c=Math.max(0,Math.min(1,e)),o=Math.max(0,Math.min(1,t));if(c===0)r=o*255,i=o*255,a=o*255;else{let d,h;o<.5?h=o*(1+c):h=o+c-c*o,d=2*o-h,r=Math.floor(255*b(d,h,l+1/3)),i=Math.floor(255*b(d,h,l)),a=Math.floor(255*b(d,h,l-1/3))}return[r,i,a]}function C(n,e,t){let r,i,a,l=Math.max(0,Math.min(255,n)),c=Math.max(0,Math.min(255,e)),o=Math.max(0,Math.min(255,t)),d=l/255,h=c/255,f=o/255,g=Math.min(Math.min(d,h),f),p=Math.max(Math.max(d,h),f),m=p-g;if(a=(p+g)/2,m===0)r=0,i=0;else{a<.5?i=m/(p+g):i=m/(2-p-g);let v=((p-d)/6+m/2)/m,w=((p-h)/6+m/2)/m,M=((p-f)/6+m/2)/m;d===p?r=M-w:h===p?r=1/3+v-M:f===p&&(r=2/3+w-v),r??(r=0),r<0?r+=1:r>1&&(r-=1)}return[r,i,a]}import{css as D}from"lit";var R=D`:host{display:block;position:relative;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}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:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{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%;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none}`,T=R;function U(n){n.registerColors()}var s=class extends B{constructor(){super(...arguments);this.name="";this.pattern="squares";this.shape="square";this._squareSize=0;this._triangleSize=0;this._colorIndex=-1;this.color1="";this.color2="";this.css=new E(this)}static _registerColor(e){s.colors.push({color1:`rgb(${e.join(",")})`,color2:`rgb(${this._adjustColor(e).join(",")})`})}static _adjustColor(e){let i=C(...e);return i[2]+=i[2]>.1?-.1:.1,y(...i)}static registerColors(){return s.colors=[],(this.customColors||this.defaultColors).split(/\s+/).forEach(t=>{let r;switch(t.length){case 4:if(r=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t),r){r.shift();let i=r.map(a=>parseInt(a+a,16));s._registerColor(i)}else q.log(`[pfe-avatar] invalid color ${t}`);break;case 7:if(r=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t),r){r.shift();let i=r.map(a=>parseInt(a,16));s._registerColor(i)}else q.log(`[pfe-avatar] invalid color ${t}`)}}),this.colors}get customColors(){return this.css.getVariable("pfe-avatar--colors")}render(){return k`<canvas part="canvas"></canvas><img src="${L(this.src)}" alt="" part="img">`}firstUpdated(){this._initCanvas(),this.dispatchEvent(N("pfe-avatar:connected"))}_initCanvas(){if(!this._canvas)throw new Error("canvas unavailable");let e=this.css.getVariable("pfe-avatar--width"),t=parseInt(e??s.defaultSize.toString());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"),this._update()}_update(){if(!this.src){let e=S(this.name).toString(2),t=e.split("").map(r=>Number(r));this._colorIndex=Math.floor(s.colors.length*parseInt(e,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==="squares"?this._drawSquarePattern(t):this.pattern==="triangles"&&this._drawTrianglePattern(t)}}_clear(){this._ctx&&this._canvas&&this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx&&this._canvas&&(this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height))}_drawSquarePattern(e){if(this._ctx){this._ctx.fillStyle=this.color2;let t=e.length;for(;t--;)e[t]&&this._drawMirroredSquare(t%4,Math.floor(t/4))}}_drawMirroredSquare(e,t){this._ctx&&(this._drawSquare(e,t),this._drawSquare(7-e,t))}_drawSquare(e,t){this._ctx&&this._ctx.fillRect(this._squareSize*e,this._squareSize*t,this._squareSize,this._squareSize)}_drawTrianglePattern(e){if(this._ctx){this._ctx.fillStyle=this.color2??"";let t=e.length;for(;t--;)if(e[t]){let r=Math.floor(t/2)%2,i=Math.floor(t/4),a=t%4,l=[r,i],c=[r,i],o=[r,i];switch(a){case 0:c[1]++,o[0]++,o[1]++;break;case 1:c[0]++,o[0]++,o[1]++;break;case 2:c[0]++,o[1]++;break;case 3:l[0]++,c[0]++,c[1]++,o[1]++;break}this._drawMirroredTriangle(l,c,o)}}}_drawMirroredTriangle(e,t,r){this._ctx&&(this._drawTriangle(e,t,r),this._drawTriangle([4-e[0],e[1]],[4-t[0],t[1]],[4-r[0],r[1]]))}_drawTriangle(e,t,r){let i=a=>a*this._triangleSize;this._ctx&&(this._ctx.beginPath(),this._ctx.moveTo(...e.map(i)),this._ctx.lineTo(...t.map(i)),this._ctx.lineTo(...r.map(i)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill())}};s.version="{{version}}",s.styles=T,s.defaultSize=128,s.defaultColors="#67accf #448087 #709c6b #a35252 #826cbb",s.colors=[],u([x("_update"),_({reflect:!0})],s.prototype,"src",2),u([x("_update"),_({reflect:!0})],s.prototype,"name",2),u([x("_update"),_({reflect:!0})],s.prototype,"pattern",2),u([_({reflect:!0})],s.prototype,"shape",2),u([j("canvas")],s.prototype,"_canvas",2),u([$],s.prototype,"_initCanvas",1),s=u([G("pfe-avatar"),I(),U],s);export{s as PfeAvatar};
+var V=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var u=(o,n,e,t)=>{for(var r=t>1?void 0:t?z(n,e):n,i=o.length-1,a;i>=0;i--)(a=o[i])&&(r=(t?a(n,e,r):a(r))||r);return t&&r&&V(n,e,r),r};import{LitElement as B,html as k}from"lit";import{property as _,customElement as G,query as j}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{Logger as q}from"@patternfly/pfe-core/controllers/logger.js";import{CssVariableController as E}from"@patternfly/pfe-core/controllers/css-variable-controller.js";import{pfelement as I,bound as $,observed as x}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as N}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";function S(o){let n=5381,e=o.length;for(;e;)n=n*33^o.charCodeAt(--e);return n>>>0}function b(o,n,e){return e<0&&(e+=1),e>1&&(e-=1),6*e<1?o+(n-o)*6*e:2*e<1?n:3*e<2?o+(n-o)*(2/3-e)*6:o}function y(o,n,e){let t,r,i,a=Math.max(0,Math.min(1,o)),d=Math.max(0,Math.min(1,n)),c=Math.max(0,Math.min(1,e));if(d===0)t=c*255,r=c*255,i=c*255;else{let l,h;c<.5?h=c*(1+d):h=c+d-d*c,l=2*c-h,t=Math.floor(255*b(l,h,a+1/3)),r=Math.floor(255*b(l,h,a)),i=Math.floor(255*b(l,h,a-1/3))}return[t,r,i]}function C(o,n,e){let t,r,i,a=Math.max(0,Math.min(255,o)),d=Math.max(0,Math.min(255,n)),c=Math.max(0,Math.min(255,e)),l=a/255,h=d/255,f=c/255,g=Math.min(Math.min(l,h),f),p=Math.max(Math.max(l,h),f),m=p-g;if(i=(p+g)/2,m===0)t=0,r=0;else{i<.5?r=m/(p+g):r=m/(2-p-g);let v=((p-l)/6+m/2)/m,w=((p-h)/6+m/2)/m,M=((p-f)/6+m/2)/m;l===p?t=M-w:h===p?t=1/3+v-M:f===p&&(t=2/3+w-v),t??(t=0),t<0?t+=1:t>1&&(t-=1)}return[t,r,i]}import{css as D}from"lit";var R=D`:host{display:block;position:relative;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}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:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{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%;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none}`,T=R;function U(o){o.registerColors()}var s=class extends B{constructor(){super(...arguments);this.name="";this.pattern="squares";this.shape="square";this._squareSize=0;this._triangleSize=0;this._colorIndex=-1;this.color1="";this.color2="";this.css=new E(this)}static _registerColor(e){s.colors.push({color1:`rgb(${e.join(",")})`,color2:`rgb(${this._adjustColor(e).join(",")})`})}static _adjustColor(e){let i=C(...e);return i[2]+=i[2]>.1?-.1:.1,y(...i)}static registerColors(){return s.colors=[],(this.customColors||this.defaultColors).split(/\s+/).forEach(t=>{let r;switch(t.length){case 4:if(r=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t),r){r.shift();let i=r.map(a=>parseInt(a+a,16));s._registerColor(i)}else q.log(`[pfe-avatar] invalid color ${t}`);break;case 7:if(r=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t),r){r.shift();let i=r.map(a=>parseInt(a,16));s._registerColor(i)}else q.log(`[pfe-avatar] invalid color ${t}`)}}),this.colors}get customColors(){return this.css.getVariable("pfe-avatar--colors")}render(){return k`<canvas part="canvas"></canvas><img src="${L(this.src)}" alt="" part="img">`}firstUpdated(){this._initCanvas(),this.dispatchEvent(N("pfe-avatar:connected"))}_initCanvas(){if(!this._canvas)throw new Error("canvas unavailable");let e=this.css.getVariable("pfe-avatar--width"),t=parseInt(e??s.defaultSize.toString());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"),this._update()}_update(){if(!this.src){let e=S(this.name).toString(2),t=e.split("").map(r=>Number(r));this._colorIndex=Math.floor(s.colors.length*parseInt(e,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==="squares"?this._drawSquarePattern(t):this.pattern==="triangles"&&this._drawTrianglePattern(t)}}_clear(){this._ctx&&this._canvas&&this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx&&this._canvas&&(this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height))}_drawSquarePattern(e){if(this._ctx){this._ctx.fillStyle=this.color2;let t=e.length;for(;t--;)e[t]&&this._drawMirroredSquare(t%4,Math.floor(t/4))}}_drawMirroredSquare(e,t){this._ctx&&(this._drawSquare(e,t),this._drawSquare(7-e,t))}_drawSquare(e,t){this._ctx&&this._ctx.fillRect(this._squareSize*e,this._squareSize*t,this._squareSize,this._squareSize)}_drawTrianglePattern(e){if(this._ctx){this._ctx.fillStyle=this.color2??"";let t=e.length;for(;t--;)if(e[t]){let r=Math.floor(t/2)%2,i=Math.floor(t/4),a=t%4,d=[r,i],c=[r,i],l=[r,i];switch(a){case 0:c[1]++,l[0]++,l[1]++;break;case 1:c[0]++,l[0]++,l[1]++;break;case 2:c[0]++,l[1]++;break;case 3:d[0]++,c[0]++,c[1]++,l[1]++;break}this._drawMirroredTriangle(d,c,l)}}}_drawMirroredTriangle(e,t,r){this._ctx&&(this._drawTriangle(e,t,r),this._drawTriangle([4-e[0],e[1]],[4-t[0],t[1]],[4-r[0],r[1]]))}_drawTriangle(e,t,r){let i=a=>a*this._triangleSize;this._ctx&&(this._ctx.beginPath(),this._ctx.moveTo(...e.map(i)),this._ctx.lineTo(...t.map(i)),this._ctx.lineTo(...r.map(i)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill())}};s.version="{{version}}",s.styles=T,s.defaultSize=128,s.defaultColors="#67accf #448087 #709c6b #a35252 #826cbb",s.colors=[],u([x("_update"),_({reflect:!0})],s.prototype,"src",2),u([x("_update"),_({reflect:!0})],s.prototype,"name",2),u([x("_update"),_({reflect:!0})],s.prototype,"pattern",2),u([_({reflect:!0})],s.prototype,"shape",2),u([j("canvas")],s.prototype,"_canvas",2),u([$],s.prototype,"_initCanvas",1),s=u([G("pfe-avatar"),I(),U],s);export{s as PfeAvatar};
 //# sourceMappingURL=pfe-avatar.js.map

No alert changes

Improved metrics

Total package byte prevSize

45395

increased by4.64%

Lines of code

605

increased by1.34%

Dependency changes

• + Addedlit@2.3.0(transitive)

• Updated@patternfly/pfe-core@^2.0.0-next.8

• Updatedlit@2.3.0