@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
126 lines (124 loc) • 4.5 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import user_avatar_default$1 from "./user-avatar.scss.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import '@carbon/web-components/es-custom/components/tooltip/index.js';
import User from "@carbon/icons/es/user/16";
//#region src/components/user-avatar/user-avatar.ts
/**
* @license
*
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const blockClass = `c4p--user-avatar`;
/**
* Useravatar.
*
* @element c4p-user-avatar
* */
let CDSUseravatar = class CDSUseravatar extends HostListenerMixin(LitElement) {
constructor(..._args) {
super(..._args);
this.tooltipAlignment = "bottom";
this.backgroundColor = "order-1-cyan";
}
render() {
const getItem = () => {
if (this.image) {
const imageClasses = classMap({
[`${blockClass}__photo`]: true,
[`${blockClass}__photo--${this.size}`]: this.size
});
return html` <img
alt="${this.imageDescription}"
src="${this.image}"
class="${imageClasses}"
/>`;
}
if (this.querySelector("[slot=\"rendericon\"]")) return html`<slot name="rendericon"></slot>`;
if (this.name) {
const parts = this.name?.split(" ") || [];
const firstChar = parts[0].charAt(0).toUpperCase();
const secondChar = parts[0].charAt(1).toUpperCase();
if (parts.length === 1) return firstChar + secondChar;
const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
const initials = [firstChar];
if (lastChar) initials.push(lastChar);
return "".concat(...initials);
}
return html`${iconLoader(User, { slot: "rendericon" })} `;
};
const { tooltipText, tooltipAlignment, size, backgroundColor, theme } = this;
const classes = classMap({
[`${blockClass}`]: true,
[`${blockClass}--${size}`]: size,
[`${blockClass}--${backgroundColor}`]: backgroundColor,
[`${blockClass}--${theme}`]: theme
});
const Avatar = () => html`<div class="${classes}">${getItem()}</div>`;
if (tooltipText) return html`<cds-custom-tooltip
align=${tooltipAlignment}
aria-label=${tooltipText}
class=${`${blockClass}__tooltip cds-custom--icon-tooltip`}
>
<button class=${`${blockClass}__tooltip-trigger`} role="button">
${Avatar()}
</button>
<cds-custom-tooltip-content
class=${`${blockClass}__tooltip-content`}
id="content"
>
${tooltipText}
</cds-custom-tooltip-content>
</cds-custom-tooltip>`;
else return html` ${Avatar()}`;
}
static {
this.shadowRootOptions = {
...LitElement.shadowRootOptions,
delegatesFocus: true
};
}
static {
this.styles = user_avatar_default$1;
}
};
__decorate([property({
reflect: true,
attribute: "tooltip-text"
})], CDSUseravatar.prototype, "tooltipText", void 0);
__decorate([property({
reflect: true,
attribute: "tooltip-alignment"
})], CDSUseravatar.prototype, "tooltipAlignment", void 0);
__decorate([property({ reflect: true })], CDSUseravatar.prototype, "name", void 0);
__decorate([property({ reflect: true })], CDSUseravatar.prototype, "size", void 0);
__decorate([property({ reflect: true })], CDSUseravatar.prototype, "image", void 0);
__decorate([property({
reflect: true,
attribute: "image-description"
})], CDSUseravatar.prototype, "imageDescription", void 0);
__decorate([property({
reflect: true,
attribute: "background-color"
})], CDSUseravatar.prototype, "backgroundColor", void 0);
__decorate([property({ reflect: true })], CDSUseravatar.prototype, "theme", void 0);
CDSUseravatar = __decorate([carbonElement(`c4p-user-avatar`)], CDSUseravatar);
var user_avatar_default = CDSUseravatar;
//#endregion
export { user_avatar_default as default };
//# sourceMappingURL=user-avatar.js.map