npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.8 → 1.0.10 - Mend

@genexus/genexus-ide-ui 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (256) hide show

package/dist/components/gx-ide-start-page.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './gx-ide-empty-state2.js';
 import { d as defineCustomElement$3 } from './ide-loader.js';
 import { d as defineCustomElement$2 } from './recent-news.js';
-const startPageCss = ":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/*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/* - - - - - - - - - - - - - - - - -\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/* - - - - - - - - - - - - - - - - - - - \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.hiChar {\n  color: var(--mer-color__primary-blue--200);\n  filter: brightness(1.3);\n}\n\n:host {\n  overflow: auto;\n  container-type: inline-size;\n  container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n  block-size: 100%;\n  overflow: auto;\n}\n\n@container host (max-width: 768px) {\n  .layout.layout-main {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr 1fr;\n  }\n}\n.panel-recent-kbs {\n  position: relative;\n}\n\n.recent-kbs,\n.recent-news {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  gap: var(--mer-spacing--md);\n  overflow: auto;\n}\n.recent-kbs__header,\n.recent-news__header {\n  display: grid;\n  gap: var(--mer-spacing--md);\n}\n\n.kbs-container {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n  overflow: auto;\n  grid-auto-rows: max-content;\n  container-type: inline-size;\n  container-name: kb-container;\n  animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mer-spacing--lg);\n  container-type: inline-size;\n  container-name: card-kb;\n}\n.card-kb__left-col {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--sm);\n}\n\n@container kb-container (max-width: 360px) {\n  .card-kb {\n    align-items: center;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    justify-content: start;\n  }\n}\ngx-ide-recent-news {\n  overflow: auto;\n}\n\n.panel-recent-news {\n  position: relative;\n}\n\n@keyframes exactMatchBright {\n  100% {\n    filter: brightness(1.25);\n  }\n}\n.exact-match-bright {\n  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n}";
+const startPageCss = ":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/*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/* - - - - - - - - - - - - - - - - -\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/* - - - - - - - - - - - - - - - - - - - \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.hiChar {\n  color: var(--mer-color__primary-blue--200);\n  filter: brightness(1.3);\n}\n\n:host {\n  overflow: auto;\n  container-type: inline-size;\n  container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n  block-size: 100%;\n  overflow: auto;\n}\n\n@container host (max-width: 768px) {\n  .layout.layout-main {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr 1fr;\n  }\n}\n.panel-recent-kbs {\n  position: relative;\n}\n\n.recent-kbs,\n.recent-news {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  gap: var(--mer-spacing--md);\n  overflow: auto;\n}\n.recent-kbs__header,\n.recent-news__header {\n  display: grid;\n  gap: var(--mer-spacing--md);\n}\n\n.kbs-container {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n  overflow: auto;\n  grid-auto-rows: max-content;\n  container-type: inline-size;\n  container-name: kb-container;\n  animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mer-spacing--lg);\n  container-type: inline-size;\n  container-name: card-kb;\n}\n.card-kb__left-col {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--sm);\n}\n\n@container kb-container (max-width: 360px) {\n  .card-kb {\n    align-items: center;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    justify-content: start;\n  }\n}\ngx-ide-recent-news {\n  overflow: auto;\n}\n\n.panel-recent-news {\n  position: relative;\n}\n\n@keyframes exactMatchBright {\n  100% {\n    filter: brightness(1.25);\n  }\n}\n.exact-match-bright {\n  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)

