@genexus/genexus-ide-ui 1.1.46 → 1.1.49

package/dist/genexus-ide-ui/{p-18bbaa49.entry.js → p-60302626.entry.js}

@@ -1,10 +1,10 @@
-import { g as i, r as e, h as t, H as s, a as n } from "./p-97107ecc.js";
+import { g as i, r as e, h as t, H as s, a } from "./p-97107ecc.js";
 
-import { g as a } from "./p-401bfc97.js";
+import { g as n } from "./p-401bfc97.js";
 
 import { L as o } from "./p-311eedf3.js";
 
-const r = ':host{display:grid;block-size:100%;grid-template-areas:"header header" "main aside";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:"plugin-icon plugin-details";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:8px}.plugin__publisher{display:flex;align-items:center;gap:4px}.plugin__description{line-height:1.5}.plugin__actions-container{margin-block-start:8px;align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:6px}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:12px}.plugin__info-category{display:flex;flex-direction:column;gap:8px}.plugin__info-category:not(:first-child){padding-block-start:16px;margin-block-start:16px;border-block-start:1px solid var(--mer-border-color__on-elevation--01)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:8px}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:16px}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:6px}.fields__list--as-tags .field__li{border:1px solid var(--mer-border-color__on-elevation--01);padding:2px 8px;border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--mer-text__on-surface)}.fields__list--as-tags .field__link:hover{color:var(--mer-accent__primary)}.fields__list--as-tags .field__link:active{color:var(--mer-accent__primary--hover)}.field__name,.field__value{flex:1}.field__link{color:var(--mer-accent__primary)}.field__link:hover{color:var(--mer-accent__primary--hover)}.field__link:active{color:var(--mer-accent__primary--active)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--mer-icon__box--md) ) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}';
+const r = ':host{display:grid;block-size:100%;grid-template-areas:"header header" "main aside";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:"plugin-icon plugin-details";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;max-width:100%}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:8px}.plugin__publisher{display:flex;align-items:center;gap:4px}.plugin__description{line-height:1.5}.plugin__actions-container{margin-block-start:8px;align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:6px}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:12px}.plugin__info-category{display:flex;flex-direction:column;gap:8px}.plugin__info-category:not(:first-child){padding-block-start:16px;margin-block-start:16px;border-block-start:1px solid var(--mer-border-color__on-elevation--01)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:8px}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:16px}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:6px}.fields__list--as-tags .field__li{border:1px solid var(--mer-border-color__on-elevation--01);padding:2px 8px;border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--mer-text__on-surface)}.fields__list--as-tags .field__link:hover{color:var(--mer-accent__primary)}.fields__list--as-tags .field__link:active{color:var(--mer-accent__primary--hover)}.field__name,.field__value{flex:1}.field__link{color:var(--mer-accent__primary)}.field__link:hover{color:var(--mer-accent__primary--hover)}.field__link:active{color:var(--mer-accent__primary--active)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--mer-icon__box--md) ) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}';
 
 var l = undefined && undefined.__classPrivateFieldGet || function(i, e, t, s) {
   if (t === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
@@ -12,28 +12,28 @@ var l = undefined && undefined.__classPrivateFieldGet || function(i, e, t, s) {
   return t === "m" ? s : t === "a" ? s.call(i) : s ? s.value : e.get(i);
 };
 
-var c = undefined && undefined.__classPrivateFieldSet || function(i, e, t, s, n) {
+var c = undefined && undefined.__classPrivateFieldSet || function(i, e, t, s, a) {
   if (s === "m") throw new TypeError("Private method is not writable");
-  if (s === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof e === "function" ? i !== e || !n : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return s === "a" ? n.call(i, t) : n ? n.value = t : e.set(i, t), t;
+  if (s === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? i !== e || !a : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? a.call(i, t) : a ? a.value = t : e.set(i, t), t;
 };
 
 var d, p, h, f, m, u, _, g, b, v, w, x, y, k, M, W;
 
-const T = a({
+const T = n({
   category: "system",
   name: "user",
   colorType: "on-elevation"
 });
 
-const z = a({
+const z = n({
   category: "system",
   name: "chevron-down",
   colorType: "on-primary"
 });
 
-const C = a({
+const C = n({
   category: "system",
   name: "check-circle",
   colorType: "success"
@@ -91,26 +91,26 @@ const L = class {
       var i;
       let e;
       let s = "button-primary action-button";
-      let n;
-      const a = (i = this.data.versions) === null || i === void 0 ? void 0 : i.length;
+      let a;
+      const n = (i = this.data.versions) === null || i === void 0 ? void 0 : i.length;
       if (!this.data.installed) {
         e = l(this, d, "f").actions.install;
-        n = l(this, _, "f");
+        a = l(this, _, "f");
       } else if (this.data.updateVersion) {
         e = `${l(this, d, "f").actions.updateTo} ${this.data.updateVersion}`;
-        n = l(this, g, "f").call(this, this.data.updateVersion);
+        a = l(this, g, "f").call(this, this.data.updateVersion);
       } else {
         e = l(this, d, "f").actions.installed;
       }
-      if (a) {
+      if (n) {
         s = `${s} more-versions-available`;
       }
       return [ t("div", {
         class: "version-buttons-container"
       }, t("button", {
         class: s,
-        onClick: n
-      }, e), a ? t("ch-action-menu-render", {
+        onClick: a
+      }, e), n ? t("ch-action-menu-render", {
         class: "dropdown button-primary button-icon-only",
         blockAlign: "outside-end",
         inlineAlign: "inside-start",
@@ -138,13 +138,13 @@ const L = class {
       }
     }))));
     k.set(this, (i => i.toLowerCase().replace(/\s+/g, "-")));
-    M.set(this, ((i, e, s, n) => t("a", {
+    M.set(this, ((i, e, s, a) => t("a", {
       href: i,
       target: "_blank",
       onClick: l(this, b, "f").call(this, i),
       class: s
-    }, n && t("ch-image", {
-      src: n,
+    }, a && t("ch-image", {
+      src: a,
       class: "icon-md"
     }), e)));
     W.set(this, (() => this.data.infoCategories.map((i => t("div", {
@@ -209,8 +209,8 @@ const L = class {
   render() {
     const i = !this.data.installed || this.data.installed && !!this.data.updateVersion;
     const e = this.data.name.text;
-    const n = this.data.name.url;
-    const a = e && n;
+    const a = this.data.name.url;
+    const n = e && a;
     const o = e || this.data.name;
     const r = this.data.publisher.text;
     const c = this.data.publisher.url;
@@ -230,9 +230,9 @@ const L = class {
       alt: "plugin extension icon"
     }), t("div", {
       class: "plugin__details"
-    }, a ? t("h2", {
+    }, n ? t("h2", {
       class: "heading-5 has-link"
-    }, l(this, M, "f").call(this, n, o, "text-underline")) : t("h2", {
+    }, l(this, M, "f").call(this, a, o, "text-underline")) : t("h2", {
       class: "heading-5"
     }, o), p ? l(this, M, "f").call(this, c, o, "text-underline plugin__publisher tiny-semi-bold-l", T) : t("p", {
       class: "plugin__publisher tiny-semi-bold-l"
@@ -268,7 +268,7 @@ const L = class {
     return [ "gx-ide-assets/plugin-details" ];
   }
   get el() {
-    return n(this);
+    return a(this);
   }
 };
 
@@ -280,4 +280,4 @@ W = new WeakMap;
 L.style = r;
 
 export { L as gx_ide_plugin_details };
-//# sourceMappingURL=p-18bbaa49.entry.js.map
+//# sourceMappingURL=p-60302626.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pluginDetailsCss","USER_ICON","getIconPath","category","name","colorType","CHEVRON_DOWN_ICON","CHECK_CIRCLE_ICON","EXTENSION_ICON_IMG","getAssetPath","CSS_BUNDLES","GxIdePluginDetails","_GxIdePluginDetails_componentLocale","set","this","_GxIdePluginDetails_chMarkdownViewer","_GxIdePluginDetails_docSectionIdDescriptionMap","Map","_GxIdePluginDetails_versionsMenuOptionsModel","versionsToUpdateMenusModel","_a","data","versions","map","version","id","caption","_GxIdePluginDetails_menuVersionSelectedHandler","event","selectedVersion","detail","installCallback","_GxIdePluginDetails_renderUninstallButton","h","class","onClick","__classPrivateFieldGet","_GxIdePluginDetails_uninstallClickedHandler","actions","uninstall","_GxIdePluginDetails_installClickedHandler","_GxIdePluginDetails_updateVersionHandler","_GxIdePluginDetails_openLinkHandler","link","openLinkCallback","preventDefault","uninstallCallback","_GxIdePluginDetails_renderActionButtons","actionButtonCaption","actionButtonClasses","actionButtonCallback","moreVersionsToUpdate","length","installed","install","updateVersion","updateTo","call","blockAlign","inlineAlign","model","onButtonClick","src","_GxIdePluginDetails_tabSelectionChangedHandler","selectedTabId","newSelectedId","_GxIdePluginDetails_renderDocSectionsSlots","docsTabModel","docSectionTab","markdownValue","get","ref","el","__classPrivateFieldSet","slot","key","theme","value","_GxIdePluginDetails_returnFormatedId","rawId","toLowerCase","replace","_GxIdePluginDetails_renderLinkTag","href","label","cssClass","chImageSrc","target","_GxIdePluginDetails_renderAsideContent","infoCategories","infoCategory","fields__list","displayAsTags","fields","field","fieldValue","url","text","componentWillLoad","Locale","getComponentStrings","docSections","docSection","i","formatedId","content","componentDidLoad","addEventListener","path","composedPath","find","HTMLAnchorElement","render","renderActionButtons","titleLinkDataText","titleLinkDataUrl","titleHasLink","titleText","publisherDataText","publisher","publisherDataUrl","publisherHasLink","publisherText","Host","iconUrl","alt","description","tabListPosition","overflow","contain","onSelectedItemChange","selectedId"],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n  display: grid;\n  block-size: 100%;\n  grid-template-areas:\n    \"header header\"\n    \"main aside\";\n  grid-template-rows: max-content 1fr;\n  grid-template-columns: 1fr 280px;\n  row-gap: 12px;\n}\n\n.section {\n  display: contents;\n}\n\n// header\n.header {\n  display: grid;\n  grid-area: header;\n  grid-template-areas: \"plugin-icon plugin-details\";\n  grid-template-columns: 64px 1fr;\n  column-gap: 16px;\n  padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n  grid-area: plugin-icon;\n  max-width: 100%;\n}\n.plugin__details {\n  grid-area: plugin-details;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.plugin__publisher {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.plugin__description {\n  line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n  margin-block-start: 8px;\n  align-items: center;\n}\n.action-button {\n  min-inline-size: 100px;\n\n  &.more-versions-available {\n    border-start-end-radius: 0 !important;\n    border-end-end-radius: 0 !important;\n  }\n}\n.installed-container {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  // WA Biggest Mercury icon (icon-md) looks small in this case.\n  // Mercury should expose more icon sizes.\n  ch-image {\n    --ch-image-size: 20px;\n  }\n}\n\n// main\n.main {\n  grid-area: main;\n}\n.docsTab {\n  block-size: 100%;\n}\n\n// aside\n.aside {\n  grid-area: aside;\n  overflow: auto;\n  border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  font-size: 12px;\n}\n.plugin__info-category {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:first-child) {\n    $space: 16px;\n    padding-block-start: $space;\n    margin-block-start: $space;\n    border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n  }\n}\n.fields__list:not(.fields__list--as-tags) {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  .field__li {\n    display: flex;\n    gap: 16px;\n  }\n}\n.fields__list--as-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n\n  .field__li {\n    border: 1px solid var(--mer-border-color__on-elevation--01);\n    padding: 2px 8px;\n    border-radius: 4px;\n\n    text-transform: lowercase;\n  }\n  .field__link {\n    color: var(--mer-text__on-surface);\n\n    &:hover {\n      color: var(--mer-accent__primary);\n    }\n    &:active {\n      color: var(--mer-accent__primary--hover);\n    }\n  }\n}\n\n.field__name,\n.field__value {\n  flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n  color: var(--mer-accent__primary);\n  &:hover {\n    color: var(--mer-accent__primary--hover);\n  }\n  &:active {\n    color: var(--mer-accent__primary--active);\n  }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n  background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n  padding: calc(\n    (\n        var(--control__block-size) - 2 * var(--control__border-width) -\n          var(--mer-icon__box--md)\n      ) / 2\n  ) !important;\n  border-start-start-radius: 0 !important;\n  border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n\nch-markdown-viewer {\n  block-size: 100%;\n  overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n  text-decoration: underline;\n}\n","import {\n  Component,\n  Host,\n  State,\n  Prop,\n  Element,\n  h,\n  getAssetPath,\n  JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n  category: \"system\",\n  name: \"user\",\n  colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"system\",\n  name: \"chevron-down\",\n  colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n  category: \"system\",\n  name: \"check-circle\",\n  colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n  `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/dropdown\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/list-box\",\n  \"components/tab\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-plugin-details\",\n  styleUrl: \"plugin-details.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\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  #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n  // A map between docSection \"id\", and docSection \"description\".\n  // \"id\" is generated inside this component.\n  #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n  @Element() el: HTMLGxIdePluginDetailsElement;\n\n  @State() docsTabModel: TabModel = [];\n  @State() selectedTabId: string;\n\n  /**\n   * Specifies all the information related to a plugin.\n   */\n  @Prop() readonly data!: PluginDetailsData;\n\n  /**\n   * Callback that should be invoked when the user performs the install or update action.\n   * Receives an optional version string when a specific version is selected.\n   */\n  @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user attempts to open any link displayed in this component.\n   */\n  @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user performs the uninstall action.\n   */\n  @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.data.docSections?.length) {\n      this.docsTabModel = this.data.docSections.map((docSection, i) => {\n        const formatedId = this.#returnFormatedId(docSection.name);\n\n        this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n        if (i === 0) {\n          this.selectedTabId = formatedId;\n        }\n        return {\n          id: formatedId,\n          name: docSection.name\n        } as TabItemModel;\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.#chMarkdownViewer.addEventListener(\"click\", event => {\n      // Listens for clicks on links inside <ch-markdown-viewer>.\n      // If a link (<a>) is clicked and openLinkCallback is defined,\n      // it prevents the default navigation and delegates the event\n      // to this.#openLinkHandler, passing the link's href.\n      const path = event.composedPath() as EventTarget[];\n\n      const link = path.find(el => el instanceof HTMLAnchorElement) as\n        | HTMLAnchorElement\n        | undefined;\n\n      if (link?.href) {\n        this.#openLinkHandler(link.href)(event);\n      }\n    });\n  }\n\n  #versionsMenuOptionsModel = (): ActionMenuModel => {\n    const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n      version => {\n        return { id: version, caption: version };\n      }\n    );\n    return versionsToUpdateMenusModel;\n  };\n\n  #menuVersionSelectedHandler = (\n    event: CustomEvent<{\n      id?: string;\n    }>\n  ) => {\n    const selectedVersion = event.detail.id;\n    this.installCallback(selectedVersion);\n  };\n\n  #renderUninstallButton = (): JSX.Element => {\n    return (\n      <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n        {this.#componentLocale.actions.uninstall}\n      </button>\n    );\n  };\n\n  #installClickedHandler = () => {\n    this.installCallback();\n  };\n\n  #updateVersionHandler = (id: string) => () => {\n    this.installCallback(id);\n  };\n\n  #openLinkHandler = (link: string) => (event: MouseEvent) => {\n    if (this.openLinkCallback) {\n      event.preventDefault();\n      this.openLinkCallback(link);\n    }\n  };\n\n  #uninstallClickedHandler = () => {\n    this.uninstallCallback();\n  };\n\n  #renderActionButtons = (): JSX.Element => {\n    let actionButtonCaption;\n    let actionButtonClasses = \"button-primary action-button\";\n    let actionButtonCallback;\n    const moreVersionsToUpdate = this.data.versions?.length;\n\n    if (!this.data.installed) {\n      actionButtonCaption = this.#componentLocale.actions.install;\n      actionButtonCallback = this.#installClickedHandler;\n    } else if (this.data.updateVersion) {\n      actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n        this.data.updateVersion\n      }`;\n      actionButtonCallback = this.#updateVersionHandler(\n        this.data.updateVersion\n      );\n    } else {\n      actionButtonCaption = this.#componentLocale.actions.installed;\n    }\n\n    if (moreVersionsToUpdate) {\n      actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n    }\n\n    return [\n      <div class=\"version-buttons-container\">\n        <button class={actionButtonClasses} onClick={actionButtonCallback}>\n          {actionButtonCaption}\n        </button>\n        {moreVersionsToUpdate ? (\n          <ch-action-menu-render\n            class=\"dropdown button-primary button-icon-only\"\n            blockAlign=\"outside-end\"\n            inlineAlign=\"inside-start\"\n            model={this.#versionsMenuOptionsModel()}\n            onButtonClick={this.#menuVersionSelectedHandler}\n          >\n            <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n          </ch-action-menu-render>\n        ) : null}\n      </div>\n    ];\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    this.selectedTabId = event.detail.newSelectedId;\n  };\n\n  #renderDocSectionsSlots = (): JSX.Element => {\n    return this.docsTabModel.map(docSectionTab => {\n      if (docSectionTab.id === this.selectedTabId) {\n        const markdownValue = this.#docSectionIdDescriptionMap.get(\n          docSectionTab.id\n        );\n\n        return (\n          <ch-markdown-viewer\n            ref={(el: HTMLChMarkdownViewerElement) =>\n              (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n            }\n            slot={docSectionTab.id}\n            key={docSectionTab.id}\n            class=\"markdown spacing-body scrollable\"\n            theme=\"components/markdown-viewer\"\n            value={markdownValue}\n          ></ch-markdown-viewer>\n        );\n      }\n    });\n  };\n\n  #returnFormatedId = (rawId: string): string => {\n    return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n  };\n\n  #renderLinkTag = (\n    href: string,\n    label: string,\n    cssClass?: string,\n    chImageSrc?: string\n  ): HTMLAnchorElement => {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        onClick={this.#openLinkHandler(href)}\n        class={cssClass}\n      >\n        {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n        {label}\n      </a>\n    );\n  };\n\n  #renderAsideContent = (): JSX.Element => {\n    return this.data.infoCategories.map(infoCategory => {\n      return (\n        <div class=\"plugin__info-category\">\n          <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n          <ul\n            class={{\n              \"fields__list\": true,\n              \"fields__list--as-tags\": infoCategory.displayAsTags\n            }}\n          >\n            {infoCategory.fields.map(field => {\n              // If the field name isn’t specified, only the value is shown — usually a link.\n              const fieldValue: string | HTMLAnchorElement =\n                typeof field.value === \"string\"\n                  ? (field.value as string)\n                  : this.#renderLinkTag(\n                      (field.value as LinkData).url,\n                      (field.value as LinkData).text,\n                      \"field__link\"\n                    );\n              return (\n                <li class=\"field__li\">\n                  {field.name && !infoCategory.displayAsTags\n                    ? // displaysAsTags forces the items to be displayed as tags\n                      // no span.field__name and span.field__value\n                      [\n                        <span class=\"field__name body-semi-bold-s\">\n                          {field.name}\n                        </span>,\n                        <span class=\"field__value body-regular-s\">\n                          {fieldValue}\n                        </span>\n                      ]\n                    : fieldValue}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    });\n  };\n\n  render() {\n    const renderActionButtons =\n      !this.data.installed ||\n      (this.data.installed && !!this.data.updateVersion);\n\n    const titleLinkDataText = (this.data.name as LinkData).text;\n    const titleLinkDataUrl = (this.data.name as LinkData).url;\n    const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n    const titleText = titleLinkDataText || this.data.name;\n\n    const publisherDataText = (this.data.publisher as LinkData).text;\n    const publisherDataUrl = (this.data.publisher as LinkData).url;\n    const publisherHasLink = publisherDataText && publisherDataUrl;\n    const publisherText = publisherDataText || this.data.publisher;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header class=\"header\">\n            <img\n              class=\"plugin__icon\"\n              src={this.data.iconUrl || EXTENSION_ICON_IMG}\n              alt=\"plugin extension icon\"\n            />\n            <div class=\"plugin__details\">\n              {titleHasLink ? (\n                <h2 class=\"heading-5 has-link\">\n                  {this.#renderLinkTag(\n                    titleLinkDataUrl,\n                    titleText as string,\n                    \"text-underline\"\n                  )}\n                </h2>\n              ) : (\n                <h2 class=\"heading-5\">{titleText}</h2>\n              )}\n              {publisherHasLink ? (\n                this.#renderLinkTag(\n                  publisherDataUrl,\n                  titleText as string,\n                  \"text-underline plugin__publisher tiny-semi-bold-l\",\n                  USER_ICON\n                )\n              ) : (\n                <p class=\"plugin__publisher tiny-semi-bold-l\">\n                  <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n                  {publisherText}\n                </p>\n              )}\n\n              <p class=\"plugin__description\">{this.data.description}</p>\n              <div class=\"buttons-spacer plugin__actions-container\">\n                {renderActionButtons ? (\n                  this.#renderActionButtons()\n                ) : (\n                  // installed and no updates\n                  <p class=\"installed-container subtitle-semi-bold-s\">\n                    <ch-image\n                      src={CHECK_CIRCLE_ICON}\n                      class=\"icon-md\"\n                    ></ch-image>\n                    {this.#componentLocale.actions.installed}\n                  </p>\n                )}\n                {this.data.installed && this.#renderUninstallButton()}\n              </div>\n            </div>\n          </header>\n          <div class=\"main\">\n            {this.docsTabModel.length > 0 && (\n              <ch-tab-render\n                class=\"tab docsTab scrollable\"\n                tabListPosition=\"block-start\"\n                overflow=\"auto\"\n                contain=\"size\"\n                model={this.docsTabModel}\n                onSelectedItemChange={this.#tabSelectionChangedHandler}\n                selectedId={this.selectedTabId}\n              >\n                {this.#renderDocSectionsSlots()}\n              </ch-tab-render>\n            )}\n          </div>\n          <div class=\"aside spacing-body scrollable\">\n            {this.#renderAsideContent()}\n          </div>\n        </section>\n        {/* <slot></slot> */}\n      </Host>\n    );\n  }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n  text: string;\n  url: string;\n};\n\nexport type PluginFieldData = {\n  name?: string;\n  value: string | LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n  name: string;\n  fields: PluginFieldData[];\n  displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n  name: string;\n  content: string;\n};\n\nexport type PluginDetailsData = {\n  id: string;\n  name: string | LinkData;\n  publisher: string | LinkData;\n  installed: boolean;\n  updateVersion?: string;\n  versions: string[];\n  iconUrl: string;\n  description: string;\n  docSections: DocSectionData[];\n  infoCategories: PluginInfoCategoryData[];\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-11a60dbe.entry.js → p-646ddf49.entry.js}

@@ -6,7 +6,7 @@ import { L as o } from "./p-311eedf3.js";
 
 import { c as r } from "./p-9a03ac9f.js";
 
-import { f as n } from "./p-1972b953.js";
+import { f as n } from "./p-8c15538c.js";
 
 import { F as c } from "./p-13feb5cf.js";
 
@@ -522,4 +522,4 @@ L = new WeakMap, K = new WeakMap, V = new WeakMap, A = new WeakMap, B = new Weak
 O.style = d;
 
 export { O as gx_ide_object_selector };
-//# sourceMappingURL=p-11a60dbe.entry.js.map
+//# sourceMappingURL=p-646ddf49.entry.js.map

package/dist/genexus-ide-ui/{p-c8270f7d.js → p-77c2e69d.js}

@@ -4,7 +4,7 @@ import { g as l } from "./p-401bfc97.js";
 
 import { r as a } from "./p-a24571ca.js";
 
-import { f as r } from "./p-1972b953.js";
+import { f as r } from "./p-8c15538c.js";
 
 import { h as t } from "./p-edcd0022.js";
 
@@ -311,4 +311,4 @@ const renderTabularGridColumns = (l, a = false, r, t, s, c) => {
 };
 
 export { s as A, u as C, n as I, c as a, renderTabularGridRows as b, renderTabularGridColumns as r };
-//# sourceMappingURL=p-c8270f7d.js.map
+//# sourceMappingURL=p-77c2e69d.js.map

package/dist/genexus-ide-ui/{p-31c1b79d.entry.js → p-7f091892.entry.js}

@@ -6,7 +6,7 @@ import { c as n } from "./p-9a03ac9f.js";
 
 import { L as l } from "./p-311eedf3.js";
 
-import { f as c } from "./p-1972b953.js";
+import { f as c } from "./p-8c15538c.js";
 
 const d = ":host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content;overflow:auto}.section{display:contents}.header{justify-content:end}.tabular-grid-main{overflow:auto;block-size:100%}.tabular-grid-main ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
 
@@ -219,4 +219,4 @@ M = new WeakMap;
 z.style = d;
 
 export { z as gx_ide_team_dev_update_partial_selection };
-//# sourceMappingURL=p-31c1b79d.entry.js.map
+//# sourceMappingURL=p-7f091892.entry.js.map

package/dist/genexus-ide-ui/{p-1972b953.js → p-8c15538c.js}

@@ -54,36 +54,39 @@ const formatDate = (e, t = "date-time") => {
   const u = String(e.getMonth() + 1).padStart(2, "0");
   const l = String(e.getDate()).padStart(2, "0");
   const d = String(e.getHours()).padStart(2, "0");
-  const f = String(e.getMinutes()).padStart(2, "0");
-  const $ = `${d}:${f}`;
+  const $ = String(e.getMinutes()).padStart(2, "0");
+  const f = `${d}:${$}`;
   if (t === "date-time") {
     o += `  ${e.toLocaleTimeString()}`;
   } else if (t === "date-time-short") {
     // No seconds
-    o = `${i}/${u}/${l} ${$}`;
+    if (c === "es-ES") {
+      o = `${i}-${u}-${l} ${f}`;
+    } else {
+      o = `${u}/${l}/${i} ${f}`;
+    }
   } else {
-    // pretty
     const t = daysFromToday(e);
     const s = new Date;
     const r = s.getFullYear();
     if (isToday(e)) {
-      return `Today ${$}`;
+      return `Today ${f}`;
     } else if (isYesterday(e)) {
-      return `Yesterday ${$}`;
+      return `Yesterday ${f}`;
     } else if (t <= 7) {
       // If one week or less, just show the day of the week, and the time
       const t = n[e.getDay()];
-      return `${t} ${$}`;
+      return `${t} ${f}`;
     } else if (r === i) {
       // If current year, show day number and month name. Example: November 17th
       if (c === "es-ES") {
         o = `${l} de ${e.toLocaleString("es-ES", {
           month: "long"
-        })} ${$}`;
+        })} ${f}`;
       } else {
         o = `${e.toLocaleString("en-US", {
           month: "long"
-        })} ${l} ${$}`;
+        })} ${l} ${f}`;
       }
     } else {
       // Display date as usual
@@ -140,4 +143,4 @@ const renderChCheckboxItems = (n, t, s) => n === null || n === void 0 ? void 0 :
 }));
 
 export { closeOnOutsideClickHandler as c, formatDate as f, hiChar as h, mapOptionsToComboBoxItemModel as m, renderChCheckboxItems as r };
-//# sourceMappingURL=p-1972b953.js.map
+//# sourceMappingURL=p-8c15538c.js.map

package/dist/genexus-ide-ui/p-8c15538c.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["daysOfWeek","daysFromToday","date","today","Date","timeDifference","getTime","daysDifference","Math","floor","isToday","toDateString","isYesterday","yesterday","setDate","getDate","formatDate","type","formattedDate","undefined","dateIsValid","locale","lang","_a","document","getElementsByTagName","getAttribute","valueOf","toLocaleDateString","year","getFullYear","month","String","getMonth","padStart","day","hours","getHours","minutes","getMinutes","time","toLocaleTimeString","daysPassedFromToday","currentYear","getDay","toLocaleString","escapeRegExp","str","replace","hiChar","text","filterValue","escapedFilterValue","re","RegExp","h","innerHTML","closeOnOutsideClickHandler","eventInfo","ref","composedPath","includes","mapOptionsToComboBoxItemModel","options","map","option","value","id","caption","label","renderChCheckboxItems","frontEndCheckboxInputHandler","checkedIds","find","name","class","checkedValue","disabled","onInput","startImgSrc","iconName","key"],"sources":["src/common/helpers.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\n\nimport {\n  ChCheckboxCustomEvent,\n  ComboBoxModel,\n  TreeViewItemModel\n} from \"@genexus/chameleon-controls-library\";\nexport type ChCheckboxArray = HTMLChCheckboxElement[] | null;\n\nimport { GxOption } from \"./types\";\n\nconst daysOfWeek = [\n  \"Sunday\",\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\"\n];\n\n/**\n * @param element an HTMLElement\n * @returns an alphabetically ordered array of all the parts and exportparts the element contains.\n */\nexport const getElementSelectorParts = (element: HTMLElement) => {\n  const queries: string[] = [];\n  const elementParts = element.shadowRoot?.querySelectorAll(`[part]`);\n  const elementExportParts =\n    element.shadowRoot?.querySelectorAll(`[exportparts]`);\n\n  elementParts?.forEach(el => {\n    queries.push(\n      `${element.tagName.toLowerCase()}::part(${el.getAttribute(\"part\")})`\n    );\n  });\n  elementExportParts?.forEach(el => {\n    queries.push(\n      ...[\n        ...el.getAttribute(\"exportparts\").matchAll(/(?:[\\w-]+:)?([\\w-]+)/g)\n      ].map(item => `${element.tagName.toLowerCase()}::part(${item[1]})`)\n    );\n  });\n\n  return queries.sort();\n};\n\n/**\n * @param selector a part selector\n * @returns A reference to the element the part belongs to.\n */\nexport const querySelectorPart = (selector: string) => {\n  const querySelectorDeep = (\n    element: HTMLElement,\n    parts: string\n  ): HTMLElement => {\n    const shadow = element.shadowRoot;\n    const partList = parts.split(\" \");\n\n    const partElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[part~=\"${partName}\"]`).join(\"\")\n    );\n    if (partElement) {\n      return partElement;\n    }\n\n    const exportPartElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[exportparts*=\"${partName}\"]`).join(\"\")\n    );\n    if (exportPartElement) {\n      const exportPartList: string[] = [];\n      const exportparts = exportPartElement.getAttribute(\"exportparts\");\n\n      partList.forEach(partItem => {\n        const exportPartName = exportparts.match(\n          `(?:([\\\\w-]+):)?(${partItem})`\n        )[1];\n        if (exportPartName) {\n          exportPartList.push(exportPartName);\n        }\n      });\n\n      if (partList.length === exportPartList.length) {\n        return querySelectorDeep(exportPartElement, exportPartList.join(\" \"));\n      }\n    }\n\n    return null;\n  };\n\n  const selectorItems = selector.match(\"(.*)::part\\\\(([^)]+)\\\\)\");\n  const entity = selectorItems[1];\n  const partName = selectorItems[2];\n\n  return querySelectorDeep(document.querySelector(entity), partName);\n};\n\nconst daysFromToday = (date: Date): number => {\n  const today = new Date();\n  // To calculate the time difference of two dates\n  const timeDifference = today.getTime() - date.getTime();\n  // To calculate the no. of days between two dates\n  const daysDifference = timeDifference / (1000 * 3600 * 24);\n  return Math.floor(daysDifference);\n};\n\n// - - - - - - - - - - - -\n// Date Functions\n// - - - - - - - - - - - -\n\nconst isToday = (date: Date): boolean => {\n  const today = new Date();\n  if (today.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nconst isYesterday = (date: Date): boolean => {\n  const yesterday = new Date();\n  yesterday.setDate(yesterday.getDate() - 1);\n  if (yesterday.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nexport const formatDate = (\n  date: Date,\n  type: FormatDateType = \"date-time\"\n): string => {\n  let formattedDate;\n  // validate date\n  // undefined or null\n  if (date === undefined || date === null) {\n    return \"\";\n  }\n  // If the date object is invalid it will return 'NaN' on getTime() and NaN is never equal to itself\n  const dateIsValid = date.getTime() === date.getTime();\n  if (!dateIsValid) {\n    return \"Invalid date\";\n  }\n  let locale = \"en-US\";\n  const lang = document\n    .getElementsByTagName(\"html\")[0]\n    .getAttribute(\"lang\")\n    ?.valueOf();\n  if (lang === \"es\") {\n    locale = \"es-ES\";\n  }\n  formattedDate = date.toLocaleDateString(locale);\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  const hours = String(date.getHours()).padStart(2, \"0\");\n  const minutes = String(date.getMinutes()).padStart(2, \"0\");\n  const time = `${hours}:${minutes}`;\n  if (type === \"date-time\") {\n    formattedDate += `  ${date.toLocaleTimeString()}`;\n  } else if (type === \"date-time-short\") {\n    // No seconds\n    if (locale === \"es-ES\") {\n      formattedDate = `${year}-${month}-${day} ${time}`;\n    } else {\n      formattedDate = `${month}/${day}/${year} ${time}`;\n    }\n  } else if (\"pretty\") {\n    const daysPassedFromToday = daysFromToday(date);\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    if (isToday(date)) {\n      return `Today ${time}`;\n    } else if (isYesterday(date)) {\n      return `Yesterday ${time}`;\n    } else if (daysPassedFromToday <= 7) {\n      // If one week or less, just show the day of the week, and the time\n      const day = daysOfWeek[date.getDay()];\n      return `${day} ${time}`;\n    } else if (currentYear === year) {\n      // If current year, show day number and month name. Example: November 17th\n      if (locale === \"es-ES\") {\n        formattedDate = `${day} de ${date.toLocaleString(\"es-ES\", {\n          month: \"long\"\n        })} ${time}`;\n      } else {\n        formattedDate = `${date.toLocaleString(\"en-US\", {\n          month: \"long\"\n        })} ${day} ${time}`;\n      }\n    } else {\n      // Display date as usual\n      formattedDate = formatDate(date, \"date-time-short\");\n    }\n  }\n  return formattedDate;\n};\n\nexport type FormatDateType =\n  | \"date\"\n  | \"date-time\"\n  | \"date-time-short\"\n  | \"pretty\";\n\n// - - - - - - - - - - - -\n// /End of Date Functions\n// - - - - - - - - - - - -\n\n/* Count the total tree nodes (by default it does not count the first level nodes)*/\nexport const countTreeItems = (\n  treeModel: TreeViewItemModel[],\n  children = false\n): number => {\n  let totalNodes = 0;\n  treeModel.forEach(node => {\n    children && totalNodes++;\n    if (node.items) {\n      totalNodes += countTreeItems(node.items, true);\n    }\n  });\n  return totalNodes;\n};\n\n/**\n * @description it evaluates the initial selected combo item\n * @param options an array of GxOption\n * @returns the initial combo value, which in this case is the id\n */\nexport const setInitialComboValue = (options: GxOption[]): string => {\n  const selected = options.find(option => option.selected);\n  if (selected) {\n    return selected.value || selected.id;\n  } else {\n    return options[0].value || options[0].id;\n  }\n};\n\nexport const escapeRegExp = (str: string) => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * @description this function highlights the character(s) that match(es) the filter value.\n * hiChar comes from (hi)light (Char)acters\n * @param text the string to find the filter value on\n * @param filterValue the filter value\n * @returns a span element\n */\nexport const hiChar = function (text: string, filterValue: string) {\n  if (text && filterValue) {\n    const escapedFilterValue = escapeRegExp(filterValue);\n    const re = new RegExp(escapedFilterValue, \"gi\");\n    return (\n      <span\n        innerHTML={text.replace(re, '<span class=\"hiChar\">$&</span>')}\n      ></span>\n    );\n  } else {\n    return text;\n  }\n};\n\nexport const closeOnOutsideClickHandler = (\n  eventInfo: PointerEvent,\n  ref: HTMLElement\n): true | void => {\n  if (!eventInfo.composedPath().includes(ref)) {\n    return true;\n  }\n};\n\nexport const mapOptionsToComboBoxItemModel = (\n  options: GxOption[]\n): ComboBoxModel =>\n  options.map(option => ({\n    value: option.id,\n    caption: option.label\n    // startImgSrc: option.iconName\n  }));\n\nexport const renderChCheckboxItems = (\n  options: GxOption[] | undefined,\n  frontEndCheckboxInputHandler: (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => void,\n  checkedIds: string[]\n): HTMLChCheckboxElement[] => {\n  return options?.map(option => {\n    const value = checkedIds?.find(\n      id => option.value === id || option.id === id\n    );\n    return (\n      <ch-checkbox\n        name={option.name}\n        class=\"checkbox\"\n        checkedValue={option.value || option.id}\n        caption={option.label}\n        disabled={option.disabled}\n        value={value}\n        onInput={frontEndCheckboxInputHandler}\n        startImgSrc={option.iconName}\n        key={option.value || option.id}\n      ></ch-checkbox>\n    );\n  });\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-072419f9.entry.js → p-8c867f9a.entry.js}

@@ -8,7 +8,7 @@ import { c as n } from "./p-9a03ac9f.js";
 
 import { h as r, m as o } from "./p-edcd0022.js";
 
-import { f as d } from "./p-1972b953.js";
+import { f as d } from "./p-8c15538c.js";
 
 const c = ':host{container-type:inline-size;display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{grid-template-areas:"name module-folder" "advanced-filter advanced-filter";grid-template-columns:1fr 1fr;grid-auto-rows:max-content max-content}.name{grid-area:name}.module-folder{grid-area:module-folder}.advanced-filter{grid-area:advanced-filter}.advanced-filter__container{display:grid;grid-auto-rows:max-content}.advanced-filter__first-row{grid-template-columns:1fr 1fr}.advanced-filter__second-row{grid-template-columns:1fr 1fr 1fr}.advanced-filter .all-descendants__modified{display:flex;flex-direction:row;align-items:center;block-size:32px;gap:16px;align-self:self-end}.field-date{grid-template-areas:"label-date-time label-date-time" "input-date-time icon-clear-date-time";grid-template-columns:1fr max-content;column-gap:var(--mer-spacing--2xs)}.label-date-time{display:flex;align-items:center;gap:6px;grid-area:label-date-time}.label-date-time .icon-md{--mer-icon__box--md:16.8px}.input-date-time{block-size:31.98px;grid-area:input-date-time}.icon-clear-date-time{grid-area:icon-clear-date-time}.tabular-grid{overflow:auto;inline-size:100%;border-inline-end:var(--section-common-border)}.tabular-grid.empty::part(main),.tabular-grid.loading::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}.main__files-container{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--mer-spacing--xs);position:relative;z-index:1}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}.tabular-grid ch-tabular-grid-cell:is(:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}.tabular-grid-cell-description{min-inline-size:max-content !important}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}';
 
@@ -613,4 +613,4 @@ G = new WeakMap, J = new WeakMap;
 ne.style = c;
 
 export { ne as gx_ide_ww_files };
-//# sourceMappingURL=p-072419f9.entry.js.map
+//# sourceMappingURL=p-8c867f9a.entry.js.map

package/dist/genexus-ide-ui/{p-d18c51fe.entry.js → p-a7883e6b.entry.js}

@@ -4,7 +4,7 @@ import { L as r } from "./p-311eedf3.js";
 
 import { u as a, a as n } from "./p-c9b9e260.js";
 
-import { A as o, a as l, I as d, r as c, b as h, C as p } from "./p-c8270f7d.js";
+import { A as o, a as l, I as d, r as c, b as h, C as p } from "./p-77c2e69d.js";
 
 import { s as f } from "./p-02fb496a.js";
 
@@ -12,7 +12,7 @@ import "./p-401bfc97.js";
 
 import "./p-a24571ca.js";
 
-import "./p-1972b953.js";
+import "./p-8c15538c.js";
 
 import "./p-edcd0022.js";
 
@@ -688,4 +688,4 @@ H = new WeakMap, U = new WeakMap;
 q.style = m;
 
 export { q as gx_ide_team_dev_commit };
-//# sourceMappingURL=p-d18c51fe.entry.js.map
+//# sourceMappingURL=p-a7883e6b.entry.js.map

package/dist/genexus-ide-ui/{p-7a28161f.entry.js → p-c1ad1cc6.entry.js}

@@ -4,7 +4,7 @@ import { g as o } from "./p-401bfc97.js";
 
 import { L as i } from "./p-311eedf3.js";
 
-import { f as s } from "./p-1972b953.js";
+import { f as s } from "./p-8c15538c.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}';
 
@@ -300,4 +300,4 @@ d = new WeakMap;
 b.style = l;
 
 export { b as gx_ide_dashboard_home };
-//# sourceMappingURL=p-7a28161f.entry.js.map
+//# sourceMappingURL=p-c1ad1cc6.entry.js.map