@limetech/lime-elements 38.37.1 → 38.38.1-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-ai-avatar.cjs.entry.js +1 -1
  4. package/dist/cjs/limel-ai-avatar.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-table.cjs.entry.js +26535 -20435
  6. package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/ai-avatar/ai-avatar.css +5 -3
  9. package/dist/collection/components/ai-avatar/ai-avatar.js +1 -0
  10. package/dist/collection/components/ai-avatar/ai-avatar.js.map +1 -1
  11. package/dist/collection/components/table/columns.js.map +1 -1
  12. package/dist/collection/components/table/table-selection.js +3 -0
  13. package/dist/collection/components/table/table-selection.js.map +1 -1
  14. package/dist/collection/components/table/table.css +406 -163
  15. package/dist/collection/components/table/table.js +94 -44
  16. package/dist/collection/components/table/table.js.map +1 -1
  17. package/dist/esm/lime-elements.js +1 -1
  18. package/dist/esm/limel-ai-avatar.entry.js +1 -1
  19. package/dist/esm/limel-ai-avatar.entry.js.map +1 -1
  20. package/dist/esm/limel-table.entry.js +26535 -20435
  21. package/dist/esm/limel-table.entry.js.map +1 -1
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/lime-elements/lime-elements.esm.js +1 -1
  24. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  25. package/dist/lime-elements/p-41e2238a.entry.js +2 -0
  26. package/dist/lime-elements/p-41e2238a.entry.js.map +1 -0
  27. package/dist/lime-elements/p-f6d8811f.entry.js +2 -0
  28. package/dist/lime-elements/p-f6d8811f.entry.js.map +1 -0
  29. package/dist/types/components/ai-avatar/ai-avatar.d.ts +1 -0
  30. package/dist/types/components/table/columns.d.ts +7 -11
  31. package/dist/types/components/table/table-selection.d.ts +4 -4
  32. package/dist/types/components/table/table.d.ts +15 -5
  33. package/dist/types/components.d.ts +16 -0
  34. package/package.json +3 -3
  35. package/dist/lime-elements/p-b906e1c5.entry.js +0 -2
  36. package/dist/lime-elements/p-b906e1c5.entry.js.map +0 -1
  37. package/dist/lime-elements/p-c869fbb2.entry.js +0 -2
  38. package/dist/lime-elements/p-c869fbb2.entry.js.map +0 -1
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-0c4503aa.js';
2
2
  import { t as translate } from './translations-694c7c68.js';
3
3
 
4
- 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)}}";
4
+ 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: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)}}";
5
5
 
6
6
  const AiAvatar = class {
7
7
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"limel-ai-avatar.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,s8FAAs8F;;MCwB78F,QAAQ;;;IAwDT,mBAAc,GAAG,CAAC,GAAW;MACjC,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5C,CAAC;sBApDkB,KAAK;oBAMI,QAAQ,CAAC,eAAe,CAAC,IAAiB;;EAEhE,MAAM;IACT,QACI,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,gBAAgB,EAAE,IAC/C,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAC5B,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,UAAU,GAAG,CACrB,EACT;GACL;EAEO,gBAAgB;IACpB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,YAAY,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,CAAC;KACpE;IAED,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,YAAY,EAAE,CAAC;GACrE;EAEO,YAAY,CAAC,SAAiB;IAClC,QACI,WACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,IAEnB,cACI,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,GAClB,CACA,EACR;GACL;;;;;;","names":[],"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: 0.6;\n --ai-avatar-orbitals-animation-play-state: running;\n}\n\n.core,\n.orbitals {\n position: absolute;\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.3;\n width: 70%;\n animation: breathe 3s ease infinite\n var(--ai-avatar-animation-play-state, paused);\n\n background-color: rgb(var(--color-glaucous-darker), 0.6);\n mix-blend-mode: plus-lighter;\n}\n\n.orbitals {\n mix-blend-mode: plus-lighter;\n width: clamp(0.375rem, 20%, 3.5rem);\n\n animation: rotate 5s linear infinite\n var(--ai-avatar-orbitals-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 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 var(--ai-avatar-orbitals-animation-play-state, paused);\n\n opacity: 0.6;\n transform-origin: -220% 0;\n margin-right: -70%;\n }\n &:after {\n animation: orbit 2s linear infinite\n var(--ai-avatar-orbitals-animation-play-state, paused);\n\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.86);\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"],"version":3}
1
+ {"file":"limel-ai-avatar.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,6iGAA6iG;;MCyBpjG,QAAQ;;;IAwDT,mBAAc,GAAG,CAAC,GAAW;MACjC,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5C,CAAC;sBApDkB,KAAK;oBAMI,QAAQ,CAAC,eAAe,CAAC,IAAiB;;EAEhE,MAAM;IACT,QACI,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,gBAAgB,EAAE,IAC/C,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAC5B,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,UAAU,GAAG,CACrB,EACT;GACL;EAEO,gBAAgB;IACpB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,YAAY,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,CAAC;KACpE;IAED,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,YAAY,EAAE,CAAC;GACrE;EAEO,YAAY,CAAC,SAAiB;IAClC,QACI,WACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,IAEnB,cACI,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,GAClB,CACA,EACR;GACL;;;;;;","names":[],"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* @prop --ai-avatar-core-blend-mode: Controls the blend mode for the core and orbitals. Defaults to `plus-lighter`.\n* @prop --ai-avatar-rings-blend-mode: Controls the blend mode for the SVG circles. Defaults to `screen`.\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: 0.6;\n --ai-avatar-orbitals-animation-play-state: running;\n}\n\n.core,\n.orbitals {\n position: absolute;\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.3;\n width: 70%;\n animation: breathe 3s ease infinite\n var(--ai-avatar-animation-play-state, paused);\n\n background-color: rgb(var(--color-glaucous-darker), 0.6);\n mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);\n}\n\n.orbitals {\n mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);\n width: clamp(0.375rem, 20%, 3.5rem);\n\n animation: rotate 5s linear infinite\n var(--ai-avatar-orbitals-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 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 var(--ai-avatar-orbitals-animation-play-state, paused);\n\n opacity: 0.6;\n transform-origin: -220% 0;\n margin-right: -70%;\n }\n &:after {\n animation: orbit 2s linear infinite\n var(--ai-avatar-orbitals-animation-play-state, paused);\n\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.86);\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: var(--ai-avatar-rings-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 * @exampleComponent limel-example-ai-avatar-white-background\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"],"version":3}