@limetech/lime-elements 38.13.2-dev.1 → 38.13.3

package/dist/lime-elements/p-98478c6d.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as t,H as r}from"./p-288f0842.js";import{t as e}from"./p-f753013d.js";const i=':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:1;--ai-avatar-orbitals-animation-play-state:running}.core,.orbitals{position:absolute;z-index:10;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%}.core{opacity:0.8;width:70%;animation:breathe 3s ease infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused);background-color:inherit;box-shadow:var(--shadow-depth-8);backdrop-filter:blur(1rem)}.orbitals{mix-blend-mode:overlay;width:clamp(0.375rem, 20%, 3.5rem);animation:rotate 5s linear infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused);transition:opacity 0.2s ease;opacity:var(--ai-avatar-orbitals-opacity, 0)}.orbitals:after,.orbitals:before{animation-play-state:var(--ai-avatar-orbitals-animation-play-state, paused);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;opacity:0.6;transform-origin:-220% 0;margin-right:-70%}.orbitals:after{animation:orbit 2s linear infinite;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.9)}}@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 o=class{constructor(t){a(this,t);this.getTranslation=a=>e.get(a,this.language);this.isThinking=false;this.language=document.documentElement.lang}render(){return t(r,{role:"img","aria-label":this.getHostAriaLabel()},this.renderCircle("red"),this.renderCircle("green"),this.renderCircle("blue"),this.renderCircle("orange"),t("div",{class:"core"}),t("div",{class:"orbitals"}))}getHostAriaLabel(){let a="";if(this.isThinking){a=` (${this.getTranslation("ai-avatar.thinking")})`}return`${this.getTranslation("ai-avatar.label")}${a}`}renderCircle(a){return t("svg",{class:a,viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",role:"presentation"},t("circle",{cx:"50",cy:"50",r:"40",fill:"none",stroke:"currentColor","stroke-width":"6"}))}};o.style=i;export{o as limel_ai_avatar};
-//# sourceMappingURL=p-98478c6d.entry.js.map

package/dist/lime-elements/p-98478c6d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["aiAvatarCss","AiAvatar","this","getTranslation","key","translate","get","language","document","documentElement","lang","render","h","Host","role","getHostAriaLabel","renderCircle","class","thinkingText","isThinking","className","viewBox","xmlns","cx","cy","r","fill","stroke"],"sources":["./src/components/ai-avatar/ai-avatar.scss?tag=limel-ai-avatar&encapsulation=shadow","./src/components/ai-avatar/ai-avatar.tsx"],"sourcesContent":["/**\n* @prop --ai-avatar-animation-play-state: Set it to `running` to start the animation.\n*/\n:host(limel-ai-avatar) {\n    display: flex;\n    justify-content: center;\n    align-self: center;\n    position: relative;\n\n    aspect-ratio: 1;\n    max-width: 10rem;\n    max-height: 8rem;\n    min-width: 1.75rem;\n    min-height: 1.75rem;\n\n    border-radius: 0.5rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-ai-avatar[is-thinking]:not([is-thinking='false'])) {\n    --ai-avatar-animation-play-state: running;\n    --ai-avatar-orbitals-opacity: 1;\n    --ai-avatar-orbitals-animation-play-state: running;\n}\n\n.core,\n.orbitals {\n    position: absolute;\n    z-index: 10;\n    inset: 0;\n    margin: auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n}\n\n.core {\n    opacity: 0.8;\n    width: 70%;\n    animation: breathe 3s ease infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n\n    background-color: inherit;\n    box-shadow: var(--shadow-depth-8);\n    backdrop-filter: blur(1rem);\n}\n\n.orbitals {\n    mix-blend-mode: overlay;\n    width: clamp(0.375rem, 20%, 3.5rem);\n\n    animation: rotate 5s linear infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n\n    transition: opacity 0.2s ease;\n    opacity: var(--ai-avatar-orbitals-opacity, 0);\n\n    &:after,\n    &:before {\n        animation-play-state: var(\n            --ai-avatar-orbitals-animation-play-state,\n            paused\n        );\n        content: '';\n        display: block;\n        position: absolute;\n        inset: 0;\n        margin: auto;\n\n        width: clamp(0.125rem, 50%, 0.75rem);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background-color: rgb(var(--color-glaucous-lighter));\n    }\n    &:before {\n        animation: orbit 1s linear infinite;\n        opacity: 0.6;\n        transform-origin: -220% 0;\n        margin-right: -70%;\n    }\n    &:after {\n        animation: orbit 2s linear infinite;\n        opacity: 0.8;\n        scale: 0.7;\n        transform-origin: 0% -250%;\n        margin-bottom: -70%;\n    }\n}\n\n@keyframes orbit {\n    0% {\n        transform: rotateZ(0deg) translate3d(0, 0, 0);\n    }\n    100% {\n        transform: rotateZ(360deg) translate3d(0, 0, 0);\n    }\n}\n\n@keyframes breathe {\n    1%,\n    100% {\n        transform: scale(1);\n    }\n    50% {\n        transform: scale(0.9);\n    }\n}\n\n@keyframes rotate {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\nsvg {\n    position: absolute;\n    margin: auto;\n    mix-blend-mode: screen;\n\n    animation-iteration-count: infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n}\n\n.red {\n    rotate: 20deg;\n    color: rgb(var(--color-red-default));\n    animation-name: rotate, scale-circle-one;\n    animation-duration: 5s;\n}\n\n.green {\n    rotate: 36deg;\n    color: rgb(var(--color-green-default));\n    animation-name: rotate, scale-circle-two;\n    animation-duration: 5.5s;\n}\n\n.blue {\n    rotate: 100deg;\n    color: rgb(var(--color-blue-default));\n    animation-name: rotate, scale-circle-three;\n    animation-duration: 4.5s;\n}\n\n.orange {\n    rotate: 165deg;\n    color: rgb(var(--color-orange-default));\n    animation-name: rotate, scale-circle-four;\n    animation-duration: 6.5s;\n}\n\n@keyframes scale-circle-one {\n    0%,\n    100% {\n        transform: scaleX(1) scaleY(0.8);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.8) scaleY(0.9);\n    }\n    50% {\n        transform: scaleX(1) scaleY(0.7);\n    }\n}\n\n@keyframes scale-circle-two {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(1);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.9) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.72) scaleY(1);\n    }\n}\n\n@keyframes scale-circle-three {\n    0%,\n    100% {\n        transform: scaleX(0.9) scaleY(0.8);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.9);\n    }\n}\n\n@keyframes scale-circle-four {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(0.95);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.95) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.95);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\n\n/**\n * This component displays an avatar, representing Lime AI assistants.\n *\n * :::warning\n * This is a private component used internally in the Lime's various applications,\n * which is the reason for having it in Lime Elements —to ease the distribution\n * of the component across all our apps.\n *\n * 3rd party developers are not allowed use this component directly.\n * :::\n *\n * @private\n * @exampleComponent limel-example-ai-avatar-basic\n * @exampleComponent limel-example-ai-avatar-colors\n */\n@Component({\n    tag: 'limel-ai-avatar',\n    shadow: true,\n    styleUrl: 'ai-avatar.scss',\n})\nexport class AiAvatar {\n    /**\n     * Set to `true` to trigger animations that indicate that the AI is\n     * \"thinking\" or processing something.\n     */\n    @Prop({ reflect: true })\n    public isThinking = false;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = document.documentElement.lang as Languages;\n\n    public render() {\n        return (\n            <Host role=\"img\" aria-label={this.getHostAriaLabel()}>\n                {this.renderCircle('red')}\n                {this.renderCircle('green')}\n                {this.renderCircle('blue')}\n                {this.renderCircle('orange')}\n                <div class=\"core\" />\n                <div class=\"orbitals\" />\n            </Host>\n        );\n    }\n\n    private getHostAriaLabel(): string {\n        let thinkingText = '';\n        if (this.isThinking) {\n            thinkingText = ` (${this.getTranslation('ai-avatar.thinking')})`;\n        }\n\n        return `${this.getTranslation('ai-avatar.label')}${thinkingText}`;\n    }\n\n    private renderCircle(className: string) {\n        return (\n            <svg\n                class={className}\n                viewBox=\"0 0 100 100\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                role=\"presentation\"\n            >\n                <circle\n                    cx=\"50\"\n                    cy=\"50\"\n                    r=\"40\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"6\"\n                />\n            </svg>\n        );\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAc,w8F,MCwBPC,EAAQ,M,yBAwDTC,KAAAC,eAAkBC,GACfC,EAAUC,IAAIF,EAAKF,KAAKK,U,gBAnDf,M,cAMSC,SAASC,gBAAgBC,I,CAE/CC,SACH,OACIC,EAACC,EAAI,CAACC,KAAK,MAAK,aAAaZ,KAAKa,oBAC7Bb,KAAKc,aAAa,OAClBd,KAAKc,aAAa,SAClBd,KAAKc,aAAa,QAClBd,KAAKc,aAAa,UACnBJ,EAAA,OAAKK,MAAM,SACXL,EAAA,OAAKK,MAAM,a,CAKfF,mBACJ,IAAIG,EAAe,GACnB,GAAIhB,KAAKiB,WAAY,CACjBD,EAAe,KAAKhB,KAAKC,eAAe,wB,CAG5C,MAAO,GAAGD,KAAKC,eAAe,qBAAqBe,G,CAG/CF,aAAaI,GACjB,OACIR,EAAA,OACIK,MAAOG,EACPC,QAAQ,cACRC,MAAM,6BACNR,KAAK,gBAELF,EAAA,UACIW,GAAG,KACHC,GAAG,KACHC,EAAE,KACFC,KAAK,OACLC,OAAO,eAAc,eACR,M"}