gov-gui
Version:
Gov UI Component Library Typscript Build
279 lines (278 loc) • 10.4 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovAvatar {
constructor() {
this.hasNotification = false; // Flag for notification state
this.notificationCount = 0; // Notification count
this.status = null; // User status
this.size = 'medium'; // Avatar size
this.animationDelay = '2s';
this.allClasses = '';
}
// private getStatusClass() {
// switch (this.status) {
// case 'online':
// return 'status-online';
// case 'offline':
// return 'status-offline';
// case 'busy':
// return 'status-busy';
// default:
// return '';
// }
// }
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
getFormattedInitials() {
// Limit initials to 2 characters
return this.initials ? this.initials.substring(0, 2).toUpperCase() : '';
}
getFormattedNotificationCount() {
// Show "999+" if the count exceeds 999
return this.notificationCount > 99 ? '99+' : this.notificationCount;
}
getSizeClass() {
// Return the corresponding size class based on the size prop
return `avatar-${this.size}`;
}
render() {
const isDefaultAvatar = !this.imgUrl && !this.initials;
return (h("div", { key: 'd5a68750170e20630eb46fdc1d4d9f4074e75b91', class: `avatar-container ${this.getSizeClass()} ${this.hasNotification || this.status ? 'avatar-notification' : ''} ${this.allClasses}` }, isDefaultAvatar ? (h("span", { class: "avatar-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "white", stroke: "none", width: "100px", height: "30" }, h("path", { d: "M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4zM12 14c-3.31 0-6 2.69-6 6v2h12v-2c0-3.31-2.69-6-6-6z" })))) : this.imgUrl ? (h("img", { src: this.imgUrl, alt: "Avatar", class: "avatar-image" })) : (h("span", { class: "avatar-initials" }, this.getFormattedInitials())), this.hasNotification && this.notificationCount > 0 && (h("span", { key: '199bdea0fbb96b04ebd514f244082172d2aa9708', class: "avatar-badge" }, h("gov-badge", { key: '524c32227c662c35d1c5aaed3c5bd27baaf7579d', variant: "primary", size: "md", classes: "" }, this.getFormattedNotificationCount()))), this.status && (h("span", { key: '8c09a7f81d6f67f142aed3e5620f840915fe905e', class: `status-badge` }, h("gov-badge", { key: '83e45735d40181a56780041465eb919967a45bcc', variant: this.status === 'online' ? 'success' : this.status === 'offline' ? 'disabled' : 'warning', size: "sm", classes: "" })))));
}
static get is() { return "gov-avatar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-avatar.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-avatar.css"]
};
}
static get properties() {
return {
"imgUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "img-url",
"reflect": false
},
"initials": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "initials",
"reflect": false
},
"hasNotification": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "has-notification",
"reflect": false,
"defaultValue": "false"
},
"notificationCount": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "notification-count",
"reflect": false,
"defaultValue": "0"
},
"status": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'online' | 'offline' | 'busy' | null",
"resolved": "\"busy\" | \"offline\" | \"online\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "status",
"reflect": false,
"defaultValue": "null"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium' | 'large'",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "size",
"reflect": false,
"defaultValue": "'medium'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-avatar.js.map