@patternfly/pfe-avatar
Advanced tools
Comparing version 2.0.0-next.2 to 2.0.0-next.3
@@ -11,20 +11,4 @@ { | ||
| "kind": "class", | ||
| "description": "Avatar is an element for displaying a user's avatar image.\nIf the user in question has provided a custom avatar, provide it and it will be displayed.\nIf they don't, a nice colored pattern will be generated based on their name.\nA specific name will always generate the same pattern, so users' avatars will stay static\nwithout the need for storing their generated image.", | ||
| "description": "Avatar is an element for displaying a user's avatar image.", | ||
| "name": "PfeAvatar", | ||
| "cssParts": [ | ||
| { | ||
| "type": { | ||
| "text": "HTMLCanvasElement" | ||
| }, | ||
| "description": "The canvas element for when an image is not provided", | ||
| "name": "canvas" | ||
| }, | ||
| { | ||
| "type": { | ||
| "text": "HTMLImageElement" | ||
| }, | ||
| "description": "The image element for when an image URL is provided", | ||
| "name": "img" | ||
| } | ||
| ], | ||
| "members": [ | ||
@@ -38,3 +22,3 @@ { | ||
| "static": true, | ||
| "default": "2.0.0-next.2", | ||
| "default": "2.0.0-next.3", | ||
| "readonly": true | ||
@@ -44,95 +28,9 @@ }, | ||
| "kind": "field", | ||
| "name": "defaultSize", | ||
| "name": "size", | ||
| "type": { | ||
| "text": "number" | ||
| "text": "'sm'|'md'|'lg'|'xl'" | ||
| }, | ||
| "privacy": "private", | ||
| "static": true, | ||
| "default": "128", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "defaultColors", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "private", | ||
| "static": true, | ||
| "default": "'#67accf #448087 #709c6b #a35252 #826cbb'", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_registerColor", | ||
| "privacy": "private", | ||
| "static": true, | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "color", | ||
| "type": { | ||
| "text": "RGBTriple" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_adjustColor", | ||
| "privacy": "private", | ||
| "static": true, | ||
| "return": { | ||
| "type": { | ||
| "text": "RGBTriple" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "color", | ||
| "type": { | ||
| "text": "RGBTriple" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "colors", | ||
| "type": { | ||
| "text": "Colors[]" | ||
| }, | ||
| "static": true, | ||
| "default": "[]" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "customColors", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "static": true | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "registerColors", | ||
| "static": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "customColors", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "src", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "description": "The URL to the user's custom avatar image.\n\nIt will be displayed instead of a random pattern.", | ||
| "attribute": "src", | ||
| "default": "'sm'", | ||
| "description": "Size of the Avatar", | ||
| "attribute": "size", | ||
| "reflects": true | ||
@@ -142,287 +40,33 @@ }, | ||
| "kind": "field", | ||
| "name": "name", | ||
| "name": "border", | ||
| "type": { | ||
| "text": "string" | ||
| "text": "'light'|'dark' | undefined" | ||
| }, | ||
| "default": "''", | ||
| "description": "The user's name, either given name and family name, or username.\n\nWhen displaying a pattern, the name will be used to seed the pattern generator.", | ||
| "attribute": "name", | ||
| "description": "Whether to display a border around the avatar", | ||
| "attribute": "border", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "pattern", | ||
| "type": { | ||
| "text": "'squares'|'triangles'" | ||
| }, | ||
| "default": "'squares'", | ||
| "description": "The type of pattern to display.", | ||
| "attribute": "pattern", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "shape", | ||
| "type": { | ||
| "text": "'square'|'circle'|'rounded'" | ||
| }, | ||
| "default": "'square'", | ||
| "description": "The shape of the avatar itself.", | ||
| "attribute": "shape", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_squareSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_triangleSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_ctx", | ||
| "type": { | ||
| "text": "CanvasRenderingContext2D | undefined" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_colorIndex", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "-1" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "color1", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "''" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "color2", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "''" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "css", | ||
| "privacy": "private", | ||
| "default": "new CssVariableController(this)" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_canvas", | ||
| "type": { | ||
| "text": "HTMLCanvasElement | undefined" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_initCanvas", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_update", | ||
| "privacy": "protected" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_clear", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawBackground", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawSquarePattern", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "pattern", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawMirroredSquare", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "x", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| { | ||
| "name": "y", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| ], | ||
| "description": "Draw a square at the given position, mirrored onto both the left and right half of the canvas." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawSquare", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "x", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| { | ||
| "name": "y", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawTrianglePattern", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "pattern", | ||
| "type": { | ||
| "text": "number[]" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawMirroredTriangle", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "p1", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| }, | ||
| { | ||
| "name": "p2", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| }, | ||
| { | ||
| "name": "p3", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| } | ||
| ], | ||
| "description": "Draw a square at the given position in the top-left quadrant of the\ncanvas, and mirrored to the other three quadrants." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_drawTriangle", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "p1", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| }, | ||
| { | ||
| "name": "p2", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| }, | ||
| { | ||
| "name": "p3", | ||
| "type": { | ||
| "text": "Vector2D" | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "events": [ | ||
| { | ||
| "type": { | ||
| "text": "Event" | ||
| }, | ||
| "description": "When the element connects to the DOM", | ||
| "name": "pfe-avatar:connected", | ||
| "deprecated": "Use `await pfeAvatar.updateComplete` instead" | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "src", | ||
| "name": "size", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| "text": "'sm'|'md'|'lg'|'xl'" | ||
| }, | ||
| "description": "The URL to the user's custom avatar image.\n\nIt will be displayed instead of a random pattern.", | ||
| "fieldName": "src" | ||
| "default": "'sm'", | ||
| "description": "Size of the Avatar", | ||
| "fieldName": "size" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "name": "border", | ||
| "type": { | ||
| "text": "string" | ||
| "text": "'light'|'dark' | undefined" | ||
| }, | ||
| "default": "''", | ||
| "description": "The user's name, either given name and family name, or username.\n\nWhen displaying a pattern, the name will be used to seed the pattern generator.", | ||
| "fieldName": "name" | ||
| }, | ||
| { | ||
| "name": "pattern", | ||
| "type": { | ||
| "text": "'squares'|'triangles'" | ||
| }, | ||
| "default": "'squares'", | ||
| "description": "The type of pattern to display.", | ||
| "fieldName": "pattern" | ||
| }, | ||
| { | ||
| "name": "shape", | ||
| "type": { | ||
| "text": "'square'|'circle'|'rounded'" | ||
| }, | ||
| "default": "'square'", | ||
| "description": "The shape of the avatar itself.", | ||
| "fieldName": "shape" | ||
| "description": "Whether to display a border around the avatar", | ||
| "fieldName": "border" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "LitElement", | ||
| "package": "lit" | ||
| "name": "BaseAvatar", | ||
| "module": "/BaseAvatar.js" | ||
| }, | ||
@@ -429,0 +73,0 @@ "summary": "For displaying a user's avatar image", |
| { | ||
| "name": "@patternfly/pfe-avatar", | ||
| "license": "MIT", | ||
| "version": "2.0.0-next.2", | ||
| "version": "2.0.0-next.3", | ||
| "customElements": "custom-elements.json", | ||
@@ -6,0 +6,0 @@ "type": "module", |
@@ -1,75 +0,15 @@ | ||
| import { LitElement } from 'lit'; | ||
| declare type Colors = Record<`color${number}`, string>; | ||
| import { BaseAvatar } from './BaseAvatar.js'; | ||
| /** | ||
| * Avatar is an element for displaying a user's avatar image. | ||
| * If the user in question has provided a custom avatar, provide it and it will be displayed. | ||
| * If they don't, a nice colored pattern will be generated based on their name. | ||
| * A specific name will always generate the same pattern, so users' avatars will stay static | ||
| * without the need for storing their generated image. | ||
| * | ||
| * | ||
| * @summary For displaying a user's avatar image | ||
| * | ||
| * @fires {Event} pfe-avatar:connected - When the element connects to the DOM {@deprecated Use `await pfeAvatar.updateComplete` instead} | ||
| * | ||
| * @csspart {HTMLCanvasElement} canvas - The canvas element for when an image is not provided | ||
| * @csspart {HTMLImageElement} img - The image element for when an image URL is provided | ||
| */ | ||
| export declare class PfeAvatar extends LitElement { | ||
| export declare class PfeAvatar extends BaseAvatar { | ||
| static readonly version = "{{version}}"; | ||
| static readonly styles: import("lit").CSSResult; | ||
| private static readonly defaultSize; | ||
| private static readonly defaultColors; | ||
| private static _registerColor; | ||
| private static _adjustColor; | ||
| static colors: Colors[]; | ||
| static customColors: string; | ||
| static registerColors(): Colors[]; | ||
| get customColors(): string | null; | ||
| /** | ||
| * The URL to the user's custom avatar image. | ||
| * | ||
| * It will be displayed instead of a random pattern. | ||
| */ | ||
| src?: string; | ||
| /** | ||
| * The user's name, either given name and family name, or username. | ||
| * | ||
| * When displaying a pattern, the name will be used to seed the pattern generator. | ||
| */ | ||
| name: string; | ||
| /** | ||
| * The type of pattern to display. | ||
| */ | ||
| pattern: 'squares' | 'triangles'; | ||
| /** | ||
| * The shape of the avatar itself. | ||
| */ | ||
| shape: 'square' | 'circle' | 'rounded'; | ||
| private _squareSize; | ||
| private _triangleSize; | ||
| private _ctx?; | ||
| private _colorIndex; | ||
| private color1; | ||
| private color2; | ||
| private css; | ||
| private _canvas?; | ||
| render(): import("lit-html").TemplateResult<1>; | ||
| firstUpdated(): void; | ||
| private _initCanvas; | ||
| protected _update(): void; | ||
| private _clear; | ||
| private _drawBackground; | ||
| private _drawSquarePattern; | ||
| /** | ||
| * Draw a square at the given position, mirrored onto both the left and right half of the canvas. | ||
| */ | ||
| private _drawMirroredSquare; | ||
| private _drawSquare; | ||
| private _drawTrianglePattern; | ||
| /** | ||
| * Draw a square at the given position in the top-left quadrant of the | ||
| * canvas, and mirrored to the other three quadrants. | ||
| */ | ||
| private _drawMirroredTriangle; | ||
| private _drawTriangle; | ||
| static readonly styles: import("lit").CSSResult[]; | ||
| /** Size of the Avatar */ | ||
| size: 'sm' | 'md' | 'lg' | 'xl'; | ||
| /** Whether to display a border around the avatar */ | ||
| border?: 'light' | 'dark'; | ||
| } | ||
@@ -81,2 +21,1 @@ declare global { | ||
| } | ||
| export {}; |
@@ -1,2 +0,3 @@ | ||
| 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}; | ||
| var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=(o,t,d,e)=>{for(var r=e>1?void 0:e?m(t,d):t,i=o.length-1,v;i>=0;i--)(v=o[i])&&(r=(e?v(t,d,r):v(r))||r);return e&&r&&c(t,d,r),r};import{property as s,customElement as g}from"lit/decorators.js";import{BaseAvatar as x}from"./BaseAvatar.js";import{css as f}from"lit";var h=f`img{width:var(--pf-c-avatar--Width,24px);height:var(--pf-c-avatar--Height,24px);border-radius:var(--pf-c-avatar--BorderRadius,var(--pf-global--BorderRadius--lg,128px));border:var(--pf-c-avatar--BorderWidth,0) solid var(--pf-c-avatar--BorderColor,var(--pf-global--BorderColor--dark-100,#d2d2d2))}:host([border]) img{--pf-c-avatar--BorderWidth:var(--pf-global--BorderWidth--sm, 1px)}:host([border=dark]) img{--pf-c-avatar--BorderColor:var(--pf-c-avatar--m-dark--BorderColor, | ||
| var(--pf-global--palette--black-700, #4f5255))}:host([size=sm]){--pf-c-avatar--Width:var(--pf-c-avatar--m-sm--Width, 24px);--pf-c-avatar--Height:var(--pf-c-avatar--m-sm--Height, 24px)}:host([size=md]){--pf-c-avatar--Width:var(--pf-c-avatar--m-md--Width, 36px);--pf-c-avatar--Height:var(--pf-c-avatar--m-md--Height, 36px)}:host([size=lg]){--pf-c-avatar--Width:var(--pf-c-avatar--m-lg--Width, 72px);--pf-c-avatar--Height:var(--pf-c-avatar--m-lg--Height, 72px)}:host([size=xl]){--pf-c-avatar--Width:var(--pf-c-avatar--m-xl--Width, 128px);--pf-c-avatar--Height:var(--pf-c-avatar--m-xl--Height, 128px)}`,l=h;var a=class extends x{constructor(){super(...arguments);this.size="sm"}};a.version="2.0.0-next.3",a.styles=[l],p([s({reflect:!0})],a.prototype,"size",2),p([s({reflect:!0})],a.prototype,"border",2),a=p([g("pfe-avatar")],a);export{a as PfeAvatar}; | ||
| //# sourceMappingURL=pfe-avatar.js.map |
| # PatternFly Elements Avatar | ||
| `<pfe-avatar>` is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image. | ||
| `<pfe-avatar>` is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. | ||
| Read more about Avatar in the [PatternFly Elements Avatar documentation](https://patternflyelements.org/components/avatar) | ||
@@ -29,10 +29,3 @@ | ||
| ```html | ||
| <pfe-avatar name="Eleanore Stillwagon"></pfe-avatar> | ||
| <pfe-avatar name="Libbie Koscinski" shape="rounded" pattern="squares"></pfe-avatar> | ||
| <pfe-avatar name="Blanca Rohloff" pattern="triangles"></pfe-avatar> | ||
| <pfe-avatar name="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pfe-avatar> | ||
| ``` | ||
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-68.83%
14149
- Number of package files
- decreased by-23.08%
10
- Lines of code
- decreased by-74.55%
154
- Number of lines in readme file
- decreased by-18.42%
31
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes