@limetech/lime-elements/dist/esm/limel-ai-avatar.entry.js

Lime Elements

import { r as registerInstance, h, H as Host } from './index-DBTJNfo7.js';
import { t as translate } from './translations-DVRaJQvC.js';

const aiAvatarCss = () => `:host(limel-ai-avatar){display:flex;justify-content:center;align-self:center;position:relative;aspect-ratio:1;max-width:10rem;max-height:8rem;min-width:1.75rem;min-height:1.75rem;border-radius:0.5rem}*{box-sizing:border-box}:host(limel-ai-avatar[is-thinking]:not([is-thinking=false])){--ai-avatar-animation-play-state:running;--ai-avatar-orbitals-opacity:0.6;--ai-avatar-orbitals-animation-play-state:running}.core,.orbitals{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%}.core{opacity:0.3;width:70%;animation:breathe 3s ease infinite var(--ai-avatar-animation-play-state, paused);background-color:rgb(var(--color-glaucous-darker), 0.6);mix-blend-mode:var(--ai-avatar-core-blend-mode, plus-lighter)}.orbitals{mix-blend-mode:var(--ai-avatar-core-blend-mode, plus-lighter);width:clamp(0.375rem, 20%, 3.5rem);animation:rotate 5s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);transition:opacity 0.2s ease;opacity:var(--ai-avatar-orbitals-opacity, 0)}.orbitals:after,.orbitals:before{content:"";display:block;position:absolute;inset:0;margin:auto;width:clamp(0.125rem, 50%, 0.75rem);aspect-ratio:1;border-radius:50%;background-color:rgb(var(--color-glaucous-lighter))}.orbitals:before{animation:orbit 1s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);opacity:0.6;transform-origin:-220% 0;margin-right:-70%}.orbitals:after{animation:orbit 2s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);opacity:0.8;scale:0.7;transform-origin:0% -250%;margin-bottom:-70%}@keyframes orbit{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}@keyframes breathe{1%,100%{transform:scale(1)}50%{transform:scale(0.86)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}svg{position:absolute;margin:auto;mix-blend-mode:var(--ai-avatar-rings-blend-mode, screen);animation-iteration-count:infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused)}.red{rotate:20deg;color:var(--ai-avatar-color-one, rgb(var(--color-red-default)));animation-name:rotate, scale-circle-one;animation-duration:5s}.green{rotate:36deg;color:var(--ai-avatar-color-two, rgb(var(--color-green-default)));animation-name:rotate, scale-circle-two;animation-duration:5.5s}.blue{rotate:100deg;color:var(--ai-avatar-color-three, rgb(var(--color-blue-default)));animation-name:rotate, scale-circle-three;animation-duration:4.5s}.orange{rotate:165deg;color:var(--ai-avatar-color-four, rgb(var(--color-orange-default)));animation-name:rotate, scale-circle-four;animation-duration:6.5s}@keyframes scale-circle-one{0%,100%{transform:scaleX(1) scaleY(0.8)}25%,75%{transform:scaleX(0.8) scaleY(0.9)}50%{transform:scaleX(1) scaleY(0.7)}}@keyframes scale-circle-two{0%,100%{transform:scaleX(0.8) scaleY(1)}25%,75%{transform:scaleX(0.9) scaleY(0.75)}50%{transform:scaleX(0.72) scaleY(1)}}@keyframes scale-circle-three{0%,100%{transform:scaleX(0.9) scaleY(0.8)}50%{transform:scaleX(0.75) scaleY(0.9)}}@keyframes scale-circle-four{0%,100%{transform:scaleX(0.8) scaleY(0.95)}25%,75%{transform:scaleX(0.95) scaleY(0.75)}50%{transform:scaleX(0.75) scaleY(0.95)}}`;

const AiAvatar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * 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" })));
    }
};
AiAvatar.style = aiAvatarCss();

export { AiAvatar as limel_ai_avatar };