@genexus/genexus-ide-ui 1.0.22 → 1.0.24

package/dist/genexus-ide-ui/p-26b2037d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["aiAssistantCss","GxIdeTemplate","this","renderedFirstTime","setFocus","scrollToBottomFlag","evaluateAiInProgress","_a","messages","length","type","aIInProgress","evaluateAiStatus","assistantStatus","renderMessage","message","i","text","h","messageType","hidden","filterValue","key","toString","translations","_componentLocale","aiMessage","textAreaInputHandler","userHasTyped","showFilter","filterEl","value","promptEnterHandler","async","prompt","promptTrimmed","detail","replace","textAreaEl","setTimeout","lastUserMessageHeight","offsetHeight","addMessage","userMessageCallback","then","filterMessagesHandler","e","toLowerCase","filteredMessages","forEach","includes","clearMessages","focus","clearCallback","attachShortcuts","focusShortcuts","ctrlFocusIndex","findIndex","toLocaleLowerCase","shiftFocusIndex","cmdKeyIndex","keyFocus","find","document","addEventListener","ctrlKey","shiftKey","metaKey","promptArrowUpHandler","lastUserMessage","textareaShadowPart","style","height","toggleFilterHandler","promptFocusHandler","promptHasFocus","promptBlurHandler","scrollToBottom","messagesWrapperEl","scrollTo","scrollHeight","scrollTop","clientHeight","watchAIInProgressHandler","aiInProgress","watchMessagesHandler","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","shadowRoot","querySelector","componentDidRender","componentDidRenderFirstTime","emit","componentName","handleFocus","event","preventDefault","clear","updateInProgressMessage","pop","push","render","Host","class","filter","icon","onClick","disabled","onInput","ref","map","ai","promptValue","maxHeight","promptMaxHeight","placeholder","processingQueryPlaceholder","promptPlaceholder","onEnter","onArrowUpPressed","onBlur","onFocus","_b","prompt__shortcuts","shortcut"],"sources":["src/components/ai-assistant/ai-assistant.scss?tag=gx-ide-ai-assistant&encapsulation=shadow","src/components/ai-assistant/ai-assistant.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n  display: block;\n  height: 100%;\n  flex-basis: 286px;\n  flex-shrink: 0;\n  height: 100%;\n  overflow-y: auto;\n}\n.gx-ide-main-wrapper {\n  padding: 0 10px 52px 10px;\n  background-color: var(--mer-color__neutral-gray--1000);\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  gap: var(--mer-spacing--sm);\n}\n\n/*--- Header ---*/\n.header {\n  padding-block-start: var(--mer-spacing--sm);\n  display: flex;\n  flex-direction: column;\n\n  &__actions-wrapper {\n    display: flex;\n    gap: var(--ai-assistant-header-actions-gap);\n    margin-inline-start: auto;\n  }\n  &__first-row {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    align-items: center;\n    justify-content: space-between;\n  }\n  &__filter {\n    margin-block-start: var(--mer-spacing--xs);\n  }\n  &__second-row {\n    transition: 100ms grid-template-rows;\n    display: grid;\n    grid-template-rows: 0fr;\n\n    &--visible {\n      grid-template-rows: 1fr;\n    }\n  }\n  .filter-inner-wrapper {\n    overflow: hidden;\n  }\n}\n\n/*--- Messages ---*/\n.messages-wrapper {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  @include gxg-scrollbar();\n}\n.messages {\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}\n\n/*--- Prompt ---*/\n.prompt {\n  position: relative;\n  margin-top: auto;\n\n  &__textarea {\n    &::part(textarea-wrapper) {\n      border: none;\n      background-color: var(--mer-color__neutral-gray--1100);\n    }\n    &::part(textarea) {\n      border: none;\n    }\n  }\n  &__shortcuts {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--2xs);\n    padding-inline-end: var(--mer-spacing--xs);\n    right: 0;\n    top: 0;\n    height: 100%;\n  }\n  &__shortcut {\n    color: var(--mer-color__neutral-gray--400);\n    font-size: var(--mer-font__size--2xs);\n    padding: var(--mer-spacing--3xs) var(--mer-spacing--xs);\n    background-color: var(--mer-color__neutral-gray--700);\n    border-radius: var(--mer-border__radius--xs);\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  State,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\n\n@Component({\n  tag: \"gx-ide-ai-assistant\",\n  styleUrl: \"ai-assistant.scss\",\n  shadow: { delegatesFocus: true },\n  assetsDirs: [\"gx-ide-assets/ai-assistant\"]\n})\nexport class GxIdeTemplate {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  /* lastUserMessageHeight is used to set the appropriate height on the textarea, if user presses arrowUp (recover last message)*/\n  private lastUserMessageHeight: number;\n  private setFocus = true;\n  private scrollToBottomFlag = true;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeAiAssistantElement;\n  private textAreaEl!: HTMLGxgFormTextareaElement;\n  private textareaShadowPart: HTMLTextAreaElement;\n  private filterEl: HTMLGxgFormTextElement;\n  private messagesWrapperEl!: HTMLDivElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * Flag used to hide the shortcuts\n   */\n  @State() userHasTyped = false;\n\n  /**\n   * This is true if the last message is of type 'assistant-in-progress'\n   */\n  @State() aIInProgress = false;\n  @Watch(\"aIInProgress\")\n  watchAIInProgressHandler(aiInProgress: boolean) {\n    if (!aiInProgress) {\n      this.setFocus = true;\n    }\n  }\n\n  /**\n   * This displays or hides the messages filter\n   */\n  @State() showFilter = false;\n\n  /**\n   * True if the prompt textbox has focus\n   */\n  @State() promptHasFocus = false;\n\n  /**\n   * The filter value\n   */\n  @State() filterValue: string;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * List of messages displayed by the component\n   */\n  @Prop({ mutable: true }) messages: Message[] = [];\n  @Watch(\"messages\")\n  watchMessagesHandler() {\n    this.evaluateAiInProgress();\n    this.evaluateAiStatus();\n  }\n\n  /**\n   * The prompt textarea max-height\n   */\n  @Prop() readonly promptMaxHeight = \"128px\";\n\n  /**\n   * A temporary property to illustrate the assistant status\n   */\n  @Prop({ mutable: true }) assistantStatus: AiStatus = \"indeterminate\";\n\n  /**\n   * List of keys that make up the shortcut to focus on the component's text input\n   */\n  @Prop() readonly focusShortcuts: string[];\n\n  /**\n   * List of keys that make up the shortcut to focus on the component's text input\n   */\n  @Prop() readonly userMessageCallback: UserMessageCallback;\n\n  /**\n   * Callback that must be invoked when the conversation is cleared, using the header button.\n   */\n  @Prop() readonly clearCallback: () => Promise<void>;\n\n  /**\n   * the prompt value\n   */\n  @Prop() readonly promptValue: string;\n\n  /**\n   * If tue, it will display a filter.\n   */\n  @Prop() readonly filter = true;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateAiInProgress();\n    this.evaluateAiStatus();\n    this.attachShortcuts();\n  }\n\n  componentDidLoad() {\n    this.textareaShadowPart =\n      this.textAreaEl.shadowRoot.querySelector(\"textarea\");\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n    if (this.setFocus) {\n      setTimeout(() => {\n        /* Doesn't seems to work without the setTimeout */\n        this.textAreaEl.focus();\n        this.setFocus = false;\n      }, 0);\n    }\n    setTimeout(() => {\n      this.scrollToBottom();\n    }, 200);\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"focus\", { capture: true })\n  handleFocus(event: FocusEvent) {\n    if (this.textAreaEl) {\n      event.preventDefault();\n      this.textAreaEl.focus();\n    }\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * Clear the list of messages\n   */\n  @Method()\n  async clear() {\n    this.messages = [];\n  }\n\n  /**\n   * Add a message. This method will be used by the host to add messages from the assistant\n   */\n  @Method()\n  async addMessage(message: Message) {\n    if (message.text?.length > 0) {\n      const messages = [...this.messages];\n      const updateInProgressMessage =\n        messages?.length > 0 &&\n        messages[messages.length - 1].type === \"assistant-in-progress\";\n      if (updateInProgressMessage) {\n        messages.pop();\n      }\n      messages.push(message);\n      this.messages = messages;\n    }\n  }\n\n  // 9.LOCAL METHODS //\n\n  private evaluateAiInProgress = () => {\n    if (\n      this.messages?.length > 0 &&\n      this.messages[this.messages.length - 1].type === \"assistant-in-progress\"\n    ) {\n      this.aIInProgress = true;\n    } else {\n      this.aIInProgress = false;\n    }\n  };\n\n  private evaluateAiStatus = () => {\n    if (this.messages?.length === 0) {\n      this.assistantStatus = \"indeterminate\";\n      return;\n    }\n    if (\n      this.messages[this.messages.length - 1].type ===\n        \"assistant-in-progress\" ||\n      this.messages[this.messages.length - 1].type === \"user\"\n    ) {\n      this.assistantStatus = \"indeterminate\";\n    } else if (\n      this.messages[this.messages.length - 1].type === \"assistant-error\"\n    ) {\n      this.assistantStatus = \"error\";\n    } else {\n      this.assistantStatus = \"success\";\n    }\n  };\n\n  private renderMessage = (\n    message: Message,\n    i: number\n  ): HTMLLIElement | void => {\n    if (message.text.length > 0) {\n      return (\n        <gx-ide-ai-message\n          message={message.text}\n          messageType={message.type}\n          hidden={message.hidden}\n          filterValue={this.filterValue}\n          key={`${i.toString()}-${message.type}`}\n          translations={this._componentLocale.aiMessage}\n        ></gx-ide-ai-message>\n      );\n    }\n  };\n\n  private textAreaInputHandler = () => {\n    this.userHasTyped = true;\n    this.showFilter = false;\n    this.filterEl.value = \"\";\n    this.filterValue = \"\";\n    this.scrollToBottomFlag = true;\n  };\n\n  private promptEnterHandler = async (prompt: CustomEvent<string>) => {\n    /* First remove double spaces */\n    const promptTrimmed = prompt.detail.replace(/\\s+/g, \" \");\n    /* Update textarea value to get the proper height */\n    this.textAreaEl.value = promptTrimmed;\n    setTimeout(() => {\n      /* Then save the actual height (setTimeOut required) */\n      this.lastUserMessageHeight = this.textAreaEl.offsetHeight;\n    }, 0);\n    /* The clear the textarea */\n    this.textAreaEl.value = \"\";\n    /* Insert the user message */\n    this.addMessage({\n      type: \"user\",\n      text: promptTrimmed\n    });\n    /* Call the callback */\n    if (this.userMessageCallback && !this.aIInProgress) {\n      this.aIInProgress = true;\n      this.userMessageCallback(promptTrimmed).then(() => {\n        this.aIInProgress = false;\n      });\n    }\n  };\n\n  private filterMessagesHandler = (e: CustomEvent<string>) => {\n    this.scrollToBottomFlag = false;\n    this.filterValue = e.detail.toLowerCase();\n    const filteredMessages = [...this.messages];\n    filteredMessages.forEach(message => {\n      if (message.text.toLowerCase().includes(this.filterValue)) {\n        message.hidden = false;\n      } else {\n        message.hidden = true;\n      }\n    });\n    this.messages = filteredMessages;\n  };\n\n  private clearMessages = () => {\n    this.messages = [];\n    this.textAreaEl.focus();\n    if (this.clearCallback) {\n      this.clearCallback();\n    }\n  };\n\n  private attachShortcuts = () => {\n    if (this.focusShortcuts?.length > 0) {\n      const ctrlFocusIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"ctrl\"\n      );\n      const shiftFocusIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"shift\"\n      );\n      const cmdKeyIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"cmd\"\n      );\n      const keyFocus = this.focusShortcuts\n        .find(key => {\n          return (\n            key.toLocaleLowerCase() !== \"ctrl\" &&\n            key.toLocaleLowerCase() !== \"shift\" &&\n            key.toLocaleLowerCase() !== \"cmd\"\n          );\n        })\n        .toLowerCase();\n      document.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        } else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        } else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        }\n      });\n    }\n  };\n\n  private promptArrowUpHandler = () => {\n    this.userHasTyped = true;\n    const lastUserMessage = this.messages?.find(message => {\n      return message.type === \"user\";\n    });\n    if (lastUserMessage) {\n      if (this.lastUserMessageHeight) {\n        this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;\n      }\n      this.textAreaEl.value = lastUserMessage.text;\n    }\n  };\n\n  private toggleFilterHandler = () => {\n    this.showFilter = !this.showFilter;\n    if (this.showFilter) {\n      this.filterEl.focus();\n    }\n  };\n\n  private promptFocusHandler = () => {\n    this.promptHasFocus = true;\n  };\n\n  private promptBlurHandler = () => {\n    this.promptHasFocus = false;\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollToBottomFlag) {\n      this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);\n      this.messagesWrapperEl.scrollTop =\n        this.messagesWrapperEl.scrollHeight -\n        this.messagesWrapperEl.clientHeight;\n    }\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`assistant--${this.assistantStatus}`]: true,\n          \"assistant--in-progress\": this.aIInProgress\n        }}\n      >\n        <div class=\"gx-ide-main-wrapper\">\n          <header class=\"header\">\n            <div class=\"header__first-row\">\n              <gxg-title type=\"title-02\">\n                {this._componentLocale.componentName}\n              </gxg-title>\n              <div class=\"header__actions-wrapper\">\n                {this.filter ? (\n                  <gxg-button\n                    class=\"header__filter-button\"\n                    type=\"tertiary\"\n                    icon=\"menus/find\"\n                    onClick={this.toggleFilterHandler}\n                    disabled={this.messages.length === 0}\n                  ></gxg-button>\n                ) : null}\n\n                <gxg-button\n                  class=\"header__clear-button\"\n                  type=\"tertiary\"\n                  icon=\"bpm/delete\"\n                  onClick={this.clearMessages}\n                  disabled={this.messages.length === 0}\n                ></gxg-button>\n              </div>\n            </div>\n            {this.filter ? (\n              <div\n                class={{\n                  \"header__second-row\": true,\n                  \"header__second-row--visible\": this.showFilter\n                }}\n              >\n                <div class=\"filter-inner-wrapper\">\n                  <gxg-form-text\n                    class=\"header__filter\"\n                    onInput={this.filterMessagesHandler as any}\n                    ref={el => (this.filterEl = el as HTMLGxgFormTextElement)}\n                  ></gxg-form-text>\n                </div>\n              </div>\n            ) : null}\n          </header>\n\n          <div\n            class={{\n              \"messages-wrapper\": true\n            }}\n            ref={el => (this.messagesWrapperEl = el as HTMLDivElement)}\n          >\n            {this.messages?.length ? (\n              <ol class={{ messages: true }}>\n                {this.messages.map((message, i) => {\n                  return this.renderMessage(message, i);\n                })}\n              </ol>\n            ) : null}\n          </div>\n\n          <div\n            class={{\n              prompt: true\n            }}\n          >\n            <gxg-form-textarea\n              ai\n              class=\"prompt__textarea\"\n              value={this.promptValue}\n              maxHeight={this.promptMaxHeight}\n              placeholder={\n                this.aIInProgress\n                  ? this._componentLocale.processingQueryPlaceholder\n                  : this._componentLocale.promptPlaceholder\n              }\n              onInput={this.textAreaInputHandler}\n              onEnter={this.promptEnterHandler}\n              onArrowUpPressed={this.promptArrowUpHandler}\n              onBlur={this.promptBlurHandler}\n              onFocus={this.promptFocusHandler}\n              disabled={this.aIInProgress}\n              ref={el => (this.textAreaEl = el as HTMLGxgFormTextareaElement)}\n            ></gxg-form-textarea>\n            {!this.userHasTyped &&\n            !this.aIInProgress &&\n            !this.promptHasFocus &&\n            this.focusShortcuts?.length > 0 ? (\n              <div\n                class={{\n                  prompt__shortcuts: true\n                }}\n              >\n                {this.focusShortcuts.map((shortcut, i) => {\n                  /* Up to three keys allowed*/\n                  return i <= 2 ? (\n                    <span class=\"prompt__shortcut\">{shortcut}</span>\n                  ) : null;\n                })}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type AiStatus = \"indeterminate\" | \"success\" | \"error\";\n\nexport type Message = {\n  type: MessageType;\n  text: string;\n  hidden?: boolean;\n  filterValue?: string;\n};\n\nexport type MessageType =\n  | \"user\"\n  | \"assistant-chat\"\n  | \"assistant-action\"\n  | \"assistant-in-progress\"\n  | \"assistant-error\";\n\nexport type UserMessageCallback = (text: string) => Promise<void>;\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-5dfb7c66.entry.js

@@ -1,106 +0,0 @@
-import { r as e, h as s, g as r } from "./p-aaed592c.js";
-
-import { h as a } from "./p-014916d7.js";
-
-const i = ':host{font-family:var(--mer-font-family--primary)}.message{color:var(--mer-color__neutral-gray--200);display:grid;grid-template-rows:0fr;transition:grid-template-rows 100ms;transition:grid-template-rows 100ms, -ms-grid-rows 100ms;}.message__outer-wrapper{overflow:hidden}.message__inner-wrapper{padding:var(--mer-spacing--2xs) var(--mer-spacing--xs);border-radius:var(--mer-border__radius--xs);border:var(--mer-border__width--sm) solid transparent;background-color:var(--mer-color__neutral-gray--1200);margin-block-start:var(--mer-spacing--xs)}.message__caption{font-size:var(--mer-font__size--2xs);line-height:var(--mer-line-height--comfortable);position:relative}.message--visible{grid-template-rows:1fr}.message--copying{pointer-events:none}.message--copying span:not(.copied),.message--copying .message__caption{color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.message--user .message__inner-wrapper{background-color:var(--mer-color__tint-blue--8)}.message--assistant-action .message__inner-wrapper{font-style:italic}.message--assistant-in-progress{color:var(--mer-color__neutral-gray--500)}.message--assistant-in-progress .message__inner-wrapper{font-style:italic;display:grid;grid-template-columns:1fr auto;gap:var(--mer-spacing--xs)}.message--assistant-in-progress .message__inner-wrapper .message__caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.message--assistant-in-progress .message__inner-wrapper .animation-wrapper{flex:none}.message--assistant-error .message__inner-wrapper{background-color:var(--mer-color__tint-red--5);border-color:var(--mer-color__tint-red--60)}.message--copyable{cursor:pointer}.message:last-child{margin-block-end:0}:host(:first-child) .message__inner-wrapper{margin-block-end:0}.animation-wrapper{width:45px;display:flex;align-items:center;justify-content:center}.dot-pulse{position:relative;left:-9999px;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:"";display:inline-block;position:absolute;top:0;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}.copied{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--mer-color__neutral-gray--300);display:flex;gap:var(--mer-spacing--2xs)}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}';
-
-const t = class {
-  constructor(s) {
-    e(this, s);
-    /*
-      INDEX:
-      1.OWN PROPERTIES
-      2.REFERENCE TO ELEMENTS
-      3.STATE() VARIABLES
-      4.PUBLIC PROPERTY API | WATCH'S
-      5.EVENTS (EMIT)
-      6.COMPONENT LIFECYCLE METHODS
-      7.LISTENERS
-      8.PUBLIC METHODS API
-      9.LOCAL METHODS
-      10.RENDER() FUNCTION
-      */
-    // 1.OWN PROPERTIES //
-    /* The message allows to be copied*/    this.copyable = false;
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-        this.evaluateMessageIsCopyable = () => {
-      this.copyable = this.messageType !== "assistant-in-progress" && this.messageType !== "assistant-action";
-    };
-    this.copyMessage = () => {
-      navigator.clipboard.writeText(this.message);
-      this.showCopiedMessage = true;
-      setTimeout((() => {
-        this.showCopiedMessage = false;
-      }), 1500);
-    };
-    this.visible = false;
-    this.showCopiedMessage = false;
-    this.message = undefined;
-    this.messageType = undefined;
-    this.filterValue = undefined;
-    this.hidden = undefined;
-    this.translations = undefined;
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE METHODS //
-  async componentWillLoad() {
-    this.evaluateMessageIsCopyable();
-  }
-  componentDidRender() {
-    setTimeout((() => {
-      /* Without the timeout it appears instantly (no apparent transition)*/
-      this.visible = true;
-      const e = this.el.parentElement;
-      e.scrollTo(0, 0);
-    }), 0);
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return s("li", {
-      class: {
-        message: true,
-        "message--visible": this.visible && !this.hidden,
-        [`message--${[ this.messageType ]}`]: true,
-        "message--assistant": this.messageType !== "user",
-        "message--copyable": this.copyable,
-        "message--copying": this.showCopiedMessage
-      },
-      onClick: this.copyable && this.copyMessage
-    }, s("div", {
-      class: "message__outer-wrapper"
-    }, s("div", {
-      class: {
-        "message__inner-wrapper": true
-      }
-    }, s("div", {
-      class: {
-        message__caption: true,
-        "message__caption--in-progress": this.messageType === "assistant-in-progress"
-      }
-    }, this.showCopiedMessage ? s("span", {
-      class: {
-        copied: true
-      }
-    }, s("gxg-icon", {
-      type: "bpm/tasks",
-      color: "mercury"
-    }), this.translations["copied"]) : null, a(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? s("div", {
-      class: "animation-wrapper"
-    }, s("div", {
-      class: "dot-pulse"
-    })) : null)));
-  }
-  static get assetsDirs() {
-    return [ "gx-ide-assets/ai-message" ];
-  }
-  get el() {
-    return r(this);
-  }
-};
-
-t.style = i;
-
-export { t as gx_ide_ai_message };
-//# sourceMappingURL=p-5dfb7c66.entry.js.map

package/dist/genexus-ide-ui/p-5dfb7c66.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["aiMessageCss","GxIdeAiMessage","this","copyable","evaluateMessageIsCopyable","messageType","copyMessage","navigator","clipboard","writeText","message","showCopiedMessage","setTimeout","componentWillLoad","componentDidRender","visible","messagesList","el","parentElement","scrollTo","render","h","class","hidden","onClick","message__caption","copied","type","color","translations","hiChar","filterValue"],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message&encapsulation=shadow","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--200);\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--2xs) var(--mer-spacing--xs);\n    border-radius: var(--mer-border__radius--xs);\n    border: var(--mer-border__width--sm) solid transparent;\n    background-color: var(--mer-color__neutral-gray--1200);\n    margin-block-start: var(--mer-spacing--xs);\n  }\n  &__caption {\n    font-size: var(--mer-font__size--2xs);\n    line-height: var(--mer-line-height--comfortable);\n    position: relative;\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: var(--mer-color__tint-blue--8);\n    }\n  }\n  &--assistant-action {\n    .message__inner-wrapper {\n      font-style: italic;\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        @include ellipsis;\n        flex: 1;\n      }\n      .animation-wrapper {\n        flex: none;\n      }\n    }\n  }\n  &--assistant-error {\n    .message__inner-wrapper {\n      background-color: var(--mer-color__tint-red--5);\n      border-color: var(--mer-color__tint-red--60);\n    }\n  }\n  &--copyable {\n    cursor: pointer;\n    &:hover {\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  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--2xs);\n}\n\n@include hiChar;\n","/* STENCIL IMPORTS */\nimport { Component, h, Prop, Element, State } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\n@Component({\n  tag: \"gx-ide-ai-message\",\n  styleUrl: \"ai-message.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /* The message allows to be copied*/\n  private copyable = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeAiMessageElement;\n\n  // 3.STATE() VARIABLES //\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  // 4.PUBLIC PROPERTY API | WATCH'S //\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  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\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  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateMessageIsCopyable = () => {\n    this.copyable =\n      this.messageType !== \"assistant-in-progress\" &&\n      this.messageType !== \"assistant-action\";\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  // 10.RENDER() FUNCTION //\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        onClick={this.copyable && this.copyMessage}\n      >\n        <div class=\"message__outer-wrapper\">\n          <div\n            class={{\n              \"message__inner-wrapper\": true\n            }}\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\n                  class={{\n                    copied: true\n                  }}\n                >\n                  <gxg-icon type=\"bpm/tasks\" color=\"mercury\"></gxg-icon>\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"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCaRC,IAAc;;;;;;;;;;;;;;;;;4CAkBjBC,KAAAC,WAAW;;;;QAoEXD,KAAAE,4BAA4B;MAClCF,KAAKC,WACHD,KAAKG,gBAAgB,2BACrBH,KAAKG,gBAAgB;AAAkB;IAGnCH,KAAAI,cAAc;MACpBC,UAAUC,UAAUC,UAAUP,KAAKQ;MACnCR,KAAKS,oBAAoB;MACzBC,YAAW;QACTV,KAAKS,oBAAoB;AAAK,UAC7B;AAAK;mBApES;6BAKU;;;;;;;;;EAiC7B,uBAAME;IACJX,KAAKE;;EAGP,kBAAAU;IACEF,YAAW;;MAETV,KAAKa,UAAU;MACf,MAAMC,IAAed,KAAKe,GAAGC;MAC7BF,EAAaG,SAAS,GAAG;AAAE,QAC1B;;;EAyBL,MAAAC;IACE,OACEC,EAAA;MACEC,OAAO;QACLZ,SAAW;QACX,oBAAoBR,KAAKa,YAAYb,KAAKqB;QAC1C,CAAC,YAAY,EAACrB,KAAKG,kBAAiB;QACpC,sBAAsBH,KAAKG,gBAAgB;QAC3C,qBAAqBH,KAAKC;QAC1B,oBAAoBD,KAAKS;;MAE3Ba,SAAStB,KAAKC,YAAYD,KAAKI;OAE/Be,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG5BD,EAAA;MACEC,OAAO;QACLG,kBAAoB;QACpB,iCACEvB,KAAKG,gBAAgB;;OAGxBH,KAAKS,oBACJU,EAAA;MACEC,OAAO;QACLI,QAAQ;;OAGVL,EAAA;MAAUM,MAAK;MAAYC,OAAM;QAChC1B,KAAK2B,aAAa,aAEnB,MACHC,EAAO5B,KAAKQ,SAASR,KAAK6B,eAE5B7B,KAAKG,gBAAgB,0BACpBgB,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}

package/dist/genexus-ide-ui/p-7a2d3f1c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["welcomePageCss","ACTIVE_SLIDE_SELECTOR","ARROW_LEFT_KEY","ARROW_RIGHT_KEY","ESCAPE_KEY","SLIDE_FADE_DURATION","SLIDE_WORD_SELECTOR","SLIDE_WORD_SELECTOR_TIMEOUT","SLIDE_WORD_SELECTOR_VISIBLE","ICON_NEXT","getAssetPath","CLOSE_ICON","getIconPath","category","name","colorType","CSS_BUNDLES","GxIdeWelcomePage","_GxIdeWelcomePage_componentLocale","set","this","_GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed","Map","_GxIdeWelcomePage_slidesElements","_GxIdeWelcomePage_slidesElementsRef","_GxIdeWelcomePage_slideTimeOutId","_GxIdeWelcomePage_closeSlider","sliderVisible","setTimeout","el","remove","closeCallback","document","removeEventListener","__classPrivateFieldGet","_GxIdeWelcomePage_keyboardEventHandler","_GxIdeWelcomePage_initiateSlidesTransition","_GxIdeWelcomePage_slideTimeOut","call","addEventListener","_GxIdeWelcomePage_displayWords","wordsNodeList","forEach","word","index","classList","add","_GxIdeWelcomePage_dotClickedHandler","event","userHasChangedSlide","itemClicked","currentTarget","parseInt","getAttribute","_GxIdeWelcomePage_updateActiveSlide","goToPrevSlide","key","slideTransitioning","lastSlideReached","activeSlideIndex","goToNextSlide","closeSlider","_GxIdeWelcomePage_nextSlideHandler","_GxIdeWelcomePage_prevSlideHandler","newIndex","clearTimeout","autoChangeSlide","transitionType","mergedDescription","slides","description","join","words","split","length","timeBeforeNextSlide","_GxIdeWelcomePage_secondsToRead","__classPrivateFieldSet","wordsCount","wordsPerMinute","minutes","milliseconds","_GxIdeWelcomePage_renderSlides","map","slide","isLastSlide","h","class","ref","role","copyright","illustrationAriaLabel","src","illustration","url","alt","title","_a","paragraph","descriptionAsChunks","_GxIdeWelcomePage_splitWords","_b","listItems","item","onClick","startButtonCaption","newSlideIndex","activeSlide","nextSlideReference","displayDescriptionAsChunks","descriptionAsChunksDisplayedAlready","get","slideTimeOut","querySelectorAll","componentWillLoad","Locale","getComponentStrings","componentDidLoad","render","Host","model","main","style","slide__footer","_","slide__dot"],"sources":["src/components/welcome-page/welcome-page.scss?tag=gx-ide-welcome-page&encapsulation=shadow","src/components/welcome-page/welcome-page.tsx"],"sourcesContent":[":host {\n  --slide-header-block-padding: 34px;\n  --slide-footer-block: var(--mer-spacing--md) var(--mer-spacing--4xl);\n  --slide-footer-block-last-slide: var(--mer-spacing--md) 42px;\n  --slide-footer-navigation-hide-transition: var(--mer-timing--fast);\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: auto;\n  padding: var(--mer-spacing--lg);\n  box-sizing: border-box;\n  padding: var(--mer-spacing--xl);\n}\n\n.main {\n  display: grid;\n  place-self: center;\n  inline-size: 100%;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: 17px;\n  overflow: hidden;\n  border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);\n  inset-block-start: 0;\n  transition: opacity var(--slide-fade-duration);\n  opacity: 0;\n  pointer-events: none;\n\n  &--border-glow {\n    animation: borderColorCycle 2s infinite;\n  }\n  &--visible {\n    pointer-events: visible;\n    opacity: 1;\n  }\n}\n\n// - - - - - - - - - - - - -\n// Slide\n// - - - - - - - - - - - - -\n\n.slide {\n  display: grid;\n  block-size: 100%;\n  grid-template-areas:\n    \"header header\"\n    \"slide-wrapper slide-wrapper\"\n    \"footer footer\";\n  grid-template-rows: max-content 1fr max-content;\n\n  //  - - - - - Header\n\n  &__header {\n    padding-inline: 18px;\n    padding-block: 24px 27px;\n    display: flex;\n    flex-direction: row-reverse;\n    grid-area: header;\n  }\n\n  //  - - - - - Container\n\n  &__container {\n    display: contents;\n  }\n\n  &__wrapper {\n    display: grid;\n    column-gap: var(--mer-spacing--3xl);\n    grid-template-areas:\n      \"header header\"\n      \"illustration copy\"\n      \"footer footer\";\n    grid-template-rows: max-content 1fr max-content;\n    // grid-template-columns: 411px 1fr;\n    grid-template-columns: 1fr 520px;\n    grid-area: slide-wrapper;\n    transition: var(--slide-fade-duration) opacity;\n    transition: opacity 200ms;\n    padding-inline: 48px;\n    opacity: 1;\n    z-index: 1;\n  }\n  &__wrapper:not(.active) {\n    opacity: 0;\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  &__illustration {\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    grid-area: illustration;\n    place-items: center;\n    inline-size: 100%;\n\n    &-img {\n      object-fit: contain;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n  }\n\n  &__copy {\n    grid-area: copy;\n    place-self: center;\n    justify-self: flex-start;\n  }\n\n  &__copy-container {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    max-inline-size: 524px;\n  }\n\n  &__copy-header {\n    display: grid;\n    gap: var(--mer-spacing--md);\n  }\n\n  &__copy-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__copy-description {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n  }\n\n  &__list {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    &-item {\n      position: relative;\n      padding-inline-start: 24px;\n      &::before {\n        $size: var(--mer-spacing--sm);\n        content: \"\";\n        display: inline-block;\n        inline-size: $size;\n        block-size: $size;\n        border: var(--mer-border__width--sm) solid\n          var(--mer-color__tinted-primary--50);\n        border-radius: 50%;\n        background-color: var(--mer-color__tinted-primary--10);\n        margin-inline-end: var(--mer-spacing--sm);\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-start: 6px;\n      }\n    }\n  }\n\n  // words (if 'showTextInChunks' is true)\n  &__word {\n    transition: var(--mer-timing--regular) opacity;\n    opacity: 0;\n\n    &--visible {\n      opacity: 1;\n    }\n  }\n\n  //  - - - - - Footer\n\n  &__footer {\n    $hideDotsDuration: calc(var(--mer-timing--fast) + 200ms);\n    grid-area: footer;\n    display: grid;\n    padding-block: var(--slide-footer-block);\n    opacity: 1;\n\n    &-last-slide {\n      opacity: 0;\n      transition: $hideDotsDuration opacity;\n      pointer-events: none;\n      animation: footerPaddingBlockLastSlide var(--mer-timing--regular) ease-out\n        forwards $hideDotsDuration;\n    }\n  }\n\n  &__footer-wrapper {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: max-content;\n    gap: var(--mer-spacing--md);\n    align-items: center;\n    justify-content: center;\n    transition: var(--mer-timing--regular) opacity;\n    opacity: 1;\n\n    &-hidden {\n      opacity: 0;\n    }\n  }\n  &__dots {\n    display: grid;\n    gap: var(--mer-spacing--2xs);\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    grid-auto-flow: column;\n    grid-auto-columns: max-content;\n    justify-content: center;\n\n    &-inactive {\n      pointer-events: none;\n    }\n  }\n  &__dot {\n    display: grid;\n    padding: var(--mer-spacing--xs);\n    cursor: pointer;\n\n    &::before {\n      content: \"\";\n      place-self: center;\n      inline-size: var(--mer-spacing--sm);\n      block-size: var(--mer-spacing--sm);\n      border-radius: calc(var(--mer-spacing--sm) / 2);\n      background-color: var(--mer-color__neutral-gray--500);\n    }\n    &:hover::before {\n      background-color: var(--mer-icon__on-primary--hover);\n    }\n\n    &.active {\n      cursor: auto;\n      &::before {\n        background-color: var(--mer-accent__primary);\n        cursor: auto;\n      }\n    }\n\n    &-inactive {\n      pointer-events: none;\n    }\n  }\n}\n\n.close-icon {\n  transition: all var(--mer-timing--fast);\n  &:hover {\n    filter: brightness(1.5);\n  }\n}\n\n.start-button {\n  justify-self: start;\n  margin-block-start: 25px;\n}\n\n// - - - - - - - - - - - - - -\n// Animations\n// - - - - - - - - - - - - - -\n\n@keyframes ellipseFadeInOut {\n  0% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 0.7;\n  }\n}\n@keyframes ellipseRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes polygonRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes borderColorCycle {\n  0% {\n    border-color: var(--mer-surface__elevation--01);\n  }\n  50% {\n    border-color: var(--mer-color__primary--400);\n  }\n  100% {\n    border-color: var(--mer-surface__elevation--01);\n  }\n}\n\n@keyframes footerPaddingBlockLastSlide {\n  0% {\n    padding-block: var(--slide-footer-block);\n  }\n  100% {\n    padding-block: var(--slide-footer-block-last-slide);\n  }\n}\n\n.fade-out {\n  animation: fadeOut 0.5s forwards 0.3s;\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\n\nconst ACTIVE_SLIDE_SELECTOR = \"active\";\nconst ARROW_LEFT_KEY = \"ArrowLeft\";\nconst ARROW_RIGHT_KEY = \"ArrowRight\";\nconst ESCAPE_KEY = \"Escape\";\nconst SLIDE_FADE_DURATION = 300;\nconst SLIDE_WORD_SELECTOR = \".slide__word\";\nconst SLIDE_WORD_SELECTOR_TIMEOUT = 70;\nconst SLIDE_WORD_SELECTOR_VISIBLE = \"slide__word--visible\";\n\n// icons\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CLOSE_ICON = getIconPath({\n  category: \"system\",\n  name: \"close\",\n  colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/icon\",\n  \"components/button\"\n];\n\n@Component({\n  tag: \"gx-ide-welcome-page\",\n  styleUrl: \"welcome-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/welcome-page\"]\n})\nexport class GxIdeWelcomePage {\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  #slidesDescriptionAsChunksAlreadyDisplayed: Map<number, boolean> = new Map();\n  #slidesElements: HTMLElement[] = [];\n  #slidesElementsRef: HTMLElement[] = [];\n  // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide\n  // that is set to be displayed as chunks, has already been displayed. Used to not display\n  // as chunks after the first time.\n  #slideTimeOutId: NodeJS.Timeout;\n\n  @Element() el: HTMLGxIdeWelcomePageElement;\n\n  /**\n   * The current active slide index from 'slides' Prop. It does not considers the very first slide \"Copyright\".\n   */\n  @State() activeSlideIndex: number = 0;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n   */\n  @State() displaySlider: boolean = false;\n\n  /**\n   * True if the very first slide is visible (The copyright slide)\n   */\n  @State() copyrightsVisible: boolean = true;\n\n  /**\n   * True if the user has reached the last slide. Used to hide/disable the navigation.\n   */\n  @State() lastSlideReached: boolean = false;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slider with a smooth transition.\n   */\n  @State() sliderVisible: boolean = false;\n\n  /**\n   * True if a slide is transitioning, false otherwise. Used to disable the navigation arrows while transitioning.\n   */\n  @State() slideTransitioning: boolean = false;\n\n  /**\n   * True if the user has changed slides by clicking on the navigation dots, or by using the keyboard arrows. This is used to know evaluate the slide transition setTimeOut. If the user has navigated, automatic slide transition should be turned off.\n   */\n  @State() userHasChangedSlide: boolean = false;\n\n  /**\n   * The transition type between the slides. \"static\" requires the user to navigate by clicking the navigation dots. \"auto\" will transition automatically after a calculated amount of time.\n   */\n  @Prop() readonly transitionType: TransitionType = \"auto\";\n\n  /**\n   * The estimated amount of words per minute that the user requires to read a slide. This value is used to return the time each slide is freezed before transitioning to the next one. Only evaluated when transitionType is set to \"auto\".\n   */\n  @Prop() readonly wordsPerMinute: number = 250;\n\n  /**\n   * Callback invoked when the user closes the slider by pressing the close button.\n   */\n  @Prop() readonly closeCallback!: CloseCallback;\n\n  /**\n   * An array of slides, with the information that each slide requires. This slides appear after the first slide (Copyrights) that is defined inside the component.\n   */\n  @Prop() readonly slides: SlideInfo[] = [];\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#renderSlides();\n  }\n\n  componentDidLoad() {\n    this.#slidesElementsRef[this.activeSlideIndex].classList.add(\n      ACTIVE_SLIDE_SELECTOR\n    );\n    this.sliderVisible = true;\n    this.#initiateSlidesTransition();\n  }\n\n  #closeSlider = () => {\n    this.sliderVisible = false;\n    setTimeout(() => {\n      // wait until the slide disappears, then remove.\n      this.el.remove();\n      this.closeCallback();\n      document.removeEventListener(\"keydown\", this.#keyboardEventHandler);\n    }, SLIDE_FADE_DURATION);\n  };\n\n  #initiateSlidesTransition = () => {\n    this.#slideTimeOut();\n    // listen to keydown events to navigate the slides with the arrows\n    document.addEventListener(\"keydown\", this.#keyboardEventHandler);\n  };\n\n  #displayWords = (wordsNodeList: NodeListOf<HTMLElement>) => {\n    wordsNodeList.forEach((word, index) => {\n      setTimeout(() => {\n        word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);\n      }, index * SLIDE_WORD_SELECTOR_TIMEOUT);\n    });\n  };\n\n  #dotClickedHandler = (event: MouseEvent) => {\n    this.userHasChangedSlide = true;\n    const itemClicked = event.currentTarget as HTMLElement;\n    const index = parseInt(itemClicked.getAttribute(\"data-index\"), 10);\n    this.#updateActiveSlide(index);\n  };\n\n  #keyboardEventHandler = (event: KeyboardEvent) => {\n    this.userHasChangedSlide = true;\n    const goToPrevSlide =\n      event.key === ARROW_LEFT_KEY &&\n      !this.slideTransitioning &&\n      !this.lastSlideReached &&\n      this.activeSlideIndex !== 0;\n\n    const goToNextSlide =\n      event.key === ARROW_RIGHT_KEY &&\n      !this.slideTransitioning &&\n      !this.lastSlideReached;\n\n    const closeSlider =\n      event.key === ESCAPE_KEY ||\n      (event.key === ARROW_RIGHT_KEY &&\n        !this.slideTransitioning &&\n        this.lastSlideReached);\n\n    if (goToNextSlide) {\n      this.#nextSlideHandler();\n    } else if (goToPrevSlide) {\n      this.#prevSlideHandler();\n    } else if (closeSlider) {\n      this.#closeSlider();\n    }\n  };\n\n  #nextSlideHandler = () => {\n    const newIndex = this.activeSlideIndex + 1;\n    this.#updateActiveSlide(newIndex);\n  };\n\n  #prevSlideHandler = () => {\n    const newIndex = this.activeSlideIndex - 1;\n    this.#updateActiveSlide(newIndex);\n  };\n\n  #slideTimeOut = () => {\n    // Clear any existing timeout\n    if (this.#slideTimeOutId) {\n      clearTimeout(this.#slideTimeOutId);\n    }\n\n    const autoChangeSlide =\n      this.transitionType === \"auto\" &&\n      !this.lastSlideReached &&\n      !this.userHasChangedSlide;\n\n    if (!autoChangeSlide) {\n      return;\n    }\n\n    const mergedDescription =\n      this.slides[this.activeSlideIndex].description.join(\"\");\n    const words = mergedDescription.split(\" \").length;\n    const timeBeforeNextSlide: number = this.#secondsToRead(words);\n\n    // Set a fresh timeout\n    if (timeBeforeNextSlide) {\n      this.#slideTimeOutId = setTimeout(() => {\n        this.#nextSlideHandler();\n      }, timeBeforeNextSlide);\n    }\n  };\n\n  #secondsToRead = (\n    wordsCount: number,\n    wordsPerMinute = this.wordsPerMinute\n  ): number => {\n    const minutes = wordsCount / wordsPerMinute;\n    const milliseconds = minutes * 60000; // Convert minutes to milliseconds\n    return milliseconds;\n  };\n\n  #renderSlides = () => {\n    this.#slidesElements = this.slides.map((slide, index) => {\n      const isLastSlide = index === this.slides.length - 1;\n      return (\n        <section\n          class=\"slide__wrapper\"\n          ref={(el: HTMLElement) =>\n            (this.#slidesElementsRef[index] = el as HTMLElement)\n          }\n        >\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n          >\n            <img\n              class=\"slide__illustration-img\"\n              src={slide.illustration.url}\n              alt={slide.illustration.alt}\n            />\n          </div>\n          <section class=\"slide__copy\">\n            <div class=\"slide__copy-container\">\n              <header class=\"slide__copy-header\">\n                <img src={ICON_NEXT} alt=\"GeneXus Next isologotype\" />\n                <h2 class=\"slide__copy-title\">{slide.title}</h2>\n              </header>\n              <div class=\"slide__copy-description\">\n                {slide.description?.map(paragraph => {\n                  return (\n                    <p>\n                      {slide.descriptionAsChunks\n                        ? this.#splitWords(paragraph)\n                        : paragraph}\n                    </p>\n                  );\n                })}\n                {slide.listItems?.length && (\n                  <ul class=\"slide__list\">\n                    {slide.listItems.map(item => {\n                      return <li class=\"slide__list-item\">{item}</li>;\n                    })}\n                  </ul>\n                )}\n              </div>\n              {isLastSlide && (\n                <button\n                  class=\"button-primary start-button\"\n                  onClick={this.#closeSlider}\n                >\n                  {this.#componentLocale.startButtonCaption}\n                </button>\n              )}\n            </div>\n          </section>\n        </section>\n      );\n    });\n  };\n\n  #splitWords = (paragraph: string): HTMLSpanElement[] => {\n    return paragraph.split(\" \").map(word => {\n      // keep the space after {word} !\n      return <span class=\"slide__word\">{word} </span>;\n    });\n  };\n\n  #updateActiveSlide = (newSlideIndex: number) => {\n    if (this.lastSlideReached) {\n      return;\n    }\n    this.slideTransitioning = true;\n\n    // unset current active slide\n    const activeSlide = this.#slidesElementsRef[this.activeSlideIndex];\n    activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);\n\n    const nextSlideReference = this.#slidesElementsRef[newSlideIndex];\n    const displayDescriptionAsChunks =\n      this.slides[newSlideIndex].descriptionAsChunks;\n    const descriptionAsChunksDisplayedAlready =\n      this.#slidesDescriptionAsChunksAlreadyDisplayed.get(newSlideIndex);\n    let wordsCount;\n    let wordsNodeList: NodeListOf<HTMLElement>;\n    let slideTimeOut = 0;\n    if (displayDescriptionAsChunks) {\n      wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);\n      wordsCount = wordsNodeList.length;\n      slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;\n    }\n\n    this.lastSlideReached = newSlideIndex === this.slides.length - 1;\n\n    // set new slide as active after fade out\n    setTimeout(() => {\n      nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);\n\n      if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {\n        this.#slidesDescriptionAsChunksAlreadyDisplayed.set(\n          newSlideIndex,\n          true\n        );\n        this.#displayWords(wordsNodeList);\n        setTimeout(() => {\n          this.slideTransitioning = false;\n        }, slideTimeOut);\n      } else {\n        this.slideTransitioning = false;\n      }\n    }, SLIDE_FADE_DURATION);\n\n    // update active slide index\n    this.activeSlideIndex = newSlideIndex;\n    this.#slideTimeOut(); // this has to be after this.#updateActiveSlide.\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          class={{\n            \"main\": true,\n            \"main--visible\": this.sliderVisible,\n            \"main--border-glow\": this.lastSlideReached\n          }}\n          style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n        >\n          <section class=\"slide\">\n            <header class=\"slide__header\">\n              <button\n                class=\"button-tertiary button-icon-only close-icon\"\n                aria-label=\"close presentation\"\n                onClick={this.#closeSlider}\n              >\n                <ch-image class=\"icon-md\" src={CLOSE_ICON}></ch-image>\n              </button>\n            </header>\n            <div class=\"slide__container\">{this.#slidesElements}</div>\n            <footer\n              // slide common footer\n              class={{\n                \"slide__footer\": true,\n                \"slide__footer-last-slide\": this.lastSlideReached\n              }}\n            >\n              <div\n                class={{\n                  \"slide__footer-wrapper\": true,\n                  \"slide__footer-wrapper-hidden\": this.lastSlideReached\n                }}\n              >\n                <ul class=\"slide__dots\" aria-label=\"Slide indicators\">\n                  {this.slides.map((_, index) => {\n                    return (\n                      <li\n                        class={{\n                          \"slide__dot\": true,\n                          \"slide__dot-inactive\": this.slideTransitioning,\n                          [ACTIVE_SLIDE_SELECTOR]:\n                            index === this.activeSlideIndex\n                        }}\n                        data-index={index}\n                        onClick={\n                          !this.slideTransitioning && this.#dotClickedHandler\n                        }\n                      ></li>\n                    );\n                  })}\n                </ul>\n              </div>\n            </footer>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type SlideInfo = {\n  illustration: {\n    url: string;\n    alt: string;\n  };\n  title: string;\n  description?: string[];\n  descriptionAsChunks?: boolean;\n  listItems?: string[];\n};\n\nexport type CloseCallback = () => Promise<void>;\nexport type TransitionType = \"static\" | \"auto\";\n"],"mappings":"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"}