@genexus/genexus-ide-ui 1.0.59 → 1.0.61

package/dist/components/gx-ide-references.js

@@ -1,37 +1,12 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './assets-manager.js';
+import './MERCURY_ASSETS.js';
 import { L as Locale } from './locale.js';
-import { c as config } from './config.js';
-import { r as renderSuggestLists } from './render-suggest.js';
-import { d as defineCustomElement$3 } from './container.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$2 } from './gx-ide-empty-state2.js';
 
 /**
  * @description This function converts SelectorCategoryData[] SuggestData
  */
-const convertObjectDataToSuggestData = (selectorCategoriesData) => {
-    const suggestData = {
-        suggestItems: null,
-        suggestLists: []
-    };
-    if (selectorCategoriesData.length) {
-        selectorCategoriesData.forEach(selectorCategory => {
-            const suggestList = {
-                label: selectorCategory.name,
-                items: []
-            };
-            selectorCategory.items.forEach((objectData) => {
-                const suggestItem = {
-                    value: objectData.id,
-                    description: objectData.description,
-                    icon: objectData.icon
-                };
-                suggestList.items.push(suggestItem);
-            });
-            suggestData.suggestLists.push(suggestList);
-        });
-    }
-    return suggestData;
-};
 const convertToTreeItem = (item) => {
     var _a;
     return ({
@@ -56,86 +31,102 @@ const convertReferenceDataToTreeViewData = (referenceData) => {
     });
     return treeData;
 };
+const mapSelectorCategoryDataToComboBoxModel = (categoryData) => {
+    return categoryData.map((category) => {
+        const mappedGroup = {
+            value: category.name,
+            caption: category.name,
+            expandable: true,
+            expanded: true,
+            items: category.items.map((item) => ({
+                value: item.id,
+                caption: item.description,
+                startImgSrc: item.icon
+            }))
+        };
+        return mappedGroup;
+    });
+};
 
-const referencesCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block}.header{}.header__top{grid-template-columns:min-content auto 1fr min-content;grid-template-rows:1fr;grid-template-areas:\"hide-bar-button suggest-label gxg-suggest selector-dialog-button\"}.header__top .hide-bar-button{grid-area:hide-bar-button}.header__top .suggest-label{grid-area:suggest-label}.header__top gxg-suggest{grid-area:gxg-suggest}.header__top .selector-dialog-button{grid-area:selector-dialog-button}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--mer-timing--super-fast-ms) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--gx-ide-grid-row-gap);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.header-hidden .first-row{grid-template-columns:auto 1fr auto}.header-hidden .first-row>:nth-child(3){align-self:end}.header-hidden .second-row{display:none}.main{display:flex;height:100%}.main>*{flex:1}.main .reference-container{padding:var(--tree-container-padding);display:grid;height:100%}.main .reference-container--no-references{display:flex;align-items:center;justify-content:center}.main .gx-ide-message{padding:50px 0}";
+const referencesCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:grid;block-size:100%;grid-template-rows:max-content 1fr}.section{display:contents}.header{}.header__top{grid-template-columns:max-content 1fr max-content}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--mer-timing--fast) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--content-block-spacing);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.main{display:grid;grid-template-columns:1fr 1fr}.section__referenced-by,.section__references-to{display:grid;grid-template-rows:max-content 1fr}.control-header__referenced-by,.control-header__references-to{padding-block-start:var(--mer-spacing--md)}.main__referenced-by,.main__references-to{grid-auto-rows:max-content;overflow:auto}.main__referenced-by{border-inline-end:var(--section-common-border)}.text-align-center{text-align:center}";
 
