@genexus/genexus-ide-ui 1.0.8 → 1.0.10

package/dist/components/gx-ide-new-kb.js

@@ -1,69 +1,292 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
+import { h, proxyCustomElement, HTMLElement, getAssetPath, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
-import { g as getSelectedGxOption, r as renderFormItems } from './common.js';
-import { f as formSubmitValidation } from './helpers.js';
-import { d as defineCustomElement$3 } from './container.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { L as Locale } from './locale.js';
+import { g as getSelectedItem } from './common.js';
+import { g as getIconPath } from './assets-manager.js';
 
-const newKbCss = ":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)}: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;border:1px solid var(--gxg-border-color--regular);background-color:var(--mer-color__surface)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{container-name:basic-row-first;}.basic-row-first__container{display:grid;gap:var(--gx-ide-grid-column-gap);padding:var(--gx-ide-container__padding);border-bottom:1px solid var(--gx-ide-container-border-color);grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.knowledge-base-storage{display:grid;grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{display:grid;gap:var(--gx-ide-grid-row-gap);padding:var(--gx-ide-container__padding);grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-rows:repeat(4, min-content);grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{display:grid;padding:var(--gx-ide-container__padding);gap:var(--gx-ide-grid-row-gap);grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-rows:repeat(4, min-content);grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
+// formSubmitValidation will be deprecated. use "validateControls" instead.
+// TODO: Improve the way we mark components with error. We must not use error classes.
+const formElementsErrorClassesDictionary = {
+    "ch-checkbox": "checkbox-error",
+    "ch-combo-box-render": "combo-box-error",
+    "ch-edit": "form-input-error"
+};
+const toggleErrorClass = (hasError, element) => {
+    const elementTagName = element.tagName.toLowerCase();
+    const errorClass = formElementsErrorClassesDictionary[elementTagName];
+    if (hasError) {
+        element.classList.add(errorClass);
+    }
+    else {
+        element.classList.remove(errorClass);
+    }
+};
+const validateControls = (formSubmitResult, validatableControls) => {
+    const validatableControlsUpdated = new Map(validatableControls);
+    formSubmitResult.fieldErrors.forEach(fieldResult => {
+        const fieldKey = fieldResult.key;
+        const fieldHasError = fieldResult.hasError;
+        const controlMapRecord = validatableControlsUpdated.get(fieldKey);
+        if (controlMapRecord === null || controlMapRecord === void 0 ? void 0 : controlMapRecord.reference) {
+            // toggle class to add or remove error style
+            toggleErrorClass(fieldHasError, controlMapRecord.reference);
+            validatableControlsUpdated.set(fieldKey, Object.assign(Object.assign({}, controlMapRecord), { hasError: fieldHasError, message: fieldResult.message }));
+        }
+    });
+    // return validatableControls updated.
+    return validatableControlsUpdated;
+};
 
+const renderChCheckboxItems = (options, group = "undefined-group", callback) => (options === null || options === void 0 ? void 0 : options.length) > 0 &&
+    options.map(option => (h("ch-checkbox", { name: option.name, class: "checkbox", part: `${group}-${option.id}`, checkedValue: option.value || option.id, caption: option.label, disabled: option.disabled, value: option.value, onInput: callback !== null && callback !== void 0 ? callback : null, startImgSrc: option.iconName })));
+const mapOptionsToComboBoxItemModel = (options) => options.map(option => ({
+    value: option.id,
+    caption: option.label,
+    startImgSrc: option.iconName
+}));
+
+const newKbCss = ":host{display:grid;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header-one-col{grid-template-columns:1fr}.header-two-cols{grid-template-columns:1fr 1fr}.location-wrapper{display:flex;gap:var(--mer-spacing--2xs)}.location{flex-grow:1;grid-area:location}.tab::part(page){scrollbar-width:thin}.basic{grid-template:\"prototyping-target user-interface-language\" max-content \"back-end front-end\" max-content;grid-template-columns:1fr 1fr}.prototyping-target{grid-area:prototyping-target}.user-interface-language{grid-area:user-interface-language}.back-end{grid-area:back-end;grid-auto-rows:max-content}.front-end{grid-area:front-end}.tab-advanced-title{grid-area:tab-advanced-title}.layout-tab-advanced-left-col{grid-area:layout-tab-advanced-left-col}.layout-tab-advanced-right-col{grid-area:layout-tab-advanced-right-col}.basic,.advanced{padding-block:var(--content-block-spacing)}.tab-advanced__field-group{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto}.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 _GxIdeNewKb_instances, _GxIdeNewKb_advancedTabHasBeenRendered, _GxIdeNewKb_componentLocale, _GxIdeNewKb_selectedFrontEndsIds, _GxIdeNewKb_shortcutsSrc, _GxIdeNewKb_kbSectionsModel, _GxIdeNewKb_authenticationTypeEl, _GxIdeNewKb_collationEl, _GxIdeNewKb_createDataFilesInKBFolderEl, _GxIdeNewKb_databaseNameEl, _GxIdeNewKb_dataSourceEl, _GxIdeNewKb_frontEndsEl, _GxIdeNewKb_kbNameEl, _GxIdeNewKb_locationEl, _GxIdeNewKb_passwordEl, _GxIdeNewKb_prototypingEnvironmentEl, _GxIdeNewKb_prototypingTargetEl, _GxIdeNewKb_savePasswordEl, _GxIdeNewKb_serverNameEl, _GxIdeNewKb_userInterfaceLanguageEl, _GxIdeNewKb_userNameEl, _GxIdeNewKb_chShortcutsEl, _GxIdeNewKb_getCheckboxValues, _GxIdeNewKb_handleCheckboxStatusChange, _GxIdeNewKb_handlerAuthenticationTypeInput, _GxIdeNewKb_handlerServerNameInput, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, _GxIdeNewKb_prototypingTargetValueChangedHandler, _GxIdeNewKb_renderAdvanced, _GxIdeNewKb_renderBasic, _GxIdeNewKb_cancelKbHandler, _GxIdeNewKb_createKbHandler, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, _GxIdeNewKb_evaluateTooltipRender, _GxIdeNewKb_evaluateUserInputsDisplay, _GxIdeNewKb_getDataSources, _GxIdeNewKb_initialSetup, _GxIdeNewKb_initialSetupAdvancedTab, _GxIdeNewKb_initializeValidatableControlsBasicTab, _GxIdeNewKb_initializeValidatableControlsAdvancedTab, _GxIdeNewKb_selectLocationHandler, _GxIdeNewKb_tabSelectionChangedHandler, _GxIdeNewKb_updateFrontEnds, _GxIdeNewKb_updateSelectedFrontEndsIds;
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/tab",
+    "components/tooltip",
+    "utils/form--full",
+    "utils/layout",
+    "utils/typography",
+    "chameleon/scrollbar"
+];
+const WINDOWS_AUTHENTICATION_VALUE = "windows-authentication";
+const MAIN_SECTION_CLASSES = "main";
+const BASIC_SECTION_PARENT_CLASSES = "basic field-group spacing-body-inline";
+const SYSTEM_ICON = getIconPath({
+    category: "system",
+    name: "folder",
+    colorType: "primary"
+});
+const BASIC_TAB_SELECTOR = "basic";
+const ADVANCED_TAB_SELECTOR = "advanced";
 const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        this.renderedFirstTime = false;
-        this.selectedFrontEndsIds = [];
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);
-        // 9.LOCAL METHODS //
-        // 9.LOCAL METHODS -> Helpers //
-        this.initialSetup = () => {
-            this.updateSelectedFrontEndsIds();
-        };
-        // 9.LOCAL METHODS -> Not Helpers //
-        this.updateSelectedFrontEndsIds = () => {
-            this.selectedFrontEndsIds = [];
-            this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
-                frontEndsCheckboxesInfo.forEach(frontEnd => {
-                    if (frontEnd.value) {
-                        this.selectedFrontEndsIds.push(frontEnd.id);
-                    }
-                });
-            });
-        };
+        _GxIdeNewKb_instances.add(this);
+        _GxIdeNewKb_advancedTabHasBeenRendered.set(this, false);
         /**
-         * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
+         * The component hard-coded strings translations.
          */
-        this.evaluateCreateDataInKbDisabled = (e) => {
-            var _a, _b;
-            if (e) {
-                if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === e.detail) {
-                    this.createDataInKbDisabled = true;
-                }
-                else {
-                    this.createDataInKbDisabled = false;
-                }
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_componentLocale.set(this, void 0);
+        _GxIdeNewKb_selectedFrontEndsIds.set(this, []);
+        _GxIdeNewKb_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`));
+        _GxIdeNewKb_kbSectionsModel.set(this, []);
+        /* References needed to collect data con "Create" button submit*/
+        _GxIdeNewKb_authenticationTypeEl.set(this, void 0);
+        _GxIdeNewKb_collationEl.set(this, void 0);
+        _GxIdeNewKb_createDataFilesInKBFolderEl.set(this, void 0);
+        _GxIdeNewKb_databaseNameEl.set(this, void 0);
+        _GxIdeNewKb_dataSourceEl.set(this, void 0);
+        _GxIdeNewKb_frontEndsEl.set(this, void 0);
+        _GxIdeNewKb_kbNameEl.set(this, void 0);
+        _GxIdeNewKb_locationEl.set(this, void 0);
+        _GxIdeNewKb_passwordEl.set(this, void 0);
+        _GxIdeNewKb_prototypingEnvironmentEl.set(this, void 0);
+        _GxIdeNewKb_prototypingTargetEl.set(this, void 0);
+        _GxIdeNewKb_savePasswordEl.set(this, void 0);
+        _GxIdeNewKb_serverNameEl.set(this, void 0);
+        _GxIdeNewKb_userInterfaceLanguageEl.set(this, void 0);
+        _GxIdeNewKb_userNameEl.set(this, void 0);
+        _GxIdeNewKb_chShortcutsEl.set(this, void 0);
+        _GxIdeNewKb_handleCheckboxStatusChange.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateSelectedFrontEndsIds, "f").call(this);
+        });
+        _GxIdeNewKb_handlerAuthenticationTypeInput.set(this, (e) => {
+            const authenticationTypeValue = e === null || e === void 0 ? void 0 : e.detail;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateUserInputsDisplay, "f").call(this, authenticationTypeValue);
+        });
+        _GxIdeNewKb_handlerServerNameInput.set(this, (e) => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, "f").call(this, e.detail);
+        });
+        _GxIdeNewKb_prototypingEnvironmentValueChangedHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_getDataSources, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEnds, "f").call(this);
+        });
+        _GxIdeNewKb_prototypingTargetValueChangedHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_getDataSources, "f").call(this);
+        });
+        _GxIdeNewKb_renderAdvanced.set(this, () => {
+            return [
+                h("h2", {
+                    // #knowledge base storage
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.tabTitle),
+                h("div", { class: "field-group tab-advanced__field-group" }, h("div", {
+                    // #server name
+                    class: "field field-block server-name-field"
+                }, h("label", { class: "label", htmlFor: "serverName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.serverNames.length === 0, placeholder: this.serverNames.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName
+                            .disabledPlaceholder
+                        : "", value: this.serverNamesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_serverNameEl, el, "f")), model: this.serverNamesComboBoxModel, onInput: this.serverNames.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_handlerServerNameInput, "f")
+                        : undefined, id: "serverName", part: "server-name" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"))), h("div", {
+                    // #authentication type
+                    class: "field field-block authentication-type-field"
+                }, h("label", { class: "label", htmlFor: "authenticationType" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.authenticationType.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.authenticationTypes.length === 0, placeholder: this.authenticationTypes.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.authenticationType
+                            .disabledPlaceholder
+                        : "", value: this.authenticationTypesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_authenticationTypeEl, el, "f")), model: this.authenticationTypesComboBoxModel, id: "authenticationType", part: "authentication-type", onInput: this.authenticationTypes.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_handlerAuthenticationTypeInput, "f")
+                        : undefined }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"))), h("div", {
+                    // #database
+                    class: "field field-block database-field"
+                }, h("label", { class: "label", htmlFor: "databaseName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.databaseName.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", value: this.databaseName, id: "databaseName", part: "database-name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_databaseNameEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f"))), this.userNameVisible ? (h("div", {
+                    // #username
+                    class: "field field-block username-field"
+                }, h("label", { class: "label", htmlFor: "userName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.userName.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", value: this.userName, id: "userName", part: "user-name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userNameEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")))) : null, h("div", {
+                    // #collation
+                    class: "field field-block collation-field"
+                }, h("label", { class: "label", htmlFor: "collation" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.collation.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.serverNames.length === 0, placeholder: this.collations.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.collation
+                            .disabledPlaceholder
+                        : "", value: this.collationsInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_collationEl, el, "f")), model: this.collationsComboBoxModel, id: "collation", part: "collation" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f"))), this.passwordVisible ? (h("div", {
+                    // #password
+                    class: "field field-block password-field"
+                }, h("label", { class: "label", htmlFor: "password" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.password.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", type: "password", value: this.password, id: "password", part: "password", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_passwordEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")))) : null, h("ch-checkbox", {
+                    // #create data in knowledge base folder
+                    class: "checkbox create-data-in-kb-checkbox", checkedValue: "createDataFilesInKBFolder", caption: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.createDataFilesInKbFolder, disabled: this.createDataInKbDisabled, part: "create-data-in-kb", id: "createDataFilesInKBFolder", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, el, "f"))
+                }), this.savePasswordVisible ? (h("ch-checkbox", {
+                    // #save password
+                    class: "checkbox save-password-checkbox", checkedValue: "password", caption: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.savePassword, part: "save-password", id: "savePassword", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_savePasswordEl, el, "f"))
+                })) : null)
+            ];
+        });
+        _GxIdeNewKb_renderBasic.set(this, () => {
+            return [
+                h("div", {
+                    // #prototyping  target
+                    class: "field field-block prototyping-target"
+                }, h("label", { class: "label", htmlFor: "prototypingTarget" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.prototypingTarget.label), h("ch-combo-box-render", { id: "prototypingTarget", class: "combo-box", part: "prototyping-target", disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.prototypingTarget
+                            .disabledPlaceholder
+                        : "", value: this.prototypingTargetsInitialValue, model: this.prototypingTargetsComboBoxModel, onInput: this.prototypingTargets.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetValueChangedHandler, "f")
+                        : undefined, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingTargetEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"))),
+                h("div", {
+                    // #user interface
+                    class: "field field-block user-interface-language"
+                }, h("label", { class: "label", htmlFor: "userInterfaceLanguage" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.userInterfaceLanguages.length === 0, placeholder: this.userInterfaceLanguages.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage
+                            .disabledPlaceholder
+                        : "", value: this.userInterfaceLanguagesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userInterfaceLanguageEl, el, "f")), model: this.userInterfaceLanguagesComboBoxModel, id: "userInterfaceLanguage", part: "user-interface-language" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f"))),
+                h("div", null, h("h2", {
+                    // back end
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.backEndLabel), h("div", { class: "field-group back-end" }, h("div", {
+                    // #prototyping environment
+                    class: "field field-block"
+                }, h("label", { class: "label", htmlFor: "prototypingEnvironment" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.prototypingEnvironment
+                    .label), h("ch-combo-box-render", { class: "combo-box", disabled: this.prototypingEnvironments.length === 0, placeholder: this.prototypingEnvironments.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd
+                            .prototypingEnvironment.disabledPlaceholder
+                        : "", value: this.prototypingEnvironmentsInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingEnvironmentEl, el, "f")), model: this.prototypingEnvironmentsComboBoxModel, onInput: this.prototypingEnvironments.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, "f")
+                        : undefined, part: "prototyping-environment", id: "prototypingEnvironment" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f"))), h("div", {
+                    // #data source
+                    class: "field field-block"
+                }, h("label", { class: "label", htmlFor: "dataSource" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.defaultDataSources.length === 0, placeholder: this.defaultDataSources.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource
+                            .disabledPlaceholder
+                        : "", value: this.defaultDataSourcesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_dataSourceEl, el, "f")), model: this.defaultDataSourcesComboBoxModel, part: "data-source", id: "dataSource" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f"))))),
+                h("div", null, h("h2", {
+                    // front end
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group front-end", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
+            ];
+        });
+        // - - - - - - - - - -
+        _GxIdeNewKb_cancelKbHandler.set(this, () => {
+            if (this.cancelCallback) {
+                this.cancelCallback();
             }
-            else if ((_b = this.serverNames[0]) === null || _b === void 0 ? void 0 : _b.selected) {
+        });
+        _GxIdeNewKb_createKbHandler.set(this, () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            if (this.createCallback) {
+                const createCallbackPromise = this.createCallback({
+                    authenticationType: (_a = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
+                    collation: (_b = __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
+                    createDataFilesInKBFolder: !!((_c = __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f")) === null || _c === void 0 ? void 0 : _c.value),
+                    dataSource: (_d = __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f")) === null || _d === void 0 ? void 0 : _d.value,
+                    databaseName: (_e = __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f")) === null || _e === void 0 ? void 0 : _e.value,
+                    frontEnds: __classPrivateFieldGet(this, _GxIdeNewKb_selectedFrontEndsIds, "f"),
+                    kbLocation: (_f = __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f")) === null || _f === void 0 ? void 0 : _f.value,
+                    kbName: (_g = __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f")) === null || _g === void 0 ? void 0 : _g.value,
+                    password: (_h = __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")) === null || _h === void 0 ? void 0 : _h.value,
+                    prototypingEnvironment: (_j = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f")) === null || _j === void 0 ? void 0 : _j.value,
+                    prototypingTarget: (_k = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f")) === null || _k === void 0 ? void 0 : _k.value,
+                    savePassword: !!((_l = __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")) === null || _l === void 0 ? void 0 : _l.value),
+                    serverName: (_m = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f")) === null || _m === void 0 ? void 0 : _m.value,
+                    userInterfaceLanguage: (_o = __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")) === null || _o === void 0 ? void 0 : _o.value,
+                    userName: (_p = __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")) === null || _p === void 0 ? void 0 : _p.value
+                });
+                createCallbackPromise.then((formSubmitResult) => {
+                    this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
+                });
+            }
+        });
+        /**
+         * Disable "Create Data in Knowledge Base Folder" if the first Server Name
+         * option is selected.
+         * */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_evaluateCreateDataCheckboxEnabled.set(this, (serverNameValue) => {
+            var _a;
+            if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === serverNameValue) {
                 this.createDataInKbDisabled = true;
             }
-        };
+            else {
+                this.createDataInKbDisabled = false;
+            }
+        });
+        _GxIdeNewKb_evaluateTooltipRender.set(this, (controlReference) => {
+            var _a, _b, _c;
+            return ((_b = (_a = this.validatableControls) === null || _a === void 0 ? void 0 : _a.get(controlReference === null || controlReference === void 0 ? void 0 : controlReference.id)) === null || _b === void 0 ? void 0 : _b.hasError) &&
+                ((_c = this.validatableControls.get(controlReference.id)) === null || _c === void 0 ? void 0 : _c.message) && (h("ch-tooltip", { class: "tooltip", actionElement: controlReference, blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, this.validatableControls.get(controlReference.id).message));
+        });
         /**
-         * @description if "Authentication Type" is "Windows Authentication" then User Name, Password, and Save Password should not be visible.
+         * If "Authentication Type" is "Windows Authentication", hide User Name,
+         * Password, and Save Password fields.
          */
-        this.evaluateAuthenticationType = (e) => {
-            var _a, _b;
-            let selectedOption;
-            if ((_a = this.authenticationTypes) === null || _a === void 0 ? void 0 : _a.length) {
-                selectedOption =
-                    ((_b = this.authenticationTypes) === null || _b === void 0 ? void 0 : _b.find(item => item.selected)) ||
-                        this.authenticationTypes[0];
-            }
-            const conditionA = (e === null || e === void 0 ? void 0 : e.detail) === "windows-authentication";
-            const conditionB = selectedOption && selectedOption.id === "windows-authentication";
-            if (conditionA || (conditionB && e === null)) {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_evaluateUserInputsDisplay.set(this, (authenticationTypeValue) => {
+            if (authenticationTypeValue === WINDOWS_AUTHENTICATION_VALUE) {
                 this.userNameVisible = false;
                 this.passwordVisible = false;
                 this.savePasswordVisible = false;
@@ -73,23 +296,112 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 this.passwordVisible = true;
                 this.savePasswordVisible = true;
             }
-        };
+        });
+        _GxIdeNewKb_getDataSources.set(this, () => {
+            if (this.getDataSourcesCallback) {
+                const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
+                const selectedPrototypingTargetId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f").value;
+                const updatedDefaultDataSourcesPromise = this.getDataSourcesCallback(selectedPrototypingEnvironmentId, selectedPrototypingTargetId);
+                updatedDefaultDataSourcesPromise
+                    .then(result => {
+                    if (result.length > 0) {
+                        this.defaultDataSources = result;
+                        // set first option as selected
+                        __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f").value = this.defaultDataSources[0].id;
+                    }
+                })
+                    .catch(() => {
+                    // to do
+                });
+            }
+        });
+        _GxIdeNewKb_initialSetup.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateSelectedFrontEndsIds, "f").call(this);
+            // map all "Basic Tab" GxOption[]'s to ComboBoxModel's
+            this.watchDefaultDataSources(this.defaultDataSources);
+            this.watchPrototypingEnvironments(this.prototypingEnvironments);
+            this.watchPrototypingTargets(this.prototypingTargets);
+            this.watchServerNames(this.serverNames);
+            this.watchUserInterfaceLanguages(this.userInterfaceLanguages);
+        });
+        _GxIdeNewKb_initialSetupAdvancedTab.set(this, () => {
+            const selectedServerNameValue = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f").value;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, "f").call(this, selectedServerNameValue);
+            const selectedAuthenticationType = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f").value;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateUserInputsDisplay, "f").call(this, selectedAuthenticationType);
+            // map all "Advanced Tab" GxOption[]'s to ComboBoxModel's
+            this.watchAuthenticationTypes(this.authenticationTypes);
+            this.watchCollations(this.collations);
+        });
+        _GxIdeNewKb_initializeValidatableControlsBasicTab.set(this, () => {
+            // populate #controlsValidation with the controls that could have errors.
+            const validatableControls = [
+                __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")
+            ];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
+                }
+            });
+        });
+        _GxIdeNewKb_initializeValidatableControlsAdvancedTab.set(this, () => {
+            // populate #controlsValidation with the controls that could have errors.
+            const validatableControls = [
+                __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")
+            ];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
+                }
+            });
+        });
         /**
          * @description It allows defining the DBMS that will be used in the solution
          */
-        this.selectLocationHandler = () => {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_selectLocationHandler.set(this, () => {
             this.selectLocationCallback().then(kbLocation => {
                 if (kbLocation) {
                     this.kbLocation = kbLocation;
                 }
             });
-        };
+        });
+        _GxIdeNewKb_tabSelectionChangedHandler.set(this, (event) => {
+            if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {
+                this.advancedTabIsVisible = true;
+                // Some logic for advanced tab is done on componentDidRender lifecycle,
+                // since the reference to the elements is needed.
+            }
+        });
         /**
-         * @description it evaluates what front end options need to be updated on 'getFrontEndsCallback', by comparing the new state (getFrontEndsCallback promise result) and the previous state (previousFrontEndsState)
+         * Evaluates which front-end options need updates on 'getFrontEndsCallback'
+         * by comparing the new state (getFrontEndsCallback result) and previous state.
          */
-        this.updateFrontEnds = () => {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_updateFrontEnds.set(this, () => {
             if (this.getFrontEndsCallback) {
-                const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
+                const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
                 const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
                 updatedFrontEndsPromise
                     .then(newFrontEndsOptions => {
@@ -110,223 +422,263 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                     // to do
                 });
             }
-        };
-        this.getDataSources = () => {
-            if (this.getDataSourcesCallback) {
-                const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
-                const selectedPrototypingTargetId = this.prototypingTargetEl.value;
-                const updatedDefaultDataSourcesPromise = this.getDataSourcesCallback(selectedPrototypingEnvironmentId, selectedPrototypingTargetId);
-                updatedDefaultDataSourcesPromise
-                    .then(result => {
-                    if (result.length > 0) {
-                        this.defaultDataSources = result;
-                        // set first option as selected
-                        this.dataSourceEl.value = this.defaultDataSources[0].id;
-                    }
-                })
-                    .catch(() => {
-                    // to do
-                });
-            }
-        };
-        this.prototypingEnvironmentValueChangedHandler = () => {
-            this.getDataSources();
-            this.updateFrontEnds();
-        };
-        this.prototypingTargetValueChangedHandler = () => {
-            this.getDataSources();
-        };
-        this.createKbHandler = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            if (this.createCallback) {
-                const createCallbackPromise = this.createCallback({
-                    kbName: (_a = this.kbNameEl) === null || _a === void 0 ? void 0 : _a.value,
-                    kbLocation: (_b = this.locationEl) === null || _b === void 0 ? void 0 : _b.value,
-                    prototypingTarget: (_c = this.prototypingTargetEl) === null || _c === void 0 ? void 0 : _c.value,
-                    userInterfaceLanguage: (_d = this.userInterfaceLanguageEl) === null || _d === void 0 ? void 0 : _d.value,
-                    prototypingEnvironment: (_e = this.prototypingEnvironmentEl) === null || _e === void 0 ? void 0 : _e.value,
-                    dataSource: (_f = this.dataSourceEl) === null || _f === void 0 ? void 0 : _f.value,
-                    frontEnds: this.selectedFrontEndsIds,
-                    serverName: (_g = this.serverNameEl) === null || _g === void 0 ? void 0 : _g.value,
-                    databaseName: (_h = this.databaseNameEl) === null || _h === void 0 ? void 0 : _h.value,
-                    collation: (_j = this.collationEl) === null || _j === void 0 ? void 0 : _j.value,
-                    createDataFilesInKBFolder: (_k = this.createDataFilesInKBFolderEl) === null || _k === void 0 ? void 0 : _k.checked,
-                    authenticationType: (_l = this.authenticationTypeEl) === null || _l === void 0 ? void 0 : _l.value,
-                    userName: (_m = this.userNameEl) === null || _m === void 0 ? void 0 : _m.value,
-                    password: (_o = this.passwordEl) === null || _o === void 0 ? void 0 : _o.value,
-                    savePassword: (_p = this.savePasswordEl) === null || _p === void 0 ? void 0 : _p.checked
-                });
-                createCallbackPromise.then((formSubmitResult) => {
-                    formSubmitValidation(formSubmitResult, this);
-                });
-            }
-        };
-        this.cancelKbHandler = () => {
-            if (this.cancelCallback) {
-                this.cancelCallback();
-            }
-        };
-        // 10.RENDER() FUNCTION //
-        this.renderTabBasic = () => {
-            return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true, isSelected: !this.isAdvanced }, h("div", { class: "basic-row-first" }, h("div", { class: "basic-row-first__container" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
-                    ? this._componentLocale.tabBasic.prototypingTarget
-                        .disabledPlaceholder
-                    : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
-                    ? this._componentLocale.tabBasic.userInterfaceLanguage
-                        .disabledPlaceholder
-                    : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel, contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
-                    .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
-                    ? this._componentLocale.tabBasic.backEnd
-                        .prototypingEnvironment.disabledPlaceholder
-                    : "", disabled: this.prototypingEnvironments.length === 0, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource.label, toolTip: config.tooltip, disableFilter: true, value: getSelectedGxOption(this.defaultDataSources), placeholder: this.defaultDataSources.length === 0
-                    ? this._componentLocale.tabBasic.backEnd.dataSource
-                        .disabledPlaceholder
-                    : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, titleType: "secondary" }, h("gxg-form-checkbox-group", { checkboxesLabelSize: "large", ref: el => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
-        };
-        this.renderTabAdvanced = () => {
-            return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { noContentPadding: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle, titleType: "secondary" }, h("div", { class: "knowledge-base-storage" }, h("div", { class: "knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
-                    ? this._componentLocale.tabAdvanced.serverName
-                        .disabledPlaceholder
-                    : "", disabled: this.serverNames.length === 0, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName.label, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), toolTip: config.tooltip, value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.collations), ref: (el) => (this.collationEl = el), placeholder: this.collations.length === 0
-                    ? this._componentLocale.tabAdvanced.collation
-                        .disabledPlaceholder
-                    : "", disabled: this.serverNames.length === 0, class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
-                    el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" })), h("div", { class: {
-                    "knowledge-base-storage__col-right": true,
-                    "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
-                } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.authenticationTypes), ref: (el) => (this.authenticationTypeEl = el), placeholder: this.authenticationTypes.length === 0
-                    ? this._componentLocale.tabAdvanced.authenticationType
-                        .disabledPlaceholder
-                    : "", disabled: this.authenticationTypes.length === 0, class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", toolTip: config.tooltip, label: this._componentLocale.tabAdvanced.userName.label, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password.label, password: true, toolTip: config.tooltip, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
-        };
+        });
+        _GxIdeNewKb_updateSelectedFrontEndsIds.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdeNewKb_selectedFrontEndsIds, __classPrivateFieldGet(this, _GxIdeNewKb_instances, "m", _GxIdeNewKb_getCheckboxValues).call(this), "f");
+        });
+        this.advancedTabIsVisible = false;
+        this.validatableControls = new Map();
         this.createDataInKbDisabled = false;
         this.userNameVisible = true;
         this.passwordVisible = true;
         this.savePasswordVisible = true;
-        this.displayTitle = false;
+        this.authenticationTypesComboBoxModel = [];
+        this.authenticationTypesInitialValue = undefined;
+        this.collationsComboBoxModel = [];
+        this.collationsInitialValue = undefined;
+        this.defaultDataSourcesComboBoxModel = [];
+        this.defaultDataSourcesInitialValue = undefined;
+        this.prototypingTargetsComboBoxModel = [];
+        this.prototypingTargetsInitialValue = undefined;
+        this.prototypingEnvironmentsComboBoxModel = [];
+        this.prototypingEnvironmentsInitialValue = undefined;
+        this.serverNamesComboBoxModel = [];
+        this.serverNamesInitialValue = undefined;
+        this.userInterfaceLanguagesComboBoxModel = [];
+        this.userInterfaceLanguagesInitialValue = undefined;
+        this.authenticationTypes = undefined;
+        this.cancelCallback = undefined;
+        this.collations = undefined;
+        this.createCallback = undefined;
+        this.createDataFilesInKBFolder = false;
+        this.databaseName = undefined;
         this.defaultDataSources = undefined;
+        this.displayTitle = false;
         this.frontEnds = undefined;
+        this.getDataSourcesCallback = undefined;
+        this.getFrontEndsCallback = undefined;
         this.isAdvanced = false;
         this.kbLocation = undefined;
-        this.selectLocationCallback = undefined;
         this.kbName = undefined;
+        this.password = undefined;
         this.prototypingEnvironments = undefined;
         this.prototypingTargets = undefined;
-        this.userInterfaceLanguages = undefined;
-        this.authenticationTypes = undefined;
-        this.collations = undefined;
-        this.createDataFilesInKBFolder = false;
-        this.databaseName = undefined;
-        this.password = undefined;
         this.savePassword = false;
+        this.selectLocationCallback = undefined;
         this.serverNames = undefined;
+        this.userInterfaceLanguages = undefined;
         this.userName = undefined;
-        this.test = undefined;
-        this.createCallback = undefined;
-        this.cancelCallback = undefined;
-        this.getDataSourcesCallback = undefined;
-        this.getFrontEndsCallback = undefined;
     }
-    // 6.COMPONENT LIFECYCLE METHODS //
+    watchAuthenticationTypes(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.authenticationTypesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.authenticationTypesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchCollations(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.collationsComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.collationsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchDefaultDataSources(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.defaultDataSourcesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.defaultDataSourcesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchPrototypingEnvironments(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.prototypingEnvironmentsComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.prototypingEnvironmentsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchPrototypingTargets(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.prototypingTargetsComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.prototypingTargetsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchServerNames(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.serverNamesComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.serverNamesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchUserInterfaceLanguages(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.userInterfaceLanguagesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.userInterfaceLanguagesInitialValue = getSelectedItem(newValue);
+        }
+    }
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.evaluateCreateDataInKbDisabled(null);
-        this.evaluateAuthenticationType(null);
+        __classPrivateFieldSet(this, _GxIdeNewKb_componentLocale, await Locale.getComponentStrings(this.el), "f");
         this.previousFrontEndsState = this.frontEnds;
+        __classPrivateFieldSet(this, _GxIdeNewKb_kbSectionsModel, [
+            {
+                id: BASIC_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.tabLabel
+            },
+            {
+                id: ADVANCED_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.tabLabel
+            }
+        ], "f");
     }
     componentDidLoad() {
-        this.initialSetup();
-        this.kbNameEl.focus();
+        __classPrivateFieldGet(this, _GxIdeNewKb_initialSetup, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeNewKb_initializeValidatableControlsBasicTab, "f").call(this);
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        if (this.advancedTabIsVisible && !__classPrivateFieldGet(this, _GxIdeNewKb_advancedTabHasBeenRendered, "f")) {
+            // just call this once.
+            __classPrivateFieldGet(this, _GxIdeNewKb_initialSetupAdvancedTab, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewKb_initializeValidatableControlsAdvancedTab, "f").call(this);
+            __classPrivateFieldSet(this, _GxIdeNewKb_advancedTabHasBeenRendered, true, "f");
         }
     }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     /**
      * Suspends or reactivates the shortcuts
      */
     async suspendShortcuts(suspendShortcuts) {
         if (suspendShortcuts) {
-            this.gxgShortcutsEl.suspend = true;
+            __classPrivateFieldGet(this, _GxIdeNewKb_chShortcutsEl, "f").suspend = true;
         }
         else {
-            this.gxgShortcutsEl.suspend = false;
+            __classPrivateFieldGet(this, _GxIdeNewKb_chShortcutsEl, "f").suspend = false;
         }
     }
-    /** *****************************
-     *  11.RENDER() FUNCTION
-     ********************************/
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: {
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeNewKb_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: {
+                "field-group": true,
+                "control-header-with-border": !this.isAdvanced,
+                "control-header": this.isAdvanced,
                 "header": true,
-                "grid": true,
-                "header--is-advanced": this.isAdvanced
-            }, slot: "header" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), this.isAdvanced
-            ? [
-                h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation),
-                h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
-                h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
-            ]
-            : null), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs", noBorder: true }, this.isAdvanced ? (h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" }))) : null, this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
+                "header-two-cols": this.isAdvanced,
+                "header-one-col": !this.isAdvanced,
+                "spacing-body-block-start": true,
+                "spacing-body-inline": true
+            } }, h("div", {
+            // #kb name
+            class: "field field-inline kb-name"
+        }, h("label", { class: "label kb-label", htmlFor: "kbName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.kbName), h("ch-edit", {
+            // TODO add placeholder
+            autoFocus: true, class: "form-input kb-input", placeholder: "SalesInventory", value: this.kbName, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_kbNameEl, el, "f")), id: "kbName", part: "kb-name"
+        }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f"))), this.isAdvanced && (h("div", { class: "location-wrapper" }, h("div", {
+            // #location
+            class: "field field-inline location"
+        }, h("label", { class: "label location-label", htmlFor: "kbLocation" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.kbLocation), h("ch-edit", {
+            // TODO add placeholder
+            class: "form-input location-input", value: this.kbLocation, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_locationEl, el, "f")), id: "kbLocation", part: "kb-location"
+        }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f"))), h("button", { class: "button-tertiary button-icon-only location-icon", "aria-label": __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.selectLocationButton, title: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.selectLocationButton, part: "button-select-location", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_selectLocationHandler, "f") }, h("ch-image", { class: "icon-md", src: SYSTEM_ICON }))))), this.isAdvanced ? (h("ch-tab-render", {
+            // #tab
+            class: {
+                scrollable: true,
+                tab: true,
+                [MAIN_SECTION_CLASSES]: true
+            }, direction: "block", model: __classPrivateFieldGet(this, _GxIdeNewKb_kbSectionsModel, "f"), selectedId: BASIC_TAB_SELECTOR, overflow: "auto scroll", contain: "size", onSelectedItemChange: !this.advancedTabIsVisible && __classPrivateFieldGet(this, _GxIdeNewKb_tabSelectionChangedHandler, "f")
+        }, h("div", { slot: BASIC_TAB_SELECTOR, class: BASIC_SECTION_PARENT_CLASSES, part: "tab-button-basic" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)), this.advancedTabIsVisible && (h("div", { slot: ADVANCED_TAB_SELECTOR, class: "advanced spacing-body-inline", part: "tab-button-advanced" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderAdvanced, "f").call(this))))) : (h("div", { class: MAIN_SECTION_CLASSES }, h("div", { class: BASIC_SECTION_PARENT_CLASSES }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)))), h("footer", { class: {
+                "control-footer": this.isAdvanced,
+                "control-footer-with-border": !this.isAdvanced,
+                "spacing-body-block-end": true,
+                "spacing-body-inline": true
+            } }, h("div", { class: "buttons-spacer" }, h("button", {
+            // #cancel
+            class: "button-secondary", id: "button-cancel", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_cancelKbHandler, "f"), part: "button-cancel"
+        }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").footer.btnCancel), h("button", {
+            // #create
+            class: "button-primary", id: "button-create", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_createKbHandler, "f"), part: "button-create"
+        }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").footer.btnCreate))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
     get el() { return this; }
+    static get watchers() { return {
+        "authenticationTypes": ["watchAuthenticationTypes"],
+        "collations": ["watchCollations"],
+        "defaultDataSources": ["watchDefaultDataSources"],
+        "prototypingEnvironments": ["watchPrototypingEnvironments"],
+        "prototypingTargets": ["watchPrototypingTargets"],
+        "serverNames": ["watchServerNames"],
+        "userInterfaceLanguages": ["watchUserInterfaceLanguages"]
+    }; }
     static get style() { return newKbCss; }
 }, [1, "gx-ide-new-kb", {
-        "displayTitle": [4, "display-title"],
+        "authenticationTypes": [16],
+        "cancelCallback": [16],
+        "collations": [16],
+        "createCallback": [16],
+        "createDataFilesInKBFolder": [4, "create-data-files-in-k-b-folder"],
+        "databaseName": [1, "database-name"],
         "defaultDataSources": [1040],
+        "displayTitle": [4, "display-title"],
         "frontEnds": [1040],
+        "getDataSourcesCallback": [16],
+        "getFrontEndsCallback": [16],
         "isAdvanced": [4, "is-advanced"],
         "kbLocation": [1025, "kb-location"],
-        "selectLocationCallback": [16],
         "kbName": [1, "kb-name"],
+        "password": [1],
         "prototypingEnvironments": [16],
         "prototypingTargets": [16],
-        "userInterfaceLanguages": [16],
-        "authenticationTypes": [16],
-        "collations": [16],
-        "createDataFilesInKBFolder": [4, "create-data-files-in-k-b-folder"],
-        "databaseName": [1, "database-name"],
-        "password": [1],
         "savePassword": [4, "save-password"],
+        "selectLocationCallback": [16],
         "serverNames": [16],
+        "userInterfaceLanguages": [16],
         "userName": [1, "user-name"],
-        "test": [1],
-        "createCallback": [16],
-        "cancelCallback": [16],
-        "getDataSourcesCallback": [16],
-        "getFrontEndsCallback": [16],
+        "advancedTabIsVisible": [32],
+        "validatableControls": [32],
         "createDataInKbDisabled": [32],
         "userNameVisible": [32],
         "passwordVisible": [32],
         "savePasswordVisible": [32],
+        "authenticationTypesComboBoxModel": [32],
+        "authenticationTypesInitialValue": [32],
+        "collationsComboBoxModel": [32],
+        "collationsInitialValue": [32],
+        "defaultDataSourcesComboBoxModel": [32],
+        "defaultDataSourcesInitialValue": [32],
+        "prototypingTargetsComboBoxModel": [32],
+        "prototypingTargetsInitialValue": [32],
+        "prototypingEnvironmentsComboBoxModel": [32],
+        "prototypingEnvironmentsInitialValue": [32],
+        "serverNamesComboBoxModel": [32],
+        "serverNamesInitialValue": [32],
+        "userInterfaceLanguagesComboBoxModel": [32],
+        "userInterfaceLanguagesInitialValue": [32],
         "suspendShortcuts": [64]
+    }, undefined, {
+        "authenticationTypes": ["watchAuthenticationTypes"],
+        "collations": ["watchCollations"],
+        "defaultDataSources": ["watchDefaultDataSources"],
+        "prototypingEnvironments": ["watchPrototypingEnvironments"],
+        "prototypingTargets": ["watchPrototypingTargets"],
+        "serverNames": ["watchServerNames"],
+        "userInterfaceLanguages": ["watchUserInterfaceLanguages"]
     }]);
+_GxIdeNewKb_advancedTabHasBeenRendered = new WeakMap(), _GxIdeNewKb_componentLocale = new WeakMap(), _GxIdeNewKb_selectedFrontEndsIds = new WeakMap(), _GxIdeNewKb_shortcutsSrc = new WeakMap(), _GxIdeNewKb_kbSectionsModel = new WeakMap(), _GxIdeNewKb_authenticationTypeEl = new WeakMap(), _GxIdeNewKb_collationEl = new WeakMap(), _GxIdeNewKb_createDataFilesInKBFolderEl = new WeakMap(), _GxIdeNewKb_databaseNameEl = new WeakMap(), _GxIdeNewKb_dataSourceEl = new WeakMap(), _GxIdeNewKb_frontEndsEl = new WeakMap(), _GxIdeNewKb_kbNameEl = new WeakMap(), _GxIdeNewKb_locationEl = new WeakMap(), _GxIdeNewKb_passwordEl = new WeakMap(), _GxIdeNewKb_prototypingEnvironmentEl = new WeakMap(), _GxIdeNewKb_prototypingTargetEl = new WeakMap(), _GxIdeNewKb_savePasswordEl = new WeakMap(), _GxIdeNewKb_serverNameEl = new WeakMap(), _GxIdeNewKb_userInterfaceLanguageEl = new WeakMap(), _GxIdeNewKb_userNameEl = new WeakMap(), _GxIdeNewKb_chShortcutsEl = new WeakMap(), _GxIdeNewKb_handleCheckboxStatusChange = new WeakMap(), _GxIdeNewKb_handlerAuthenticationTypeInput = new WeakMap(), _GxIdeNewKb_handlerServerNameInput = new WeakMap(), _GxIdeNewKb_prototypingEnvironmentValueChangedHandler = new WeakMap(), _GxIdeNewKb_prototypingTargetValueChangedHandler = new WeakMap(), _GxIdeNewKb_renderAdvanced = new WeakMap(), _GxIdeNewKb_renderBasic = new WeakMap(), _GxIdeNewKb_cancelKbHandler = new WeakMap(), _GxIdeNewKb_createKbHandler = new WeakMap(), _GxIdeNewKb_evaluateCreateDataCheckboxEnabled = new WeakMap(), _GxIdeNewKb_evaluateTooltipRender = new WeakMap(), _GxIdeNewKb_evaluateUserInputsDisplay = new WeakMap(), _GxIdeNewKb_getDataSources = new WeakMap(), _GxIdeNewKb_initialSetup = new WeakMap(), _GxIdeNewKb_initialSetupAdvancedTab = new WeakMap(), _GxIdeNewKb_initializeValidatableControlsBasicTab = new WeakMap(), _GxIdeNewKb_initializeValidatableControlsAdvancedTab = new WeakMap(), _GxIdeNewKb_selectLocationHandler = new WeakMap(), _GxIdeNewKb_tabSelectionChangedHandler = new WeakMap(), _GxIdeNewKb_updateFrontEnds = new WeakMap(), _GxIdeNewKb_updateSelectedFrontEndsIds = new WeakMap(), _GxIdeNewKb_instances = new WeakSet(), _GxIdeNewKb_getCheckboxValues = function _GxIdeNewKb_getCheckboxValues() {
+    // TODO (We shouldn't be using querySelector)
+    const checkboxes = __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsEl, "f").querySelectorAll("ch-checkbox");
+    const values = Array.from(checkboxes)
+        .map((checkbox) => checkbox.value)
+        .filter(Boolean);
+    return values;
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-new-kb", "gx-ide-container", "gx-ide-title"];
+    const components = ["gx-ide-new-kb"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-new-kb":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeNewKb$1);
             }
             break;
-        case "gx-ide-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "gx-ide-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }