@genexus/genexus-ide-ui 1.1.4 → 1.1.5

package/dist/genexus-ide-ui/p-9b238bf7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fileUploaderCss","PLUS_ICON","getIconPath","category","name","colorType","CSS_BUNDLES","FileUploader","_FileUploader__componentLocale","set","this","_FileUploader_fileInputEl","_FileUploader_dragCounter","_FileUploader_generateId","Math","random","toString","substr","_FileUploader_handleDragEnter","e","preventDefault","stopPropagation","__classPrivateFieldSet","_a","__classPrivateFieldGet","isDragging","_FileUploader_handleDragLeave","_FileUploader_handleDragOver","_FileUploader_handleDrop","files","dataTransfer","_FileUploader_handleFiles","call","_FileUploader_handleFileSelect","click","_FileUploader_handleFileInput","target","validFiles","_FileUploader_instances","_FileUploader_getValidFiles","forEach","async","file","id","fileState","pending","progress","multiple","fileStates","clear","Map","uploadFunction","uploadPromise","state","get","updatedState","stateWithPromise","result","console","log","success","remoteId","fileUploadedCallback","originalName","error","errors","upload","Error","message","value","_FileUploader_handleNameChange","event","detail","updatedFile","trim","isEditing","fileRenamedCallback","fileId","newName","_FileUploader_handleFileCancel","cancel","cancelUploadFunction","uploadCancelledCallback","delete","fileToDelete","shouldDelete","onBeforeDelete","fileDeletedCallback","fileDeletionErrorCallback","fileName","_FileUploader_handleConfirm","hasPendingUploads","Array","from","values","some","uploadedFiles","filter","isValid","map","length","dialogConfirmedCallback","_FileUploader_handleCancel","entries","dialogCanceledCallback","componentWillLoad","Locale","getComponentStrings","el","render","h","Host","class","model","type","accept","types","startsWith","join","onChange","ref","tabIndex","style","display","size","onDragEnter","onDragLeave","onDragOver","onDrop","onClick","src","header","uploadButtonMultiple","uploadButtonSingle","label","orText","dragAndDrop","acceptedFiles","replace","allFilesAccepted","fileList","attachedFiles","filesCount","key","editable","canEditName","onFileNameChange","onFileDelete","onFileCancel","buttons","disabled","confirm","includes","baseType","split","toLowerCase","endsWith","invalidFileType","validation","_FileUploader_isValidFile","push","fileValidationErrorCallback"],"sources":["src/components/file-uploader/file-uploader.scss?tag=gx-ide-file-uploader&encapsulation=shadow","src/components/file-uploader/file-uploader.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n:host {\n  display: block;\n  inline-size: 100%;\n  block-size: 100%;\n  padding-inline-end: 0 !important;\n}\n\n.file-uploader-dialog {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n  background-color: var(--mer-surface__background);\n  position: relative;\n\n  .dialog-content {\n    flex: 1;\n    min-block-size: 0;\n    overflow: auto;\n  }\n\n  .dialog-footer {\n    padding-inline-end: var(--spacing-body-inline-end);\n  }\n}\n\n.file-uploader {\n  display: flex;\n  flex-direction: column;\n  inline-size: 100%;\n  block-size: 100%;\n\n  &__list {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    block-size: 100%;\n\n    &-header {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background-color: var(--mer-surface__elevation--01);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding-inline-end: var(--spacing-body-inline-end);\n    }\n\n    &-content {\n      flex: 1;\n      overflow-y: auto;\n      display: flex;\n      flex-direction: column;\n      gap: var(--mer-spacing--xs);\n      padding-inline-end: var(--spacing-body-inline-end);\n      padding-block-end: var(--mer-spacing--md);\n    }\n  }\n\n  &__list-title-container {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--2xs);\n    white-space: nowrap;\n  }\n\n  &__drop-zone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: calc(100% - var(--spacing-body-inline-end));\n    block-size: calc(100% - var(--mer-spacing--sm));\n    min-block-size: 200px;\n    margin-block-end: var(--mer-spacing--sm);\n    background: var(--mer-surface__elevation--01);\n    border: var(--mer-border__width--md) dashed var(--mer-border-color__dim);\n    border-radius: var(--mer-border__radius--md);\n    transition: border-color 0.3s ease, background-color 0.3s ease,\n      opacity 0.3s ease;\n\n    &--dragging {\n      border-color: var(--mer-accent__primary);\n      background: var(--mer-accent__primary--hover);\n      opacity: 0.7;\n    }\n\n    .text-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--mer-spacing--2xs);\n      margin-block-start: var(--mer-spacing--xs);\n    }\n  }\n}\n\n.hidden-input {\n  display: none;\n}\n\n.label-primary-row {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--xs);\n}\n","/* eslint-disable @stencil-community/own-methods-must-be-private */\n/* eslint-disable @stencil-community/own-props-must-be-private */\n/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { UploadedFile, FileUploadState, UploadResult } from \"./types\";\n\nconst PLUS_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"add\",\n  colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/list-box\",\n  \"components/edit\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/elevation\",\n  \"chameleon/scrollbar\"\n];\n\ntype FileValidationResult = {\n  isValid: boolean;\n  error?: string;\n};\n\n@Component({\n  tag: \"gx-ide-file-uploader\",\n  styleUrl: \"file-uploader.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/file-uploader\"]\n})\nexport class FileUploader {\n  #_componentLocale: any;\n  #fileInputEl!: HTMLInputElement;\n\n  @Element() el!: HTMLGxIdeFileUploaderElement;\n\n  /** Allowed file types/extensions (e.g. ['.jpg', '.png', 'image/*', 'application/pdf']) */\n  @Prop() readonly types?: string[] = [];\n\n  /** Whether multiple files can be selected */\n  @Prop() readonly multiple: boolean = false;\n\n  /** Whether file names can be edited */\n  @Prop() readonly canEditName: boolean = false;\n\n  /** Label to display in the uploader dialog */\n  @Prop() readonly label?: string;\n\n  /** Function to handle file upload */\n  @Prop() readonly uploadFunction!: (\n    file: File,\n    progressCallback: (progress: number) => void\n  ) => Promise<UploadResult>;\n\n  /** Function to cancel file upload */\n  @Prop() readonly cancelUploadFunction?: (fileId: string) => Promise<void>;\n\n  /** Callback when a file is uploaded successfully */\n  @Prop() readonly fileUploadedCallback?: (file: UploadedFile) => Promise<void>;\n\n  /** Callback when the dialog is canceled */\n  @Prop() readonly dialogCanceledCallback?: () => Promise<void>;\n\n  /** Callback when the dialog is confirmed with files */\n  @Prop() readonly dialogConfirmedCallback?: (\n    files: UploadedFile[]\n  ) => Promise<void>;\n\n  /** Callback when upload is cancelled */\n  @Prop() readonly uploadCancelledCallback?: (fileId: string) => Promise<void>;\n\n  /** Callback when file is renamed */\n  @Prop() readonly fileRenamedCallback?: (data: {\n    fileId: string;\n    newName: string;\n  }) => Promise<void>;\n\n  /** Callback when a file validation error occurs */\n  @Prop() readonly fileValidationErrorCallback?: (data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>;\n\n  /** Callback when a file deletion error occurs */\n  @Prop() readonly fileDeletionErrorCallback?: (data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>;\n\n  /** Callback when a file is deleted */\n  @Prop() readonly fileDeletedCallback?: (file: UploadedFile) => Promise<void>;\n\n  /** Callback before deleting a file to get confirmation */\n  @Prop() readonly onBeforeDelete?: (file: UploadedFile) => Promise<boolean>;\n\n  @State() private fileStates: Map<string, FileUploadState> = new Map();\n  @State() private isDragging: boolean = false;\n  #dragCounter = 0;\n\n  /** Initializes component with locale strings */\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  /** Generates a unique ID for file identification */\n  #generateId = (): string => {\n    return Math.random().toString(36).substr(2, 9);\n  };\n\n  /** Validates if a file matches the allowed types */\n  #isValidFile(file: File): FileValidationResult {\n    // If no types specified, accept any file\n    if (!this.types || this.types.length === 0) {\n      return { isValid: true };\n    }\n\n    for (const type of this.types) {\n      // Handle wildcards like 'image/*'\n      if (type.includes(\"/*\")) {\n        const baseType = type.split(\"/\")[0];\n        if (file.type.startsWith(baseType)) {\n          return { isValid: true };\n        }\n      }\n      // Handle extensions like '.jpg'\n      else if (type.startsWith(\".\")) {\n        if (file.name.toLowerCase().endsWith(type.toLowerCase())) {\n          return { isValid: true };\n        }\n      }\n      // Handle specific MIME types\n      else if (file.type === type || file.type === `application/${type}`) {\n        return { isValid: true };\n      }\n    }\n\n    return {\n      isValid: false,\n      error:\n        this.#_componentLocale?.errors?.invalidFileType || \"Invalid file type\"\n    };\n  }\n\n  /** Filters valid files from a FileList */\n  #getValidFiles(files: FileList): File[] {\n    const validFiles: File[] = [];\n\n    Array.from(files).forEach(file => {\n      const validation = this.#isValidFile(file);\n      if (validation.isValid) {\n        validFiles.push(file);\n      } else {\n        this.fileValidationErrorCallback?.({\n          fileName: file.name,\n          error: validation.error\n        });\n      }\n    });\n\n    return validFiles;\n  }\n\n  /** Handles drag enter event */\n  #handleDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.#dragCounter++;\n    this.isDragging = true;\n  };\n\n  /** Handles drag leave event */\n  #handleDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.#dragCounter--;\n    if (this.#dragCounter === 0) {\n      this.isDragging = false;\n    }\n  };\n\n  /** Handles drag over event */\n  #handleDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  /** Handles drop event */\n  #handleDrop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = false;\n    this.#dragCounter = 0;\n\n    const files = e.dataTransfer?.files;\n    if (files) {\n      this.#handleFiles(files);\n    }\n  };\n\n  /** Triggers file input click */\n  #handleFileSelect = () => {\n    this.#fileInputEl?.click();\n  };\n\n  /** Handles file input change event */\n  #handleFileInput = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    if (files) {\n      this.#handleFiles(files);\n    }\n  };\n\n  /** Processes files and starts upload */\n  #handleFiles = (files: FileList) => {\n    const validFiles: File[] = this.#getValidFiles(files);\n\n    validFiles.forEach(async file => {\n      const id = this.#generateId();\n      const fileState: FileUploadState = {\n        id,\n        name: file.name,\n        file,\n        pending: true,\n        progress: 0\n      };\n\n      if (!this.multiple) {\n        this.fileStates.clear();\n      }\n\n      this.fileStates = new Map(this.fileStates.set(id, fileState));\n\n      if (this.uploadFunction) {\n        try {\n          const uploadPromise = this.uploadFunction(file, progress => {\n            const state = this.fileStates.get(id);\n            if (state) {\n              const updatedState = {\n                ...state,\n                progress: progress,\n                pending: progress < 100\n              };\n              this.fileStates = new Map(this.fileStates.set(id, updatedState));\n            }\n          });\n\n          // Store the upload promise/object for potential cancellation\n          const stateWithPromise = {\n            ...this.fileStates.get(id),\n            uploadPromise\n          };\n          this.fileStates = new Map(this.fileStates.set(id, stateWithPromise));\n\n          const result = await uploadPromise;\n          console.log(\"Upload result:\", { id, result });\n\n          const state = this.fileStates.get(id);\n          if (state) {\n            if (result.success && result.remoteId) {\n              const updatedState = {\n                ...state,\n                remoteId: result.remoteId,\n                pending: false,\n                progress: 100\n              };\n              this.fileStates = new Map(this.fileStates.set(id, updatedState));\n              console.log(\"File uploaded successfully:\", updatedState);\n              await this.fileUploadedCallback?.({\n                name: state.name,\n                originalName: state.file.name,\n                remoteId: result.remoteId\n              });\n            } else {\n              const updatedState = {\n                ...state,\n                error: result.errors?.upload || \"Upload failed\",\n                pending: false\n              };\n              this.fileStates = new Map(this.fileStates.set(id, updatedState));\n              console.log(\"File upload failed:\", updatedState);\n            }\n          }\n        } catch (error) {\n          const state = this.fileStates.get(id);\n          if (state) {\n            const updatedState = {\n              ...state,\n              error:\n                error instanceof Error\n                  ? error.message\n                  : \"Unknown error occurred\",\n              pending: false\n            };\n            this.fileStates = new Map(this.fileStates.set(id, updatedState));\n            console.log(\"File upload error:\", updatedState);\n          }\n        }\n      }\n    });\n\n    if (this.#fileInputEl) {\n      this.#fileInputEl.value = \"\";\n    }\n  };\n\n  /** Handles file name change */\n  #handleNameChange = async (\n    event: CustomEvent<{ id: string; name: string }>\n  ) => {\n    const { id, name } = event.detail;\n    const file = this.fileStates.get(id);\n\n    if (file) {\n      const updatedFile = {\n        ...file,\n        name: name.trim(),\n        isEditing: false\n      };\n\n      this.fileStates = new Map(this.fileStates.set(id, updatedFile));\n      await this.fileRenamedCallback?.({ fileId: id, newName: name.trim() });\n    }\n  };\n\n  /** Handles individual file cancellation or deletion */\n  #handleFileCancel = async (event: CustomEvent<string>) => {\n    const id = event.detail;\n    const state = this.fileStates.get(id);\n    if (state) {\n      try {\n        if (state.pending) {\n          // Cancel upload in progress\n          if (\n            state.uploadPromise &&\n            typeof state.uploadPromise.cancel === \"function\"\n          ) {\n            state.uploadPromise.cancel();\n          } else if (this.cancelUploadFunction) {\n            await this.cancelUploadFunction(id);\n          }\n\n          await this.uploadCancelledCallback?.(id);\n\n          this.fileStates.delete(id);\n          this.fileStates = new Map(this.fileStates);\n        } else {\n          const fileToDelete: UploadedFile = {\n            name: state.name,\n            originalName: state.file.name,\n            remoteId: state.remoteId\n          };\n\n          const shouldDelete = await this.onBeforeDelete?.(fileToDelete);\n\n          if (shouldDelete) {\n            await this.fileDeletedCallback?.(fileToDelete);\n            this.fileStates.delete(id);\n            this.fileStates = new Map(this.fileStates);\n          }\n        }\n      } catch (error) {\n        await this.fileDeletionErrorCallback?.({\n          fileName: state.name,\n          error:\n            error instanceof Error ? error.message : \"Unknown error occurred\"\n        });\n      }\n    }\n  };\n\n  /** Handles dialog confirmation */\n  #handleConfirm = async () => {\n    // Verificar si hay subidas en progreso\n    const hasPendingUploads = Array.from(this.fileStates.values()).some(\n      file => file.pending\n    );\n\n    if (hasPendingUploads) {\n      return; // No permitir confirmar si hay subidas en progreso\n    }\n\n    // Obtener todos los archivos que están completamente subidos\n    const uploadedFiles: UploadedFile[] = Array.from(this.fileStates.values())\n      .filter(file => {\n        const isValid = !file.pending && file.remoteId && !file.error;\n        console.log(\"File validation:\", {\n          id: file.id,\n          name: file.name,\n          pending: file.pending,\n          remoteId: file.remoteId,\n          error: file.error,\n          isValid\n        });\n        return isValid;\n      })\n      .map(file => ({\n        name: file.name,\n        originalName: file.file.name,\n        remoteId: file.remoteId as string\n      }));\n\n    console.log(\"Files to be confirmed:\", uploadedFiles);\n\n    if (uploadedFiles.length > 0) {\n      await this.dialogConfirmedCallback?.(uploadedFiles);\n    }\n\n    // Clear file states\n    this.fileStates.clear();\n    this.fileStates = new Map();\n\n    // Reset file input\n    if (this.#fileInputEl) {\n      this.#fileInputEl.value = \"\";\n    }\n  };\n\n  /** Handles dialog cancellation */\n  #handleCancel = async () => {\n    try {\n      // Cancelamos todas las subidas en progreso\n      for (const [id, state] of this.fileStates.entries()) {\n        if (state.pending && this.cancelUploadFunction) {\n          try {\n            await this.cancelUploadFunction(id);\n            await this.uploadCancelledCallback?.(id);\n          } catch (error) {\n            // Error handling for upload cancellation\n          }\n        }\n      }\n\n      // Limpiamos todos los estados\n      this.fileStates.clear();\n      this.fileStates = new Map();\n\n      if (this.#fileInputEl) {\n        this.#fileInputEl.value = \"\";\n      }\n\n      await this.dialogCanceledCallback?.();\n    } catch (error) {\n      this.fileStates.clear();\n      this.fileStates = new Map();\n      await this.dialogCanceledCallback?.();\n    }\n  };\n\n  /** Clears the current file selection */\n  @Method()\n  async clear() {\n    for (const [id, state] of this.fileStates.entries()) {\n      if (state.pending && this.cancelUploadFunction) {\n        try {\n          await this.cancelUploadFunction(id);\n          await this.uploadCancelledCallback?.(id);\n        } catch (error) {\n          // Error handling for upload cancellation\n        }\n      }\n    }\n    this.fileStates.clear();\n  }\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <input\n          type=\"file\"\n          class=\"hidden-input\"\n          multiple={this.multiple}\n          accept={this.types\n            ?.map(type => (type.startsWith(\".\") ? type : `.${type}`))\n            .join(\",\")}\n          onChange={this.#handleFileInput}\n          ref={el => (this.#fileInputEl = el as HTMLInputElement)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          style={{ display: \"none\" }}\n        />\n        <div class=\"file-uploader-dialog\">\n          <div class=\"dialog-content\">\n            {this.isDragging || this.fileStates.size === 0 ? (\n              <div\n                class={{\n                  \"file-uploader__drop-zone\": true,\n                  \"file-uploader__drop-zone--dragging\": this.isDragging\n                }}\n                onDragEnter={this.#handleDragEnter}\n                onDragLeave={this.#handleDragLeave}\n                onDragOver={this.#handleDragOver}\n                onDrop={this.#handleDrop}\n              >\n                <button\n                  class=\"button-tertiary button-icon-and-text\"\n                  type=\"button\"\n                  onClick={this.#handleFileSelect}\n                >\n                  <ch-image class=\"icon-md\" src={PLUS_ICON}></ch-image>\n                  <label class=\"label\">\n                    {this.multiple\n                      ? this.#_componentLocale?.header.uploadButtonMultiple\n                      : this.#_componentLocale?.header.uploadButtonSingle}\n                  </label>\n                </button>\n                <div class=\"text-container\">\n                  <div class=\"label-primary-row\">\n                    <label class=\"label\">\n                      {this.label || this.#_componentLocale?.header.orText}\n                    </label>\n                    <label class=\"label\">\n                      {this.#_componentLocale?.header.dragAndDrop}\n                    </label>\n                  </div>\n                  <span class=\"caption\">\n                    {this.types && this.types.length > 0\n                      ? this.#_componentLocale?.header.acceptedFiles.replace(\n                          \"{0}\",\n                          this.types.join(\", \")\n                        )\n                      : this.#_componentLocale?.header.allFilesAccepted}\n                  </span>\n                </div>\n              </div>\n            ) : (\n              <div class=\"file-uploader__list\">\n                <div class=\"file-uploader__list-header spacing-body-block-end\">\n                  <div class=\"file-uploader__list-title-container\">\n                    <label class=\"label\">\n                      {this.label ||\n                        this.#_componentLocale?.fileList.attachedFiles}\n                    </label>\n                    <span class=\"caption\">\n                      {this.#_componentLocale?.fileList.filesCount.replace(\n                        \"{0}\",\n                        this.fileStates.size.toString()\n                      )}\n                    </span>\n                  </div>\n                  {this.multiple && (\n                    <button\n                      class=\"button-tertiary button-icon-and-text\"\n                      type=\"button\"\n                      onClick={this.#handleFileSelect}\n                    >\n                      <ch-image class=\"icon-md\" src={PLUS_ICON}></ch-image>\n                      <label class=\"label\">\n                        {this.multiple\n                          ? this.#_componentLocale?.header.uploadButtonMultiple\n                          : this.#_componentLocale?.header.uploadButtonSingle}\n                      </label>\n                    </button>\n                  )}\n                </div>\n                <div class=\"file-uploader__list-content scrollable\">\n                  {Array.from(this.fileStates.values()).map(file => (\n                    <gx-ide-file-item\n                      key={file.id}\n                      file={file}\n                      editable={this.canEditName}\n                      onFileNameChange={this.#handleNameChange}\n                      onFileDelete={this.#handleFileCancel}\n                      onFileCancel={this.#handleFileCancel}\n                    />\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n          <div class=\"dialog-footer control-footer control-footer-with-border\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                type=\"button\"\n                onClick={this.#handleCancel}\n              >\n                {this.#_componentLocale?.buttons.cancel}\n              </button>\n              <button\n                class=\"button-primary\"\n                type=\"button\"\n                onClick={this.#handleConfirm}\n                disabled={\n                  this.fileStates.size === 0 ||\n                  Array.from(this.fileStates.values()).some(\n                    file => file.pending\n                  )\n                }\n              >\n                {this.#_componentLocale?.buttons.confirm}\n              </button>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAkB;;;;;;;;;;;;;;;;;ACiBxB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMC,IAA8B,EAClC,qBACA,qBACA,mBACA,uBACA,mBACA,oBACA,iBACA,cACA,gBACA,mBACA;;MAcWC,IAAY;;;;IACvBC,EAAAC,IAAAC,WAAA;IACAC,EAAAF,IAAAC,WAAA;IAiEAE,EAAAH,IAAAC,MAAe;4DAQfG,EAAAJ,IAAAC,OAAc,MACLI,KAAKC,SAASC,SAAS,IAAIC,OAAO,GAAG;uCAyD9CC,EAAAT,IAAAC,OAAoBS;;MAClBA,EAAEC;MACFD,EAAEE;MACFC,EAAAZ,MAAAE,IAAAW,IAAAC,EAAAd,MAAAE,GAAA,MAAAW,KAAmBA,IAAA;MACnBb,KAAKe,aAAa;AAAI;uCAIxBC,EAAAjB,IAAAC,OAAoBS;;MAClBA,EAAEC;MACFD,EAAEE;MACFC,EAAAZ,MAAAE,IAAAW,IAAAC,EAAAd,MAAAE,GAAA,MAAAW,KAAmBA,IAAA;MACnB,IAAIC,EAAAd,MAAIE,GAAA,SAAkB,GAAG;QAC3BF,KAAKe,aAAa;;;sCAKtBE,EAAAlB,IAAAC,OAAmBS;MACjBA,EAAEC;MACFD,EAAEE;AAAiB;iCAIrBO,EAAAnB,IAAAC,OAAeS;MACbA,EAAEC;MACFD,EAAEE;MACFX,KAAKe,aAAa;MAClBH,EAAAZ,MAAIE,GAAgB,GAAC;MAErB,MAAMiB,IAAQV,EAAEW,cAAcD;MAC9B,IAAIA,GAAO;QACTL,EAAAd,MAAIqB,GAAA,KAAaC,KAAjBtB,MAAkBmB;;;wCAKtBI,EAAAxB,IAAAC,OAAoB;MAClBc,EAAAd,MAAIC,GAAA,MAAeuB;AAAO;8CAI5BC,EAAA1B,IAAAC,OAAoBS;MAClB,MAAMU,IAASV,EAAEiB,OAA4BP;MAC7C,IAAIA,GAAO;QACTL,EAAAd,MAAIqB,GAAA,KAAaC,KAAjBtB,MAAkBmB;;;gDAKtBE,EAAAtB,IAAAC,OAAgBmB;MACd,MAAMQ,IAAqBb,EAAAd,MAAI4B,GAAA,KAAAC,GAAeP,KAAnBtB,MAAoBmB;MAE/CQ,EAAWG,SAAQC,MAAMC;QACvB,MAAMC,IAAKnB,EAAAd,MAAIG,GAAA,KAAYmB,KAAhBtB;QACX,MAAMkC,IAA6B;UACjCD;UACAvC,MAAMsC,EAAKtC;UACXsC;UACAG,SAAS;UACTC,UAAU;;QAGZ,KAAKpC,KAAKqC,UAAU;UAClBrC,KAAKsC,WAAWC;;QAGlBvC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIC;QAElD,IAAIlC,KAAKyC,gBAAgB;UACvB;YACE,MAAMC,IAAgB1C,KAAKyC,eAAeT,IAAMI;cAC9C,MAAMO,IAAQ3C,KAAKsC,WAAWM,IAAIX;cAClC,IAAIU,GAAO;gBACT,MAAME,IAAe;qBAChBF;kBACHP,UAAUA;kBACVD,SAASC,IAAW;;gBAEtBpC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIY;;;;wBAKtD,MAAMC,IAAmB;iBACpB9C,KAAKsC,WAAWM,IAAIX;cACvBS;;YAEF1C,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIa;YAElD,MAAMC,UAAeL;YACrBM,QAAQC,IAAI,kBAAkB;cAAEhB;cAAIc;;YAEpC,MAAMJ,IAAQ3C,KAAKsC,WAAWM,IAAIX;YAClC,IAAIU,GAAO;cACT,IAAII,EAAOG,WAAWH,EAAOI,UAAU;gBACrC,MAAMN,IAAe;qBAChBF;kBACHQ,UAAUJ,EAAOI;kBACjBhB,SAAS;kBACTC,UAAU;;gBAEZpC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIY;gBAClDG,QAAQC,IAAI,+BAA+BJ;uBACrC7C,KAAKoD,uBAAuB;kBAChC1D,MAAMiD,EAAMjD;kBACZ2D,cAAcV,EAAMX,KAAKtC;kBACzByD,UAAUJ,EAAOI;;qBAEd;gBACL,MAAMN,IAAe;qBAChBF;kBACHW,OAAOP,EAAOQ,QAAQC,UAAU;kBAChCrB,SAAS;;gBAEXnC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIY;gBAClDG,QAAQC,IAAI,uBAAuBJ;;;YAGvC,OAAOS;YACP,MAAMX,IAAQ3C,KAAKsC,WAAWM,IAAIX;YAClC,IAAIU,GAAO;cACT,MAAME,IAAe;mBAChBF;gBACHW,OACEA,aAAiBG,QACbH,EAAMI,UACN;gBACNvB,SAAS;;cAEXnC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAIY;cAClDG,QAAQC,IAAI,sBAAsBJ;;;;;MAM1C,IAAI/B,EAAAd,MAAIC,GAAA,MAAe;QACrBa,EAAAd,MAAIC,GAAA,KAAc0D,QAAQ;;;uCAK9BC,EAAA7D,IAAAC,OAAoB+B,MAClB8B;MAEA,OAAM5B,IAAEA,GAAEvC,MAAEA,KAASmE,EAAMC;MAC3B,MAAM9B,IAAOhC,KAAKsC,WAAWM,IAAIX;MAEjC,IAAID,GAAM;QACR,MAAM+B,IAAc;aACf/B;UACHtC,MAAMA,EAAKsE;UACXC,WAAW;;QAGbjE,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC,WAAWvC,IAAIkC,GAAI8B;eAC5C/D,KAAKkE,sBAAsB;UAAEC,QAAQlC;UAAImC,SAAS1E,EAAKsE;;;;+DAKjEK,EAAAtE,IAAAC,OAAoB+B,MAAO8B;MACzB,MAAM5B,IAAK4B,EAAMC;MACjB,MAAMnB,IAAQ3C,KAAKsC,WAAWM,IAAIX;MAClC,IAAIU,GAAO;QACT;UACE,IAAIA,EAAMR,SAAS;;YAEjB,IACEQ,EAAMD,wBACCC,EAAMD,cAAc4B,WAAW,YACtC;cACA3B,EAAMD,cAAc4B;mBACf,IAAItE,KAAKuE,sBAAsB;oBAC9BvE,KAAKuE,qBAAqBtC;;mBAG5BjC,KAAKwE,0BAA0BvC;YAErCjC,KAAKsC,WAAWmC,OAAOxC;YACvBjC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC;iBAC1B;YACL,MAAMoC,IAA6B;cACjChF,MAAMiD,EAAMjD;cACZ2D,cAAcV,EAAMX,KAAKtC;cACzByD,UAAUR,EAAMQ;;YAGlB,MAAMwB,WAAqB3E,KAAK4E,iBAAiBF;YAEjD,IAAIC,GAAc;qBACV3E,KAAK6E,sBAAsBH;cACjC1E,KAAKsC,WAAWmC,OAAOxC;cACvBjC,KAAKsC,aAAa,IAAIE,IAAIxC,KAAKsC;;;UAGnC,OAAOgB;iBACDtD,KAAK8E,4BAA4B;YACrCC,UAAUpC,EAAMjD;YAChB4D,OACEA,aAAiBG,QAAQH,EAAMI,UAAU;;;;;0CAOnDsB,EAAAjF,IAAAC,OAAiB+B;;MAEf,MAAMkD,IAAoBC,MAAMC,KAAKnF,KAAKsC,WAAW8C,UAAUC,MAC7DrD,KAAQA,EAAKG;MAGf,IAAI8C,GAAmB;QACrB;;;;YAIF,MAAMK,IAAgCJ,MAAMC,KAAKnF,KAAKsC,WAAW8C,UAC9DG,QAAOvD;QACN,MAAMwD,KAAWxD,EAAKG,WAAWH,EAAKmB,aAAanB,EAAKsB;QACxDN,QAAQC,IAAI,oBAAoB;UAC9BhB,IAAID,EAAKC;UACTvC,MAAMsC,EAAKtC;UACXyC,SAASH,EAAKG;UACdgB,UAAUnB,EAAKmB;UACfG,OAAOtB,EAAKsB;UACZkC;;QAEF,OAAOA;AAAO,UAEfC,KAAIzD,MAAI;QACPtC,MAAMsC,EAAKtC;QACX2D,cAAcrB,EAAKA,KAAKtC;QACxByD,UAAUnB,EAAKmB;;MAGnBH,QAAQC,IAAI,0BAA0BqC;MAEtC,IAAIA,EAAcI,SAAS,GAAG;eACtB1F,KAAK2F,0BAA0BL;;;YAIvCtF,KAAKsC,WAAWC;MAChBvC,KAAKsC,aAAa,IAAIE;;YAGtB,IAAI1B,EAAAd,MAAIC,GAAA,MAAe;QACrBa,EAAAd,MAAIC,GAAA,KAAc0D,QAAQ;;;0CAK9BiC,EAAA7F,IAAAC,OAAgB+B;MACd;;QAEE,KAAK,OAAOE,GAAIU,MAAU3C,KAAKsC,WAAWuD,WAAW;UACnD,IAAIlD,EAAMR,WAAWnC,KAAKuE,sBAAsB;YAC9C;oBACQvE,KAAKuE,qBAAqBtC;qBAC1BjC,KAAKwE,0BAA0BvC;cACrC,OAAOqB;;;;;;gBAObtD,KAAKsC,WAAWC;QAChBvC,KAAKsC,aAAa,IAAIE;QAEtB,IAAI1B,EAAAd,MAAIC,GAAA,MAAe;UACrBa,EAAAd,MAAIC,GAAA,KAAc0D,QAAQ;;eAGtB3D,KAAK8F;QACX,OAAOxC;QACPtD,KAAKsC,WAAWC;QAChBvC,KAAKsC,aAAa,IAAIE;eAChBxC,KAAK8F;;;iBAvZqB;oBAGC;uBAGG;;;;;;;;;;;;;sBAoDoB,IAAItD;sBACzB;;oDAIvC,uBAAMuD;IACJnF,EAAAZ,MAAIF,SAA2BkG,EAAOC,oBAAoBjG,KAAKkG,KAAG;;4CA6VpE,WAAM3D;IACJ,KAAK,OAAON,GAAIU,MAAU3C,KAAKsC,WAAWuD,WAAW;MACnD,IAAIlD,EAAMR,WAAWnC,KAAKuE,sBAAsB;QAC9C;gBACQvE,KAAKuE,qBAAqBtC;iBAC1BjC,KAAKwE,0BAA0BvC;UACrC,OAAOqB;;;;;IAKbtD,KAAKsC,WAAWC;;EAGlB,MAAA4D;IACE,OACEC,EAACC,GAAI;MAACC,OAAM;OACVF,EAAA;MAAUG,OAAO3G;QACjBwG,EAAA;MACEI,MAAK;MACLF,OAAM;MACNjE,UAAUrC,KAAKqC;MACfoE,QAAQzG,KAAK0G,OACTjB,KAAIe,KAASA,EAAKG,WAAW,OAAOH,IAAO,IAAIA,MAChDI,KAAK;MACRC,UAAU/F,EAAAd,MAAIyB,GAAA;MACdqF,KAAKZ,KAAOtF,EAAAZ,MAAIC,GAAgBiG,GAAsB;MAAC,eAC3C;MACZa,WAAW;MACXC,OAAO;QAAEC,SAAS;;QAEpBb,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAKE,OAAM;OACRtG,KAAKe,cAAcf,KAAKsC,WAAW4E,SAAS,IAC3Cd,EAAA;MACEE,OAAO;QACL,4BAA4B;QAC5B,sCAAsCtG,KAAKe;;MAE7CoG,aAAarG,EAAAd,MAAIQ,GAAA;MACjB4G,aAAatG,EAAAd,MAAIgB,GAAA;MACjBqG,YAAYvG,EAAAd,MAAIiB,GAAA;MAChBqG,QAAQxG,EAAAd,MAAIkB,GAAA;OAEZkF,EAAA;MACEE,OAAM;MACNE,MAAK;MACLe,SAASzG,EAAAd,MAAIuB,GAAA;OAEb6E,EAAA;MAAUE,OAAM;MAAUkB,KAAKjI;QAC/B6G,EAAA;MAAOE,OAAM;OACVtG,KAAKqC,WACFvB,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOC,uBAC/B5G,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOE,sBAGvCvB,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAOE,OAAM;OACVtG,KAAK4H,SAAS9G,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOI,SAEhDzB,EAAA;MAAOE,OAAM;OACVxF,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOK,eAGpC1B,EAAA;MAAME,OAAM;OACTtG,KAAK0G,SAAS1G,KAAK0G,MAAMhB,SAAS,IAC/B5E,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOM,cAAcC,QAC3C,OACAhI,KAAK0G,MAAME,KAAK,SAElB9F,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOQ,sBAKzC7B,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAOE,OAAM;OACVtG,KAAK4H,SACJ9G,EAAAd,MAAIF,GAAA,MAAoBoI,SAASC,gBAErC/B,EAAA;MAAME,OAAM;OACTxF,EAAAd,MAAIF,GAAA,MAAoBoI,SAASE,WAAWJ,QAC3C,OACAhI,KAAKsC,WAAW4E,KAAK5G,eAI1BN,KAAKqC,YACJ+D,EAAA;MACEE,OAAM;MACNE,MAAK;MACLe,SAASzG,EAAAd,MAAIuB,GAAA;OAEb6E,EAAA;MAAUE,OAAM;MAAUkB,KAAKjI;QAC/B6G,EAAA;MAAOE,OAAM;OACVtG,KAAKqC,WACFvB,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOC,uBAC/B5G,EAAAd,MAAIF,GAAA,MAAoB2H,OAAOE,uBAK3CvB,EAAA;MAAKE,OAAM;OACRpB,MAAMC,KAAKnF,KAAKsC,WAAW8C,UAAUK,KAAIzD,KACxCoE,EAAA;MACEiC,KAAKrG,EAAKC;MACVD,MAAMA;MACNsG,UAAUtI,KAAKuI;MACfC,kBAAkB1H,EAAAd,MAAI4D,GAAA;MACtB6E,cAAc3H,EAAAd,MAAIqE,GAAA;MAClBqE,cAAc5H,EAAAd,MAAIqE,GAAA;aAO9B+B,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAKE,OAAM;OACTF,EAAA;MACEE,OAAM;MACNE,MAAK;MACLe,SAASzG,EAAAd,MAAI4F,GAAA;OAEZ9E,EAAAd,MAAIF,GAAA,MAAoB6I,QAAQrE,SAEnC8B,EAAA;MACEE,OAAM;MACNE,MAAK;MACLe,SAASzG,EAAAd,MAAIgF,GAAA;MACb4D,UACE5I,KAAKsC,WAAW4E,SAAS,KACzBhC,MAAMC,KAAKnF,KAAKsC,WAAW8C,UAAUC,MACnCrD,KAAQA,EAAKG;OAIhBrB,EAAAd,MAAIF,GAAA,MAAoB6I,QAAQE;;;;;;;;;;;;;wDAhelC7G;;EAEX,KAAKhC,KAAK0G,SAAS1G,KAAK0G,MAAMhB,WAAW,GAAG;IAC1C,OAAO;MAAEF,SAAS;;;EAGpB,KAAK,MAAMgB,KAAQxG,KAAK0G,OAAO;;IAE7B,IAAIF,EAAKsC,SAAS,OAAO;MACvB,MAAMC,IAAWvC,EAAKwC,MAAM,KAAK;MACjC,IAAIhH,EAAKwE,KAAKG,WAAWoC,IAAW;QAClC,OAAO;UAAEvD,SAAS;;;;;UAIjB,IAAIgB,EAAKG,WAAW,MAAM;MAC7B,IAAI3E,EAAKtC,KAAKuJ,cAAcC,SAAS1C,EAAKyC,gBAAgB;QACxD,OAAO;UAAEzD,SAAS;;;;;UAIjB,IAAIxD,EAAKwE,SAASA,KAAQxE,EAAKwE,SAAS,eAAeA,KAAQ;MAClE,OAAO;QAAEhB,SAAS;;;;EAItB,OAAO;IACLA,SAAS;IACTlC,OACExC,EAAAd,MAAIF,GAAA,MAAoByD,QAAQ4F,mBAAmB;;AAEzD,GAACtH,IAAA,SAAAA,4BAGcV;EACb,MAAMQ,IAAqB;EAE3BuD,MAAMC,KAAKhE,GAAOW,SAAQE;IACxB,MAAMoH,IAAatI,EAAAd,MAAI4B,GAAA,KAAAyH,GAAa/H,KAAjBtB,MAAkBgC;IACrC,IAAIoH,EAAW5D,SAAS;MACtB7D,EAAW2H,KAAKtH;WACX;MACLhC,KAAKuJ,8BAA8B;QACjCxE,UAAU/C,EAAKtC;QACf4D,OAAO8F,EAAW9F;;;;EAKxB,OAAO3B;AACT"}

package/dist/genexus-ide-ui/{p-edf889d2.entry.js → p-9c690c36.entry.js}

@@ -1,12 +1,10 @@
 import { r as n, c as e, h as t, H as r, a } from "./p-25a9f1d7.js";
 
-import { g as o } from "./p-6e4208d8.js";
+import { g as o } from "./p-ede7bd20.js";
 
-import "./p-5ac47c69.js";
+import { L as i } from "./p-857866f8.js";
 
-import { L as i } from "./p-311eedf3.js";
-
-import { f as s } from "./p-9ddea83b.js";
+import { f as s } from "./p-51601b85.js";
 
 const l = ':root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/* - - - - - - - - - - - - - - - - -\nNew classes for Chameleon + Mercury\n- - - - - - - - - - - - - - - - - */\n:host {\n  display: grid;\n  block-size: 100%;\n}\n\n.card-regular {\n  background-color: var(--mer-surface__elevation--01);\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n  padding: var(--mer-spacing--md) var(--mer-spacing--md);\n  display: grid;\n}\n\n.card-small {\n  background-color: var(--mer-surface__elevation--02);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.card-small--actionable:hover {\n  background-color: var(--mer-color__neutral-gray--600);\n}\n.card-small--actionable:active {\n  background-color: var(--mer-color__neutral-gray--650);\n}\n.card-small:focus-visible {\n  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);\n  outline-offset: var(--focus__outline-offset);\n}\n\n.empty-state {\n  block-size: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  text-align: center;\n}\n.empty-state__title, .empty-state__button, .empty-state__link {\n  max-inline-size: 300px;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-1 {\n  opacity: 1;\n}\n\n.display-contents {\n  display: contents;\n}\n\n.pill-tag {\n  padding: 1px 4px;\n  border-radius: 2px;\n  min-inline-size: 40px;\n  text-align: center;\n  margin-inline-end: 10px;\n  font-size: 11px;\n}\n\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--mer-color__neutral-gray--800);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-cell {\n  --mer-spacing--xs: var(--gx-ide-container__padding);\n}\n\n/*--- Layout ---*/\n.layout {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n  box-sizing: border-box;\n}\n.layout--two-cols {\n  grid-template-columns: 1fr 1fr;\n}\n.layout--space-above {\n  padding-block-start: var(--mer-spacing--lg);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--mer-font__weight--regular);\n  font-size: var(--mer-font__size--xs);\n  font-family: var(--mer-font-family--primary);\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-overflow::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.tree-view-primary {\n  font-size: var(--mer-font__size--2xs);\n}\n\np {\n  margin: 0;\n  font-size: var(--mer-font__size--xxs);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nNew : For Mercury\n- - - - - - - - - - - - - - - - - - */\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  display: block;\n  height: 100%;\n  overflow: auto;\n  margin: var(--mer-spacing--lg);\n}\n\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n  height: 100%;\n  overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n  container-name: dashboard-main-wrapper;\n  container-type: inline-size;\n}\n\n.kb {\n  grid-area: kb;\n  align-self: center;\n}\n.kb .version-pill {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.kb .kb-detail {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex-wrap: wrap;\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.kb .kb-detail .display-inline {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  font-style: italic;\n  opacity: 0.5;\n}\n\n.environment {\n  grid-area: environment;\n}\n.environment__environments {\n  padding-block-end: var(--gx-ide-grid-column-gap);\n  display: flex;\n  flex-direction: row;\n  gap: var(--gx-ide-grid-column-gap);\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  overflow-x: auto;\n}\n.environment__environments::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.environment__environments::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.environment__environments::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n.environment__environments .environment-card {\n  min-width: 180px;\n  flex-grow: 1;\n}\n.environment__environments .environment-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.environment__environments .environment-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--2xs);\n}\n\n.environment-title {\n  margin-block-end: var(--mer-spacing--xs);\n  display: block;\n}\n\n.project {\n  grid-area: project;\n}\n.project .project-buttons {\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.project .project-description > *:first-child {\n  margin-block-start: 0;\n}\n.project .project-description > *:last-child {\n  margin-block-end: 0;\n}\n\n.recent-objects {\n  grid-area: recent-objects;\n}\n.recent-objects__container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.recent-objects__object {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__object .obj-name {\n  color: var(--gray-06);\n}\n.recent-objects__object .col {\n  display: flex;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__empty-state {\n  height: 100%;\n}\n\n.grid--basic {\n  flex-grow: 1;\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n  gap: var(--mer-spacing--xl);\n  grid-template-areas: "kb environment" "project recent-objects";\n  grid-template-rows: auto 1fr;\n}\n\n@container (width < 768px) {\n  .grid--basic {\n    grid-template-rows: auto auto auto;\n    grid-template-areas: "kb environment" "project project" "recent-objects recent-objects";\n  }\n}\ngxg-title-editable {\n  width: 100%;\n}\n\ngx-ide-card {\n  height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n  border: var(--mer-elevation__border-01);\n  border-radius: var(--gxg-card-section_border-radius);\n}';
 
@@ -16,9 +14,9 @@ var c = undefined && undefined.__classPrivateFieldGet || function(n, e, t, r) {
   return t === "m" ? r : t === "a" ? r.call(n) : r ? r.value : e.get(n);
 };
 
-var d;
+var g;
 
-const g = {
+const d = {
   new: "gx-server/new",
   modified: "patterns-default-associated/modified",
   conflicted: "patterns-default-associated/synchronized",
@@ -39,7 +37,7 @@ const b = class {
     n(this, r);
     this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
-    d.set(this, o({
+    g.set(this, o({
       category: "system",
       name: "folder",
       colorType: "on-elevation"
@@ -154,7 +152,6 @@ const b = class {
   }
   // 11.RENDER() MAIN FUNCTION //
   render() {
-    var n, e, a, o;
     return t(r, null, t("div", {
       class: "gx-ide-main-wrapper"
     }, t("div", {
@@ -196,7 +193,7 @@ const b = class {
       cardTitle: this.renderFrontEndTitle()
     }, t("div", {
       class: "environment-container"
-    }, (e = (n = this.environment) === null || n === void 0 ? void 0 : n.frontEnd) === null || e === void 0 ? void 0 : e.map((n => t("div", {
+    }, this.environment?.frontEnd?.map((n => t("div", {
       class: "environment-item"
     }, t("gxg-icon", {
       type: n.icon,
@@ -245,12 +242,12 @@ const b = class {
       ref: n => this.recentObjectsContainerEl = n
     }, t("div", {
       class: "recent-objects__container"
-    }, ((a = this.recentObjects) === null || a === void 0 ? void 0 : a.length) === 0 ? t("gx-ide-empty-state", {
+    }, this.recentObjects?.length === 0 ? t("gx-ide-empty-state", {
       class: "recent-objects__empty-state",
-      stateIconSrc: c(this, d, "f"),
+      stateIconSrc: c(this, g, "f"),
       stateTitle: this._componentLocale.recentObjects.emptyState.title,
       stateDescription: this._componentLocale.recentObjects.emptyState.description
-    }) : (o = this.recentObjects) === null || o === void 0 ? void 0 : o.map((n => {
+    }) : this.recentObjects?.map((n => {
       const e = f[n.status];
       const r = this._componentLocale.recentObjects.status[e];
       return t("gxg-card", {
@@ -275,7 +272,7 @@ const b = class {
       }, t("gxg-text", {
         italic: true
       }, r, n.status === "modified" ? s(n.modificationDate, "date") : null), n.status !== "unmodified" && n.status !== "not-connected" ? t("gxg-icon", {
-        type: g[n.status],
+        type: d[n.status],
         color: "auto"
       }) : null)));
     })))))), t("gxg-ide-loader", {
@@ -297,9 +294,9 @@ const b = class {
   }
 };
 
-d = new WeakMap;
+g = new WeakMap;
 
 b.style = l;
 
 export { b as gx_ide_dashboard_home };
-//# sourceMappingURL=p-edf889d2.entry.js.map
+//# sourceMappingURL=p-9c690c36.entry.js.map

package/dist/genexus-ide-ui/p-9c690c36.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dashboardHomeCss","mapStatusToIcons","new","modified","conflicted","unmodified","mapStatusToLocale","GxIdeDashboardHome","this","renderedFirstTime","_GxIdeDashboardHome_folderIcon","set","getIconPath","category","name","colorType","evaluateLoader","recentObjects","undefined","loaderEl","container","recentObjectsContainerEl","show","handleKbNameChange","async","updatedTitle","updatedKbName","detail","renameKBCallback","response","then","result","success","kb","editValidation","kbNameEl","handleEnvNameChange","renameEnvironmentCallback","envNameEl","value","environment","handleDescriptionChange","editDescriptionCallback","openObject","id","openObjectCallback","el","validationStatus","validationMessage","errorMessage","renderProjectContent","projectDescription","h","class","innerHTML","enableEditDescription","type","icon","onClick","_componentLocale","edit","recentObjectsHandler","newRecentObjects","componentWillLoad","Locale","getComponentStrings","componentDidLoad","componentDidRender","componentDidRenderFirstTime","emit","componentName","renderFrontEndTitle","frontEnd","length","frontEndLang","frontEndLangs","renderKbDates","created","lastBuild","padding","formatDate","render","Host","enableEditKBName","fluid","onValueChanged","focusType","debounce","ref","version","currentVersion","enableEditEnvironmentName","cardType","cardTitle","map","obj","color","style","backEnd","dataStore","editableTitle","project","title","noPaddingTop","stateIconSrc","__classPrivateFieldGet","stateTitle","emptyState","stateDescription","description","statusLocale","status","statusDescription","background","actionable","typeIcon","italic","modificationDate","loaderTitle","loader"],"sources":["src/components/dashboard-home/dashboard-home.scss?tag=gx-ide-dashboard-home&encapsulation=shadow","src/components/dashboard-home/dashboard-home.tsx"],"sourcesContent":["@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  height: 100%;\n  overflow: auto;\n  margin: var(--mer-spacing--lg);\n}\n\n// Manage height and overflow\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n  height: 100%;\n  overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n  container-name: dashboard-main-wrapper;\n  container-type: inline-size;\n}\n\n.kb {\n  grid-area: kb;\n  align-self: center;\n  .version-pill {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .kb-detail {\n    display: flex;\n    flex-direction: column;\n    align-items: start;\n    flex-wrap: wrap;\n    margin-block-start: var(--mer-spacing--md);\n    gap: var(--mer-spacing--md);\n    .display-inline {\n      @include line-clamp;\n      font-style: italic;\n      opacity: 0.5;\n    }\n  }\n}\n\n.environment {\n  grid-area: environment;\n  &__environments {\n    padding-block-end: var(--gx-ide-grid-column-gap);\n    display: flex;\n    flex-direction: row;\n    gap: var(--gx-ide-grid-column-gap);\n    @include gxg-scrollbar;\n    overflow-x: auto;\n    .environment-card {\n      min-width: 180px;\n      flex-grow: 1;\n    }\n    .environment-container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--gx-ide-cards-vertical-spacing);\n    }\n    .environment-item {\n      display: flex;\n      align-items: center;\n      gap: var(--mer-spacing--2xs);\n    }\n  }\n}\n.environment-title {\n  margin-block-end: var(--mer-spacing--xs);\n  display: block;\n}\n\n.project {\n  grid-area: project;\n  .project-buttons {\n    margin-block-start: var(--mer-spacing--md);\n    gap: var(--mer-spacing--md);\n  }\n  .project-description {\n    > *:first-child {\n      margin-block-start: 0;\n    }\n    > *:last-child {\n      margin-block-end: 0;\n    }\n  }\n}\n\n.recent-objects {\n  grid-area: recent-objects;\n  &__container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--gx-ide-cards-vertical-spacing);\n  }\n  &__object {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--gx-ide-cards-horizontal-spacing);\n    .obj-name {\n      color: var(--gray-06);\n    }\n    .col {\n      display: flex;\n      gap: var(--gx-ide-cards-horizontal-spacing);\n    }\n  }\n  &__empty-state {\n    height: 100%;\n  }\n}\n\n.grid--basic {\n  flex-grow: 1;\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n  gap: var(--mer-spacing--xl);\n  grid-template-areas:\n    \"kb environment\"\n    \"project recent-objects\";\n  grid-template-rows: auto 1fr;\n}\n@container (width < 768px) {\n  .grid--basic {\n    grid-template-rows: auto auto auto;\n    grid-template-areas:\n      \"kb environment\"\n      \"project project\"\n      \"recent-objects recent-objects\";\n  }\n}\n\ngxg-title-editable {\n  width: 100%;\n}\n\ngx-ide-card {\n  height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n  border: var(--mer-elevation__border-01);\n  border-radius: var(--gxg-card-section_border-radius);\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n  [key in RecentObjectStatus]: StatusIcons;\n} = {\n  \"new\": \"gx-server/new\",\n  \"modified\": \"patterns-default-associated/modified\",\n  \"conflicted\": \"patterns-default-associated/synchronized\",\n  \"unmodified\": null,\n  \"not-connected\": null\n};\n\nconst mapStatusToLocale: {\n  [key in RecentObjectStatus]: string;\n} = {\n  \"new\": \"new\",\n  \"modified\": \"modified\",\n  \"conflicted\": \"conflicted\",\n  \"unmodified\": \"unmodified\",\n  \"not-connected\": \"notConnected\"\n};\n\n@Component({\n  tag: \"gx-ide-dashboard-home\",\n  styleUrl: \"dashboard-home.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n  // 1.Own Properties\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  #folderIcon = getIconPath({\n    category: \"system\",\n    name: \"folder\",\n    colorType: \"on-elevation\"\n  });\n\n  // 2.Reference To Elements\n\n  @Element() el: HTMLGxIdeDashboardHomeElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private kbNameEl!: HTMLGxgTitleEditableElement;\n  private envNameEl!: HTMLGxgTitleEditableElement;\n  private recentObjectsContainerEl!: HTMLGxgCardElement;\n  /* private projectDescriptionEl!: HTMLGxgFormTextareaElement;*/\n\n  // 3.State\n\n  /**\n   * The editing state for the environment name.\n   */\n  @State() editingEnvName = false;\n\n  /**\n   * The editing state for the project details.\n   */\n  @State() editingProjectDescription = false;\n\n  // 4.Public Property API\n\n  /**\n   * The KB basic properties.\n   */\n  @Prop() readonly kb: KBData;\n\n  /**\n   * This allows the kb to be editable by the user.\n   */\n  @Prop() readonly enableEditKBName: boolean = false;\n\n  /**\n   * Information of the current environment.\n   */\n  @Prop() readonly environment: EnvironmentData;\n\n  /**\n   * This allows the environment name to be editable by the user.\n   */\n  @Prop() readonly enableEditEnvironmentName: boolean = false;\n\n  /**\n   * Project Detail description.\n   */\n  @Prop() readonly projectDescription: string;\n\n  /**\n   * This allows the project description to be modified by the user.\n   */\n  @Prop() readonly enableEditDescription: boolean = false;\n\n  /**\n   * Recently edited objects.\n   */\n  @Prop() readonly recentObjects: recentObjectData[];\n  @Watch(\"recentObjects\")\n  recentObjectsHandler(newRecentObjects: recentObjectData[]) {\n    if (newRecentObjects) {\n      this.loaderEl.show = false;\n    }\n  }\n\n  /**\n   * Callback invoked when user tries to rename the KB.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to rename the KB environment.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameEnvironmentCallback: (\n    name: string\n  ) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to edit the Project Description.\n   * The edition is resolved by the host.\n   */\n  @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n  /**\n   * Callback invoked when user tries to open one of the listed Recent Objects\n   * Receives the internal ID of the object\n   */\n  @Prop() readonly openObjectCallback: (id: string) => Promise<void>;\n\n  // 5.Events\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.Component Lifecycle Events\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.evaluateLoader();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.Listeners\n\n  // 8.Public Methods API\n\n  // 9.Local Methods\n\n  private evaluateLoader = () => {\n    if (this.recentObjects === undefined) {\n      this.loaderEl.container = this.recentObjectsContainerEl;\n      this.loaderEl.show = true;\n    }\n  };\n\n  // Kb Name\n\n  private handleKbNameChange = async (updatedTitle: CustomEvent<string>) => {\n    const updatedKbName = updatedTitle.detail;\n    if (this.renameKBCallback) {\n      const response = this.renameKBCallback(updatedKbName);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.kb.name = updatedKbName;\n        }\n        this.editValidation(result, this.kbNameEl);\n      });\n    }\n  };\n\n  // Environment Name\n  private handleEnvNameChange = async () => {\n    if (this.renameEnvironmentCallback) {\n      const response = this.renameEnvironmentCallback(this.envNameEl.value);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.environment.name = this.envNameEl.value;\n        }\n        this.editValidation(result, this.envNameEl);\n      });\n    }\n  };\n\n  private handleDescriptionChange = async () => {\n    if (this.editDescriptionCallback) {\n      await this.editDescriptionCallback();\n    }\n  };\n\n  // Recent Objects\n\n  private openObject = (id: string) => {\n    this.openObjectCallback(id);\n  };\n\n  // Validation\n\n  private editValidation = (\n    result: EditResult,\n    el: HTMLGxgTitleEditableElement\n  ) => {\n    if (!result.success) {\n      el.validationStatus = \"error\";\n      el.validationMessage = result.errorMessage;\n    } else {\n      el.validationStatus = \"indeterminate\";\n      el.validationMessage = \"\";\n    }\n  };\n\n  // 10.Render Function\n\n  private renderProjectContent = (): Element => {\n    return this.projectDescription ? (\n      <div class=\"project-description\" innerHTML={this.projectDescription}>\n        {this.enableEditDescription ? (\n          <gxg-button\n            type=\"secondary-text-icon\"\n            icon=\"gemini-tools/edit\"\n            onClick={this.handleDescriptionChange}\n          >\n            {this._componentLocale.edit}\n          </gxg-button>\n        ) : null}\n      </div>\n    ) : null;\n  };\n\n  private renderFrontEndTitle() {\n    return this.environment.frontEnd.length <= 1\n      ? this._componentLocale.environment.frontEndLang\n      : this._componentLocale.environment.frontEndLangs;\n  }\n\n  private renderKbDates() {\n    return this.kb.created || this.kb.lastBuild ? (\n      <gxg-text class=\"display-inline\" type=\"text-gray\" padding=\"s\">\n        {\n          /* created*/\n          this.kb.created\n            ? `${this._componentLocale.created}: ${formatDate(\n                this.kb.created,\n                \"date-time-short\"\n              )}`\n            : null\n        }\n        {this.kb.created && this.kb.lastBuild ? \" - \" : null}\n        {\n          /* last build date */\n          this.kb.lastBuild\n            ? `${this._componentLocale.lastBuild}: ${formatDate(\n                this.kb.lastBuild,\n                \"date-time-short\"\n              )}`\n            : null\n        }\n      </gxg-text>\n    ) : null;\n  }\n\n  // 11.RENDER() MAIN FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class=\"gx-ide-main-wrapper\">\n          <div class=\"grid grid--basic\">\n            <div class=\"kb gxi-overflow-auto\">\n              <gxg-title-editable\n                value={this.kb.name}\n                disable-edition={!this.enableEditKBName}\n                click-to-edit={true}\n                fluid\n                onValueChanged={this.handleKbNameChange}\n                focusType=\"text\"\n                debounce\n                ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n              ></gxg-title-editable>\n              <div class=\"align-center kb-detail\">\n                <gxg-pill id=\"pill\" type=\"static\" icon=\"objects/procedure\">\n                  {this._componentLocale.version}: {this.kb.currentVersion}\n                </gxg-pill>\n\n                {this.renderKbDates()}\n              </div>\n            </div>\n\n            <div class=\"environment\">\n              <gxg-title-editable\n                class=\"environment-title\"\n                value={this.environment.name}\n                disable-edition={!this.enableEditEnvironmentName}\n                click-to-edit={true}\n                title-type=\"h3\"\n                ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n                onValueChanged={this.handleEnvNameChange}\n                focusType=\"text\"\n                debounce\n              ></gxg-title-editable>\n              <div class=\"environment__environments\">\n                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this.renderFrontEndTitle()}\n                >\n                  <div class=\"environment-container\">\n                    {this.environment?.frontEnd?.map(\n                      (obj: EnvironmentItemData) => (\n                        <div class=\"environment-item\">\n                          <gxg-icon\n                            type={obj.icon}\n                            color=\"onbackground\"\n                            style={{\n                              \"--mer-text__on-surface\": \"var(--gray-05);\"\n                            }}\n                          ></gxg-icon>\n                          {obj.name}\n                        </div>\n                      )\n                    )}\n                  </div>\n                </gxg-card>\n                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this._componentLocale.environment.backEnd}\n                >\n                  <div class=\"environment-container\">\n                    <div class=\"environment-item\">\n                      <gxg-icon\n                        type={this.environment.backEnd.icon}\n                        color=\"onbackground\"\n                        style={{\n                          \"--mer-text__on-surface\": \"var(--gray-05);\"\n                        }}\n                      ></gxg-icon>\n                      {this.environment.backEnd.name}\n                    </div>\n                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this._componentLocale.environment.dataStore}\n                >\n                  <div class=\"environment-container\">\n                    <div class=\"environment-item\">\n                      <gxg-icon\n                        type={this.environment.dataStore.icon}\n                        color=\"onbackground\"\n                        style={{\n                          \"--mer-text__on-surface\": \"var(--gray-05);\"\n                        }}\n                      ></gxg-icon>\n                      {this.environment.dataStore.name}\n                    </div>\n                  </div>\n                </gxg-card>\n              </div>\n            </div>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.project.title}\n              class=\"project\"\n            >\n              {/* <gxg-tabs height=\"auto\" minWidth=\"100%\">\n                <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.description}\n                    tab=\"description\"\n                    is-selected\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.lookFeel}\n                    tab=\"lookFeel\"\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.architecture}\n                    tab=\"architecture\"\n                  ></gxg-tab-button>\n                </gxg-tab-bar>\n                <gxg-tab noPadding tab=\"description\" flexContainer>\n                  {this.renderProjectContent()}\n                </gxg-tab>\n                <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n                <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n              </gxg-tabs> */}\n              {this.renderProjectContent()}\n            </gxg-card>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.recentObjects.title}\n              class=\"recent-objects\"\n              cardType=\"section\"\n              noPaddingTop\n              ref={el =>\n                (this.recentObjectsContainerEl = el as HTMLGxgCardElement)\n              }\n            >\n              <div class=\"recent-objects__container\">\n                {this.recentObjects?.length === 0 ? (\n                  <gx-ide-empty-state\n                    class=\"recent-objects__empty-state\"\n                    stateIconSrc={this.#folderIcon}\n                    stateTitle={\n                      this._componentLocale.recentObjects.emptyState.title\n                    }\n                    stateDescription={\n                      this._componentLocale.recentObjects.emptyState.description\n                    }\n                  ></gx-ide-empty-state>\n                ) : (\n                  this.recentObjects?.map((obj: recentObjectData) => {\n                    const statusLocale = mapStatusToLocale[obj.status];\n                    const statusDescription =\n                      this._componentLocale.recentObjects.status[statusLocale];\n                    return (\n                      <gxg-card\n                        background=\"gray-01\"\n                        padding=\"m\"\n                        cardType=\"article\"\n                        class=\"recent-objects__card\"\n                        actionable\n                        onClick={() => this.openObject(obj.id)}\n                      >\n                        <div class=\"recent-objects__object\">\n                          <div class=\"col col-left\">\n                            <gxg-icon\n                              type={obj.typeIcon}\n                              color=\"auto\"\n                            ></gxg-icon>\n                            <gxg-text type=\"text-regular\" class=\"obj-name\">\n                              {obj.name}\n                            </gxg-text>\n                          </div>\n                          <div class=\"col col-right\">\n                            <gxg-text italic>\n                              {statusDescription}\n                              {obj.status === \"modified\"\n                                ? formatDate(obj.modificationDate, \"date\")\n                                : null}\n                            </gxg-text>\n                            {obj.status !== \"unmodified\" &&\n                            obj.status !== \"not-connected\" ? (\n                              <gxg-icon\n                                type={mapStatusToIcons[obj.status]}\n                                color=\"auto\"\n                              ></gxg-icon>\n                            ) : null}\n                          </div>\n                        </div>\n                      </gxg-card>\n                    );\n                  })\n                )}\n              </div>\n            </gxg-card>\n          </div>\n        </div>\n        <gxg-ide-loader\n          loaderTitle={this._componentLocale.loader.title}\n          description={this._componentLocale.loader.description}\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n\nexport type KBData = {\n  name: string;\n  currentVersion: string;\n  created: Date;\n  lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n  name: string;\n  frontEnd: EnvironmentItemData[];\n  backEnd: EnvironmentItemData;\n  dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n  icon: string;\n  name: string;\n};\n\nexport type recentObjectData = {\n  id: string;\n  typeIcon: string;\n  name: string;\n  modificationDate: Date;\n  status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n  | \"new\"\n  | \"modified\"\n  | \"conflicted\"\n  | \"unmodified\"\n  | \"not-connected\";\n\nexport type StatusIcons =\n  // toDo: Add proper icons!!\n  | \"gx-server/new\"\n  | \"patterns-default-associated/modified\"\n  | \"patterns-default-associated/synchronized\"\n  | \"gx-server/delete\";\n\nexport type EditResult = {\n  success: boolean;\n  errorMessage: string;\n};\n"],"mappings":"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"}