package/dist/components/gx-ide-start-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../global/reset.scss\";\n\n@include hiChar();\n\n:host {\n overflow: auto;\n container-type: inline-size;\n container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n block-size: 100%;\n overflow: auto;\n}\n@container host (max-width: 768px) {\n .layout.layout-main {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n}\n\n// recent kb's\n.panel-recent-kbs {\n position: relative;\n}\n.recent-kbs,\n.recent-news {\n display: grid;\n grid-template-rows: auto 1fr;\n gap: var(--mer-spacing--md);\n overflow: auto;\n\n &__header {\n display: grid;\n gap: var(--mer-spacing--md);\n }\n}\n\n.kbs-container {\n display: grid;\n gap: var(--mer-spacing--xs);\n overflow: auto;\n grid-auto-rows: max-content;\n container-type: inline-size;\n container-name: kb-container;\n animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--lg);\n container-type: inline-size;\n container-name: card-kb;\n\n &__left-col {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n }\n}\n@container kb-container (max-width: 360px) {\n .card-kb {\n align-items: center;\n flex-direction: column;\n gap: var(--mer-spacing--xs);\n justify-content: start;\n }\n}\n\n// recent news\ngx-ide-recent-news {\n overflow: auto;\n}\n.panel-recent-news {\n position: relative;\n}\n\n@keyframes exactMatchBright {\n 100% {\n filter: brightness(1.25);\n }\n}\n.exact-match-bright {\n animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4\n alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n border: var(--mer-border__width--sm) solid\n var(--mer-border-color__on-elevation--01);\n border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { formatDate, hiChar } from \"../../common/helpers\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\"\n];\n\nconst KB_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst FOLDER_ICON = getIconPath({\n category: \"system\",\n name: \"folder\",\n colorType: \"on-elevation\"\n});\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n #recentKbsFilter: HTMLChEditElement;\n #kbsFilterValue: string = \"\";\n #kbRefs: { [key: string]: HTMLButtonElement \| null } = {}; // Object to store kbs refs\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n /\n The condition required to display the kbs filter\n /\n @State() displayKbsFilter: boolean = true;\n\n /\n The condition required to display the news filter\n /\n @State() displayNewsFilter: boolean = false;\n\n /\n The filtered KBs after user input\n /\n @State() filteredKbs: RecentKBData[] = [];\n\n /\n The filtered news after user input\n /\n @State() filteredNews: NewsData[] = [];\n\n /\n True if kbs have been not loaded yet.\n /\n @State() loadingKbs: boolean = true;\n\n /\n A list of recent news\n /\n @State() news: NewsData[];\n @Watch(\"news\")\n watchNews(news: NewsData[]) {\n if (news?.length >= this.newsFilterThreshold) {\n this.displayNewsFilter = true;\n } else {\n this.displayNewsFilter = false;\n }\n }\n\n /\n The filter value for the recent news set by the user input\n /\n @State() newsFilterValue: string;\n\n /\n True if the component has been rendered for the first time.\n /\n @State() renderedFirstTime = false;\n\n /\n Callback invoked to load the news feed (right panel \"Recent News\").\n /\n @Prop() readonly getNewsCallback!: GetNewsCallback;\n\n /\n Ann array of the user's KB's\n /\n @Prop() readonly kbs: RecentKBData[] = [];\n @Watch(\"kbs\")\n kbsChanged(kbs: RecentKBData[]) {\n this.loadingKbs = false;\n this.#filterKbs();\n if (kbs?.length >= this.kbsFilterThreshold) {\n this.displayKbsFilter = true;\n } else {\n this.displayKbsFilter = false;\n }\n }\n\n /\n The minimum number of \"kbs\" that is required to display the kb's filter.\n /\n @Prop() readonly kbsFilterThreshold: number = 6;\n\n /\n The minimum number of \"news\" that is required to display the news's filter.\n /\n @Prop() readonly newsFilterThreshold: number = 6;\n\n /\n Callback invoked to open a knowledge base when the user clicks on a KB card.\n /\n @Prop() readonly openKbCallback!: OpenKbCallback;\n\n /\n Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback!: OpenNewsCallback;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.#recentKbsFilter?.focus();\n }\n\n #evaluateRenderKbs = () => {\n if (this.kbs?.length > 0) {\n return this.#renderKbs();\n } else {\n return (\n <gx-ide-empty-state\n class=\"kbs-empty-state\"\n stateIconSrc={FOLDER_ICON}\n stateTitle={this._componentLocale.emptyState.title}\n stateDescription={this._componentLocale.emptyState.description}\n ></gx-ide-empty-state>\n );\n }\n };\n\n #filterKbs = () => {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name?.toLowerCase().includes(this.#kbsFilterValue)\n );\n };\n\n #getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n return new Promise(async resolve => {\n this.news = await this.getNewsCallback();\n resolve(this.news);\n });\n };\n\n #openKbHandler = async (e: MouseEvent) => {\n const kbId = (e.currentTarget as HTMLElement).id;\n await this.openKbCallback(kbId);\n };\n\n #renderKb = (kb: RecentKBData): HTMLButtonElement \| null => {\n const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n const dateCaption = formattedDate\n ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n : null;\n return (\n <article class=\"display-contents\">\n <button\n class={{\n \"card-small\": true,\n \"card-small--actionable\": true,\n \"card-kb\": true,\n \"exact-match-bright\":\n kb.name?.toLocaleLowerCase() ===\n this.#kbsFilterValue?.toLowerCase()\n }}\n id={kb.id}\n key={kb.id}\n type=\"button\"\n ref={el => (this.#kbRefs[kb.id] = el as HTMLButtonElement)}\n onClick={this.#openKbHandler}\n >\n <div class=\"card-kb__left-col\">\n <ch-image\n src={KB_ICON}\n class=\"icon-md\"\n containerRef={this.#kbRefs[kb.id]}\n ></ch-image>\n <h2 class={config.headingsClasses.cardSmall}>\n {hiChar(kb.name, this.#kbsFilterValue)}\n </h2>\n </div>\n {dateCaption && <div class=\"card-kb__right-col\">{dateCaption}</div>}\n </button>\n </article>\n );\n };\n\n #renderKbs = () => {\n if (this.filteredKbs.length) {\n return (\n <div class=\"kbs-container scrollable\">\n {this.filteredKbs?.map(this.#renderKb)}\n </div>\n );\n }\n return (\n <gx-ide-empty-state\n stateIconSrc={KB_ICON}\n stateTitle={this._componentLocale.recentKbs.noKbsFiltered.title}\n ></gx-ide-empty-state>\n );\n };\n\n #searchKbsInputHandler = (event: Event \| ChEditCustomEvent<InputEvent>) => {\n this.#kbsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n this.#filterKbs();\n };\n\n #searchNewsInputHandler = (event: Event \| ChEditCustomEvent<InputEvent>) => {\n this.newsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n };\n\n render() {\n return (\n <Host class=\"start-page-host\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"layout layout-main layout--cols-2\">\n <div class=\"layout__panel panel-recent-kbs\">\n <section class=\"card-regular recent-kbs\">\n <header class=\"recent-kbs__header\">\n <h2\n class={{\n [config.headingsClasses.cardRegular]: true,\n \"recent-kbs__title\": true\n }}\n >\n {this._componentLocale.recentKbs.title}\n </h2>\n {this.displayKbsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-kbs__name-filter\"\n placeholder={this._componentLocale.recentKbs.placeholder}\n onInput={this.#searchKbsInputHandler}\n ref={el =>\n (this.#recentKbsFilter = el as HTMLChEditElement)\n }\n disabled={!(this.kbs?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n {this.loadingKbs ? (\n <gx-ide-loader\n loaderTitle={this._componentLocale.recentKbs.loader.title}\n description={\n this._componentLocale.recentKbs.loader.description\n }\n show={true}\n ></gx-ide-loader>\n ) : (\n this.#evaluateRenderKbs()\n )}\n </section>\n </div>\n\n <div class=\"layout__panel panel-recent-news\">\n <section class=\"card-regular recent-news\">\n <header class=\"recent-news__header\">\n <h2 class={config.headingsClasses.cardRegular}>\n {this._componentLocale.recentNews.title}\n </h2>\n {this.displayNewsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-news__filter\"\n placeholder={\n this._componentLocale.recentNews.inputPlaceholder\n }\n onInput={\n this.news?.length > 0\n ? this.#searchNewsInputHandler\n : null\n }\n disabled={!(this.news?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n <gx-ide-recent-news\n getNewsCallback={this.#getNewsCallbackRecentNews}\n openNewsCallback={this.openNewsCallback}\n filterValue={this.newsFilterValue}\n ></gx-ide-recent-news>\n </section>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n id: string;\n name: string;\n lastOpenedDate?: Date;\n};\nexport type NewsData = {\n id: string;\n title: string;\n body: string;\n};\n"],"version":3}
1	+ {"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../global/reset.scss\";\n\n@include hiChar();\n\n:host {\n overflow: auto;\n container-type: inline-size;\n container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n block-size: 100%;\n overflow: auto;\n}\n@container host (max-width: 768px) {\n .layout.layout-main {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n}\n\n// recent kb's\n.panel-recent-kbs {\n position: relative;\n}\n.recent-kbs,\n.recent-news {\n display: grid;\n grid-template-rows: auto 1fr;\n gap: var(--mer-spacing--md);\n overflow: auto;\n\n &__header {\n display: grid;\n gap: var(--mer-spacing--md);\n }\n}\n\n.kbs-container {\n display: grid;\n gap: var(--mer-spacing--xs);\n overflow: auto;\n grid-auto-rows: max-content;\n container-type: inline-size;\n container-name: kb-container;\n animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--lg);\n container-type: inline-size;\n container-name: card-kb;\n\n &__left-col {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n }\n}\n@container kb-container (max-width: 360px) {\n .card-kb {\n align-items: center;\n flex-direction: column;\n gap: var(--mer-spacing--xs);\n justify-content: start;\n }\n}\n\n// recent news\ngx-ide-recent-news {\n overflow: auto;\n}\n.panel-recent-news {\n position: relative;\n}\n\n@keyframes exactMatchBright {\n 100% {\n filter: brightness(1.25);\n }\n}\n.exact-match-bright {\n animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4\n alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n border: var(--mer-border__width--sm) solid\n var(--mer-border-color__on-elevation--01);\n border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { formatDate, hiChar } from \"../../common/helpers\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\"\n];\n\nconst KB_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst FOLDER_ICON = getIconPath({\n category: \"system\",\n name: \"folder\",\n colorType: \"on-elevation\"\n});\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n #recentKbsFilter: HTMLChEditElement;\n #kbsFilterValue: string = \"\";\n #kbRefs: { [key: string]: HTMLButtonElement \| null } = {}; // Object to store kbs refs\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n /\n The condition required to display the kbs filter\n /\n @State() displayKbsFilter: boolean = true;\n\n /\n The condition required to display the news filter\n /\n @State() displayNewsFilter: boolean = false;\n\n /\n The filtered KBs after user input\n /\n @State() filteredKbs: RecentKBData[] = [];\n\n /\n The filtered news after user input\n /\n @State() filteredNews: NewsData[] = [];\n\n /\n True if kbs have been not loaded yet.\n /\n @State() loadingKbs: boolean = true;\n\n /\n A list of recent news\n /\n @State() news: NewsData[];\n @Watch(\"news\")\n watchNews(news: NewsData[]) {\n if (news?.length >= this.newsFilterThreshold) {\n this.displayNewsFilter = true;\n } else {\n this.displayNewsFilter = false;\n }\n }\n\n /\n The filter value for the recent news set by the user input\n /\n @State() newsFilterValue: string;\n\n /\n True if the component has been rendered for the first time.\n /\n @State() renderedFirstTime = false;\n\n /\n Callback invoked to load the news feed (right panel \"Recent News\").\n /\n @Prop() readonly getNewsCallback!: GetNewsCallback;\n\n /\n Ann array of the user's KB's\n /\n @Prop() readonly kbs: RecentKBData[] = [];\n @Watch(\"kbs\")\n kbsChanged(kbs: RecentKBData[]) {\n this.loadingKbs = false;\n this.#filterKbs();\n if (kbs?.length >= this.kbsFilterThreshold) {\n this.displayKbsFilter = true;\n } else {\n this.displayKbsFilter = false;\n }\n }\n\n /\n The minimum number of \"kbs\" that is required to display the kb's filter.\n /\n @Prop() readonly kbsFilterThreshold: number = 6;\n\n /\n The minimum number of \"news\" that is required to display the news's filter.\n /\n @Prop() readonly newsFilterThreshold: number = 6;\n\n /\n Callback invoked to open a knowledge base when the user clicks on a KB card.\n /\n @Prop() readonly openKbCallback!: OpenKbCallback;\n\n /\n Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback!: OpenNewsCallback;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.#recentKbsFilter?.focus();\n }\n\n #evaluateRenderKbs = () => {\n if (this.kbs?.length > 0) {\n return this.#renderKbs();\n } else {\n return (\n <gx-ide-empty-state\n class=\"kbs-empty-state\"\n stateIconSrc={FOLDER_ICON}\n stateTitle={this._componentLocale.emptyState.title}\n stateDescription={this._componentLocale.emptyState.description}\n ></gx-ide-empty-state>\n );\n }\n };\n\n #filterKbs = () => {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name?.toLowerCase().includes(this.#kbsFilterValue)\n );\n };\n\n #getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n return new Promise(async resolve => {\n this.news = await this.getNewsCallback();\n resolve(this.news);\n });\n };\n\n #openKbHandler = async (e: MouseEvent) => {\n const kbId = (e.currentTarget as HTMLElement).id;\n await this.openKbCallback(kbId);\n };\n\n #renderKb = (kb: RecentKBData): HTMLButtonElement \| null => {\n const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n const dateCaption = formattedDate\n ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n : null;\n return (\n <article class=\"display-contents\">\n <button\n class={{\n \"card-small\": true,\n \"card-small--actionable\": true,\n \"card-kb\": true,\n \"exact-match-bright\":\n kb.name?.toLocaleLowerCase() ===\n this.#kbsFilterValue?.toLowerCase()\n }}\n id={kb.id}\n key={kb.id}\n type=\"button\"\n ref={el => (this.#kbRefs[kb.id] = el as HTMLButtonElement)}\n onClick={this.#openKbHandler}\n >\n <div class=\"card-kb__left-col\">\n <ch-image\n src={KB_ICON}\n class=\"icon-md\"\n containerRef={this.#kbRefs[kb.id]}\n ></ch-image>\n <h2 class={config.headingsClasses.cardSmall}>\n {hiChar(kb.name, this.#kbsFilterValue)}\n </h2>\n </div>\n {dateCaption && <div class=\"card-kb__right-col\">{dateCaption}</div>}\n </button>\n </article>\n );\n };\n\n #renderKbs = () => {\n if (this.filteredKbs.length) {\n return (\n <div class=\"kbs-container scrollable\">\n {this.filteredKbs?.map(this.#renderKb)}\n </div>\n );\n }\n return (\n <gx-ide-empty-state\n stateIconSrc={KB_ICON}\n stateTitle={this._componentLocale.recentKbs.noKbsFiltered.title}\n ></gx-ide-empty-state>\n );\n };\n\n #searchKbsInputHandler = (event: Event \| ChEditCustomEvent<InputEvent>) => {\n this.#kbsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n this.#filterKbs();\n };\n\n #searchNewsInputHandler = (event: Event \| ChEditCustomEvent<InputEvent>) => {\n this.newsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n };\n\n render() {\n return (\n <Host class=\"start-page-host\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"layout layout-main layout--cols-2\">\n <div class=\"layout__panel panel-recent-kbs\">\n <section class=\"card-regular recent-kbs\">\n <header class=\"recent-kbs__header\">\n <h2\n class={{\n [config.headingsClasses.cardRegular]: true,\n \"recent-kbs__title\": true\n }}\n >\n {this._componentLocale.recentKbs.title}\n </h2>\n {this.displayKbsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-kbs__name-filter\"\n placeholder={this._componentLocale.recentKbs.placeholder}\n onInput={this.#searchKbsInputHandler}\n ref={el =>\n (this.#recentKbsFilter = el as HTMLChEditElement)\n }\n disabled={!(this.kbs?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n {this.loadingKbs ? (\n <gx-ide-loader\n loaderTitle={this._componentLocale.recentKbs.loader.title}\n description={\n this._componentLocale.recentKbs.loader.description\n }\n show={true}\n ></gx-ide-loader>\n ) : (\n this.#evaluateRenderKbs()\n )}\n </section>\n </div>\n\n <div class=\"layout__panel panel-recent-news\">\n <section class=\"card-regular recent-news\">\n <header class=\"recent-news__header\">\n <h2 class={config.headingsClasses.cardRegular}>\n {this._componentLocale.recentNews.title}\n </h2>\n {this.displayNewsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-news__filter\"\n placeholder={\n this._componentLocale.recentNews.inputPlaceholder\n }\n onInput={\n this.news?.length > 0\n ? this.#searchNewsInputHandler\n : null\n }\n disabled={!(this.news?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n <gx-ide-recent-news\n getNewsCallback={this.#getNewsCallbackRecentNews}\n openNewsCallback={this.openNewsCallback}\n filterValue={this.newsFilterValue}\n ></gx-ide-recent-news>\n </section>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n id: string;\n name: string;\n lastOpenedDate?: Date;\n};\nexport type NewsData = {\n id: string;\n title: string;\n body: string;\n};\n"],"version":3}

package/dist/components/gx-ide-test.js CHANGED Viewed

@@ -2,16 +2,31 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const testCss = ":host {\n  display: block;\n}\n\nsection {\n  border-top: 1px solid #ccc;\n  margin-top: 300px;\n  container-name: section;\n  container-type: inline-size;\n}\n\ngxg-combo-box {\n  opacity: 1;\n}\n\n@container section (width < 400px) {\n  gxg-combo-box {\n    opacity: 0.5;\n  }\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 __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeTest_listBoxRef, _GxIdeTest_actionListModelOne, _GxIdeTest_actionListModelTwo, _GxIdeTest_modelOneButtonHandler, _GxIdeTest_modelTwoButtonHandler;
 const CSS_BUNDLES = [
     "resets/box-sizing",
     // "utils/form",
     // "utils/layout",
     // "utils/typography",
-    // "components/button",
+    "components/button",
     // "components/checkbox",
-    "components/combo-box",
-    "components/edit",
-    "components/tabular-grid"
+    "components/list-box"
 ];
 const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeTest extends HTMLElement {
     constructor() {
@@ -19,114 +34,49 @@ const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeTest extends HTM
         this.__registerHost();
         this.__attachShadow();
         /* THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT.*/
-        this.comboBoxModel = [
+        _GxIdeTest_listBoxRef.set(this, void 0);
+        _GxIdeTest_actionListModelOne.set(this, [
             {
-                value: "Value 1",
-                caption: "Label for the value 1"
+                id: "id-1-1",
+                caption: "Item 1-1",
+                type: "actionable"
             },
             {
-                value: "Value 2",
-                caption: "Label for the value 222",
-                items: [
-                    {
-                        value: "Value 2.1",
-                        caption: "Label for the value 2.1"
-                    },
-                    {
-                        value: "Value 2.2",
-                        caption: "Label for the value 2.2"
-                    }
-                ]
+                id: "id-1-2",
+                caption: "Item 1-2",
+                type: "actionable"
             },
             {
-                value: "Value 3",
-                caption: "Label for the value 3",
-                disabled: true
-            },
-            { value: "Value 4", caption: "Label for the value 4" },
-            {
-                value: "Value 5",
-                caption: "Label for the value 5",
-                disabled: true,
-                expandable: true,
-                items: [
-                    {
-                        value: "Value 5.1",
-                        caption: "Label for the value 5.1"
-                    },
-                    {
-                        value: "Value 5.2",
-                        caption: "Label for the value 5.2"
-                    },
-                    {
-                        value: "Value 5.3",
-                        caption: "Label for the value 5.3",
-                        disabled: false
-                    },
-                    {
-                        value: "Value 5.4",
-                        caption: "Label for the value 5.4"
-                    }
-                ]
-            },
+                id: "id-1-3",
+                caption: "Item 1-3",
+                type: "actionable"
+            }
+        ]);
+        _GxIdeTest_actionListModelTwo.set(this, [
             {
-                value: "Value 6",
-                caption: "Label for the value 6",
-                expandable: true,
-                expanded: true,
-                items: [
-                    {
-                        value: "Value 6.1",
-                        caption: "Label for the value 6.1",
-                        disabled: true
-                    },
-                    {
-                        value: "Value 6.2",
-                        caption: "Label for the value 6.2",
-                        disabled: true
-                    },
-                    {
-                        value: "Value 6.3",
-                        caption: "Label for the value 6.3",
-                        disabled: false
-                    },
-                    {
-                        value: "Value 6.4",
-                        caption: "Label for the value 6.4"
-                    }
-                ]
+                id: "id-2-1",
+                caption: "Item 2-1",
+                type: "actionable"
             },
             {
-                value: "Value 7",
-                caption: "Label for the value 7",
-                disabled: true
+                id: "id-2-2",
+                caption: "Item 2-2",
+                type: "actionable"
             },
-            { value: "Value 8", caption: "Label for the value 8" },
             {
-                value: "Value 9",
-                caption: "Label for the value 9",
-                expandable: true,
-                items: [
-                    {
-                        value: "Value 9.1",
-                        caption: "Label for the value 9.1"
-                    },
-                    {
-                        value: "Value 9.2",
-                        caption: "Label for the value 9.2"
-                    },
-                    {
-                        value: "Value 9.3",
-                        caption: "Label for the value 9.3",
-                        disabled: false
-                    },
-                    {
-                        value: "Value 9.4",
-                        caption: "Label for the value 9.4"
-                    }
-                ]
+                id: "id-2-3",
+                caption: "Item 2-3",
+                type: "actionable"
             }
-        ];
+        ]);
+        _GxIdeTest_modelOneButtonHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeTest_listBoxRef, "f").model = [];
+            __classPrivateFieldGet(this, _GxIdeTest_listBoxRef, "f").model = __classPrivateFieldGet(this, _GxIdeTest_actionListModelOne, "f");
+        });
+        _GxIdeTest_modelTwoButtonHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeTest_listBoxRef, "f").model = [];
+            __classPrivateFieldGet(this, _GxIdeTest_listBoxRef, "f").model = __classPrivateFieldGet(this, _GxIdeTest_actionListModelTwo, "f");
+        });
         this.name = undefined;
         this.filterOn = true;
     }
@@ -139,13 +89,14 @@ const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeTest extends HTM
     // 9.LOCAL METHODS //
     // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("ch-tabular-grid", { class: "property-grid" }, h("ch-tabular-grid-columnset", { class: "property-grid-column-set" }, h("ch-tabular-grid-column", { "column-name": "Property", size: "50%", class: "property-grid-column" }), h("ch-tabular-grid-column", { "column-name": "Value", size: "minmax(auto, calc(100% - var(--ch-tabular-grid-column-1-width)))", class: "property-grid-column" })), h("ch-tabular-grid-row", { class: "property-grid-row property-grid-property-readonly" }, h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Name: Read Only Property Name: Read Only Property Name: Read Only Property Name: Read Only Property Name: Read Only"), h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Value: Enabled Property Value: Enabled Property Value: Enabled Property Value: Enabled Property Value: Enabled")), h("ch-tabular-grid-row", { class: "property-grid-row property-grid-value-readonly" }, h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Name: Enabled Property Name: Enabled Property Name: Enabled Property Name: Enabled Property Name: Enabled"), h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Value: Read Only Property Value: Read Only Property Value: Read Only Property Value: Read Only Property Value: Read Only")), h("ch-tabular-grid-row", { class: "property-grid-row property-grid-value-edited" }, h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Name: Enabled Property Name: Enabled Property Name: Enabled Property Name: Enabled"), h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Property Value: Edited Property Value: Edited Property Value: Edited Property Value: Edited Property Value: Edited"))), h("hr", null), h("ch-tabular-grid", { class: "property-grid" }, h("ch-tabular-grid-columnset", { class: "property-grid-column-set" }, h("ch-tabular-grid-column", { "column-name": "Property", size: "50%", class: "property-grid-column" }), h("ch-tabular-grid-column", { "column-name": "Value", size: "minmax(auto, calc(100% - var(--ch-tabular-grid-column-1-width)))", class: "property-grid-column" })), h("ch-tabular-grid-row", { class: "property-grid-row property-grid-value-editing" }, h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda dicta suscipit illo sit doloribus quos, ipsa voluptatum minus numquam fugit explicabo corporis non hic earum deserunt, ipsum expedita corrupti? Similique?"), h("ch-tabular-grid-cell", { class: "property-grid-cell" }, h("ch-combo-box-render", { "accessible-name": "Colors", id: "combo-box-1", class: "combo-box", model: this.comboBoxModel, placeholder: "placeholder" }))), h("ch-tabular-grid-row", { class: "property-grid-row property-grid-value-editing" }, h("ch-tabular-grid-cell", { class: "property-grid-cell" }, "Form Input"), h("ch-tabular-grid-cell", { class: "property-grid-cell" }, h("ch-edit", { class: "form-input", value: "Pat Taylor" }))))));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("ch-action-list-render", { class: "list-box", selection: "single", model: __classPrivateFieldGet(this, _GxIdeTest_actionListModelOne, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeTest_listBoxRef, el, "f")) }), h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeTest_modelOneButtonHandler, "f") }, "set model one"), h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeTest_modelTwoButtonHandler, "f") }, "set model two")));
     }
     static get style() { return testCss; }
 }, [1, "gx-ide-test", {
         "name": [1],
         "filterOn": [32]
     }]);
