@genexus/genexus-ide-ui 1.1.47 → 1.1.48

package/dist/esm/gx-ide-dashboard-home.entry.js

@@ -1,175 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-eace714c.js';
-import { g as getIconPath } from './MERCURY_ASSETS-ccf43ae3.js';
-import { L as Locale } from './locale-e5107fad.js';
-import { f as formatDate } from './helpers-b180a2d1.js';
-
-const dashboardHomeCss = ":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}";
-
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _GxIdeDashboardHome_folderIcon;
-const mapStatusToIcons = {
-    "new": "gx-server/new",
-    "modified": "patterns-default-associated/modified",
-    "conflicted": "patterns-default-associated/synchronized",
-    "unmodified": null,
-    "not-connected": null
-};
-const mapStatusToLocale = {
-    "new": "new",
-    "modified": "modified",
-    "conflicted": "conflicted",
-    "unmodified": "unmodified",
-    "not-connected": "notConnected"
-};
-const GxIdeDashboardHome = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        this.renderedFirstTime = false;
-        _GxIdeDashboardHome_folderIcon.set(this, getIconPath({
-            category: "system",
-            name: "folder",
-            colorType: "on-elevation"
-        }));
-        // 7.Listeners
-        // 8.Public Methods API
-        // 9.Local Methods
-        this.evaluateLoader = () => {
-            if (this.recentObjects === undefined) {
-                this.loaderEl.container = this.recentObjectsContainerEl;
-                this.loaderEl.show = true;
-            }
-        };
-        // Kb Name
-        this.handleKbNameChange = async (updatedTitle) => {
-            const updatedKbName = updatedTitle.detail;
-            if (this.renameKBCallback) {
-                const response = this.renameKBCallback(updatedKbName);
-                response.then((result) => {
-                    if (result.success) {
-                        this.kb.name = updatedKbName;
-                    }
-                    this.editValidation(result, this.kbNameEl);
-                });
-            }
-        };
-        // Environment Name
-        this.handleEnvNameChange = async () => {
-            if (this.renameEnvironmentCallback) {
-                const response = this.renameEnvironmentCallback(this.envNameEl.value);
-                response.then((result) => {
-                    if (result.success) {
-                        this.environment.name = this.envNameEl.value;
-                    }
-                    this.editValidation(result, this.envNameEl);
-                });
-            }
-        };
-        this.handleDescriptionChange = async () => {
-            if (this.editDescriptionCallback) {
-                await this.editDescriptionCallback();
-            }
-        };
-        // Recent Objects
-        this.openObject = (id) => {
-            this.openObjectCallback(id);
-        };
-        // Validation
-        this.editValidation = (result, el) => {
-            if (!result.success) {
-                el.validationStatus = "error";
-                el.validationMessage = result.errorMessage;
-            }
-            else {
-                el.validationStatus = "indeterminate";
-                el.validationMessage = "";
-            }
-        };
-        // 10.Render Function
-        this.renderProjectContent = () => {
-            return this.projectDescription ? (h("div", { class: "project-description", innerHTML: this.projectDescription }, this.enableEditDescription ? (h("gxg-button", { type: "secondary-text-icon", icon: "gemini-tools/edit", onClick: this.handleDescriptionChange }, this._componentLocale.edit)) : null)) : null;
-        };
-        this.editingEnvName = false;
-        this.editingProjectDescription = false;
-        this.kb = undefined;
-        this.enableEditKBName = false;
-        this.environment = undefined;
-        this.enableEditEnvironmentName = false;
-        this.projectDescription = undefined;
-        this.enableEditDescription = false;
-        this.recentObjects = undefined;
-        this.renameKBCallback = undefined;
-        this.renameEnvironmentCallback = undefined;
-        this.editDescriptionCallback = undefined;
-        this.openObjectCallback = undefined;
-    }
-    recentObjectsHandler(newRecentObjects) {
-        if (newRecentObjects) {
-            this.loaderEl.show = false;
-        }
-    }
-    // 6.Component Lifecycle Events
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-    }
-    componentDidLoad() {
-        this.evaluateLoader();
-    }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-        }
-    }
-    renderFrontEndTitle() {
-        return this.environment.frontEnd.length <= 1
-            ? this._componentLocale.environment.frontEndLang
-            : this._componentLocale.environment.frontEndLangs;
-    }
-    renderKbDates() {
-        return this.kb.created || this.kb.lastBuild ? (h("gxg-text", { class: "display-inline", type: "text-gray", padding: "s" }, 
-        /* created*/
-        this.kb.created
-            ? `${this._componentLocale.created}: ${formatDate(this.kb.created, "date-time-short")}`
-            : null, this.kb.created && this.kb.lastBuild ? " - " : null, 
-        /* last build date */
-        this.kb.lastBuild
-            ? `${this._componentLocale.lastBuild}: ${formatDate(this.kb.lastBuild, "date-time-short")}`
-            : null)) : null;
-    }
-    // 11.RENDER() MAIN FUNCTION //
-    render() {
-        var _a, _b, _c, _d;
-        return (h(Host, null, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": !this.enableEditKBName, "click-to-edit": true, fluid: true, onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true, ref: el => (this.kbNameEl = el) }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), this.renderKbDates())), h("div", { class: "environment" }, h("gxg-title-editable", { class: "environment-title", value: this.environment.name, "disable-edition": !this.enableEditEnvironmentName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "environment__environments" }, h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "environment-container" }, (_b = (_a = this.environment) === null || _a === void 0 ? void 0 : _a.frontEnd) === null || _b === void 0 ? void 0 : _b.map((obj) => (h("div", { class: "environment-item" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
-                "--mer-text__on-surface": "var(--gray-05);"
-            } }), obj.name))))), h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this._componentLocale.environment.backEnd }, h("div", { class: "environment-container" }, h("div", { class: "environment-item" }, h("gxg-icon", { type: this.environment.backEnd.icon, color: "onbackground", style: {
-                "--mer-text__on-surface": "var(--gray-05);"
-            } }), this.environment.backEnd.name))), h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this._componentLocale.environment.dataStore }, h("div", { class: "environment-container" }, h("div", { class: "environment-item" }, h("gxg-icon", { type: this.environment.dataStore.icon, color: "onbackground", style: {
-                "--mer-text__on-surface": "var(--gray-05);"
-            } }), this.environment.dataStore.name))))), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.project.title, class: "project" }, this.renderProjectContent()), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.recentObjects.title, class: "recent-objects", cardType: "section", noPaddingTop: true, ref: el => (this.recentObjectsContainerEl = el) }, h("div", { class: "recent-objects__container" }, ((_c = this.recentObjects) === null || _c === void 0 ? void 0 : _c.length) === 0 ? (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIconSrc: __classPrivateFieldGet(this, _GxIdeDashboardHome_folderIcon, "f"), stateTitle: this._componentLocale.recentObjects.emptyState.title, stateDescription: this._componentLocale.recentObjects.emptyState.description })) : ((_d = this.recentObjects) === null || _d === void 0 ? void 0 : _d.map((obj) => {
-            const statusLocale = mapStatusToLocale[obj.status];
-            const statusDescription = this._componentLocale.recentObjects.status[statusLocale];
-            return (h("gxg-card", { background: "gray-01", padding: "m", cardType: "article", class: "recent-objects__card", actionable: true, onClick: () => this.openObject(obj.id) }, h("div", { class: "recent-objects__object" }, h("div", { class: "col col-left" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }), h("gxg-text", { type: "text-regular", class: "obj-name" }, obj.name)), h("div", { class: "col col-right" }, h("gxg-text", { italic: true }, statusDescription, obj.status === "modified"
-                ? formatDate(obj.modificationDate, "date")
-                : null), obj.status !== "unmodified" &&
-                obj.status !== "not-connected" ? (h("gxg-icon", { type: mapStatusToIcons[obj.status], color: "auto" })) : null))));
-        })))))), h("gxg-ide-loader", { loaderTitle: this._componentLocale.loader.title, description: this._componentLocale.loader.description, ref: el => (this.loaderEl = el) })));
-    }
-    static get assetsDirs() { return ["gx-ide-assets/dashboard-home"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "recentObjects": ["recentObjectsHandler"]
-    }; }
-};
-_GxIdeDashboardHome_folderIcon = new WeakMap();
-GxIdeDashboardHome.style = dashboardHomeCss;
-
-export { GxIdeDashboardHome as gx_ide_dashboard_home };
-
-//# sourceMappingURL=gx-ide-dashboard-home.entry.js.map

package/dist/esm/gx-ide-dashboard-home.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-dashboard-home.entry.js","mappings":"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","names":[],"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"],"version":3}