+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 _GxIdeReferences_objectDataMap, _GxIdeReferences_shortcutsSrc, _GxIdeReferences__componentLocale, _GxIdeReferences_selectObjectSuggestEl, _GxIdeReferences_evaluateInitialReferenceData, _GxIdeReferences_hideBarButtonClickedHandler, _GxIdeReferences_loadReferencesHandler, _GxIdeReferences_openObjectCallbackHandler, _GxIdeReferences_openSelectorDialogCallbackHandler, _GxIdeReferences_referenceSelectedHandler, _GxIdeReferences_referencesItemOpenReferenceCallback, _GxIdeReferences_referencesLazyLoadCallbackHandler, _GxIdeReferences_selectObjectChangedHandler, _GxIdeReferences_selectObjectInputHandler;
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "utils/form",
-    "utils/layout",
-    "utils/typography",
     "components/button",
+    "components/pills",
+    "components/combo-box",
+    "components/icon",
     "components/checkbox",
-    "components/edit",
-    "components/tree-view"
+    "components/tree-view",
+    "utils/spacing",
+    "utils/layout",
+    "utils/form",
+    "utils/typography"
 ];
+const GEMINI_TOOLS_SHOW_MORE_HORIZONTAL = getIconPath({
+    category: "gemini-tools",
+    name: "show-more-horizontal",
+    colorType: "primary"
+});
+const NAVIGATION_ARROW_DOWN_SKY_BLUE = getIconPath({
+    category: "navigation",
+    name: "arrow-down-skyblue",
+    colorType: "primary"
+});
+const SUGGEST_OPTIONS = {
+    alreadyProcessed: true,
+    autoExpand: false,
+    hideMatchesAndShowNonMatches: false,
+    highlightMatchedItems: false,
+    matchCase: false,
+    regularExpression: false,
+    strict: false,
+    renderActiveItemIconOnExpand: true
+};
 const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeReferences extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        this.renderedFirstTime = false;
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/references/shortcuts.json`);
-        /**
-         * The last SelectorCategoryData[] returned by selectorSourceCallback
-         */
-        this.selectorCategoryData = [];
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
+        _GxIdeReferences_objectDataMap.set(this, new Map());
+        _GxIdeReferences_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/references/shortcuts.json`));
+        _GxIdeReferences__componentLocale.set(this, void 0);
+        _GxIdeReferences_selectObjectSuggestEl.set(this, void 0);
         /**
-         * It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
+         * Evaluates whether to call loadReferencesCallback based on the presence of a selected object.
          */
-        this.selectObjectSelectionChanged = (e) => {
-            const categoryIndex = e.detail.indexes.listIndex;
-            const itemIndex = e.detail.indexes.itemIndex;
-            this.selectedObject =
-                this.selectorCategoryData[categoryIndex].items[itemIndex];
-        };
-        /**
-         * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
-         */
-        this.selectObjectValueChangedHandler = async (e) => {
-            const value = e.detail;
-            this.selectorSourceCallback(value)
-                .then(result => {
-                this.selectorCategoryData = result;
-                /* show suggestions*/
-                this.objectsSuggestions = convertObjectDataToSuggestData(result);
-            })
-                .catch(() => {
-                // to do
-            });
-        };
-        this.openObjectCallbackHandler = async () => {
-            this.openObjectCallback(this.selectedObject.id);
-            /* Returns an empty Promise*/
-        };
-        /**
-         * handler that gets fired when the use clicks on the ch-suggest button (...)
-         */
-        this.openSelectorDialogCallbackHandler = async () => {
-            this.openSelectorDialogCallback()
-                .then(result => {
-                this.selectedObject = result;
-            })
-                .catch(() => {
-                /* to do */
-            });
-        };
-        /**
-         * It evaluates if loadReferencesCallback should be called, depending wether there is or not an actual selected object.
-         */
-        this.evaluateInitialReferenceData = () => {
+        _GxIdeReferences_evaluateInitialReferenceData.set(this, () => {
             if (this.selectedObject) {
-                this.selectedObjectHandler(this.selectedObject);
+                this.selectedObjectChanged(this.selectedObject);
             }
-        };
+        });
+        /**
+         * Hides or shows the bar (the bottom section of the header).
+         */
+        _GxIdeReferences_hideBarButtonClickedHandler.set(this, () => {
+            this.barHidden = !this.barHidden;
+        });
         /**
-         * This method invokes 'loadReferencesCallback' callback for 'Is Referenced By' and 'Has References To' panels. The second parameter "to" indicates if loadReferencesCallback callback should be called for "has references to" or "is references by"
+         * Invokes 'loadReferencesCallback' for 'Is Referenced By' and 'Has References To' panels.
          */
