npm - @genexus/genexus-ide-ui - Versions diffs - 1.1.3 → 1.1.5 - Mend

@genexus/genexus-ide-ui 1.1.3 → 1.1.5

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 (850) hide show

package/dist/components/ai-message.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { g as getIconPath } from './assets-manager.js';
-import './MERCURY_ASSETS.js';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
 import { L as Locale } from './locale.js';
 import { h as hiChar } from './helpers.js';

package/dist/components/ai-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ai-message.js","mappings":"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","names":[],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n}\n/--- Messages ---/\n.message {\n color: var(--mer-color__neutral-gray--100);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 100ms;\n transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n &__outer-wrapper {\n overflow: hidden;\n }\n &__inner-wrapper {\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n border-radius: var(--mer-border__radius--sm);\n border-inline-start: var(--mer-border__width--md) solid transparent;\n background-color: var(--mer-color__neutral-gray--1200);\n margin-block-start: var(--mer-spacing--xs);\n position: relative;\n }\n &__header {\n display: flex;\n gap: var(--mer-spacing--xs);\n justify-content: space-between;\n\n .icon-md {\n opacity: 0;\n }\n\n &--in-progress {\n display: contents;\n }\n }\n &__role {\n &:before {\n content: \"\";\n display: grid;\n place-self: center flex-end;\n inline-size: 4px;\n block-size: 4px;\n border-radius: 50%;\n background-color: currentcolor;\n }\n\n font-weight: var(--mer-font__weight--semi-bold);\n margin-block-end: var(--mer-spacing--xs);\n display: inline-grid;\n grid-template-columns: max-content 1fr;\n gap: 8px;\n\n &-description {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n padding-block-start: 2px;\n }\n &--user {\n color: var(--mer-color__primary--300);\n }\n &--assistant {\n }\n &--hidden {\n display: none;\n }\n }\n &__caption {\n font-size: var(--mer-font__size--xs);\n line-height: var(--mer-line-height--regular);\n }\n &--visible {\n grid-template-rows: 1fr;\n }\n &--copying {\n pointer-events: none;\n span:not(.copied),\n .message__caption {\n color: transparent;\n -webkit-user-select: none; /* Safari /\n -ms-user-select: none; / IE 10 and IE 11 /\n user-select: none; / Standard syntax /\n }\n }\n /--- Types of messages ---/\n &--user {\n .message__inner-wrapper {\n background-color: rgba(91, 167, 255, 0.08);\n border-color: var(--mer-border-color__primary);\n }\n }\n &--assistant-action {\n .message__inner-wrapper {\n background-color: rgba(63, 168, 155, 0.05);\n border-color: var(--mer-border-color__success);\n }\n }\n &--assistant-chat {\n .message__inner-wrapper {\n background-color: var(--mer-surface__elevation--01);\n }\n }\n &--assistant-in-progress {\n color: var(--mer-color__neutral-gray--500);\n .message__inner-wrapper {\n font-style: italic;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--mer-spacing--xs);\n\n .message__caption {\n flex: 1;\n }\n .animation-wrapper {\n flex: none;\n }\n }\n }\n &--assistant-error {\n .message__inner-wrapper {\n background-color: rgba(251, 124, 132, 0.05);\n border-color: var(--mer-border-color__error);\n }\n }\n &--copyable {\n &:hover {\n filter: brightness(1.2);\n .icon-md {\n opacity: 1;\n }\n }\n }\n &:last-child {\n margin-block-end: 0;\n }\n}\n:host(:first-child) {\n .message {\n &__inner-wrapper {\n margin-block-end: 0;\n }\n }\n}\n\n/--- Dot Pulse Sweet Animation ---/\n.animation-wrapper {\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n position: relative;\n left: -9999px;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n box-shadow: 9999px 0 0 -5px;\n animation: dot-pulse 1.5s infinite linear;\n animation-delay: 0.25s;\n &::before,\n &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n }\n &::before {\n box-shadow: 9984px 0 0 -5px;\n animation: dot-pulse-before 1.5s infinite linear;\n animation-delay: 0s;\n }\n &::after {\n box-shadow: 10014px 0 0 -5px;\n animation: dot-pulse-after 1.5s infinite linear;\n animation-delay: 0.5s;\n }\n}\n@keyframes dot-pulse-before {\n 0% {\n box-shadow: 9984px 0 0 -5px;\n }\n 30% {\n box-shadow: 9984px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9984px 0 0 -5px;\n }\n}\n@keyframes dot-pulse {\n 0% {\n box-shadow: 9999px 0 0 -5px;\n }\n 30% {\n box-shadow: 9999px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9999px 0 0 -5px;\n }\n}\n@keyframes dot-pulse-after {\n 0% {\n box-shadow: 10014px 0 0 -5px;\n }\n 30% {\n box-shadow: 10014px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 10014px 0 0 -5px;\n }\n}\n\n/--- Copy Message ---/\n.copied {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mer-color__neutral-gray--300);\n display: flex;\n gap: var(--mer-spacing--xs);\n opacity: 0;\n animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@include hiChar;\n","import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n category: \"bpm\",\n name: \"tasks\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-ai-message\",\n styleUrl: \"ai-message.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n / The message allows to be copied/\n private _componentLocale: any;\n private copyable = false;\n\n @Element() el: HTMLGxIdeAiMessageElement;\n\n /\n This wil display the message if true\n /\n @State() visible = false;\n\n /\n This wil show the user a text, indicating that the message has been copied\n /\n @State() showCopiedMessage = false;\n\n /\n A reference to the gx-ide-ai-assistant host element\n /\n @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n /\n The actual message\n /\n @Prop() readonly message: string;\n\n /\n The message type\n /\n @Prop() readonly messageType: MessageType;\n\n /\n The filter value\n /\n @Prop() readonly filterValue: string;\n\n /\n It hides the message (used for the filter)\n /\n @Prop() readonly hidden: boolean;\n\n /\n An object with the needed string translations.\n /\n @Prop() readonly translations: Translations;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateMessageIsCopyable();\n }\n\n componentDidRender() {\n setTimeout(() => {\n / Without the timeout it appears instantly (no apparent transition)*/\n this.visible = true;\n const messagesList = this.el.parentElement;\n messagesList.scrollTo(0, 0);\n }, 0);\n }\n\n private copyMessage = () => {\n navigator.clipboard.writeText(this.message);\n this.showCopiedMessage = true;\n setTimeout(() => {\n this.showCopiedMessage = false;\n }, 1500);\n };\n\n #buttonMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n private evaluateMessageIsCopyable = () => {\n this.copyable = this.messageType !== \"assistant-in-progress\";\n };\n\n private evaluateCopyIcon = () => {\n return this.copyable ? (\n <button\n class=\"button-tertiary button-icon-only\"\n aria-label=\"copy\"\n onClick={this.copyMessage}\n onMouseDown={this.#buttonMouseDownHandler}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n </button>\n ) : null;\n };\n\n render() {\n return (\n <li\n class={{\n \"message\": true,\n \"message--visible\": this.visible && !this.hidden,\n [`message--${[this.messageType]}`]: true,\n \"message--assistant\": this.messageType !== \"user\",\n \"message--copyable\": this.copyable,\n \"message--copying\": this.showCopiedMessage\n }}\n >\n <div class=\"message__outer-wrapper\">\n <div\n class={{\n \"message__inner-wrapper\": true\n }}\n >\n {this.messageType === \"user\" ? (\n <div class=\"message__header\">\n <span class=\"message__role message__role--user\">\n <span class=\"message__role-description\">\n {this._componentLocale.you}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n ) : (\n <div\n class={{\n \"message__header\": true,\n \"message__header--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n <span\n class={{\n \"message__role\":\n this.messageType !== \"assistant-in-progress\",\n \"message__role--hidden\":\n this.messageType === \"assistant-in-progress\",\n \"message__role--assistant\": true\n }}\n >\n <span class=\"message__role-description\">\n {this._componentLocale.assistant}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n )}\n <div\n class={{\n \"message__caption\": true,\n \"message__caption--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n {this.showCopiedMessage ? (\n <span class=\"copied\">\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.translations[\"copied\"]}\n </span>\n ) : null}\n {hiChar(this.message, this.filterValue)}\n </div>\n {this.messageType === \"assistant-in-progress\" ? (\n <div class=\"animation-wrapper\">\n <div class=\"dot-pulse\"></div>\n </div>\n ) : null}\n </div>\n </div>\n </li>\n );\n }\n}\n\nexport type Translations = {\n [key: string]: string;\n};\n"],"version":3}
1	+ {"file":"ai-message.js","mappings":"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","names":[],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n}\n/--- Messages ---/\n.message {\n color: var(--mer-color__neutral-gray--100);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 100ms;\n transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n &__outer-wrapper {\n overflow: hidden;\n }\n &__inner-wrapper {\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n border-radius: var(--mer-border__radius--sm);\n border-inline-start: var(--mer-border__width--md) solid transparent;\n background-color: var(--mer-color__neutral-gray--1200);\n margin-block-start: var(--mer-spacing--xs);\n position: relative;\n }\n &__header {\n display: flex;\n gap: var(--mer-spacing--xs);\n justify-content: space-between;\n\n .icon-md {\n opacity: 0;\n }\n\n &--in-progress {\n display: contents;\n }\n }\n &__role {\n &:before {\n content: \"\";\n display: grid;\n place-self: center flex-end;\n inline-size: 4px;\n block-size: 4px;\n border-radius: 50%;\n background-color: currentcolor;\n }\n\n font-weight: var(--mer-font__weight--semi-bold);\n margin-block-end: var(--mer-spacing--xs);\n display: inline-grid;\n grid-template-columns: max-content 1fr;\n gap: 8px;\n\n &-description {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n padding-block-start: 2px;\n }\n &--user {\n color: var(--mer-color__primary--300);\n }\n &--assistant {\n }\n &--hidden {\n display: none;\n }\n }\n &__caption {\n font-size: var(--mer-font__size--xs);\n line-height: var(--mer-line-height--regular);\n }\n &--visible {\n grid-template-rows: 1fr;\n }\n &--copying {\n pointer-events: none;\n span:not(.copied),\n .message__caption {\n color: transparent;\n -webkit-user-select: none; /* Safari /\n -ms-user-select: none; / IE 10 and IE 11 /\n user-select: none; / Standard syntax /\n }\n }\n /--- Types of messages ---/\n &--user {\n .message__inner-wrapper {\n background-color: rgba(91, 167, 255, 0.08);\n border-color: var(--mer-border-color__primary);\n }\n }\n &--assistant-action {\n .message__inner-wrapper {\n background-color: rgba(63, 168, 155, 0.05);\n border-color: var(--mer-border-color__success);\n }\n }\n &--assistant-chat {\n .message__inner-wrapper {\n background-color: var(--mer-surface__elevation--01);\n }\n }\n &--assistant-in-progress {\n color: var(--mer-color__neutral-gray--500);\n .message__inner-wrapper {\n font-style: italic;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--mer-spacing--xs);\n\n .message__caption {\n flex: 1;\n }\n .animation-wrapper {\n flex: none;\n }\n }\n }\n &--assistant-error {\n .message__inner-wrapper {\n background-color: rgba(251, 124, 132, 0.05);\n border-color: var(--mer-border-color__error);\n }\n }\n &--copyable {\n &:hover {\n filter: brightness(1.2);\n .icon-md {\n opacity: 1;\n }\n }\n }\n &:last-child {\n margin-block-end: 0;\n }\n}\n:host(:first-child) {\n .message {\n &__inner-wrapper {\n margin-block-end: 0;\n }\n }\n}\n\n/--- Dot Pulse Sweet Animation ---/\n.animation-wrapper {\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n position: relative;\n left: -9999px;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n box-shadow: 9999px 0 0 -5px;\n animation: dot-pulse 1.5s infinite linear;\n animation-delay: 0.25s;\n &::before,\n &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n }\n &::before {\n box-shadow: 9984px 0 0 -5px;\n animation: dot-pulse-before 1.5s infinite linear;\n animation-delay: 0s;\n }\n &::after {\n box-shadow: 10014px 0 0 -5px;\n animation: dot-pulse-after 1.5s infinite linear;\n animation-delay: 0.5s;\n }\n}\n@keyframes dot-pulse-before {\n 0% {\n box-shadow: 9984px 0 0 -5px;\n }\n 30% {\n box-shadow: 9984px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9984px 0 0 -5px;\n }\n}\n@keyframes dot-pulse {\n 0% {\n box-shadow: 9999px 0 0 -5px;\n }\n 30% {\n box-shadow: 9999px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9999px 0 0 -5px;\n }\n}\n@keyframes dot-pulse-after {\n 0% {\n box-shadow: 10014px 0 0 -5px;\n }\n 30% {\n box-shadow: 10014px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 10014px 0 0 -5px;\n }\n}\n\n/--- Copy Message ---/\n.copied {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mer-color__neutral-gray--300);\n display: flex;\n gap: var(--mer-spacing--xs);\n opacity: 0;\n animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@include hiChar;\n","import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n category: \"bpm\",\n name: \"tasks\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-ai-message\",\n styleUrl: \"ai-message.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n / The message allows to be copied/\n private _componentLocale: any;\n private copyable = false;\n\n @Element() el: HTMLGxIdeAiMessageElement;\n\n /\n This wil display the message if true\n /\n @State() visible = false;\n\n /\n This wil show the user a text, indicating that the message has been copied\n /\n @State() showCopiedMessage = false;\n\n /\n A reference to the gx-ide-ai-assistant host element\n /\n @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n /\n The actual message\n /\n @Prop() readonly message: string;\n\n /\n The message type\n /\n @Prop() readonly messageType: MessageType;\n\n /\n The filter value\n /\n @Prop() readonly filterValue: string;\n\n /\n It hides the message (used for the filter)\n /\n @Prop() readonly hidden: boolean;\n\n /\n An object with the needed string translations.\n /\n @Prop() readonly translations: Translations;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateMessageIsCopyable();\n }\n\n componentDidRender() {\n setTimeout(() => {\n / Without the timeout it appears instantly (no apparent transition)*/\n this.visible = true;\n const messagesList = this.el.parentElement;\n messagesList.scrollTo(0, 0);\n }, 0);\n }\n\n private copyMessage = () => {\n navigator.clipboard.writeText(this.message);\n this.showCopiedMessage = true;\n setTimeout(() => {\n this.showCopiedMessage = false;\n }, 1500);\n };\n\n #buttonMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n private evaluateMessageIsCopyable = () => {\n this.copyable = this.messageType !== \"assistant-in-progress\";\n };\n\n private evaluateCopyIcon = () => {\n return this.copyable ? (\n <button\n class=\"button-tertiary button-icon-only\"\n aria-label=\"copy\"\n onClick={this.copyMessage}\n onMouseDown={this.#buttonMouseDownHandler}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n </button>\n ) : null;\n };\n\n render() {\n return (\n <li\n class={{\n \"message\": true,\n \"message--visible\": this.visible && !this.hidden,\n [`message--${[this.messageType]}`]: true,\n \"message--assistant\": this.messageType !== \"user\",\n \"message--copyable\": this.copyable,\n \"message--copying\": this.showCopiedMessage\n }}\n >\n <div class=\"message__outer-wrapper\">\n <div\n class={{\n \"message__inner-wrapper\": true\n }}\n >\n {this.messageType === \"user\" ? (\n <div class=\"message__header\">\n <span class=\"message__role message__role--user\">\n <span class=\"message__role-description\">\n {this._componentLocale.you}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n ) : (\n <div\n class={{\n \"message__header\": true,\n \"message__header--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n <span\n class={{\n \"message__role\":\n this.messageType !== \"assistant-in-progress\",\n \"message__role--hidden\":\n this.messageType === \"assistant-in-progress\",\n \"message__role--assistant\": true\n }}\n >\n <span class=\"message__role-description\">\n {this._componentLocale.assistant}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n )}\n <div\n class={{\n \"message__caption\": true,\n \"message__caption--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n {this.showCopiedMessage ? (\n <span class=\"copied\">\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.translations[\"copied\"]}\n </span>\n ) : null}\n {hiChar(this.message, this.filterValue)}\n </div>\n {this.messageType === \"assistant-in-progress\" ? (\n <div class=\"animation-wrapper\">\n <div class=\"dot-pulse\"></div>\n </div>\n ) : null}\n </div>\n </div>\n </li>\n );\n }\n}\n\nexport type Translations = {\n [key: string]: string;\n};\n"],"version":3}

package/dist/components/bpm-objects-selector.js CHANGED Viewed

@@ -24,7 +24,7 @@ const objectsToListItemData = (objects) => {
     return itemsData;
 };
-const bpmObjectsSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}.control-wrapper{display:flex;gap:var(--mer-spacing--xs);align-items:center}.control-wrapper--vertical{flex-direction:column;align-items:start}.controls-wrapper{display:flex;gap:var(--mer-spacing--xs)}.controls-wrapper--vertical{flex-direction:column;align-items:start}.input-text{box-sizing:border-box;background-color:transparent;border:var(--mer-border__width--sm) solid var(--mer-border-color__dim);border-radius:var(--mer-border__width--lg);height:26px;color:var(--mer-text__bright);font-size:var(--mer-font__size--xxs)}.input-text--full-width{align-self:stretch}:host{display:block}.header{display:grid;grid-template-columns:1fr min-content min-content;grid-template-areas:\"label label label\" \"input cancel export\";grid-gap:var(--gx-ide-grid-column-gap)}.header .label{grid-area:label}.header .input{grid-area:input}.header .cancel{grid-area:cancel}.header .export{grid-area:export}";
+const bpmObjectsSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}.control-wrapper{display:flex;gap:var(--mer-spacing--xs);align-items:center}.control-wrapper--vertical{flex-direction:column;align-items:start}.controls-wrapper{display:flex;gap:var(--mer-spacing--xs)}.controls-wrapper--vertical{flex-direction:column;align-items:start}.input-text{box-sizing:border-box;background-color:transparent;border:var(--mer-border__width--sm) solid var(--mer-border-color__dim);border-radius:var(--mer-border__width--lg);height:26px;color:var(--mer-text__bright);font-size:var(--mer-font__size--xxs)}.input-text--full-width{align-self:stretch}:host{display:block}.header{display:grid;grid-template-columns:1fr min-content min-content;grid-template-areas:\"label label label\" \"input cancel export\";grid-gap:var(--gx-ide-grid-column-gap)}.header .label{grid-area:label}.header .input{grid-area:input}.header .cancel{grid-area:cancel}.header .export{grid-area:export}";
 const GxIdeBpmExportXpdl = /*@__PURE__*/ proxyCustomElement(class GxIdeBpmExportXpdl extends HTMLElement {
     constructor() {

package/dist/components/bpm-objects-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bpm-objects-selector.js","mappings":"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","names":[],"sources":["src/components/bpm/objects-selector/helpers.ts","src/components/bpm/objects-selector/bpm-objects-selector.scss?tag=gx-ide-bpm-objects-selector&encapsulation=shadow","src/components/bpm/objects-selector/bpm-objects-selector.tsx"],"sourcesContent":["import { ItemData } from \"../../_helpers/list-selector/list-selector-item/list-selector-item\";\n\nexport type ObjectData = {\n id: string;\n icon: string;\n name: string;\n};\n\nexport const objectsToListItemData = (objects: ObjectData[]): ItemData[] => {\n const itemsData: ItemData[] = [];\n objects.forEach(object => {\n const itemId = object.id;\n const itemValue = object.name;\n const itemIcon: string = object.icon;\n const itemChecked: boolean = false;\n itemsData.push({\n itemId: itemId,\n itemValue: itemValue,\n itemIcon: itemIcon,\n itemChecked: itemChecked\n });\n });\n return itemsData;\n};\n","@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/temporary-tokens-chameleon.scss\";\n\n:host {\n display: block;\n}\n\n.header {\n display: grid;\n grid-template-columns: 1fr min-content min-content;\n grid-template-areas:\n \"label label label\"\n \"input cancel export\";\n grid-gap: var(--gx-ide-grid-column-gap);\n\n .label {\n grid-area: label;\n }\n .input {\n grid-area: input;\n }\n .cancel {\n grid-area: cancel;\n }\n .export {\n grid-area: export;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { CheckedItemsInfo } from \"../../_helpers/list-selector/list-selector\";\n\n/ CUSTOM IMPORTS /\nimport { config } from \"../../../common/config\";\nimport { Locale } from \"../../../common/locale\";\nimport { renderListItems } from \"../../../common/render-list-item\";\nimport { ObjectData, objectsToListItemData } from \"./helpers\";\n\n@Component({\n tag: \"gx-ide-bpm-objects-selector\",\n styleUrl: \"bpm-objects-selector.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/bpm-objects-selector\"]\n})\nexport class GxIdeBpmExportXpdl {\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n private includeAll = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeBpmObjectsSelectorElement;\n private includeAllCheckboxEl: HTMLChCheckboxElement;\n\n // 3.STATE() VARIABLES //\n\n @State() objects: ObjectData[] = [];\n\n /\n Contains the list of selected object ids\n /\n @State() selectedObjects: string[] = [];\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n The current selection in the list of objects\n /\n @Prop({ mutable: true }) selection: SelectionData;\n\n /\n Callback invoked when the user presses the 'Add' button.\n * This function is expected to return a list of selected objects' basic information.\n * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n /\n @Prop() readonly addCallback: () => Promise<ObjectData[]>;\n\n /\n Callback invoked when the user presses the 'References' button.\n * Receives a parameter which is an array of IDs of the objects currently added to the list.\n * Returns a Promise that resolves to an array of ObjectData, where each ObjectData contains the ID, icon, and name of an object.\n * @param {string[]} ids - An array of IDs of the objects currently added to the list.\n * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n /\n @Prop() readonly referencesCallback: (ids: string[]) => Promise<ObjectData[]>;\n\n // 5.EVENTS (EMIT) //\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event()\n componentDidRenderFirstTime: EventEmitter<HTMLGxIdeBpmObjectsSelectorElement>;\n\n /\n @description Gets fired when the objects selection list change or when 'Select All' checkbox state changes.\n */\n @Event() selectionChanged: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(this.el);\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private objectSelectionChangedHandler = (\n selectedItem: CustomEvent<CheckedItemsInfo>\n ) => {\n const selectedObjects = Array.isArray(selectedItem.detail)\n ? selectedItem.detail\n : [selectedItem.detail];\n\n this.selectedObjects = selectedObjects.map(item => item.itemId);\n };\n\n private removeObjectsHandler = () => {\n this.objects = this.objects.filter(\n object => !this.selectedObjects.includes(object.id)\n );\n\n this.selectedObjects = [];\n this.updateSelection(false);\n };\n\n private removeAllObjectsHandler = () => {\n this.objects = [];\n this.selectedObjects = [];\n this.updateSelection(false);\n };\n\n private includeAllHandler = () => {\n this.includeAll = this.includeAllCheckboxEl.value === \"true\";\n if (this.includeAll) {\n this.selectedObjects = this.objects.map(object => object.id);\n this.objects = [];\n this.updateSelection(true);\n } else {\n this.selectedObjects = [];\n this.updateSelection(false);\n }\n\n this.selectionChanged.emit();\n };\n private addCallbackHandler = async () => {\n if (this.addCallback) {\n const resultObjects = await this.addCallback();\n const newObjects = resultObjects.filter(\n resultObj =>\n !this.objects.some(existingObj => existingObj.id === resultObj.id)\n );\n this.objects = [...this.objects, ...newObjects];\n this.updateSelection(false);\n }\n };\n\n private referencesCallbackHandler = async () => {\n if (this.referencesCallback && this.objects.length > 0) {\n const ids = this.objects.map(obj => obj.id);\n\n const resultObjects = await this.referencesCallback(ids);\n\n const newObjects = resultObjects.filter(\n resultObj =>\n !this.objects.some(existingObj => existingObj.id === resultObj.id)\n );\n\n this.objects = [...this.objects, ...newObjects];\n this.updateSelection(false);\n }\n };\n\n private updateSelection = (includeAll: boolean) => {\n const data: SelectionData = {\n includeAll: this.includeAllCheckboxEl.value === \"true\",\n objectIds: includeAll\n ? this.selectedObjects\n : this.objects.map(object => object.id)\n };\n\n this.selection = data;\n this.selectionChanged.emit();\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host class=\"gx-ide-component gx-ide-bpm-objects-selector\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <gx-ide-list-selector\n id=\"path-list\"\n type=\"multi-selection\"\n listName=\"path-list\"\n ordered\n onSelectionChanged={this.objectSelectionChangedHandler}\n class=\"path-list\"\n >\n {renderListItems(objectsToListItemData(this.objects))}\n </gx-ide-list-selector>\n\n <div class=\"controls-wrapper\">\n <label htmlFor=\"include-all\">\n {this._componentLocale.main.includeAllLabel}\n </label>\n <ch-checkbox\n id=\"include-all\"\n accessibleName={this._componentLocale.main.includeAllLabel}\n checkedValue=\"true\"\n unCheckedValue=\"false\"\n value=\"checked\"\n onInput={this.includeAllHandler}\n ref={el =>\n (this.includeAllCheckboxEl = el as HTMLChCheckboxElement)\n }\n ></ch-checkbox>\n <button\n onClick={this.addCallbackHandler}\n disabled={this.includeAll}\n >\n {this._componentLocale.main.addButton}\n </button>\n <button\n onClick={this.referencesCallbackHandler}\n disabled={this.objects.length === 0}\n >\n {this._componentLocale.main.referencesButton}\n </button>\n <button\n onClick={this.removeObjectsHandler}\n disabled={this.selectedObjects.length === 0 \|\| this.includeAll}\n >\n {this._componentLocale.main.removeButton} (\n {this.selectedObjects.length})\n </button>\n </div>\n\n <button\n slot=\"footer-end\"\n onClick={this.removeAllObjectsHandler}\n disabled={this.includeAll}\n >\n {this._componentLocale.main.clearButton}\n </button>\n </gx-ide-container>\n </div>\n </Host>\n );\n }\n}\n\nexport type SelectionData = {\n includeAll: boolean;\n objectIds: string[];\n};\n"],"version":3}
1	+ {"file":"bpm-objects-selector.js","mappings":"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","names":[],"sources":["src/components/bpm/objects-selector/helpers.ts","src/components/bpm/objects-selector/bpm-objects-selector.scss?tag=gx-ide-bpm-objects-selector&encapsulation=shadow","src/components/bpm/objects-selector/bpm-objects-selector.tsx"],"sourcesContent":["import { ItemData } from \"../../_helpers/list-selector/list-selector-item/list-selector-item\";\n\nexport type ObjectData = {\n id: string;\n icon: string;\n name: string;\n};\n\nexport const objectsToListItemData = (objects: ObjectData[]): ItemData[] => {\n const itemsData: ItemData[] = [];\n objects.forEach(object => {\n const itemId = object.id;\n const itemValue = object.name;\n const itemIcon: string = object.icon;\n const itemChecked: boolean = false;\n itemsData.push({\n itemId: itemId,\n itemValue: itemValue,\n itemIcon: itemIcon,\n itemChecked: itemChecked\n });\n });\n return itemsData;\n};\n","@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/temporary-tokens-chameleon.scss\";\n\n:host {\n display: block;\n}\n\n.header {\n display: grid;\n grid-template-columns: 1fr min-content min-content;\n grid-template-areas:\n \"label label label\"\n \"input cancel export\";\n grid-gap: var(--gx-ide-grid-column-gap);\n\n .label {\n grid-area: label;\n }\n .input {\n grid-area: input;\n }\n .cancel {\n grid-area: cancel;\n }\n .export {\n grid-area: export;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { CheckedItemsInfo } from \"../../_helpers/list-selector/list-selector\";\n\n/ CUSTOM IMPORTS /\nimport { config } from \"../../../common/config\";\nimport { Locale } from \"../../../common/locale\";\nimport { renderListItems } from \"../../../common/render-list-item\";\nimport { ObjectData, objectsToListItemData } from \"./helpers\";\n\n@Component({\n tag: \"gx-ide-bpm-objects-selector\",\n styleUrl: \"bpm-objects-selector.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/bpm-objects-selector\"]\n})\nexport class GxIdeBpmExportXpdl {\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n private includeAll = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeBpmObjectsSelectorElement;\n private includeAllCheckboxEl: HTMLChCheckboxElement;\n\n // 3.STATE() VARIABLES //\n\n @State() objects: ObjectData[] = [];\n\n /\n Contains the list of selected object ids\n /\n @State() selectedObjects: string[] = [];\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n The current selection in the list of objects\n /\n @Prop({ mutable: true }) selection: SelectionData;\n\n /\n Callback invoked when the user presses the 'Add' button.\n * This function is expected to return a list of selected objects' basic information.\n * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n /\n @Prop() readonly addCallback: () => Promise<ObjectData[]>;\n\n /\n Callback invoked when the user presses the 'References' button.\n * Receives a parameter which is an array of IDs of the objects currently added to the list.\n * Returns a Promise that resolves to an array of ObjectData, where each ObjectData contains the ID, icon, and name of an object.\n * @param {string[]} ids - An array of IDs of the objects currently added to the list.\n * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n /\n @Prop() readonly referencesCallback: (ids: string[]) => Promise<ObjectData[]>;\n\n // 5.EVENTS (EMIT) //\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event()\n componentDidRenderFirstTime: EventEmitter<HTMLGxIdeBpmObjectsSelectorElement>;\n\n /\n @description Gets fired when the objects selection list change or when 'Select All' checkbox state changes.\n */\n @Event() selectionChanged: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(this.el);\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private objectSelectionChangedHandler = (\n selectedItem: CustomEvent<CheckedItemsInfo>\n ) => {\n const selectedObjects = Array.isArray(selectedItem.detail)\n ? selectedItem.detail\n : [selectedItem.detail];\n\n this.selectedObjects = selectedObjects.map(item => item.itemId);\n };\n\n private removeObjectsHandler = () => {\n this.objects = this.objects.filter(\n object => !this.selectedObjects.includes(object.id)\n );\n\n this.selectedObjects = [];\n this.updateSelection(false);\n };\n\n private removeAllObjectsHandler = () => {\n this.objects = [];\n this.selectedObjects = [];\n this.updateSelection(false);\n };\n\n private includeAllHandler = () => {\n this.includeAll = this.includeAllCheckboxEl.value === \"true\";\n if (this.includeAll) {\n this.selectedObjects = this.objects.map(object => object.id);\n this.objects = [];\n this.updateSelection(true);\n } else {\n this.selectedObjects = [];\n this.updateSelection(false);\n }\n\n this.selectionChanged.emit();\n };\n private addCallbackHandler = async () => {\n if (this.addCallback) {\n const resultObjects = await this.addCallback();\n const newObjects = resultObjects.filter(\n resultObj =>\n !this.objects.some(existingObj => existingObj.id === resultObj.id)\n );\n this.objects = [...this.objects, ...newObjects];\n this.updateSelection(false);\n }\n };\n\n private referencesCallbackHandler = async () => {\n if (this.referencesCallback && this.objects.length > 0) {\n const ids = this.objects.map(obj => obj.id);\n\n const resultObjects = await this.referencesCallback(ids);\n\n const newObjects = resultObjects.filter(\n resultObj =>\n !this.objects.some(existingObj => existingObj.id === resultObj.id)\n );\n\n this.objects = [...this.objects, ...newObjects];\n this.updateSelection(false);\n }\n };\n\n private updateSelection = (includeAll: boolean) => {\n const data: SelectionData = {\n includeAll: this.includeAllCheckboxEl.value === \"true\",\n objectIds: includeAll\n ? this.selectedObjects\n : this.objects.map(object => object.id)\n };\n\n this.selection = data;\n this.selectionChanged.emit();\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host class=\"gx-ide-component gx-ide-bpm-objects-selector\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <gx-ide-list-selector\n id=\"path-list\"\n type=\"multi-selection\"\n listName=\"path-list\"\n ordered\n onSelectionChanged={this.objectSelectionChangedHandler}\n class=\"path-list\"\n >\n {renderListItems(objectsToListItemData(this.objects))}\n </gx-ide-list-selector>\n\n <div class=\"controls-wrapper\">\n <label htmlFor=\"include-all\">\n {this._componentLocale.main.includeAllLabel}\n </label>\n <ch-checkbox\n id=\"include-all\"\n accessibleName={this._componentLocale.main.includeAllLabel}\n checkedValue=\"true\"\n unCheckedValue=\"false\"\n value=\"checked\"\n onInput={this.includeAllHandler}\n ref={el =>\n (this.includeAllCheckboxEl = el as HTMLChCheckboxElement)\n }\n ></ch-checkbox>\n <button\n onClick={this.addCallbackHandler}\n disabled={this.includeAll}\n >\n {this._componentLocale.main.addButton}\n </button>\n <button\n onClick={this.referencesCallbackHandler}\n disabled={this.objects.length === 0}\n >\n {this._componentLocale.main.referencesButton}\n </button>\n <button\n onClick={this.removeObjectsHandler}\n disabled={this.selectedObjects.length === 0 \|\| this.includeAll}\n >\n {this._componentLocale.main.removeButton} (\n {this.selectedObjects.length})\n </button>\n </div>\n\n <button\n slot=\"footer-end\"\n onClick={this.removeAllObjectsHandler}\n disabled={this.includeAll}\n >\n {this._componentLocale.main.clearButton}\n </button>\n </gx-ide-container>\n </div>\n </Host>\n );\n }\n}\n\nexport type SelectionData = {\n includeAll: boolean;\n objectIds: string[];\n};\n"],"version":3}

package/dist/components/chat-container.js CHANGED Viewed

@@ -1,39 +1,94 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getIconPath } from './assets-manager.js';
-import './MERCURY_ASSETS.js';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { L as Locale } from './locale.js';
-const chatContainerCss = ".chat-container{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content;gap:6px;position:relative;--chat-common-border-radius:var(--mer-spacing--2xs);background-color:transparent !important}.section{display:contents}.chat-container__header{padding:var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm);display:flex;align-items:center;gap:var(--mer-spacing--sm);justify-content:space-between}.chat-container__ch-chat{overflow:auto;position:relative;display:grid;padding:0 var(--mer-spacing--xs) var(--mer-spacing--xs) var(--mer-spacing--xs)}.chat-container__header,.chat-container__footer{padding:var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm)}.chat-container__conversation-copied{position:absolute;z-index:1;inline-size:100%;block-size:100%;background:rgba(22, 22, 23, 0.75);backdrop-filter:saturate(180%) blur(20px);display:grid;align-items:center;justify-content:center;text-align:center;padding:32px;--mer-icon__box--md:18px;pointer-events:none;overflow:hidden;animation:fadeIn 100ms ease-in-out forwards;opacity:0}.chat-container__conversation-copied-wrapper{display:flex;align-items:center;gap:var(--mer-spacing--sm)}.chat-container__conversation-copied-wrapper{animation:liftUp var(--mer-timing--fast) ease-in-out forwards;inset-block-start:4px;opacity:0;animation-delay:var(--mer-timing--fast);position:relative}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes liftUp{from{opacity:0;inset-block-start:4px}to{opacity:1;inset-block-start:0}}.chat::part(message){position:relative;--copy-button-opacity:0;--copied-to-clipboard-opacity:0;--date-opacity:1}.chat::part(message__content){font-size:13px !important;line-height:1.3 !important}.chat::part(message__time),.chat::part(message__copy-button){transition:opacity var(--mer-timing--super-fast) ease-in-out}.chat::part(message__time){opacity:var(--date-opacity)}.chat::part(message):hover{position:relative;--copy-button-opacity:1;--date-opacity:0}.chat::part(message__copy-button){position:absolute;z-index:1;inset-inline-end:0;padding:var(--mer-spacing--sm);transition:opacity var(--mer-timing--fast) ease-in-out;opacity:var(--copy-button-opacity)}.chat::part(message__copy-button)::after{content:\"\";inline-size:var(--mer-icon__box--md);block-size:var(--mer-icon__box--md);background:no-repeat center/var(--mer-icon__size--md) var(--icon-path);--icon-path:var(--icon__system_copy_primary--enabled)}.chat::part(message__copy-button):hover::after{--icon-path:var(--icon__system_copy_primary--hover)}.chat::part(message__copy-button):active::after{--icon-path:var(--icon__system_copy_primary--active)}.chat::part(message__copied-feedback){transition:opacity 150ms ease-in-out;position:absolute;inline-size:100%;block-size:100%;display:flex;align-items:center;justify-content:center;z-index:2;background:rgba(22, 22, 23, 0.8);backdrop-filter:saturate(180%) blur(20px);opacity:var(--copied-to-clipboard-opacity);pointer-events:none}.chat::part(message__copied-feedback-visible){--copied-to-clipboard-opacity:1;pointer-events:visible}.chat::part(send-container){gap:var(--mer-spacing--xs)}.chat::part(send-input){--control__padding-block:7px !important}.chat::part(send-button){border-width:var(--control__border-width);border-style:var(--control__border-style);border-color:var(--control__border-color);border-radius:var(--control__border-radius);inline-size:32px;block-size:32px;background:no-repeat center/var(--mer-icon__box--md) var(--icon-path);--icon-path:var(--icon__system_send_primary--enabled)}.chat::part(send-button):hover{--icon-path:var(--icon__system_send_primary--hover);--control__border-color:var(--mer-text__primary--hover)}.chat::part(send-button):active{--icon-path:var(--icon__system_send_primary--active);--control__border-color:var(--mer-border-color__primary--active)}.chat::part(message assistant){background-color:var(--elevation-background-color, var(--mer-surface__elevation--01)) !important}.chat::part(message assistant waiting){align-items:center;gap:var(--mer-spacing--md) !important}.button-copy-chat,.button-delete-chat{--control__border-color:transparent !important}.button-delete-chat:hover{filter:brightness(1.3)}.button-delete-chat:active{filter:brightness(0.8)}";
+const chatContainerCss = ".chat-container{background-color:var(--elevation-background-color, --mer-surface__elevation--01);display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr;position:relative;--chat-common-border-radius:var(--mer-spacing--2xs)}.chat-container.with-header{grid-template-rows:max-content 1fr}.section{display:contents}.header{padding:var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--2xs) var(--mer-spacing--sm);display:flex;align-items:center;justify-content:space-between;gap:var(--mer-spacing--sm);color:var(--mer-text__bright);border-block-end:var(--mer-border__width--sm) solid var(--color-border-surface-on-elevation-01, #333d47)}.header .button-copy-chat,.header .button-delete-chat{--control__border-color:transparent !important}.header .button-delete-chat:hover{filter:brightness(1.3)}.header .button-delete-chat:active{filter:brightness(0.8)}.ch-chat-container{overflow:auto;position:relative;display:grid}.chat-container__conversation-copied{position:absolute;z-index:1;inline-size:100%;block-size:100%;background:rgba(22, 22, 23, 0.75);backdrop-filter:saturate(180%) blur(20px);display:grid;align-items:center;justify-content:center;text-align:center;padding:32px;--mer-icon__box--md:18px;pointer-events:none;overflow:hidden;animation:fadeIn 100ms ease-in-out forwards;opacity:0}.chat-container__conversation-copied-wrapper{display:flex;align-items:center;gap:var(--mer-spacing--sm);position:relative;inset-block-start:4px;opacity:0;animation:liftUp var(--mer-timing--fast) ease-in-out forwards;animation-delay:var(--mer-timing--fast)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes liftUp{from{opacity:0;inset-block-start:4px}to{opacity:1;inset-block-start:0}}::selection{color:#00ccff;background:#22334a}.chat::part(code-block-header__copy){--copy-text-opacity:0;--copy-text-translate-x:6px;opacity:var(--copy-text-opacity);pointer-events:none;transform:translateX(var(--copy-text-translate-x));transition:opacity 100ms ease-in-out, transform 100ms ease-in-out;font-size:12px}.chat::part(code-block-header__copy-copied){--copy-button-pointer-events:none !important;--copy-text-opacity:1;--copy-text-translate-x:0}.chat::part(code-block-header){align-items:center;display:flex;gap:8px}";
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeChatContainer_menuItems, _GxIdeChatContainer_componentLocale, _GxIdeChatContainer_showMenuHandler, _GxIdeChatContainer_menuExpandedChangeHandler, _GxIdeChatContainer_copyConversationHandler, _GxIdeChatContainer_deleteConversationHandler;
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
     "chameleon/scrollbar",
     "components/button",
+    "components/dropdown",
     "components/icon",
     "utils/elevation"
 ];
 const COPY_ICON = getIconPath({
     category: "system",
     name: "copy",
-    colorType: "neutral"
+    colorType: "primary"
 });
 const DELETE_ICON = getIconPath({
     category: "system",
     name: "delete-outlined",
-    colorType: "error"
+    colorType: "primary"
 });
 const CONVERSATION_ICON = getIconPath({
     category: "objects",
     name: "conversational-flows"
 });
+const MORE_HORIZONTAL_ICON = getIconPath({
+    category: "system",
+    name: "more-horizontal",
+    colorType: "neutral"
+});
 const GxIdeChatContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeChatContainer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        _GxIdeChatContainer_menuItems.set(this, [
+            { type: "slot", id: "delete-chat-button" },
+            { type: "slot", id: "copy-chat-button" }
+        ]);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeChatContainer_componentLocale.set(this, void 0);
+        _GxIdeChatContainer_showMenuHandler.set(this, () => {
+            this.menuIsExpanded = true;
+        });
+        _GxIdeChatContainer_menuExpandedChangeHandler.set(this, (event) => {
+            this.menuIsExpanded = event.detail;
+        });
+        _GxIdeChatContainer_copyConversationHandler.set(this, () => {
+            if (this.copyConversationCallback) {
+                this.copyConversationCallback();
+                this.menuIsExpanded = false;
+            }
+        });
+        _GxIdeChatContainer_deleteConversationHandler.set(this, () => {
+            if (this.deleteConversationCallback) {
+                this.deleteConversationCallback();
+                this.menuIsExpanded = false;
+            }
+        });
+        this.displayConversationCopiedMessage = false;
+        this.menuIsExpanded = false;
         this.chatTitle = undefined;
         this.copyConversationCallback = undefined;
         this.deleteConversationCallback = undefined;
-        this.displayConversationCopiedMessage = false;
+        this.displayWelcomeScreen = false;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeChatContainer_componentLocale, await Locale.getComponentStrings(this.el), "f");
     }
     /**
      * It will display a feedback message that the conversation has been copied
@@ -49,16 +104,24 @@ const GxIdeChatContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeChatConta
             this.copyConversationCallback ||
             this.deleteConversationCallback;
         const renderButtonsGroup = this.copyConversationCallback || this.deleteConversationCallback;
-        return (h(Host, { class: "chat-container" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, renderHeader && (h("header", { class: "chat-container__header elevation-1 body-italic-m" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("div", null, this.deleteConversationCallback && (h("button", { class: "button-secondary button-icon-only button-delete-chat", onClick: this.deleteConversationCallback }, h("ch-image", { class: "icon-md", src: DELETE_ICON }))), this.copyConversationCallback && (h("button", { class: "button-secondary button-icon-only button-copy-chat", onClick: this.copyConversationCallback }, h("ch-image", { class: "icon-md", src: COPY_ICON }))))))), h("section", { class: "chat-container__ch-chat" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
+        return (h(Host, { class: {
+                "chat-container": true,
+                "with-header": !!renderHeader
+            } }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, renderHeader && (h("header", { class: "header tiny-semi-bold-l" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("ch-action-menu-render", { class: "dropdown", blockAlign: "inside-start", inlineAlign: "inside-end", model: __classPrivateFieldGet(this, _GxIdeChatContainer_menuItems, "f"), expanded: this.menuIsExpanded, onExpandedChange: __classPrivateFieldGet(this, _GxIdeChatContainer_menuExpandedChangeHandler, "f") }, h("button", { class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_showMenuHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel }, h("ch-image", { class: "icon-md", src: MORE_HORIZONTAL_ICON })), this.copyConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-copy-chat", slot: "copy-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_copyConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel }, h("ch-image", { class: "icon-md", src: COPY_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationLabel)), this.deleteConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-delete-chat", slot: "delete-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_deleteConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel }, h("ch-image", { class: "icon-md", src: DELETE_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").clearConversationLabel)))))), h("section", { class: "ch-chat-container" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
     }
+    static get assetsDirs() { return ["gx-ide-assets/chat-container"]; }
+    get el() { return this; }
     static get style() { return chatContainerCss; }
 }, [4, "gx-ide-chat-container", {
         "chatTitle": [1, "chat-title"],
         "copyConversationCallback": [16],
         "deleteConversationCallback": [16],
+        "displayWelcomeScreen": [4, "display-welcome-screen"],
         "displayConversationCopiedMessage": [32],
+        "menuIsExpanded": [32],
         "showCopyConversationMessage": [64]
     }]);
+_GxIdeChatContainer_menuItems = new WeakMap(), _GxIdeChatContainer_componentLocale = new WeakMap(), _GxIdeChatContainer_showMenuHandler = new WeakMap(), _GxIdeChatContainer_menuExpandedChangeHandler = new WeakMap(), _GxIdeChatContainer_copyConversationHandler = new WeakMap(), _GxIdeChatContainer_deleteConversationHandler = new WeakMap();
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/chat-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"chat-container.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,ksIAAksI;;ACG3tI,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;CAClB,CAAC;AAEF,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,OAAO;CACnB,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAC;MAOU,kBAAkB;;;;;;;gDAmBwB,KAAK;;;;;IAM1D,MAAM,2BAA2B;QAC/B,IAAI,CAAC,gCAAgC,GAAG,IAAI,CAAC;QAC7C,UAAU,CAAC;YACT,IAAI,CAAC,gCAAgC,GAAG,KAAK,CAAC;SAC/C,EAAE,IAAI,CAAC,CAAC;KACV;IAED,MAAM;QACJ,MAAM,YAAY,GAChB,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,wBAAwB;YAC7B,IAAI,CAAC,0BAA0B,CAAC;QAElC,MAAM,kBAAkB,GACtB,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QACnE,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,SAAS,IACrB,YAAY,KACX,cAAQ,KAAK,EAAC,kDAAkD,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAEhC,kBAAkB,KACjB,eACG,IAAI,CAAC,0BAA0B,KAC9B,cACE,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,IAAI,CAAC,0BAA0B,IAExC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,GAAa,CAChD,CACV,EAEA,IAAI,CAAC,wBAAwB,KAC5B,cACE,KAAK,EAAC,oDAAoD,EAC1D,OAAO,EAAE,IAAI,CAAC,wBAAwB,IAEtC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,CAC9C,CACV,CACG,CACP,CACM,CACV,EACD,eAAS,KAAK,EAAC,yBAAyB,IACtC,eAAa,EACZ,IAAI,CAAC,gCAAgC,KACpC,WAAK,KAAK,EAAC,qCAAqC,IAC9C,WAAK,KAAK,EAAC,6CAA6C,IACtD,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,iBAAiB,GAAa,EAC7D,SAAG,KAAK,EAAC,gBAAgB,0BAAwB,CAC7C,CACF,CACP,CACO,CAEF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/_helpers/chat-container/chat-container.tsx"],"sourcesContent":[".chat-container {\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: max-content 1fr max-content;\n gap: 6px;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n\n // force elevation-* class not applying on the host\n background-color: transparent !important;\n}\n.section {\n display: contents;\n}\n\n// header\n.chat-container__header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n justify-content: space-between;\n}\n\n// ch-chat container\n.chat-container__ch-chat {\n overflow: auto;\n position: relative;\n display: grid;\n padding: 0 var(--mer-spacing--xs) var(--mer-spacing--xs)\n var(--mer-spacing--xs);\n}\n\n// footer\n\n// header & footer (common styles)\n.chat-container__header,\n.chat-container__footer {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n}\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n}\n.chat-container__conversation-copied-wrapper {\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n inset-block-start: 4px;\n opacity: 0;\n animation-delay: var(--mer-timing--fast);\n position: relative;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n// - - - - - - - - - - - - - - - - - - - - - - - - - -\n// ch-chat overrides TODO: move this styles to Mercury\n// - - - - - - - - - - - - - - - - - - - - - - - - - -\n\n.chat::part(message) {\n position: relative;\n --copy-button-opacity: 0;\n --copied-to-clipboard-opacity: 0;\n --date-opacity: 1;\n}\n\n.chat::part(message__content) {\n font-size: 13px !important;\n line-height: 1.3 !important;\n}\n\n.chat::part(message__time),\n.chat::part(message__copy-button) {\n transition: opacity var(--mer-timing--super-fast) ease-in-out;\n}\n.chat::part(message__time) {\n opacity: var(--date-opacity);\n}\n.chat::part(message):hover {\n position: relative;\n --copy-button-opacity: 1;\n --date-opacity: 0;\n}\n.chat::part(message__copy-button) {\n position: absolute;\n z-index: 1;\n inset-inline-end: 0;\n padding: var(--mer-spacing--sm); // same as part::(message)\n transition: opacity var(--mer-timing--fast) ease-in-out;\n opacity: var(--copy-button-opacity);\n\n &::after {\n content: \"\";\n inline-size: var(--mer-icon__box--md);\n block-size: var(--mer-icon__box--md);\n background: no-repeat center / var(--mer-icon__size--md) var(--icon-path);\n --icon-path: var(--icon__system_copy_primary--enabled);\n }\n &:hover::after {\n --icon-path: var(--icon__system_copy_primary--hover);\n }\n &:active::after {\n --icon-path: var(--icon__system_copy_primary--active);\n }\n}\n\n// copy button effect\n.chat::part(message__copied-feedback) {\n transition: opacity 150ms ease-in-out;\n position: absolute;\n inline-size: 100%;\n block-size: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n background: rgba(22, 22, 23, 0.8);\n backdrop-filter: saturate(180%) blur(20px);\n opacity: var(--copied-to-clipboard-opacity);\n pointer-events: none;\n}\n\n.chat::part(message__copied-feedback-visible) {\n --copied-to-clipboard-opacity: 1;\n pointer-events: visible;\n}\n\n// send button\n.chat::part(send-container) {\n gap: var(--mer-spacing--xs);\n}\n.chat::part(send-input) {\n --control__padding-block: 7px !important;\n}\n\n.chat::part(send-button) {\n border-width: var(--control__border-width);\n border-style: var(--control__border-style);\n border-color: var(--control__border-color);\n border-radius: var(--control__border-radius);\n inline-size: 32px;\n block-size: 32px;\n background: no-repeat center / var(--mer-icon__box--md) var(--icon-path);\n --icon-path: var(--icon__system_send_primary--enabled);\n}\n.chat::part(send-button):hover {\n --icon-path: var(--icon__system_send_primary--hover);\n --control__border-color: var(--mer-text__primary--hover);\n}\n.chat::part(send-button):active {\n --icon-path: var(--icon__system_send_primary--active);\n --control__border-color: var(--mer-border-color__primary--active);\n}\n\n// assistant\n\n.chat::part(message assistant) {\n background-color: var(\n --elevation-background-color,\n var(--mer-surface__elevation--01)\n ) !important;\n}\n\n.chat::part(message assistant waiting) {\n align-items: center;\n gap: var(--mer-spacing--md) !important;\n}\n\n.button-copy-chat,\n.button-delete-chat {\n --control__border-color: transparent !important;\n}\n.button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n}\n","import { Component, Host, h, Prop, Method, State } from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/icon\",\n \"utils/elevation\"\n];\n\nconst COPY_ICON = getIconPath({\n category: \"system\",\n name: \"copy\",\n colorType: \"neutral\"\n});\nconst DELETE_ICON = getIconPath({\n category: \"system\",\n name: \"delete-outlined\",\n colorType: \"error\"\n});\nconst CONVERSATION_ICON = getIconPath({\n category: \"objects\",\n name: \"conversational-flows\"\n});\n\n@Component({\n tag: \"gx-ide-chat-container\",\n styleUrl: \"chat-container.scss\",\n shadow: false\n})\nexport class GxIdeChatContainer {\n /*\n The chat title\n /\n @Prop() readonly chatTitle?: string;\n\n /\n If true a button for copying the conversation will be render on the header\n /\n @Prop() readonly copyConversationCallback: () => void;\n\n /\n If true a button for deleting the conversation will be render on the header\n /\n @Prop() readonly deleteConversationCallback: () => void;\n\n /\n Coneration Copied\n /\n @State() displayConversationCopiedMessage: boolean = false;\n\n /\n It will display a feedback message that the conversation has been copied\n /\n @Method()\n async showCopyConversationMessage() {\n this.displayConversationCopiedMessage = true;\n setTimeout(() => {\n this.displayConversationCopiedMessage = false;\n }, 2000);\n }\n\n render() {\n const renderHeader =\n this.chatTitle \|\|\n this.copyConversationCallback \|\|\n this.deleteConversationCallback;\n\n const renderButtonsGroup =\n this.copyConversationCallback \|\| this.deleteConversationCallback;\n return (\n <Host class=\"chat-container\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n {renderHeader && (\n <header class=\"chat-container__header elevation-1 body-italic-m\">\n {this.chatTitle && this.chatTitle}\n\n {renderButtonsGroup && (\n <div>\n {this.deleteConversationCallback && (\n <button\n class=\"button-secondary button-icon-only button-delete-chat\"\n onClick={this.deleteConversationCallback}\n >\n <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n </button>\n )}\n\n {this.copyConversationCallback && (\n <button\n class=\"button-secondary button-icon-only button-copy-chat\"\n onClick={this.copyConversationCallback}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n </button>\n )}\n </div>\n )}\n </header>\n )}\n <section class=\"chat-container__ch-chat\">\n <slot></slot>\n {this.displayConversationCopiedMessage && (\n <div class=\"chat-container__conversation-copied\">\n <div class=\"chat-container__conversation-copied-wrapper\">\n <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n <p class=\"body-regular-l\">conversation copied</p>\n </div>\n </div>\n )}\n </section>\n {/ <footer class=\"chat-container__footer elevation-1\">footer</footer> */}\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"chat-container.js","mappings":"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","names":[],"sources":["src/components/chat/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/chat/chat-container/chat-container.tsx"],"sourcesContent":[".chat-container {\n background-color: var(\n --elevation-background-color,\n --mer-surface__elevation--01\n );\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: 1fr;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n}\n\n.chat-container.with-header {\n grid-template-rows: max-content 1fr;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--sm);\n color: var(--mer-text__bright);\n border-block-end: var(--mer-border__width--sm) solid\n var(--color-border-surface-on-elevation-01, #333d47);\n\n .button-copy-chat,\n .button-delete-chat {\n --control__border-color: transparent !important;\n }\n\n .button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n }\n}\n\n.ch-chat-container {\n overflow: auto;\n position: relative;\n display: grid;\n}\n\n// - - - - - - - - - - - - - -\n// other\n// - - - - - - - - - - - - - -\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n position: relative;\n inset-block-start: 4px;\n opacity: 0;\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n animation-delay: var(--mer-timing--fast);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n::selection {\n color: #00ccff;\n background: #22334a;\n}\n\n// The following styles shoul be moved over to Mercury\n\n.chat::part(code-block-header__copy) {\n --copy-text-opacity: 0;\n --copy-text-translate-x: 6px;\n opacity: var(--copy-text-opacity);\n pointer-events: none;\n transform: translateX(var(--copy-text-translate-x));\n transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;\n font-size: 12px;\n}\n.chat::part(code-block-header__copy-copied) {\n --copy-button-pointer-events: none !important;\n --copy-text-opacity: 1;\n --copy-text-translate-x: 0;\n}\n.chat::part(code-block-header) {\n align-items: center;\n display: flex;\n gap: 8px;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Method,\n State\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ActionMenuModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/icon\",\n \"utils/elevation\"\n];\n\nconst COPY_ICON = getIconPath({\n category: \"system\",\n name: \"copy\",\n colorType: \"primary\"\n});\nconst DELETE_ICON = getIconPath({\n category: \"system\",\n name: \"delete-outlined\",\n colorType: \"primary\"\n});\nconst CONVERSATION_ICON = getIconPath({\n category: \"objects\",\n name: \"conversational-flows\"\n});\nconst MORE_HORIZONTAL_ICON = getIconPath({\n category: \"system\",\n name: \"more-horizontal\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-chat-container\",\n styleUrl: \"chat-container.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/chat-container\"]\n})\nexport class GxIdeChatContainer {\n #menuItems: ActionMenuModel = [\n { type: \"slot\", id: \"delete-chat-button\" },\n { type: \"slot\", id: \"copy-chat-button\" }\n ];\n\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeChatContainerElement;\n\n /\n Coneration Copied\n /\n @State() displayConversationCopiedMessage: boolean = false;\n\n /\n Displays or hides the menu\n /\n @State() menuIsExpanded: boolean = false;\n\n /\n The chat title\n /\n @Prop() readonly chatTitle?: string;\n\n /\n If true a button for copying the conversation will be render on the header\n /\n @Prop() readonly copyConversationCallback: () => void;\n\n /\n If true a button for deleting the conversation will be render on the header\n /\n @Prop() readonly deleteConversationCallback: () => void;\n\n /\n If true a the welcome screen will be rendered\n /\n @Prop() readonly displayWelcomeScreen: boolean = false;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n /\n It will display a feedback message that the conversation has been copied\n /\n @Method()\n async showCopyConversationMessage() {\n this.displayConversationCopiedMessage = true;\n setTimeout(() => {\n this.displayConversationCopiedMessage = false;\n }, 2000);\n }\n\n #showMenuHandler = () => {\n this.menuIsExpanded = true;\n };\n\n #menuExpandedChangeHandler = (event: CustomEvent<boolean>) => {\n this.menuIsExpanded = event.detail;\n };\n\n #copyConversationHandler = () => {\n if (this.copyConversationCallback) {\n this.copyConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n #deleteConversationHandler = () => {\n if (this.deleteConversationCallback) {\n this.deleteConversationCallback();\n this.menuIsExpanded = false;\n }\n };\n\n render() {\n const renderHeader =\n this.chatTitle \|\|\n this.copyConversationCallback \|\|\n this.deleteConversationCallback;\n\n const renderButtonsGroup =\n this.copyConversationCallback \|\| this.deleteConversationCallback;\n return (\n <Host\n class={{\n \"chat-container\": true,\n \"with-header\": !!renderHeader\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n {renderHeader && (\n <header class=\"header tiny-semi-bold-l\">\n {this.chatTitle && this.chatTitle}\n {renderButtonsGroup && (\n <ch-action-menu-render\n class=\"dropdown\"\n blockAlign=\"inside-start\"\n inlineAlign=\"inside-end\"\n model={this.#menuItems}\n expanded={this.menuIsExpanded}\n onExpandedChange={this.#menuExpandedChangeHandler}\n >\n <button\n class=\"button-tertiary button-icon-only\"\n onClick={this.#showMenuHandler}\n type=\"button\"\n aria-label={this.#componentLocale.showMenuAriaLabel}\n title={this.#componentLocale.showMenuAriaLabel}\n >\n <ch-image\n class=\"icon-md\"\n src={MORE_HORIZONTAL_ICON}\n ></ch-image>\n </button>\n {this.copyConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-copy-chat\"\n slot=\"copy-chat-button\"\n onClick={this.#copyConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.copyConversationAriaLabel\n }\n title={this.#componentLocale.copyConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.#componentLocale.copyConversationLabel}\n </button>\n )}\n {this.deleteConversationCallback && (\n <button\n class=\"button-tertiary button-icon-and-text button-delete-chat\"\n slot=\"delete-chat-button\"\n onClick={this.#deleteConversationHandler}\n type=\"button\"\n aria-label={\n this.#componentLocale.deleteConversationAriaLabel\n }\n title={this.#componentLocale.deleteConversationAriaLabel}\n >\n <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n {this.#componentLocale.clearConversationLabel}\n </button>\n )}\n </ch-action-menu-render>\n )}\n </header>\n )}\n <section class=\"ch-chat-container\">\n <slot></slot>\n {this.displayConversationCopiedMessage && (\n <div class=\"chat-container__conversation-copied\">\n <div class=\"chat-container__conversation-copied-wrapper\">\n <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n <p class=\"body-regular-l\">conversation copied</p>\n </div>\n </div>\n )}\n </section>\n {/ <footer class=\"footer elevation-1\">footer</footer> */}\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/chat-welcome.js ADDED Viewed

@@ -0,0 +1,146 @@
+import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { L as Locale } from './locale.js';
+const chatWelcomeCss = ":host{block-size:100%}.welcome-container{--opacity:1;--translate-y:0;opacity:var(--opacity);transform:translateY(var(--translate-y));transition:all var(--transition-duration);display:flex;block-size:100%;grid-template-rows:max-content max-content;flex-direction:column;justify-content:space-between;background-repeat:no-repeat;background-size:cover;background-size:contain}.welcome-container.hidden{--opacity:0;--translate-y:4px}.header{--opacity:0;--translate-y:3px;transition:all var(--transition-duration) var(--transition-delay) cubic-bezier(0.4, 0, 0.2, 1);transform:translateY(var(--translate-y));opacity:var(--opacity);display:flex;flex-direction:column;gap:var(--mer-spacing--md);align-items:center;padding:var(--mer-spacing--md)}.header--visible{--opacity:1;--translate-y:0}.header__circle{inline-size:55px;block-size:55px;background-size:contain;background-repeat:no-repeat;background-position:center center;margin-block-end:-6px}.header__title{display:grid;text-align:center;margin:0;text-align:center;white-space:pre-line;line-height:1.3;font-weight:600;font-size:var(--font-size-header-h3)}.header__greeting{line-height:1.4;text-align:center;font-weight:300}.suggested-prompts{--opacity:1;opacity:var(--opacity);transition:opacity var(--transition-duration);display:flex;flex-direction:column;gap:var(--mer-spacing--md);list-style:none;margin:0;padding:var(--mer-spacing--md)}.suggested-prompts.hidden{--opacity:0}.suggested-prompts__button{opacity:0;transform:translateX(-3px);animation:fadeInSuggestedPromptButton var(--mer-timing--regular) ease forwards;animation-delay:var(--delay, 0s);border:0;padding:var(--mer-spacing--sm);border-radius:30px;font-size:14px;font-style:oblique;cursor:pointer;display:flex;align-items:center;gap:var(--mer-spacing--xs);background-color:#22334a;font-weight:100}.suggested-prompts__button:hover{background-color:#1a2b42}@keyframes fadeInSuggestedPromptButton{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}";
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeChatWelcome_componentLocale, _GxIdeChatWelcome_animationEntrance, _GxIdeChatWelcome_sendPromptToChat, _GxIdeChatWelcome_animationExit;
+const HEADER_ILLUSTRATION = getAssetPath(`./gx-ide-assets/chat-welcome/images/header-illustration.svg`);
+const AI_AVATAR = getAssetPath(`./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`);
+const HEADER_TRANSITION_DELAY = 100;
+const HEADER_TRANSITION_DURATION = 500;
+const SUGGESTED_PROMPT_BUTTON_INTERVAL = 200;
+const SUGGESTED_PROMPT_BUTTONS_DELAY = 500;
+const WELCOME_EXIT_DURATION = 100;
+const AI_ICON = getIconPath({
+    category: "system",
+    name: "assistant",
+    colorType: "primary"
+});
+const ARROW_RIGHT_ICON = getIconPath({
+    category: "system",
+    name: "arrow-right",
+    colorType: "primary"
+});
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/chat",
+    "components/icon",
+    "utils/typography"
+];
+const GxIdeChatWelcome = /*@__PURE__*/ proxyCustomElement(class GxIdeChatWelcome extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeChatWelcome_componentLocale.set(this, void 0);
+        _GxIdeChatWelcome_animationEntrance.set(this, () => {
+            setTimeout(() => {
+                this.showHeader = true;
+                setTimeout(() => {
+                    this.showSuggestedPrompts = true;
+                }, SUGGESTED_PROMPT_BUTTONS_DELAY);
+            }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);
+        });
+        _GxIdeChatWelcome_sendPromptToChat.set(this, async (e) => {
+            const prompt = e.currentTarget.dataset["prommpt"];
+            await __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
+            this.suggestedPrompRequestedCallback(prompt);
+        });
+        _GxIdeChatWelcome_animationExit.set(this, async () => {
+            this.hideWelcome = true;
+            await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));
+        });
+        this.showHeader = false;
+        this.showSuggestedPrompts = false;
+        this.hideWelcome = false;
+        this.welcomeTitle = undefined;
+        this.welcomeGreeting = undefined;
+        this.suggestedPrompts = undefined;
+        this.suggestedPrompRequestedCallback = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeChatWelcome_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // Set defaults
+        if (!this.welcomeTitle) {
+            this.welcomeTitle = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeTitle;
+        }
+        if (!this.welcomeGreeting) {
+            this.welcomeGreeting = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeGreeting;
+        }
+        if (!this.suggestedPrompts) {
+            this.suggestedPrompts = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").suggestedPrompts;
+        }
+    }
+    componentDidRender() {
+        if (!this.hideWelcome) {
+            __classPrivateFieldGet(this, _GxIdeChatWelcome_animationEntrance, "f").call(this);
+        }
+    }
+    /**
+     * It will exit the wellcome screen and remove it from the dom.
+     */
+    async exitWelcome() {
+        __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
+    }
+    render() {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: { "welcome-container": true, "hidden": this.hideWelcome }, style: {
+                "backgroundImage": `url(${HEADER_ILLUSTRATION})`,
+                "--transition-duration": `${WELCOME_EXIT_DURATION}ms`
+            } }, h("header", { class: { "header": true, "header--visible": this.showHeader }, style: {
+                "--transition-delay": `${HEADER_TRANSITION_DELAY}ms`,
+                "--transition-duration": `${HEADER_TRANSITION_DURATION}ms`
+            } }, h("span", { class: "header__circle", style: { backgroundImage: `url(${AI_AVATAR})` } }), h("h2", { class: "header__title" }, this.welcomeTitle), h("p", { class: "header__greeting" }, this.welcomeGreeting)), this.suggestedPrompts && this.showSuggestedPrompts && (h("ul", { class: "suggested-prompts" }, this.suggestedPrompts.map((prompt, i) => (h("li", { class: "suggested-prompts__item" }, h("button", { class: {
+                "suggested-prompts__button": true
+            }, onClick: __classPrivateFieldGet(this, _GxIdeChatWelcome_sendPromptToChat, "f"), style: {
+                "--delay": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`
+            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-md" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md" }))))))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
+    get el() { return this; }
+    static get style() { return chatWelcomeCss; }
+}, [1, "gx-ide-chat-welcome", {
+        "welcomeTitle": [1025, "welcome-title"],
+        "welcomeGreeting": [1025, "welcome-greeting"],
+        "suggestedPrompts": [1040],
+        "suggestedPrompRequestedCallback": [16],
+        "showHeader": [32],
+        "showSuggestedPrompts": [32],
+        "hideWelcome": [32],
+        "exitWelcome": [64]
+    }]);
+_GxIdeChatWelcome_componentLocale = new WeakMap(), _GxIdeChatWelcome_animationEntrance = new WeakMap(), _GxIdeChatWelcome_sendPromptToChat = new WeakMap(), _GxIdeChatWelcome_animationExit = new WeakMap();
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-chat-welcome"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-chat-welcome":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdeChatWelcome);
+            }
+            break;
+    } });
+}
+export { GxIdeChatWelcome as G, defineCustomElement as d };
+//# sourceMappingURL=chat-welcome.js.map