@limetech/lime-elements
Version:
112 lines (111 loc) • 4.39 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
* @exampleComponent limel-example-ai-avatar-white-background
* @exampleComponent limel-example-ai-avatar-color-props
*/
export class AiAvatar {
constructor() {
/**
* Set to `true` to trigger animations that indicate that the AI is
* "thinking" or processing something.
*/
this.isThinking = false;
/**
* Defines the language for translations.
*/
this.language = document.documentElement.lang;
this.getTranslation = (key) => {
return translate.get(key, this.language);
};
}
render() {
return (h(Host, { key: '8b04584ecdd86d9768666efb7299c0985bf9948f', role: "img", "aria-label": this.getHostAriaLabel() }, this.renderCircle('red'), this.renderCircle('green'), this.renderCircle('blue'), this.renderCircle('orange'), h("div", { key: 'a4434ecc24403ee1bb04b82acd9a41c85da139d0', class: "core" }), h("div", { key: '788fec45e563e226d27fbf30b828dd5bc2d42db6', 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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "is-thinking",
"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",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "language",
"defaultValue": "document.documentElement.lang as Languages"
}
};
}
}