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

Lime Elements

import { r as registerInstance, h, H as Host } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.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:plus-lighter}.orbitals{mix-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:screen;animation-iteration-count:infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused)}.red{rotate:20deg;color:rgb(var(--color-red-default));animation-name:rotate, scale-circle-one;animation-duration:5s}.green{rotate:36deg;color:rgb(var(--color-green-default));animation-name:rotate, scale-circle-two;animation-duration:5.5s}.blue{rotate:100deg;color:rgb(var(--color-blue-default));animation-name:rotate, scale-circle-three;animation-duration:4.5s}.orange{rotate:165deg;color: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);
    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" })));
  }
};
AiAvatar.style = aiAvatarCss;

export { AiAvatar as limel_ai_avatar };

//# sourceMappingURL=limel-ai-avatar.entry.js.map