@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
229 lines (228 loc) • 8.54 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-avatar.tailwind";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable avatar component used to create avatars with different images or user initials.
* When no image is provided, the component can display initials (up to 3 characters) from the initials prop.
* The component will extract the first letter of each word in the initials string.
*/
export class ModusWcAvatar {
constructor() {
this.inheritedAttributes = {};
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The location of the image. */
this.imgSrc = '';
/** The initials to display when no image is provided. */
this.initials = '';
// TODO - add placeholder support (need UX logic)
/** The shape of the avatar. */
this.shape = 'circle';
/** The size of the avatar. */
this.size = 'md';
this.handleImageError = (event) => {
this.imageLoadError.emit({ originalEvent: event });
};
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = [];
const propClasses = convertPropsToClasses({
shape: this.shape,
size: this.size,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
if (!this.imgSrc && !this.initials)
classList.push('no-image');
return classList.join(' ');
}
getUserInitials() {
if (!this.initials)
return '';
return this.initials
.trim()
.split(/\s+/)
.filter(Boolean)
.map((part) => part.charAt(0))
.join('')
.substring(0, 3)
.toUpperCase();
}
render() {
const altText = this.alt || 'User avatar';
return (h(Host, { key: 'a298d24152d272b4db0816157403e3d0b9bd3307' }, h("div", Object.assign({ key: '27c71ee99dc3bd71ff02d8a7423623a18867180e', class: "modus-wc-avatar" }, this.inheritedAttributes), h("div", { key: 'cf5de9ae63098170aaa1e94f0d9bb888db70034a', class: this.getClasses() }, this.imgSrc ? (h("img", { src: this.imgSrc, alt: altText, onError: this.handleImageError })) : this.initials ? (h("span", { class: "initials", "aria-label": this.alt || this.initials }, this.getUserInitials())) : (h("modus-wc-icon", { "aria-label": altText, name: "person", variant: "solid" }))))));
}
static get is() { return "modus-wc-avatar"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-avatar.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-avatar.css"]
};
}
static get properties() {
return {
"alt": {
"type": "string",
"attribute": "alt",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The image alt attribute for accessibility."
},
"getter": false,
"setter": false,
"reflect": false
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the inner div."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"imgSrc": {
"type": "string",
"attribute": "img-src",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The location of the image."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"initials": {
"type": "string",
"attribute": "initials",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The initials to display when no image is provided."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"shape": {
"type": "string",
"attribute": "shape",
"mutable": false,
"complexType": {
"original": "'circle' | 'square'",
"resolved": "\"circle\" | \"square\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The shape of the avatar."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'circle'"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "DaisySize | 'xl'",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | undefined",
"references": {
"DaisySize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::DaisySize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the avatar."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
}
};
}
static get events() {
return [{
"method": "imageLoadError",
"name": "imageLoadError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the avatar image fails to load."
},
"complexType": {
"original": "IAvatarImageLoadError",
"resolved": "IAvatarImageLoadError",
"references": {
"IAvatarImageLoadError": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-avatar/modus-wc-avatar.tsx",
"id": "src/components/modus-wc-avatar/modus-wc-avatar.tsx::IAvatarImageLoadError"
}
}
}
}];
}
static get elementRef() { return "el"; }
}