@rhds/elements
Version:
Red Hat Design System Elements
115 lines • 7.65 kB
JavaScript
var _RhAvatar_instances, _RhAvatar_style, _RhAvatar_pattern, _RhAvatar_normalize, _RhAvatar_initPattern;
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { LitElement, html, isServer } from 'lit';
import { themable } from '../../lib/themable.js';
import { css } from "lit";
const styles = css `:host{display:inline-block;width:min-content}[hidden]{display:none!important}#container{display:grid;color:var(--rh-color-text-secondary);--_colors:light-dark(var(--rh-avatar-colors,var(--rh-color-blue-30,#92c5f9) var(--rh-color-teal-50,#37a3a3) var(--rh-color-green-60,#3d7317) var(--rh-color-red-40,#f56e6e) var(--rh-color-purple-60,#3d2785)),var(--rh-avatar-colors,var(--rh-color-blue-50,#06c) var(--rh-color-teal-70,#004d4d) var(--rh-color-green-70,#204d00) var(--rh-color-red-50,#e00) var(--rh-color-purple-70,#21134d)));column-gap:var(--rh-space-lg,16px);width:min-content;grid-template-columns:min-content minmax(max-content,250px);grid-template-rows:min-content min-content;grid-template-areas:"a t" "a s"}#title{grid-area:t;align-self:end;font-family:var(--rh-font-family-heading,RedHatDisplay,"Red Hat Display",Helvetica,Arial,sans-serif);font-weight:var(--rh-font-weight-heading-medium,500)}#subtitle,#title{font-size:var(--rh-font-size-body-text-sm,.875rem)}#subtitle{grid-area:s;align-self:start;font-weight:var(--rh-font-weight-heading-regular,400)}@media (max-width:575px){:host(:not([plain])) #container,:host([layout=block]) #container{text-align:center;place-items:center;gap:0;grid-template-columns:minmax(max-content,250px);grid-template-areas:"a" "t" "s";grid-template-rows:minmax(var(--rh-avatar-size,var(--rh-size-icon-06,64px)),var(--rh-size-icon-06,64px)) min-content auto}}@media (max-width:575px){:host(:not([plain])) #container :is(img,canvas,svg),:host([layout=block]) :is(img,canvas,svg){margin-block-end:var(--rh-space-lg,16px)}}slot{display:block;max-width:250px}::slotted(a){color:var(--rh-color-interactive-primary-default)}::slotted(a:visited){color:var(--rh-color-interactive-primary-visited-default)}::slotted(a:active),::slotted(a:hover){color:var(--rh-color-interactive-primary-hover)}img,svg{object-fit:cover;object-position:center}canvas,img,svg{overflow:hidden;width:var(--rh-avatar-size,var(--rh-size-icon-06,64px));max-width:var(--rh-size-icon-06,64px);aspect-ratio:1;grid-area:a;border-radius:var(--rh-border-radius-pill,64px)}:host([variant=bordered]) :is(canvas,img,svg){border:var(--rh-border-width-sm,1px) solid var(--rh-color-border-subtle)}:host([plain]) slot{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([plain]) #container{column-gap:0}#default .st1{fill-rule:evenodd;clip-rule:evenodd;fill:light-dark(#f0f0f0,#212427)}#default .st2{fill:light-dark(#b8bbbe,#4f5255)}#default .st3{fill-rule:evenodd;clip-rule:evenodd}#default .st3,#default .st4{fill:light-dark(#d2d2d2,#6a6e73)}`;
/**
* An avatar is a small thumbnail representation of a user.
*
* @summary Visually represents a user in a masthead or navigation
*
* @alias avatar
*/
let RhAvatar = class RhAvatar extends LitElement {
constructor() {
super(...arguments);
_RhAvatar_instances.add(this);
/** When true, hides the title and subtitle */
this.plain = false;
_RhAvatar_style.set(this, void 0);
_RhAvatar_pattern.set(this, void 0);
}
connectedCallback() {
super.connectedCallback();
if (!isServer) {
__classPrivateFieldGet(this, _RhAvatar_instances, "m", _RhAvatar_normalize).call(this);
}
}
render() {
return html `
<div id="container">${this.pattern ? html `
<!-- Target the canvas element -->
<canvas part="canvas"></canvas>` : this.src ? html `
<!-- Targets the img or svg element -->
<img src="${this.src}" role="presentation" part="img">` : html `
<!-- Targets the img or svg element -->
<svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36" role="presentation" part="img" id="default">
<path d="M0 0h36v36H0z" class="st1"/><path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st3"/>
<path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
<path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" class="st4"/>
<path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
</svg>
`}
<!-- The subject's name -->
<slot id="title">${this.name}</slot>
<!-- auxiliary information about the subject, e.g. job title -->
<slot id="subtitle" name="subtitle">${this.subtitle}</slot>
</div>
`;
}
async updated(changed) {
if ((changed.has('pattern') && this.pattern)
|| (__classPrivateFieldGet(this, _RhAvatar_pattern, "f") && changed.has('name') || changed.has('on'))) {
this.updatePattern();
}
}
async updatePattern() {
__classPrivateFieldSet(this, _RhAvatar_pattern, __classPrivateFieldGet(this, _RhAvatar_pattern, "f") ?? await __classPrivateFieldGet(this, _RhAvatar_instances, "m", _RhAvatar_initPattern).call(this), "f");
if (__classPrivateFieldGet(this, _RhAvatar_pattern, "f")) {
const size = parseInt(__classPrivateFieldGet(this, _RhAvatar_style, "f")?.getPropertyValue('width') ?? '0');
const colors = __classPrivateFieldGet(this, _RhAvatar_style, "f")?.getPropertyValue('--_colors')?.split(/\s+/) ?? [];
const { name, pattern } = this;
__classPrivateFieldGet(this, _RhAvatar_pattern, "f").render({ size, colors, name, pattern });
}
}
};
_RhAvatar_style = new WeakMap();
_RhAvatar_pattern = new WeakMap();
_RhAvatar_instances = new WeakSet();
_RhAvatar_normalize = function _RhAvatar_normalize() {
for (const node of this.childNodes) {
if (node instanceof Text && !node.data.trim()) {
node.data = node.data.trim();
}
}
this.normalize();
};
_RhAvatar_initPattern = async function _RhAvatar_initPattern() {
const { RandomPatternController } = await import('./random-pattern-controller.js');
const canvas = this.shadowRoot?.querySelector('canvas');
if (canvas) {
__classPrivateFieldSet(this, _RhAvatar_style, __classPrivateFieldGet(this, _RhAvatar_style, "f") ?? getComputedStyle(canvas), "f");
return new RandomPatternController(this, canvas);
}
};
RhAvatar.styles = [styles];
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "src", void 0);
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "name", void 0);
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "subtitle", void 0);
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "layout", void 0);
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "pattern", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], RhAvatar.prototype, "plain", void 0);
__decorate([
property({ reflect: true })
], RhAvatar.prototype, "variant", void 0);
RhAvatar = __decorate([
customElement('rh-avatar'),
themable
], RhAvatar);
export { RhAvatar };
//# sourceMappingURL=rh-avatar.js.map