@limetech/lime-elements
Version:
98 lines (97 loc) • 3.18 kB
JavaScript
import { h, Host } from '@stencil/core';
import translate from './../../global/translations';
/**
* This component displays an avatar, representing Lime AI assistants.
*
* :::warning
* This is a private component used internally in the Lime's various applications,
* which is the reason for having it in Lime Elements —to ease the distribution
* of the component across all our apps.
*
* 3rd party developers are not allowed use this component directly.
* :::
*
* @private
* @exampleComponent limel-example-ai-avatar-basic
* @exampleComponent limel-example-ai-avatar-colors
*/
export class AiAvatar {
constructor() {
this.getTranslation = (key) => {
return translate.get(key, this.language);
};
this.isThinking = false;
this.language = document.documentElement.lang;
}
render() {
return (h(Host, { role: "img", "aria-label": this.getHostAriaLabel() }, this.renderCircle('red'), this.renderCircle('green'), this.renderCircle('blue'), this.renderCircle('orange'), h("div", { class: "core" }), h("div", { class: "orbitals" })));
}
getHostAriaLabel() {
let thinkingText = '';
if (this.isThinking) {
thinkingText = ` (${this.getTranslation('ai-avatar.thinking')})`;
}
return `${this.getTranslation('ai-avatar.label')}${thinkingText}`;
}
renderCircle(className) {
return (h("svg", { class: className, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", role: "presentation" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "currentColor", "stroke-width": "6" })));
}
static get is() { return "limel-ai-avatar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["ai-avatar.scss"]
};
}
static get styleUrls() {
return {
"$": ["ai-avatar.css"]
};
}
static get properties() {
return {
"isThinking": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to trigger animations that indicate that the AI is\n\"thinking\" or processing something."
},
"attribute": "is-thinking",
"reflect": true,
"defaultValue": "false"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "./../date-picker/date.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations."
},
"attribute": "language",
"reflect": true,
"defaultValue": "document.documentElement.lang as Languages"
}
};
}
}
//# sourceMappingURL=ai-avatar.js.map