+_GxIdeTest_listBoxRef = new WeakMap(), _GxIdeTest_actionListModelOne = new WeakMap(), _GxIdeTest_actionListModelTwo = new WeakMap(), _GxIdeTest_modelOneButtonHandler = new WeakMap(), _GxIdeTest_modelTwoButtonHandler = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/gx-ide-test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-test.js","mappings":"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","names":["GxIdeTest"],"sources":["src/components/_test/test.scss?tag=gx-ide-test&encapsulation=shadow","src/components/_test/test.tsx"],"sourcesContent":[":host {\n display: block;\n}\nsection {\n border-top: 1px solid #ccc;\n margin-top: 300px;\n container-name: section;\n container-type: inline-size;\n}\ngxg-combo-box {\n opacity: 1;\n}\n@container section (width < 400px) {\n gxg-combo-box {\n opacity: 0.5;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, State } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n // \"utils/form\",\n // \"utils/layout\",\n // \"utils/typography\",\n // \"components/button\",\n // \"components/checkbox\",\n \"components/combo-box\",\n \"components/edit\",\n \"components/tabular-grid\"\n];\n\n@Component({\n tag: \"gx-ide-test\",\n styleUrl: \"test.scss\",\n shadow: true\n})\nexport class GxIdeTest {\n / THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT./\n\n private comboBoxModel = [\n {\n value: \"Value 1\",\n caption: \"Label for the value 1\"\n },\n {\n value: \"Value 2\",\n caption: \"Label for the value 222\",\n items: [\n {\n value: \"Value 2.1\",\n caption: \"Label for the value 2.1\"\n },\n {\n value: \"Value 2.2\",\n caption: \"Label for the value 2.2\"\n }\n ]\n },\n {\n value: \"Value 3\",\n caption: \"Label for the value 3\",\n disabled: true\n },\n { value: \"Value 4\", caption: \"Label for the value 4\" },\n {\n value: \"Value 5\",\n caption: \"Label for the value 5\",\n disabled: true,\n expandable: true,\n items: [\n {\n value: \"Value 5.1\",\n caption: \"Label for the value 5.1\"\n },\n {\n value: \"Value 5.2\",\n caption: \"Label for the value 5.2\"\n },\n {\n value: \"Value 5.3\",\n caption: \"Label for the value 5.3\",\n disabled: false\n },\n {\n value: \"Value 5.4\",\n caption: \"Label for the value 5.4\"\n }\n ]\n },\n {\n value: \"Value 6\",\n caption: \"Label for the value 6\",\n expandable: true,\n expanded: true,\n items: [\n {\n value: \"Value 6.1\",\n caption: \"Label for the value 6.1\",\n disabled: true\n },\n {\n value: \"Value 6.2\",\n caption: \"Label for the value 6.2\",\n disabled: true\n },\n {\n value: \"Value 6.3\",\n caption: \"Label for the value 6.3\",\n disabled: false\n },\n {\n value: \"Value 6.4\",\n caption: \"Label for the value 6.4\"\n }\n ]\n },\n {\n value: \"Value 7\",\n caption: \"Label for the value 7\",\n disabled: true\n },\n { value: \"Value 8\", caption: \"Label for the value 8\" },\n {\n value: \"Value 9\",\n caption: \"Label for the value 9\",\n expandable: true,\n items: [\n {\n value: \"Value 9.1\",\n caption: \"Label for the value 9.1\"\n },\n {\n value: \"Value 9.2\",\n caption: \"Label for the value 9.2\"\n },\n {\n value: \"Value 9.3\",\n caption: \"Label for the value 9.3\",\n disabled: false\n },\n {\n value: \"Value 9.4\",\n caption: \"Label for the value 9.4\"\n }\n ]\n }\n ];\n // 1.OWN PROPERTIES //\n\n /\n The component name\n */\n @Prop() readonly name: string;\n\n // 2. REFERENCE TO ELEMENTS //\n\n // 3.STATE() VARIABLES //\n\n @State() filterOn: boolean = true;\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n componentWillLoad() {}\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n <ch-tabular-grid class=\"property-grid\">\n <ch-tabular-grid-columnset class=\"property-grid-column-set\">\n <ch-tabular-grid-column\n column-name=\"Property\"\n size=\"50%\"\n class=\"property-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name=\"Value\"\n size=\"minmax(auto, calc(100% - var(--ch-tabular-grid-column-1-width)))\"\n class=\"property-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n <ch-tabular-grid-row class=\"property-grid-row property-grid-property-readonly\">\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Name: Read Only Property Name: Read Only Property Name:\n Read Only Property Name: Read Only Property Name: Read Only\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Value: Enabled Property Value: Enabled Property Value:\n Enabled Property Value: Enabled Property Value: Enabled\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n\n <ch-tabular-grid-row class=\"property-grid-row property-grid-value-readonly\">\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Name: Enabled Property Name: Enabled Property Name:\n Enabled Property Name: Enabled Property Name: Enabled\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Value: Read Only Property Value: Read Only Property\n Value: Read Only Property Value: Read Only Property Value: Read\n Only\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n\n <ch-tabular-grid-row class=\"property-grid-row property-grid-value-edited\">\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Name: Enabled Property Name: Enabled Property Name:\n Enabled Property Name: Enabled\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Property Value: Edited Property Value: Edited Property Value:\n Edited Property Value: Edited Property Value: Edited\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n </ch-tabular-grid>\n <hr />\n <ch-tabular-grid class=\"property-grid\">\n <ch-tabular-grid-columnset class=\"property-grid-column-set\">\n <ch-tabular-grid-column\n column-name=\"Property\"\n size=\"50%\"\n class=\"property-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name=\"Value\"\n size=\"minmax(auto, calc(100% - var(--ch-tabular-grid-column-1-width)))\"\n class=\"property-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n <ch-tabular-grid-row class=\"property-grid-row property-grid-value-editing\">\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n Assumenda dicta suscipit illo sit doloribus quos, ipsa voluptatum\n minus numquam fugit explicabo corporis non hic earum deserunt,\n ipsum expedita corrupti? Similique?\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n <ch-combo-box-render\n accessible-name=\"Colors\"\n id=\"combo-box-1\"\n class=\"combo-box\"\n model={this.comboBoxModel}\n placeholder=\"placeholder\"\n ></ch-combo-box-render>\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n <ch-tabular-grid-row class=\"property-grid-row property-grid-value-editing\">\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n Form Input\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"property-grid-cell\">\n <ch-edit class=\"form-input\" value=\"Pat Taylor\"></ch-edit>\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n </ch-tabular-grid>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"gx-ide-test.js","mappings":";;AAAA,MAAM,OAAO,GAAG,2RAA2R;;;;;;;;;;;;;;;;;;;ACM3S,MAAM,WAAW,GAAmB;IAClC,mBAAmB;;;;IAInB,mBAAmB;;IAEnB,qBAAqB;CACtB,CAAC;MAOWA,WAAS;;;;;;QAEpB,wCAA4C;QAC5C,wCAA6C;YAC3C;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;SACF,EAAC;QAEF,wCAA6C;YAC3C;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,OAAO,EAAE,UAAU;gBACnB,IAAI,EAAE,YAAY;aACnB;SACF,EAAC;QAEF,2CAAyB;YACvB,uBAAA,IAAI,6BAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC5B,uBAAA,IAAI,6BAAY,CAAC,KAAK,GAAG,uBAAA,IAAI,qCAAoB,CAAC;SACnD,EAAC;QAEF,2CAAyB;YACvB,uBAAA,IAAI,6BAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC5B,uBAAA,IAAI,6BAAY,CAAC,KAAK,GAAG,uBAAA,IAAI,qCAAoB,CAAC;SACnD,EAAC;;wBAa2B,IAAI;;;;IAMjC,iBAAiB,MAAK;;;;;;IAYtB,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EAEzC,6BACE,KAAK,EAAC,UAAU,EAChB,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE,uBAAA,IAAI,qCAAoB,EAC/B,GAAG,EAAE,EAAE,KAAK,uBAAA,IAAI,yBAAe,EAAmC,MAAA,CAAC,GAC5C,EACzB,cAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,uBAAA,IAAI,wCAAuB,oBAE1D,EACT,cAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,uBAAA,IAAI,wCAAuB,oBAE1D,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxIdeTest"],"sources":["src/components/_test/test.scss?tag=gx-ide-test&encapsulation=shadow","src/components/_test/test.tsx"],"sourcesContent":[":host {\n display: block;\n}\nsection {\n border-top: 1px solid #ccc;\n margin-top: 300px;\n container-name: section;\n container-type: inline-size;\n}\ngxg-combo-box {\n opacity: 1;\n}\n@container section (width < 400px) {\n gxg-combo-box {\n opacity: 0.5;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, State } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ActionListItemModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n // \"utils/form\",\n // \"utils/layout\",\n // \"utils/typography\",\n \"components/button\",\n // \"components/checkbox\",\n \"components/list-box\"\n];\n\n@Component({\n tag: \"gx-ide-test\",\n styleUrl: \"test.scss\",\n shadow: true\n})\nexport class GxIdeTest {\n / THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT./\n #listBoxRef!: HTMLChActionListRenderElement;\n #actionListModelOne: ActionListItemModel[] = [\n {\n id: \"id-1-1\",\n caption: \"Item 1-1\",\n type: \"actionable\"\n },\n {\n id: \"id-1-2\",\n caption: \"Item 1-2\",\n type: \"actionable\"\n },\n {\n id: \"id-1-3\",\n caption: \"Item 1-3\",\n type: \"actionable\"\n }\n ];\n\n #actionListModelTwo: ActionListItemModel[] = [\n {\n id: \"id-2-1\",\n caption: \"Item 2-1\",\n type: \"actionable\"\n },\n {\n id: \"id-2-2\",\n caption: \"Item 2-2\",\n type: \"actionable\"\n },\n {\n id: \"id-2-3\",\n caption: \"Item 2-3\",\n type: \"actionable\"\n }\n ];\n\n #modelOneButtonHandler = () => {\n this.#listBoxRef.model = [];\n this.#listBoxRef.model = this.#actionListModelOne;\n };\n\n #modelTwoButtonHandler = () => {\n this.#listBoxRef.model = [];\n this.#listBoxRef.model = this.#actionListModelTwo;\n };\n\n // 1.OWN PROPERTIES //\n\n /\n The component name\n */\n @Prop() readonly name: string;\n\n // 2. REFERENCE TO ELEMENTS //\n\n // 3.STATE() VARIABLES //\n\n @State() filterOn: boolean = true;\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n componentWillLoad() {}\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n <ch-action-list-render\n class=\"list-box\"\n selection=\"single\"\n model={this.#actionListModelOne}\n ref={el => (this.#listBoxRef = el as HTMLChActionListRenderElement)}\n ></ch-action-list-render>\n <button class=\"button-primary\" onClick={this.#modelOneButtonHandler}>\n set model one\n </button>\n <button class=\"button-primary\" onClick={this.#modelTwoButtonHandler}>\n set model two\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{common-31ac2b05.js → common-339b4376.js} RENAMED Viewed

@@ -55,29 +55,25 @@ const renderModuleDataProperties = (options) => {
     return null;
 };
 /**
- *
  * @param gxOptions An array of GxOptions's
- * @returns The first option in the array that is 'selected'. If no one found it returns null.
+ * @returns The value of the selected item, or the first item, if no one is selected.
  */
-const getSelectedGxOption = (gxOptions, onlyId = true) => {
-    if ((gxOptions === null || gxOptions === void 0 ? void 0 : gxOptions.length) > 0) {
-        let found = null;
-        for (let i = 0; i < gxOptions.length; i++) {
-            if (gxOptions[i].selected) {
-                found = gxOptions[i];
-                break;
-            }
-        }
-        if (found && onlyId) {
-            return found.id;
-        }
-        else if (!found && onlyId) {
-            return gxOptions[0].id;
+const getSelectedItem = (gxOptions) => {
+    let found = undefined;
+    for (let i = 0; i < gxOptions.length; i++) {
+        if (gxOptions[i].selected) {
+            found = gxOptions[i];
+            break;
         }
-        return found;
+    }
+    if (found) {
+        return found.id;
+    }
+    else {
+        return gxOptions[0].id;
     }
 };
-export { renderModuleDataProperties as a, getSelectedGxOption as g, renderFormItems as r };
+export { renderModuleDataProperties as a, getSelectedItem as g, renderFormItems as r };
-//# sourceMappingURL=common-31ac2b05.js.map
+//# sourceMappingURL=common-339b4376.js.map

package/dist/esm/common-339b4376.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"common-339b4376.js","mappings":"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","names":[],"sources":["src/common/common.tsx"],"sourcesContent":["/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { GxgFormItemsArray, GxOption } from \"./types\";\nimport { ModulePropertyData } from \"../components/modules/types\";\nexport const renderFormItems = (\n componentType:\n | \"gxg-combo-box-item\"\n | \"gxg-form-checkbox\"\n | \"gxg-form-radio\" = \"gxg-combo-box-item\",\n options: Array<GxOption>,\n group = \"undefined-group\",\n callback?: any\n): GxgFormItemsArray => {\n if (options.length) {\n const items: GxgFormItemsArray = [];\n options.forEach(option => {\n let item;\n switch (componentType) {\n case \"gxg-form-checkbox\":\n item = (\n <gxg-form-checkbox\n checkboxId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n onChange={callback ? callback : null}\n iconName={option.iconName}\n part={`${group}-${option.id}`}\n ></gxg-form-checkbox>\n );\n items.push(item);\n break;\n case \"gxg-combo-box-item\":\n item = (\n <gxg-combo-box-item\n value={option.id}\n icon={option.iconName}\n part={`${group}-${option.id}`}\n >\n {option.label}\n </gxg-combo-box-item>\n );\n items.push(item);\n break;\n case \"gxg-form-radio\":\n item = (\n <gxg-form-radio\n radioId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n name={group}\n part={`${group}-${option.id}`}\n ></gxg-form-radio>\n );\n items.push(item);\n break;\n default:\n break;\n }\n });\n return items;\n }\n return null;\n};\n\nexport const renderModuleDataProperties = (\n options: Array<ModulePropertyData>\n): ModulePropertyData[] => {\n if (options.length) {\n const items: ModulePropertyData[] = [];\n\n options.forEach(option => {\n if (Array.isArray(option.value)) {\n const item = (\n <div class=\"md-property__list\">\n <p class=\"md-property__key\">{option.name} :</p>\n <ul>\n {option.value.map(subItem => {\n return <li>{subItem}</li>;\n })}\n </ul>\n </div>\n );\n items.push(item);\n } else {\n const item = (\n <div\n class={\n option.inline\n ? \"md-property md-property--inline\"\n : \"md-property--block\"\n }\n >\n <p class=\"md-property__key\">{option.name} :</p>\n <p class=\"md-property__value\">{option.value}</p>\n </div>\n );\n items.push(item);\n }\n });\n\n return items;\n }\n return null;\n};\n\n/**\n * @param gxOptions An array of GxOptions's\n * @returns The first option in the array that is 'selected'. If no one found it returns null.\n */\nexport const getSelectedGxOption = (\n gxOptions: GxOption[],\n onlyId = true\n): GxOption | string | void => {\n if (gxOptions?.length > 0) {\n let found = null;\n for (let i = 0; i < gxOptions.length; i++) {\n if (gxOptions[i].selected) {\n found = gxOptions[i];\n break;\n }\n }\n if (found && onlyId) {\n return found.id;\n } else if (!found && onlyId) {\n return gxOptions[0].id;\n }\n return found;\n }\n};\n\n/**\n * @param gxOptions An array of GxOptions's\n * @returns The value of the selected item, or the first item, if no one is selected.\n */\nexport const getSelectedItem = (gxOptions: GxOption[]): string => {\n let found = undefined;\n for (let i = 0; i < gxOptions.length; i++) {\n if (gxOptions[i].selected) {\n found = gxOptions[i];\n break;\n }\n }\n if (found) {\n return found.id;\n } else {\n return gxOptions[0].id;\n }\n};\n\nexport const getSelectedItem2 = (\n gxOptions: GxOption[] | undefined\n): string | undefined =>\n gxOptions\n ? (gxOptions.find(item => item.selected) ?? gxOptions[0]).id\n : undefined;\n"],"version":3}

package/dist/esm/{config-084ee328.js → config-ed1f26d7.js} RENAMED Viewed

@@ -28,6 +28,11 @@ const config = {
         /* The amount of milliseconds the loader will display, before abort because of timeout*/
         timeout: 4000
     },
+    tooltipSettings: {
+        blockAlign: "outside-start",
+        inlineAlign: "inside-start",
+        delay: 200
+    },
     /* The amount of milliseconds for any control that supports debounce */
     inputDebounce: 500,
     headingsClasses: {
@@ -42,4 +47,4 @@ const config = {
 export { config as c };
-//# sourceMappingURL=config-084ee328.js.map
+//# sourceMappingURL=config-ed1f26d7.js.map

package/dist/esm/config-ed1f26d7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"config-ed1f26d7.js","mappings":"AAEA;MACa,MAAM,GAAG;;IAEpB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,cAAc;YACpB,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,GAAG;YACZ,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;SACnB;KACF;IACD,cAAc,EAAE;QACd,aAAa,EAAE,IAAI;KACpB;IACD,WAAW,EAAE;QACX,OAAO,EAAE;YACP,UAAU,EAAE,aAAa;YACzB,UAAU,EAAE,aAAa;YACzB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,oBAAoB;YAC5B,YAAY,EAAE,oBAAoB;YAClC,WAAW,EAAE,OAAO;SACrB;KACF;IACD,MAAM,EAAE;;QAEN,OAAO,EAAE,IAAI;KACd;IACD,eAAe,EAAE;QACf,UAAU,EAAE,eAAiC;QAC7C,WAAW,EAAE,cAAgC;QAC7C,KAAK,EAAE,GAAG;KACX;;IAED,aAAa,EAAE,GAAG;IAClB,eAAe,EAAE;QACf,WAAW,EAAE,WAAW;QACxB,SAAS,EAAE,qBAAqB;KACjC;IACD,cAAc,EAAE;QACd,WAAW,EAAE,WAAW;QACxB,UAAU,EAAE,aAAa;KAC1B;;;;;","names":[],"sources":["src/common/config.ts"],"sourcesContent":["import { ChPopoverAlign } from \"@genexus/chameleon-controls-library\";\n\n/* The purpose of config is to provide a simple way to change options/settings that are generally applied on all the components*/\nexport const config = {\n // tooltip is a property that exists on some gemini controls. When set to true, it will display the error/warning/success message (if any) by using a tooltip, instead of displaying the message under the control. The tooltip prevents changes on the component total height, which is desired.\n tooltip: true,\n gxgMessage: {\n common: {\n type: \"text-regular\",\n textAlign: \"center\",\n padding: \"m\",\n maxWidth: \"250px\",\n minHeight: \"300px\"\n }\n },\n gxIdeContainer: {\n slimmerFooter: true\n },\n tabularGrid: {\n colSize: {\n minContent: \"min-content\",\n maxContent: \"max-content\",\n auto: \"auto\",\n common: \"minmax(100px, 1fr)\",\n commonDouble: \"minmax(150px, 2fr)\",\n description: \"250px\"\n }\n },\n loader: {\n /* The amount of milliseconds the loader will display, before abort because of timeout*/\n timeout: 4000\n },\n tooltipSettings: {\n blockAlign: \"outside-start\" as ChPopoverAlign,\n inlineAlign: \"inside-start\" as ChPopoverAlign,\n delay: 200\n },\n /* The amount of milliseconds for any control that supports debounce */\n inputDebounce: 500,\n headingsClasses: {\n cardRegular: \"heading-3\",\n cardSmall: \"text-body-regular-m\"\n },\n utilityClasses: {\n opacityZero: \"opacity-0\",\n exactMatch: \"exact-match\"\n }\n};\n\n/* - - - - - - - - - - - - - - - - \nch-tree-view-render\n- - - - - - - - - - - - - - - - */\nexport const getImagePathTreeViewCallback = (imageSrc: string) =>\n `./assets/icons/${imageSrc}.svg#enabled`;\n"],"version":3}