-        this.loadReferencesHandler = async (id, to = false) => {
+        _GxIdeReferences_loadReferencesHandler.set(this, async (id, to = false) => {
             if (this.loadReferencesCallback) {
                 this.loadReferencesCallback(id, to).then(result => {
                     if (to) {
@@ -148,14 +139,36 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeReferences
                     }
                 });
             }
-        };
+        });
+        _GxIdeReferences_openObjectCallbackHandler.set(this, () => {
+            var _a;
+            // Returns an empty Promise
+            this.openObjectCallback((_a = this.selectedObject) === null || _a === void 0 ? void 0 : _a.id);
+        });
         /**
-         * It hides/show the bar (The header bottom section).
+         * Fired when user clicks the ch-suggest button (...)
          */
-        this.hideBarButtonClickedHandler = () => {
-            this.barHidden = !this.barHidden;
-        };
-        this.referencesLazyLoadCallbackHandler = (ref) => async (treeItemId) => {
+        _GxIdeReferences_openSelectorDialogCallbackHandler.set(this, async () => {
+            const objectDataResult = await this.openSelectorDialogCallback();
+            if (objectDataResult) {
+                this.selectedObject = objectDataResult;
+            }
+        });
+        _GxIdeReferences_referenceSelectedHandler.set(this, (event) => {
+            if (this.selectReferenceCallback) {
+                const selectedItems = event.detail.map(item => item.item.id);
+                this.selectReferenceCallback(selectedItems[0]);
+                // returns void
+            }
+        });
+        _GxIdeReferences_referencesItemOpenReferenceCallback.set(this, (itemOpened) => {
+            const itemId = itemOpened.detail.id;
+            if (this.openObjectCallback) {
+                this.openObjectCallback(itemId);
+                // returns void
+            }
+        });
+        _GxIdeReferences_referencesLazyLoadCallbackHandler.set(this, (ref) => async (treeItemId) => {
             if (this.loadReferencesCallback) {
                 const to = ref === "references-to";
                 const referencesLazyChildren = await this.loadReferencesCallback(treeItemId, to);
@@ -167,117 +180,122 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeReferences
             return new Promise(resolve => {
                 resolve([]);
             });
-        };
-        this.referenceSelectedHandler = (event) => {
-            if (this.selectReferenceCallback) {
-                const selectedItems = event.detail.map(item => item.item.id);
-                this.selectReferenceCallback(selectedItems[0]);
-                // returns void
+        });
+        _GxIdeReferences_selectObjectChangedHandler.set(this, (event) => {
+            const newSelectedValue = event.detail;
+            const objectData = __classPrivateFieldGet(this, _GxIdeReferences_objectDataMap, "f").get(newSelectedValue);
+            if (objectData) {
+                this.selectedObject = objectData;
             }
-        };
-        this.referencesItemOpenReferenceCallback = (itemOpened) => {
-            const itemId = itemOpened.detail.id;
-            if (this.openObjectCallback) {
-                this.openObjectCallback(itemId);
-                // returns void
+        });
+        _GxIdeReferences_selectObjectInputHandler.set(this, (event) => {
+            // WA to know if the event was from searching on the input or an item selection.
+            // const partValue = (e.target as HTMLElement).getAttribute("part");
+            const typedValue = event.detail;
+            if (this.selectorSourceCallback) {
+                this.selectorSourceCallback(typedValue).then(selectorCategoryDataArray => {
+                    // update map
+                    __classPrivateFieldGet(this, _GxIdeReferences_objectDataMap, "f").clear();
+                    selectorCategoryDataArray === null || selectorCategoryDataArray === void 0 ? void 0 : selectorCategoryDataArray.forEach(selectorCategoryData => {
+                        selectorCategoryData.items.forEach(objectData => {
+                            __classPrivateFieldGet(this, _GxIdeReferences_objectDataMap, "f").set(objectData.description, {
+                                id: objectData.id,
+                                typeName: objectData.typeName,
+                                icon: objectData.icon,
+                                name: objectData.name,
+                                description: objectData.description
+                            });
+                        });
+                    });
+                    this.objectsSuggestions = mapSelectorCategoryDataToComboBoxModel(selectorCategoryDataArray);
+                });
             }
-        };
-        this.referencedByTreeData = undefined;
-        this.referencesToTreeData = undefined;
+        });
         this.barHidden = false;
         this.objectsSuggestions = undefined;
-        this.displayTitle = false;
-        this.selectedObject = undefined;
-        this.selectorSourceCallback = undefined;
+        this.referencedByTreeData = undefined;
+        this.referencesToTreeData = undefined;
         this.loadReferencesCallback = undefined;
         this.openObjectCallback = undefined;
         this.openSelectorDialogCallback = undefined;
         this.selectReferenceCallback = undefined;
+        this.selectorSourceCallback = undefined;
+        this.selectedObject = undefined;
     }
-    selectedObjectHandler(newSelectedObject) {
-        if (newSelectedObject.id) {
+    selectedObjectChanged(newSelectedObject) {
+        if (newSelectedObject === null || newSelectedObject === void 0 ? void 0 : newSelectedObject.id) {
             /* update "is referenced by*/
-            this.loadReferencesHandler(newSelectedObject.id, false);
+            __classPrivateFieldGet(this, _GxIdeReferences_loadReferencesHandler, "f").call(this, newSelectedObject.id, false);
             /* update "has references to*/
-            this.loadReferencesHandler(newSelectedObject.id, true);
+            __classPrivateFieldGet(this, _GxIdeReferences_loadReferencesHandler, "f").call(this, newSelectedObject.id, true);
         }
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.evaluateInitialReferenceData();
-    }
     componentDidLoad() {
-        this.selectObjectSuggestEl.focus();
+        __classPrivateFieldGet(this, _GxIdeReferences_selectObjectSuggestEl, "f").focus();
     }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-        }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeReferences__componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldGet(this, _GxIdeReferences_evaluateInitialReferenceData, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true, noContentPadding: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: "header", slot: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown", ref: el => (this.selectObjectSuggestEl = el) }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { class: "header control-header-with-border spacing-body-inline spacing-body-block-start" }, h("div", { class: "header__top field-group" }, h("button", { type: "button", class: "button-tertiary button-icon-only", "aria-label": __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").header.toggleBar, part: "toggle-bar-button", onClick: __classPrivateFieldGet(this, _GxIdeReferences_hideBarButtonClickedHandler, "f") }, h("ch-image", { class: "icon-md", src: NAVIGATION_ARROW_DOWN_SKY_BLUE, containerRef: this.el })), h("div", { class: "field field-inline" }, h("label", {
+            // select object
+            class: "label", part: "select-object-label", htmlFor: "object-selector-suggest"
+        }, __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").header.selectObject), h("ch-combo-box-render", { accessibleName: __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").header.selectObject, class: "combo-box", model: this.objectsSuggestions, suggest: true, onInput: __classPrivateFieldGet(this, _GxIdeReferences_selectObjectInputHandler, "f"), onChange: __classPrivateFieldGet(this, _GxIdeReferences_selectObjectChangedHandler, "f"), value: (_a = this.selectedObject) === null || _a === void 0 ? void 0 : _a.name, part: "object-selector-suggest", suggestOptions: SUGGEST_OPTIONS, ref: el => (__classPrivateFieldSet(this, _GxIdeReferences_selectObjectSuggestEl, el, "f")) })), h("button", { type: "button", class: "button-tertiary button-icon-only", "aria-label": __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").header.openSelectorButton, onClick: __classPrivateFieldGet(this, _GxIdeReferences_openSelectorDialogCallbackHandler, "f"), part: "open-selector-dialog-button" }, h("ch-image", { class: "icon-md", src: GEMINI_TOOLS_SHOW_MORE_HORIZONTAL, containerRef: this.el }))), h("div", { class: {
                 "header__bottom": true,
                 "header__bottom--hidden": this.barHidden
-            } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" })))))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, noContentPadding: true, part: "referenced-by-container", contentBorderEnd: true, titleType: "secondary" }, h("div", { class: {
-                "reference-container": true,
-                "reference-container--no-references": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length)
-            } }, h("ch-tree-view-render", { class: {
-                "gxi-hidden": !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length),
+            } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("ch-image", { class: "icon-md", src: this.selectedObject.icon, containerRef: this.el }), h("a", { class: "text-link", onClick: __classPrivateFieldGet(this, _GxIdeReferences_openObjectCallbackHandler, "f"), part: "open-object-text-link", "aria-label": __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.selectedObjectLink }, `${(_b = this.selectedObject) === null || _b === void 0 ? void 0 : _b.name} : ${(_c = this.selectedObject) === null || _c === void 0 ? void 0 : _c.description}`)))))), h("div", { class: "main" }, h("section", { class: "section__referenced-by" }, h("h2", { class: "control-header control-header-with-border control-header__referenced-by heading-5 text-align-center spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.isReferencedBy), h("div", {
+            // is referenced by
+            class: "main__referenced-by spacing-body-block-start spacing-body-block-end"
+        }, h("ch-tree-view-render", { class: {
+                "gxi-hidden": !((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length),
                 "tree-view": true
-            }, part: "referenced-by-tree", model: this.referencedByTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("referenced-by"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true, onItemOpenReference: this.referencesItemOpenReferenceCallback, showLines: "last" }), !((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "referenced-by-text", class: "gx-ide-message" }, ((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length) === 0
-            ? this._componentLocale.main.isReferencedByEmpty
-            : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { noContentPadding: true, containerTitle: this._componentLocale.main.hasReferencesTo, part: "references-to-container", titleType: "secondary" }, h("div", { class: {
-                "reference-container": true,
-                "reference-container--no-references": !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length)
-            } }, h("ch-tree-view-render", { class: {
-                "gxi-hidden": !((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length),
+            }, part: "referenced-by-tree", model: this.referencedByTreeData, "aria-label": __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.referencedByTreeAccessible, lazyLoadTreeItemsCallback: __classPrivateFieldGet(this, _GxIdeReferences_referencesLazyLoadCallbackHandler, "f").call(this, "referenced-by"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeReferences_referenceSelectedHandler, "f"), dragDisabled: true, dropDisabled: true, onItemOpenReference: __classPrivateFieldGet(this, _GxIdeReferences_referencesItemOpenReferenceCallback, "f"), showLines: "last" }), !((_e = this.referencedByTreeData) === null || _e === void 0 ? void 0 : _e.length) && (h("gx-ide-empty-state", { stateTitle: ((_f = this.referencedByTreeData) === null || _f === void 0 ? void 0 : _f.length) === 0
+                ? __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.isReferencedByEmpty
+                : __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.isReferencedByError })))), h("section", { class: "section__references-to" }, h("h2", { class: "control-header control-header-with-border control-header__references-to heading-5 text-align-center spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.hasReferencesTo), h("div", {
+            // has references to
+            class: "main__references-to spacing-body-block-start spacing-body-block-end"
+        }, h("ch-tree-view-render", { class: {
+                "gxi-hidden": !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length),
                 "tree-view": true
-            }, part: "referenced-to-tree", model: this.referencesToTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("references-to"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true, onItemOpenReference: this.referencesItemOpenReferenceCallback, showLines: "last" }), !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "references-to-text", class: "gx-ide-message" }, ((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) === 0
-            ? this._componentLocale.main.hasReferencesEmpty
-            : this._componentLocale.main.hasReferencesToError))))))), h("gxg-shortcuts", { src: this.shortcutsSrc })));
+            }, part: "referenced-to-tree", model: this.referencesToTreeData, "aria-label": __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.referencesToTreeAccessible, lazyLoadTreeItemsCallback: __classPrivateFieldGet(this, _GxIdeReferences_referencesLazyLoadCallbackHandler, "f").call(this, "references-to"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeReferences_referenceSelectedHandler, "f"), dragDisabled: true, dropDisabled: true, onItemOpenReference: __classPrivateFieldGet(this, _GxIdeReferences_referencesItemOpenReferenceCallback, "f"), showLines: "last" }), !((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) && (h("gx-ide-empty-state", { stateTitle: ((_j = this.referencesToTreeData) === null || _j === void 0 ? void 0 : _j.length) === 0
+                ? __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.hasReferencesEmpty
+                : __classPrivateFieldGet(this, _GxIdeReferences__componentLocale, "f").main.hasReferencesToError })))))), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeReferences_shortcutsSrc, "f") })));
     }
     static get assetsDirs() { return ["gx-ide-assets/references"]; }
     get el() { return this; }
     static get watchers() { return {
-        "selectedObject": ["selectedObjectHandler"]
+        "selectedObject": ["selectedObjectChanged"]
     }; }
     static get style() { return referencesCss; }
 }, [1, "gx-ide-references", {
-        "displayTitle": [4, "display-title"],
-        "selectedObject": [1040],
-        "selectorSourceCallback": [16],
         "loadReferencesCallback": [16],
         "openObjectCallback": [16],
         "openSelectorDialogCallback": [16],
         "selectReferenceCallback": [16],
-        "referencedByTreeData": [32],
-        "referencesToTreeData": [32],
+        "selectorSourceCallback": [16],
+        "selectedObject": [1040],
         "barHidden": [32],
-        "objectsSuggestions": [32]
+        "objectsSuggestions": [32],
+        "referencedByTreeData": [32],
+        "referencesToTreeData": [32]
     }, undefined, {
-        "selectedObject": ["selectedObjectHandler"]
+        "selectedObject": ["selectedObjectChanged"]
     }]);
+_GxIdeReferences_objectDataMap = new WeakMap(), _GxIdeReferences_shortcutsSrc = new WeakMap(), _GxIdeReferences__componentLocale = new WeakMap(), _GxIdeReferences_selectObjectSuggestEl = new WeakMap(), _GxIdeReferences_evaluateInitialReferenceData = new WeakMap(), _GxIdeReferences_hideBarButtonClickedHandler = new WeakMap(), _GxIdeReferences_loadReferencesHandler = new WeakMap(), _GxIdeReferences_openObjectCallbackHandler = new WeakMap(), _GxIdeReferences_openSelectorDialogCallbackHandler = new WeakMap(), _GxIdeReferences_referenceSelectedHandler = new WeakMap(), _GxIdeReferences_referencesItemOpenReferenceCallback = new WeakMap(), _GxIdeReferences_referencesLazyLoadCallbackHandler = new WeakMap(), _GxIdeReferences_selectObjectChangedHandler = new WeakMap(), _GxIdeReferences_selectObjectInputHandler = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-references", "gx-ide-container", "gx-ide-title"];
+    const components = ["gx-ide-references", "gx-ide-empty-state"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-references":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeReferences$1);
             }
             break;
-        case "gx-ide-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "gx-ide-title":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }