@limetech/lime-elements 38.13.2 → 38.13.3
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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/limel-ai-avatar.cjs.entry.js +1 -1
- package/dist/cjs/limel-ai-avatar.cjs.entry.js.map +1 -1
- package/dist/collection/components/ai-avatar/ai-avatar.css +9 -14
- package/dist/esm/limel-ai-avatar.entry.js +1 -1
- package/dist/esm/limel-ai-avatar.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-f15163c0.entry.js +2 -0
- package/dist/lime-elements/p-f15163c0.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-98478c6d.entry.js +0 -2
- package/dist/lime-elements/p-98478c6d.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [38.13.3](https://github.com/Lundalogik/lime-elements/compare/v38.13.2...v38.13.3) (2025-05-28)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **ai-avatar:** improve visual design ([7883141](https://github.com/Lundalogik/lime-elements/commit/78831410db31a899a9cdfbe3fc9c8ba50476ed68))
|
|
8
|
+
* **ai-avatar:** prevent overlying other content on the screen ([d3d94ae](https://github.com/Lundalogik/lime-elements/commit/d3d94ae00dbdafc79cc35cacba6c0045037beecc))
|
|
9
|
+
|
|
10
|
+
### Performance Improvements
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
* **ai-avatar:** prevent constantly running animations ([0ec454e](https://github.com/Lundalogik/lime-elements/commit/0ec454e666749aa78f66f7a2fc20d536375e935f))
|
|
14
|
+
|
|
1
15
|
## [38.13.2](https://github.com/Lundalogik/lime-elements/compare/v38.13.1...v38.13.2) (2025-05-23)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-174a078a.js');
|
|
6
6
|
const translations = require('./translations-1d376e48.js');
|
|
7
7
|
|
|
8
|
-
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:
|
|
8
|
+
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.8;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)}}";
|
|
9
9
|
|
|
10
10
|
const AiAvatar = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-ai-avatar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,
|
|
1
|
+
{"file":"limel-ai-avatar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,s8FAAs8F;;MCwB78F,QAAQ;;;IAwDT,mBAAc,GAAG,CAAC,GAAW;MACjC,OAAOA,sBAAS,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5C,CAAC;sBApDkB,KAAK;oBAMI,QAAQ,CAAC,eAAe,CAAC,IAAiB;;EAEhE,MAAM;IACT,QACIC,QAACC,UAAI,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,EAC5BD,iBAAK,KAAK,EAAC,MAAM,GAAG,EACpBA,iBAAK,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,QACIA,iBACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,IAEnBA,oBACI,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":["translate","h","Host"],"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.8;\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}
|
|
@@ -20,14 +20,13 @@
|
|
|
20
20
|
|
|
21
21
|
:host(limel-ai-avatar[is-thinking]:not([is-thinking=false])) {
|
|
22
22
|
--ai-avatar-animation-play-state: running;
|
|
23
|
-
--ai-avatar-orbitals-opacity:
|
|
23
|
+
--ai-avatar-orbitals-opacity: 0.6;
|
|
24
24
|
--ai-avatar-orbitals-animation-play-state: running;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.core,
|
|
28
28
|
.orbitals {
|
|
29
29
|
position: absolute;
|
|
30
|
-
z-index: 10;
|
|
31
30
|
inset: 0;
|
|
32
31
|
margin: auto;
|
|
33
32
|
display: flex;
|
|
@@ -40,23 +39,19 @@
|
|
|
40
39
|
.core {
|
|
41
40
|
opacity: 0.8;
|
|
42
41
|
width: 70%;
|
|
43
|
-
animation: breathe 3s ease infinite;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
box-shadow: var(--shadow-depth-8);
|
|
47
|
-
backdrop-filter: blur(1rem);
|
|
42
|
+
animation: breathe 3s ease infinite var(--ai-avatar-animation-play-state, paused);
|
|
43
|
+
background-color: rgb(var(--color-glaucous-darker), 0.6);
|
|
44
|
+
mix-blend-mode: plus-lighter;
|
|
48
45
|
}
|
|
49
46
|
|
|
50
47
|
.orbitals {
|
|
51
|
-
mix-blend-mode:
|
|
48
|
+
mix-blend-mode: plus-lighter;
|
|
52
49
|
width: clamp(0.375rem, 20%, 3.5rem);
|
|
53
|
-
animation: rotate 5s linear infinite;
|
|
54
|
-
animation-play-state: var(--ai-avatar-animation-play-state, paused);
|
|
50
|
+
animation: rotate 5s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
|
|
55
51
|
transition: opacity 0.2s ease;
|
|
56
52
|
opacity: var(--ai-avatar-orbitals-opacity, 0);
|
|
57
53
|
}
|
|
58
54
|
.orbitals:after, .orbitals:before {
|
|
59
|
-
animation-play-state: var(--ai-avatar-orbitals-animation-play-state, paused);
|
|
60
55
|
content: "";
|
|
61
56
|
display: block;
|
|
62
57
|
position: absolute;
|
|
@@ -68,13 +63,13 @@
|
|
|
68
63
|
background-color: rgb(var(--color-glaucous-lighter));
|
|
69
64
|
}
|
|
70
65
|
.orbitals:before {
|
|
71
|
-
animation: orbit 1s linear infinite;
|
|
66
|
+
animation: orbit 1s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
|
|
72
67
|
opacity: 0.6;
|
|
73
68
|
transform-origin: -220% 0;
|
|
74
69
|
margin-right: -70%;
|
|
75
70
|
}
|
|
76
71
|
.orbitals:after {
|
|
77
|
-
animation: orbit 2s linear infinite;
|
|
72
|
+
animation: orbit 2s linear infinite var(--ai-avatar-orbitals-animation-play-state, paused);
|
|
78
73
|
opacity: 0.8;
|
|
79
74
|
scale: 0.7;
|
|
80
75
|
transform-origin: 0% -250%;
|
|
@@ -94,7 +89,7 @@
|
|
|
94
89
|
transform: scale(1);
|
|
95
90
|
}
|
|
96
91
|
50% {
|
|
97
|
-
transform: scale(0.
|
|
92
|
+
transform: scale(0.86);
|
|
98
93
|
}
|
|
99
94
|
}
|
|
100
95
|
@keyframes rotate {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-2714248e.js';
|
|
2
2
|
import { t as translate } from './translations-489f20b3.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:
|
|
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.8;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)}}";
|
|
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,
|
|
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.8;\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,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-641360ca",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-874e3af6",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-635d0886",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-818f71b8",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-2c7e5deb",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-dae7344a",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-28a6fec9",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ad5542bd",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-d05ebeb1",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-6d55f15c",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3a87b175",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-5e325fee",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-b1f26714",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-690a1a02",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"invalid":[516],"actions":[16]}]]],["p-02197b98",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-fc078f90",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-b0d3099c",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-c30e11ce",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-49432af9",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-56de9524",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-4eae90f7",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-58acbdcc",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6c2fdad7",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-f4760cdd",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-76b845b0",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-98478c6d",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-36c19a79",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-5e68e5f7",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d4708d14",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-69b6119b",[[1,"limel-grid"]]],["p-19688e05",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-6b5d588e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-da37b2af",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8b61a573",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-82290560",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d16aef41",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-d814fd97",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-93d5ebeb",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-a809b9a8",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-b10b5050",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-5c3b012b",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a0a02fb7",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-5fd7abb8",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-dcacda04",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-895ae176",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-7afca725",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}]]],["p-d532cab0",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ecb716ba",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-ec079338",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-3fda674f",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-23e6cba5",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-fe5fd06b",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-62f2d7fe",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-9cec73a7",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-641360ca",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-874e3af6",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-635d0886",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-818f71b8",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-2c7e5deb",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-dae7344a",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-28a6fec9",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ad5542bd",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-d05ebeb1",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-6d55f15c",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3a87b175",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-5e325fee",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-b1f26714",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-690a1a02",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"invalid":[516],"actions":[16]}]]],["p-02197b98",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-fc078f90",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-b0d3099c",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-c30e11ce",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-49432af9",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-56de9524",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-4eae90f7",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-58acbdcc",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6c2fdad7",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-f4760cdd",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-76b845b0",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-f15163c0",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-36c19a79",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-5e68e5f7",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d4708d14",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-69b6119b",[[1,"limel-grid"]]],["p-19688e05",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-6b5d588e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-da37b2af",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8b61a573",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-82290560",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d16aef41",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-d814fd97",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-93d5ebeb",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-a809b9a8",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-b10b5050",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-5c3b012b",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a0a02fb7",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-5fd7abb8",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-dcacda04",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-895ae176",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-7afca725",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}]]],["p-d532cab0",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ecb716ba",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-ec079338",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-3fda674f",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-23e6cba5",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-fe5fd06b",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-62f2d7fe",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-9cec73a7",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as r,H as t}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: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.8;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 o=class{constructor(r){a(this,r);this.getTranslation=a=>e.get(a,this.language);this.isThinking=false;this.language=document.documentElement.lang}render(){return r(t,{role:"img","aria-label":this.getHostAriaLabel()},this.renderCircle("red"),this.renderCircle("green"),this.renderCircle("blue"),this.renderCircle("orange"),r("div",{class:"core"}),r("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 r("svg",{class:a,viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",role:"presentation"},r("circle",{cx:"50",cy:"50",r:"40",fill:"none",stroke:"currentColor","stroke-width":"6"}))}};o.style=i;export{o as limel_ai_avatar};
|
|
2
|
+
//# sourceMappingURL=p-f15163c0.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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: 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.8;\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"],"mappings":"sFAAA,MAAMA,EAAc,q8F,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"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
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};
|
|
2
|
-
//# sourceMappingURL=p-98478c6d.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|