@genexus/genexus-ide-ui 3.2.12 → 3.2.14

package/dist/genexus-ide-ui/{p-eeae9dd5.entry.js → p-95cf766b.entry.js}

@@ -1,4 +1,4 @@
-import { r as t, g as i, h as s, H as e, a } from "./p-9b9ccd0c.js";
+import { r as i, g as t, h as s, H as e, a } from "./p-9b9ccd0c.js";
 
 import { g as o } from "./p-d42e842b.js";
 
@@ -16,71 +16,79 @@ import { L as l } from "./p-311eedf3.js";
 
 import { s as r, g as h } from "./p-91e2ebb0.js";
 
-import { r as d, m as c } from "./p-4d330836.js";
+import { r as c, m as d } from "./p-4d330836.js";
 
 import { v as f } from "./p-b32b6b1f.js";
 
 import { r as u } from "./p-1252519a.js";
 
-const p = ':host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header-one-col{grid-template-columns:1fr}.location-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-xs);min-block-size:var(--control-block-size)}.location-custom-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-xs);flex-grow:1;min-inline-size:0}.location-field{flex-grow:1;min-inline-size:0}.location-field>.input{inline-size:100%}.basic{display:grid;grid-template:"basic-top basic-top" max-content "back-end front-end" 1fr;grid-template-columns:1fr 1fr}.basic__header{grid-area:basic-top;grid-template-columns:1fr 1fr}.dialog-header__back-end,.dialog-header__front-end{padding-block-start:16px}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:12px;overflow:auto}.section__back-end{grid-area:back-end;grid-auto-rows:max-content}.section__front-end{grid-area:front-end}.section__back-end,.section__front-end{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.basic,.advanced{padding-block-start:12px;overflow:auto;block-size:100%}.kb-storage-card{display:flex;flex-direction:column;gap:var(--spacing-gap-l);padding-inline:var(--spacing-padding-xl)}.kb-storage-card__header{display:flex;align-items:center;gap:var(--spacing-gap-s);padding-block-end:var(--spacing-padding-m);border-bottom:1px solid var(--color-border-surface-on-elevation-1)}.kb-storage-card__heading{display:flex;flex-direction:column;gap:var(--spacing-gap-xs);min-inline-size:0}.kb-storage-card__title{margin:0;color:var(--color-text-neutral-default)}.kb-storage-card__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--spacing-gap-xl);row-gap:var(--spacing-gap-l)}.kb-storage-column{display:flex;flex-direction:column;gap:var(--spacing-gap-m);min-inline-size:0}.kb-storage-column__title{display:flex;align-items:center;gap:var(--spacing-gap-s);color:var(--color-text-neutral-disabled);text-transform:uppercase;letter-spacing:0.04em}.kb-storage-column__title-text{white-space:nowrap}.kb-storage-column__title-rule{flex:1;block-size:1px;background-color:var(--color-border-surface-on-elevation-1)}.field-group--stacked{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.server-name-wrapper{display:grid;grid-template-columns:1fr max-content;gap:var(--spacing-gap-xs);min-inline-size:0}.kb-storage-credentials{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.kb-storage-callout{display:flex;flex-direction:row;gap:var(--spacing-gap-xs);padding:var(--spacing-padding-m);border:1px solid var(--color-border-surface-on-elevation-2);border-radius:var(--border-radius-s);background-color:var(--color-accent-surface-elevation-2)}.kb-storage-callout-inner{display:flex;flex-direction:column}.kb-storage-callout__title{display:flex;gap:var(--spacing-gap-xs)}.kb-storage-callout__description{color:var(--color-text-neutral-disabled)}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}.tab::part(tab-list block-start){padding-inline:var(--spacing-padding-xl)}.checkbox{inline-size:max-content}.footer.dialog-footer-with-border{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-gap-m)}.footer.dialog-footer-with-border>.buttons-spacer{margin-inline-start:auto}.connection-status--connecting{color:var(--color-text-neutral-disabled)}.connection-status--success{color:var(--color-text-success-default)}.connection-status--failed{color:var(--color-text-error-default)}';
+const p = ':host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header-one-col{grid-template-columns:1fr}.header .field-inline{grid-template-columns:4.5rem 1fr}.location-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-xs);min-block-size:var(--control-block-size)}.location-custom-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-xs);flex-grow:1;min-inline-size:0}.location-field{flex-grow:1;min-inline-size:0}.location-field>.input{inline-size:100%}.basic{display:grid;grid-template:"basic-top basic-top" max-content "back-end front-end" 1fr;grid-template-columns:1fr 1fr}.basic__header{grid-area:basic-top;grid-template-columns:1fr 1fr}.dialog-header__back-end,.dialog-header__front-end{padding-block-start:16px}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:12px;overflow:auto}.main__front-end>.kb-storage-callout{margin-block-start:var(--spacing-gap-m)}.section__back-end{grid-area:back-end;grid-auto-rows:max-content}.section__front-end{grid-area:front-end}.section__back-end,.section__front-end{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.basic,.advanced{padding-block-start:12px;overflow:auto;block-size:100%}.advanced-loader{position:relative;display:block;inline-size:100%;block-size:100%}.kb-storage-card{display:flex;flex-direction:column;gap:var(--spacing-gap-l);padding-inline:var(--spacing-padding-xl)}.kb-storage-card__header{display:flex;align-items:center;gap:var(--spacing-gap-s);padding-block-end:var(--spacing-padding-m);border-bottom:1px solid var(--color-border-surface-on-elevation-1)}.kb-storage-card__heading{display:flex;flex-direction:column;gap:var(--spacing-gap-xs);min-inline-size:0}.kb-storage-card__title{margin:0;color:var(--color-text-neutral-default)}.kb-storage-card__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--spacing-gap-xl);row-gap:var(--spacing-gap-l)}.kb-storage-column{display:flex;flex-direction:column;gap:var(--spacing-gap-m);min-inline-size:0}.kb-storage-column__title{display:flex;align-items:center;gap:var(--spacing-gap-s);color:var(--color-text-neutral-disabled);text-transform:uppercase;letter-spacing:0.04em}.kb-storage-column__title-text{white-space:nowrap}.kb-storage-column__title-rule{flex:1;block-size:1px;background-color:var(--color-border-surface-on-elevation-1)}.field-group--stacked{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.server-name-wrapper{display:grid;grid-template-columns:1fr max-content;gap:var(--spacing-gap-xs);min-inline-size:0}.kb-storage-credentials{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.kb-storage-callout{display:flex;flex-direction:row;gap:var(--spacing-gap-xs);padding:var(--spacing-padding-m);border:1px solid var(--color-border-surface-on-elevation-2);border-radius:var(--border-radius-s);background-color:var(--color-accent-surface-elevation-2)}.kb-storage-callout-inner{display:flex;flex-direction:column}.kb-storage-callout__title{display:flex;gap:var(--spacing-gap-xs)}.kb-storage-callout__description{color:var(--color-text-neutral-disabled)}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}.tab::part(tab-list block-start){padding-inline:var(--spacing-padding-xl)}.checkbox{inline-size:max-content}.footer.dialog-footer-with-border{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-gap-m)}.footer.dialog-footer-with-border>.buttons-spacer{margin-inline-start:auto}.connection-status{display:inline-flex;align-items:center;gap:var(--spacing-gap-xs)}.connection-status__spinner{display:inline-block;flex-shrink:0;width:var(--icon-s);height:var(--icon-s);border:calc(var(--icon-s) / 7) solid var(--color-accent-primary-pressed);border-top:calc(var(--icon-s) / 7) solid var(--color-border-primary-on-default);border-radius:50%;animation:spin var(--timing-regular) linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.connection-status--connecting{color:var(--color-accent-primary-on-default)}.connection-status--success{color:var(--color-text-success-default)}.connection-status--failed{color:var(--color-text-error-default)}';
 
-var b = undefined && undefined.__classPrivateFieldGet || function(t, i, s, e) {
+var b = undefined && undefined.__classPrivateFieldGet || function(i, t, s, e) {
   if (s === "a" && !e) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof i === "function" ? t !== i || !e : !i.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return s === "m" ? e : s === "a" ? e.call(t) : e ? e.value : i.get(t);
+  if (typeof t === "function" ? i !== t || !e : !t.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return s === "m" ? e : s === "a" ? e.call(i) : e ? e.value : t.get(i);
 };
 
-var v = undefined && undefined.__classPrivateFieldSet || function(t, i, s, e, a) {
+var g = undefined && undefined.__classPrivateFieldSet || function(i, t, s, e, a) {
   if (e === "m") throw new TypeError("Private method is not writable");
   if (e === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof i === "function" ? t !== i || !a : !i.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return e === "a" ? a.call(t, s) : a ? a.value = s : i.set(t, s), s;
+  if (typeof t === "function" ? i !== t || !a : !t.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return e === "a" ? a.call(i, s) : a ? a.value = s : t.set(i, s), s;
 };
 
-var g, m, k, w, y, x, _, M, W, I, T, E, D, F, j, L, N, z, C, S, P, A, B, $, K, U, H, O, V, G, Q, R, X, q, J, Y, Z, tt, it, st, et, at, ot, nt, lt, rt, ht, dt, ct, ft, ut, pt, bt, vt, gt, mt, kt, wt;
+var v, m, k, w, y, x, _, M, W, I, T, E, F, z, D, L, j, N, S, C, P, A, B, $, K, U, H, O, V, G, Q, R, X, q, J, Y, Z, ii, ti, si, ei, ai, oi, ni, li, ri, hi, ci, di, fi, ui, pi, bi, gi, vi, mi, ki;
 
-const yt = [ "resets/box-sizing", "components/tab", "components/tooltip", "utils/form--full", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
+const wi = [ "resets/box-sizing", "components/tab", "components/tooltip", "utils/form--full", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
 
-const xt = "WINDOWS_AUTHENTICATION";
+const yi = "WINDOWS_AUTHENTICATION";
 
-const _t = "(LocalDB)\\MSSQLLocalDB";
+const xi = "(LocalDB)\\MSSQLLocalDB";
 
-const Mt = "main";
+const _i = "main";
 
-const Wt = "basic";
+const Mi = "basic";
 
-const It = o({
+const Wi = o({
   category: "system",
   name: "folder",
   colorType: "primary"
 });
 
-const Tt = o({
+const Ii = o({
   category: "system",
   name: "warning",
   colorType: "on-interactive"
 });
 
-const Et = o({
+const Ti = o({
   category: "system",
   name: "database",
   colorType: "primary"
 });
 
-const Dt = "default";
+const Ei = o({
+  category: "system",
+  name: "check-circle",
+  colorType: "success"
+});
 
-const Ft = "custom";
+const Fi = o({
+  category: "system",
+  name: "warning",
+  colorType: "error"
+});
 
-const jt = "GX_KB_";
+const zi = "GX_KB_";
 
-const Lt = "basic";
+const Di = "basic";
 
-const Nt = "advanced";
+const Li = "advanced";
 
-const zt = class {
+const ji = class {
   constructor(e) {
-    t(this, e);
-    g.set(this, false);
+    i(this, e);
+    v.set(this, false);
     /**
          * The component hard-coded strings translations.
          */
@@ -93,155 +101,171 @@ const zt = class {
         k.set(this, new Map);
     w.set(this, void 0);
     y.set(this, void 0);
-    x.set(this, i(`./gx-ide-assets/new-kb/shortcuts.json`));
+    x.set(this, t(`./gx-ide-assets/new-kb/shortcuts.json`));
     _.set(this, []);
     /* References needed to collect data con "Create" button submit*/    M.set(this, void 0);
     W.set(this, void 0);
     I.set(this, void 0);
     T.set(this, void 0);
     E.set(this, void 0);
-    D.set(this, void 0);
     F.set(this, void 0);
+    z.set(this, void 0);
+    D.set(this, false);
+    L.set(this, false);
     j.set(this, void 0);
-    L.set(this, void 0);
-    N.set(this, false);
-    z.set(this, false);
-    C.set(this, void 0);
+    N.set(this, void 0);
     S.set(this, void 0);
+    C.set(this, void 0);
     P.set(this, void 0);
     A.set(this, void 0);
     B.set(this, void 0);
-    $.set(this, void 0);
+    /**
+         * Monotonic id of the latest collations request. Used to discard stale
+         * responses: a slow request for an invalid instance can resolve after a
+         * newer request for a valid instance, and without this guard it would
+         * overwrite the UI with the wrong (failed) result.
+         */    $.set(this, 0);
     K.set(this, void 0);
-    U.set(this, void 0);
-    H.set(this, (t => `${jt}${t !== null && t !== void 0 ? t : ""}`));
-    O.set(this, (t => {
-      var i, s;
-      const e = (i = t.detail) !== null && i !== void 0 ? i : (s = b(this, D, "f")) === null || s === void 0 ? void 0 : s.value;
-      this.databaseNameValue = b(this, H, "f").call(this, e);
+    U.set(this, (i => `${zi}${i !== null && i !== void 0 ? i : ""}`));
+    H.set(this, (i => {
+      var t, s;
+      const e = (t = i.detail) !== null && t !== void 0 ? t : (s = b(this, F, "f")) === null || s === void 0 ? void 0 : s.value;
+      this.databaseNameValue = b(this, U, "f").call(this, e);
     }));
-    V.set(this, (t => {
-      var i, s;
-      this.databaseNameValue = (i = t.detail) !== null && i !== void 0 ? i : (s = b(this, T, "f")) === null || s === void 0 ? void 0 : s.value;
+    O.set(this, (i => {
+      var t, s;
+      this.databaseNameValue = (t = i.detail) !== null && t !== void 0 ? t : (s = b(this, T, "f")) === null || s === void 0 ? void 0 : s.value;
     }));
-    G.set(this, (async t => {
-      this.authenticationTypeValue = t === null || t === void 0 ? void 0 : t.detail;
+    V.set(this, (async i => {
+      this.authenticationTypeValue = i === null || i === void 0 ? void 0 : i.detail;
       this.collations = [];
       this.defaultCollation = undefined;
       this.connectionStatus = undefined;
-      await b(this, tt, "f").call(this);
+      await b(this, Z, "f").call(this);
     }));
-    Q.set(this, (async () => {
-      var t, i, s, e;
-      this.userNameValue = (i = (t = b(this, K, "f")) === null || t === void 0 ? void 0 : t.value) !== null && i !== void 0 ? i : "";
-      this.passwordValue = (e = (s = b(this, C, "f")) === null || s === void 0 ? void 0 : s.value) !== null && e !== void 0 ? e : "";
-      await b(this, tt, "f").call(this);
+    G.set(this, (async () => {
+      var i, t, s, e;
+      this.userNameValue = (t = (i = b(this, B, "f")) === null || i === void 0 ? void 0 : i.value) !== null && t !== void 0 ? t : "";
+      this.passwordValue = (e = (s = b(this, j, "f")) === null || s === void 0 ? void 0 : s.value) !== null && e !== void 0 ? e : "";
+      await b(this, Z, "f").call(this);
     }));
-    R.set(this, (async () => {
+    Q.set(this, (async () => {
       if (!this.browseForMoreCallback) {
         return;
       }
       this.browseForMoreDialogOpen = true;
       try {
-        const t = await this.browseForMoreCallback();
-        if (t) {
-          this.serverNameValue = t;
-          if (b(this, B, "f")) {
-            b(this, B, "f").value = t;
+        const i = await this.browseForMoreCallback();
+        if (i) {
+          this.serverNameValue = i;
+          if (b(this, P, "f")) {
+            b(this, P, "f").value = i;
           }
-          await b(this, X, "f").call(this, new CustomEvent("change", {
-            detail: t
+          await b(this, R, "f").call(this, new CustomEvent("change", {
+            detail: i
           }));
         }
-      } catch (t) {} finally {
+      } catch (i) {} finally {
         this.browseForMoreDialogOpen = false;
       }
     }));
-    X.set(this, (async t => {
-      var i, s;
-      const e = (i = t === null || t === void 0 ? void 0 : t.detail) !== null && i !== void 0 ? i : (s = t.target) === null || s === void 0 ? void 0 : s.value;
+    R.set(this, (async i => {
+      var t, s;
+      const e = (t = i === null || i === void 0 ? void 0 : i.detail) !== null && t !== void 0 ? t : (s = i.target) === null || s === void 0 ? void 0 : s.value;
       this.serverNameValue = e !== null && e !== void 0 ? e : "";
-      b(this, Z, "f").call(this);
-      await b(this, tt, "f").call(this);
+      b(this, Y, "f").call(this);
+      await b(this, Z, "f").call(this);
     }));
-    q.set(this, (t => {
-      var i;
-      if (!t) {
+    X.set(this, (i => {
+      var t;
+      if (!i) {
         return "empty";
       }
-      if (t.toLowerCase() === _t.toLowerCase()) {
+      if (i.toLowerCase() === xi.toLowerCase()) {
         return "localdb";
       }
-      const s = ((i = this.serverInstances) !== null && i !== void 0 ? i : []).some((i => {
+      const s = ((t = this.serverInstances) !== null && t !== void 0 ? t : []).some((t => {
         var s;
-        return ((s = i.label) === null || s === void 0 ? void 0 : s.toLowerCase()) === t.toLowerCase();
+        return ((s = t.label) === null || s === void 0 ? void 0 : s.toLowerCase()) === i.toLowerCase();
       }));
       return s ? "local" : "remote";
     }));
-    J.set(this, (() => {
-      const t = b(this, q, "f").call(this, this.serverNameValue);
-      return t === "localdb" || t === "remote" || t === "empty";
+    q.set(this, (() => {
+      const i = b(this, X, "f").call(this, this.serverNameValue);
+      return i === "localdb" || i === "remote" || i === "empty";
     }));
-    Y.set(this, (() => {
-      const t = this.authenticationTypeValue;
-      if (!t || t === xt) {
+    J.set(this, (() => {
+      const i = this.authenticationTypeValue;
+      if (!i || i === yi) {
         return false;
       }
       return !this.userNameValue || !this.passwordValue;
     }));
-    Z.set(this, (() => {
-      const t = b(this, q, "f").call(this, this.serverNameValue);
-      if (t === "local" || t === "localdb") {
+    Y.set(this, (() => {
+      const i = b(this, X, "f").call(this, this.serverNameValue);
+      if (i === "local" || i === "localdb") {
         this.createDataFilesInKBFolder = true;
-      } else if (t === "remote") {
+      } else if (i === "remote") {
         this.createDataFilesInKBFolder = false;
       }
     }));
-    tt.set(this, (async () => {
-      var t, i, s, e;
-      const a = this.serverNameValue;
-      if (!a || !this.getCollationsForInstanceCallback || this.connectionStatus === "connecting") {
+    Z.set(this, (async () => {
+      var i, t, s, e;
+      var a;
+      const o = this.serverNameValue;
+      if (!o || !this.getCollationsForInstanceCallback) {
         return;
       }
-      const o = this.authenticationTypeValue;
-      const n = o === xt;
-      const l = n ? undefined : (t = b(this, K, "f")) === null || t === void 0 ? void 0 : t.value;
-      const r = n ? undefined : (i = b(this, C, "f")) === null || i === void 0 ? void 0 : i.value;
-      if (!n && o && (!l || !r)) {
+      const n = this.authenticationTypeValue;
+      const l = n === yi;
+      const r = l ? undefined : (i = b(this, B, "f")) === null || i === void 0 ? void 0 : i.value;
+      const h = l ? undefined : (t = b(this, j, "f")) === null || t === void 0 ? void 0 : t.value;
+      if (!l && n && (!r || !h)) {
         return;
       }
+      // Tag this request so we can ignore its response if a newer request is
+      // fired before it resolves (e.g. the user fixes an invalid server name
+      // while the slow request for the invalid one is still pending).
+            const c = g(this, $, (a = b(this, $, "f"), ++a), "f");
       this.connectionStatus = "connecting";
       try {
-        const t = await this.getCollationsForInstanceCallback(a, o, l, r);
-        if (t) {
-          this.collations = (s = t.collations) !== null && s !== void 0 ? s : [];
-          this.defaultCollation = (e = t.defaultCollation) !== null && e !== void 0 ? e : undefined;
+        const i = await this.getCollationsForInstanceCallback(o, n, r, h);
+        if (c !== b(this, $, "f")) {
+          // A newer request superseded this one; discard the stale response.
+          return;
+        }
+        if (i) {
+          this.collations = (s = i.collations) !== null && s !== void 0 ? s : [];
+          this.defaultCollation = (e = i.defaultCollation) !== null && e !== void 0 ? e : undefined;
           this.connectionStatus = "success";
         } else {
           this.collations = [];
           this.defaultCollation = undefined;
           this.connectionStatus = "failed";
         }
-      } catch (t) {
+      } catch (i) {
+        if (c !== b(this, $, "f")) {
+          return;
+        }
         this.collations = [];
         this.defaultCollation = undefined;
         this.connectionStatus = "failed";
       }
     }));
-    it.set(this, (t => {
-      v(this, w, t.detail, "f");
-      b(this, ft, "f").call(this);
-      b(this, wt, "f").call(this);
+    ii.set(this, (i => {
+      g(this, w, i.detail, "f");
+      b(this, fi, "f").call(this);
+      b(this, ki, "f").call(this);
     }));
-    st.set(this, (async () => {
-      await b(this, ct, "f").call(this);
-      b(this, ft, "f").call(this);
+    ti.set(this, (async () => {
+      await b(this, di, "f").call(this);
+      b(this, fi, "f").call(this);
     }));
-    et.set(this, (() => {
-      v(this, y, b(this, E, "f").value, "f");
+    si.set(this, (() => {
+      g(this, y, b(this, E, "f").value, "f");
     }));
-    at.set(this, (() => {
-      const t = this.authenticationTypeValue !== xt;
+    ei.set(this, (() => {
+      const i = this.authenticationTypeValue !== yi;
       return [ s("section", {
         class: "kb-storage-card",
         part: "kb-storage-card"
@@ -274,29 +298,29 @@ const zt = class {
       }, s("ch-combo-box-render", {
         class: "combo-box",
         value: this.serverNameValue,
-        ref: t => v(this, B, t, "f"),
+        ref: i => g(this, P, i, "f"),
         id: "serverName",
         part: "server-name",
         model: this.serverInstancesComboBoxModel,
         suggest: true,
         suggestDebounce: n.inputDebounce,
-        onInput: b(this, X, "f"),
-        onChange: b(this, X, "f")
+        onInput: b(this, R, "f"),
+        onChange: b(this, R, "f")
       }), s("button", {
         class: "button-tertiary button-icon-only",
         "aria-label": b(this, m, "f").tabAdvanced.serverName.browseForMore,
         part: "button-browse-for-more",
-        onClick: b(this, R, "f")
+        onClick: b(this, Q, "f")
       }, s("ch-image", {
         class: "icon-m",
-        src: Et
+        src: Ti
       }), !this.browseForMoreDialogOpen && s("ch-tooltip", {
         class: "tooltip",
         actionElement: null,
         blockAlign: "outside-start",
         inlineAlign: "center",
         delay: n.tooltipSettings.delay
-      }, b(this, m, "f").tabAdvanced.serverName.browseForMore))), b(this, rt, "f").call(this, b(this, B, "f"))), s("div", {
+      }, b(this, m, "f").tabAdvanced.serverName.browseForMore))), b(this, li, "f").call(this, b(this, P, "f"))), s("div", {
         class: "field field-block database-field"
       }, s("label", {
         class: "label",
@@ -306,9 +330,9 @@ const zt = class {
         value: this.databaseNameValue,
         id: "databaseName",
         part: "database-name",
-        onInput: b(this, V, "f"),
-        ref: t => v(this, T, t, "f")
-      }), b(this, rt, "f").call(this, b(this, T, "f"))), s("div", {
+        onInput: b(this, O, "f"),
+        ref: i => g(this, T, i, "f")
+      }), b(this, li, "f").call(this, b(this, T, "f"))), s("div", {
         class: "field field-block collation-field"
       }, s("label", {
         class: "label",
@@ -318,19 +342,19 @@ const zt = class {
         disabled: !this.serverNameValue || this.collations.length === 0,
         placeholder: this.collations.length === 0 ? b(this, m, "f").tabAdvanced.collation.disabledPlaceholder : "",
         value: this.defaultCollation,
-        ref: t => v(this, W, t, "f"),
+        ref: i => g(this, W, i, "f"),
         model: this.collationsComboBoxModel,
         id: "collation",
         part: "collation"
-      }), b(this, rt, "f").call(this, b(this, W, "f"))), s("ch-checkbox", {
+      }), b(this, li, "f").call(this, b(this, W, "f"))), s("ch-checkbox", {
         class: "checkbox",
         checkedValue: "true",
         value: this.createDataFilesInKBFolder ? "true" : undefined,
-        disabled: b(this, J, "f").call(this),
+        disabled: b(this, q, "f").call(this),
         caption: b(this, m, "f").tabAdvanced.createDataFilesInKbFolder,
         part: "create-data-in-kb",
         id: "createDataFilesInKBFolder",
-        ref: t => v(this, I, t, "f")
+        ref: i => g(this, I, i, "f")
       }))), s("div", {
         class: "kb-storage-column"
       }, s("div", {
@@ -352,12 +376,12 @@ const zt = class {
         disabled: this.authenticationTypes.length === 0,
         placeholder: this.authenticationTypes.length === 0 ? b(this, m, "f").tabAdvanced.authenticationType.disabledPlaceholder : "",
         value: this.authenticationTypeValue,
-        ref: t => v(this, M, t, "f"),
+        ref: i => g(this, M, i, "f"),
         model: this.authenticationTypesComboBoxModel,
         id: "authenticationType",
         part: "authentication-type",
-        onInput: this.authenticationTypes.length > 0 ? b(this, G, "f") : undefined
-      }), b(this, rt, "f").call(this, b(this, M, "f"))), t ? s("div", {
+        onInput: this.authenticationTypes.length > 0 ? b(this, V, "f") : undefined
+      }), b(this, li, "f").call(this, b(this, M, "f"))), i ? s("div", {
         class: "kb-storage-credentials"
       }, s("div", {
         class: "field field-block username-field"
@@ -369,10 +393,10 @@ const zt = class {
         value: this.userName,
         id: "userName",
         part: "user-name",
-        ref: t => v(this, K, t, "f"),
-        onInput: b(this, Q, "f"),
+        ref: i => g(this, B, i, "f"),
+        onInput: b(this, G, "f"),
         debounce: n.inputDebounce
-      }), b(this, rt, "f").call(this, b(this, K, "f"))), s("div", {
+      }), b(this, li, "f").call(this, b(this, B, "f"))), s("div", {
         class: "field field-block password-field"
       }, s("label", {
         class: "label",
@@ -384,24 +408,24 @@ const zt = class {
         value: this.password,
         id: "password",
         part: "password",
-        ref: t => v(this, C, t, "f"),
-        onInput: b(this, Q, "f"),
+        ref: i => g(this, j, i, "f"),
+        onInput: b(this, G, "f"),
         debounce: n.inputDebounce
-      }), b(this, rt, "f").call(this, b(this, C, "f"))), s("ch-checkbox", {
+      }), b(this, li, "f").call(this, b(this, j, "f"))), s("ch-checkbox", {
         class: "checkbox",
         checkedValue: "password",
         value: "password",
         caption: b(this, m, "f").tabAdvanced.savePassword,
         part: "save-password",
         id: "savePassword",
-        ref: t => v(this, A, t, "f"),
+        ref: i => g(this, C, i, "f"),
         disabled: true
       })) : s("div", {
         class: "kb-storage-callout",
         part: "windows-auth-callout"
       }, s("ch-image", {
         class: "icon-l",
-        src: Tt,
+        src: Ii,
         type: "mask"
       }), s("div", {
         class: "kb-storage-callout-inner"
@@ -411,7 +435,7 @@ const zt = class {
         class: "kb-storage-callout__description body-regular-xs"
       }, b(this, m, "f").tabAdvanced.windowsAuthCalloutDescription))))))) ];
     }));
-    ot.set(this, (() => [ s("section", {
+    ai.set(this, (() => [ s("section", {
       class: "basic__header field-group dialog-header-with-border spacing-body-inline"
     }, s("div", {
       // #prototyping  target
@@ -427,9 +451,9 @@ const zt = class {
       placeholder: this.prototypingTargets.length === 0 ? b(this, m, "f").tabBasic.prototypingTarget.disabledPlaceholder : "",
       value: this.prototypingTargetsInitialValue,
       model: this.prototypingTargetsComboBoxModel,
-      onInput: this.prototypingTargets.length > 0 ? b(this, st, "f") : undefined,
-      ref: t => v(this, P, t, "f")
-    }), b(this, rt, "f").call(this, b(this, P, "f"))), s("div", {
+      onInput: this.prototypingTargets.length > 0 ? b(this, ti, "f") : undefined,
+      ref: i => g(this, S, i, "f")
+    }), b(this, li, "f").call(this, b(this, S, "f"))), s("div", {
       // #user interface
       class: "field field-block user-interface-language"
     }, s("label", {
@@ -440,11 +464,11 @@ const zt = class {
       disabled: this.userInterfaceLanguages.length === 0,
       placeholder: this.userInterfaceLanguages.length === 0 ? b(this, m, "f").tabBasic.userInterfaceLanguage.disabledPlaceholder : "",
       value: this.userInterfaceLanguagesInitialValue,
-      ref: t => v(this, $, t, "f"),
+      ref: i => g(this, A, i, "f"),
       model: this.userInterfaceLanguagesComboBoxModel,
       id: "userInterfaceLanguage",
       part: "user-interface-language"
-    }), b(this, rt, "f").call(this, b(this, $, "f")))), s("section", {
+    }), b(this, li, "f").call(this, b(this, A, "f")))), s("section", {
       class: "section__back-end"
     }, s("h2", {
       // back end
@@ -462,12 +486,12 @@ const zt = class {
       disabled: this.defaultPrototypingEnvironments.length === 0,
       placeholder: this.defaultPrototypingEnvironments.length === 0 ? b(this, m, "f").tabBasic.backEnd.prototypingEnvironment.disabledPlaceholder : "",
       value: b(this, w, "f"),
-      ref: t => v(this, S, t, "f"),
+      ref: i => g(this, N, i, "f"),
       model: this.prototypingEnvironmentsComboBoxModel,
-      onInput: b(this, it, "f"),
+      onInput: b(this, ii, "f"),
       part: "prototyping-environment",
       id: "prototypingEnvironment"
-    }), b(this, rt, "f").call(this, b(this, S, "f"))), s("div", {
+    }), b(this, li, "f").call(this, b(this, N, "f"))), s("div", {
       // #data source
       class: "field field-block"
     }, s("label", {
@@ -478,170 +502,194 @@ const zt = class {
       disabled: this.defaultDataSources.length === 0,
       placeholder: this.defaultDataSources.length === 0 ? b(this, m, "f").tabBasic.backEnd.dataSource.disabledPlaceholder : "",
       value: b(this, y, "f"),
-      ref: t => v(this, E, t, "f"),
-      onInput: b(this, et, "f"),
+      ref: i => g(this, E, i, "f"),
+      onInput: b(this, si, "f"),
       model: this.defaultDataSourcesComboBoxModel,
       part: "data-source",
       id: "dataSource"
-    }), b(this, rt, "f").call(this, b(this, E, "f"))))), s("section", {
+    }), b(this, li, "f").call(this, b(this, E, "f"))))), s("section", {
       class: "section__front-end"
     }, s("h2", {
       class: "dialog-header dialog-header-with-border dialog-header__front-end subtitle-regular-xs\t text-align-center spacing-body-inline"
     }, b(this, m, "f").tabBasic.frontEnd.frontEndLabel), s("div", {
       class: "field-group main__front-end spacing-body-inline scrollable"
-    }, d(this.frontEnds, b(this, ht, "f"), b(this, k, "f").get(b(this, w, "f"))))) ]));
+    }, c(this.frontEnds, b(this, ri, "f"), b(this, k, "f").get(b(this, w, "f"))), this.noFrontEndSelected && s("div", {
+      class: "kb-storage-callout",
+      part: "backend-only-callout"
+    }, s("ch-image", {
+      class: "icon-l",
+      src: Ii,
+      type: "mask"
+    }), s("div", {
+      class: "kb-storage-callout-inner"
+    }, s("span", {
+      class: "kb-storage-callout__title body-semi-bold-s"
+    }, b(this, m, "f").tabBasic.frontEnd.backendOnlyCalloutTitle), s("span", {
+      class: "kb-storage-callout__description body-regular-xs"
+    }, b(this, m, "f").tabBasic.frontEnd.backendOnlyCalloutDescription))))) ]));
     // - - - - - - - - - -
-        nt.set(this, (() => {
+        oi.set(this, (() => {
       if (this.cancelCallback) {
         this.cancelCallback();
       }
     }));
-    lt.set(this, (() => {
-      var t, i, s, e, a, o, n, l, r, h, d, c, u, p, v;
-      const g = (t = b(this, k, "f").get(b(this, w, "f"))) !== null && t !== void 0 ? t : [];
+    ni.set(this, (() => {
+      var i, t, s, e, a, o, n, l, r, h, c, d, u, p, g;
+      const v = (i = b(this, k, "f").get(b(this, w, "f"))) !== null && i !== void 0 ? i : [];
       this.createCallback({
-        authenticationType: (i = b(this, M, "f")) === null || i === void 0 ? void 0 : i.value,
+        authenticationType: (t = b(this, M, "f")) === null || t === void 0 ? void 0 : t.value,
         collation: (s = b(this, W, "f")) === null || s === void 0 ? void 0 : s.value,
         createDataFilesInKBFolder: !!((e = b(this, I, "f")) === null || e === void 0 ? void 0 : e.value),
         dataSource: (a = b(this, E, "f")) === null || a === void 0 ? void 0 : a.value,
         databaseName: (o = b(this, T, "f")) === null || o === void 0 ? void 0 : o.value,
-        frontEnds: g,
-        kbLocation: (n = b(this, F, "f")) === null || n === void 0 ? void 0 : n.value,
-        kbName: (l = b(this, D, "f")) === null || l === void 0 ? void 0 : l.value,
-        password: (r = b(this, C, "f")) === null || r === void 0 ? void 0 : r.value,
-        prototypingEnvironment: (h = b(this, S, "f")) === null || h === void 0 ? void 0 : h.value,
-        prototypingTarget: (d = b(this, P, "f")) === null || d === void 0 ? void 0 : d.value,
-        savePassword: !!((c = b(this, A, "f")) === null || c === void 0 ? void 0 : c.value),
-        serverName: (u = b(this, B, "f")) === null || u === void 0 ? void 0 : u.value,
-        userInterfaceLanguage: (p = b(this, $, "f")) === null || p === void 0 ? void 0 : p.value,
-        userName: (v = b(this, K, "f")) === null || v === void 0 ? void 0 : v.value,
+        frontEnds: v,
+        kbLocation: (n = b(this, z, "f")) === null || n === void 0 ? void 0 : n.value,
+        kbName: (l = b(this, F, "f")) === null || l === void 0 ? void 0 : l.value,
+        password: (r = b(this, j, "f")) === null || r === void 0 ? void 0 : r.value,
+        prototypingEnvironment: (h = b(this, N, "f")) === null || h === void 0 ? void 0 : h.value,
+        prototypingTarget: (c = b(this, S, "f")) === null || c === void 0 ? void 0 : c.value,
+        savePassword: !!((d = b(this, C, "f")) === null || d === void 0 ? void 0 : d.value),
+        serverName: (u = b(this, P, "f")) === null || u === void 0 ? void 0 : u.value,
+        userInterfaceLanguage: (p = b(this, A, "f")) === null || p === void 0 ? void 0 : p.value,
+        userName: (g = b(this, B, "f")) === null || g === void 0 ? void 0 : g.value,
         creationMode: this.selectedTab
-      }).then((t => {
-        this.validatableControls = f(t, this.validatableControls);
+      }).then((i => {
+        this.validatableControls = f(i, this.validatableControls);
       }));
     }));
     // TODO: evaluate if this should be a global helper function.
     // It is used on new-kb as well.
-        rt.set(this, (t => {
-      var i, e, a;
-      return ((e = (i = this.validatableControls) === null || i === void 0 ? void 0 : i.get(t === null || t === void 0 ? void 0 : t.id)) === null || e === void 0 ? void 0 : e.hasError) && ((a = this.validatableControls.get(t.id)) === null || a === void 0 ? void 0 : a.message) && s("ch-tooltip", {
+        li.set(this, (i => {
+      var t, e, a;
+      return ((e = (t = this.validatableControls) === null || t === void 0 ? void 0 : t.get(i === null || i === void 0 ? void 0 : i.id)) === null || e === void 0 ? void 0 : e.hasError) && ((a = this.validatableControls.get(i.id)) === null || a === void 0 ? void 0 : a.message) && s("ch-tooltip", {
         class: "tooltip",
-        actionElement: t,
+        actionElement: i,
         blockAlign: n.tooltipSettings.blockAlign,
         inlineAlign: n.tooltipSettings.inlineAlign,
         delay: n.tooltipSettings.delay
-      }, this.validatableControls.get(t.id).message);
+      }, this.validatableControls.get(i.id).message);
     }));
-    ht.set(this, (t => {
-      const i = t.target.checkedValue;
-      const s = t.detail === i;
-      b(this, dt, "f").call(this, i, s);
+    ri.set(this, (i => {
+      const t = i.target.checkedValue;
+      const s = i.detail === t;
+      b(this, ci, "f").call(this, t, s);
+      b(this, hi, "f").call(this);
+    }));
+    /**
+         * Recomputes whether the KB will be generated as backend only, i.e. there
+         * are front ends to choose from but none is currently selected.
+         */    hi.set(this, (() => {
+      var i, t, s;
+      const e = b(this, k, "f").get(b(this, w, "f"));
+      this.noFrontEndSelected = ((t = (i = this.frontEnds) === null || i === void 0 ? void 0 : i.length) !== null && t !== void 0 ? t : 0) > 0 && ((s = e === null || e === void 0 ? void 0 : e.length) !== null && s !== void 0 ? s : 0) === 0;
     }));
     /**
          * This function updates frontEndsCheckedMap, that contains the checked
          * checkboxes for each language front ends.
          */
     // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        dt.set(this, ((t, i) => {
+        ci.set(this, ((i, t) => {
       let s = b(this, k, "f").get(b(this, w, "f"));
       if (!s) {
         // first time
         s = [];
         b(this, k, "f").set(b(this, w, "f"), s);
       }
-      if (i) {
+      if (t) {
         // update by adding
-        s.push(t);
+        s.push(i);
       } else {
         // update by removing
-        const i = s.findIndex((i => i === t));
-        u(s, i);
+        const t = s.findIndex((t => t === i));
+        u(s, t);
       }
     }));
-    ct.set(this, (async () => {
+    di.set(this, (async () => {
       if (this.getPrototypingEnvironmentsCallback) {
-        const t = b(this, P, "f") ? b(this, P, "f").value : this.prototypingTargetsInitialValue;
-        const i = await this.getPrototypingEnvironmentsCallback(t);
-        if (i) {
-          this.defaultPrototypingEnvironments = i;
+        const i = b(this, S, "f") ? b(this, S, "f").value : this.prototypingTargetsInitialValue;
+        const t = await this.getPrototypingEnvironmentsCallback(i);
+        if (t) {
+          this.defaultPrototypingEnvironments = t;
         }
       }
     }));
-    ft.set(this, (() => {
+    fi.set(this, (() => {
       if (this.getDataSourcesCallback) {
+        const i = b(this, N, "f").value;
         const t = b(this, S, "f").value;
-        const i = b(this, P, "f").value;
-        const s = this.getDataSourcesCallback(t, i);
-        s.then((t => {
-          if (t.length > 0) {
-            t = r(t, b(this, y, "f"));
-            v(this, y, h(t), "f");
-            this.defaultDataSources = t;
+        const s = this.getDataSourcesCallback(i, t);
+        s.then((i => {
+          if (i.length > 0) {
+            i = r(i, b(this, y, "f"));
+            g(this, y, h(i), "f");
+            this.defaultDataSources = i;
             // set first option as selected
                         b(this, E, "f").value = b(this, y, "f") !== undefined ? b(this, y, "f") : this.defaultDataSources[0].id;
           }
         })).catch((() => {}));
       }
     }));
-    ut.set(this, (() => {
-      const t = this.authenticationTypes.some((t => t.id === xt));
-      if (t) {
-        this.authenticationTypeValue = xt;
+    ui.set(this, (() => {
+      const i = this.authenticationTypes.some((i => i.id === yi));
+      if (i) {
+        this.authenticationTypeValue = yi;
       }
     }));
-    pt.set(this, (() => {
+    pi.set(this, (() => {
       // populate #controlsValidation with the controls that could have errors.
-      const t = [ b(this, E, "f"), b(this, D, "f"), b(this, S, "f"), b(this, P, "f"), b(this, $, "f") ];
-      t.forEach((t => {
-        if (t.id) {
-          this.validatableControls.set(t.id, {
-            reference: t,
+      const i = [ b(this, E, "f"), b(this, F, "f"), b(this, N, "f"), b(this, S, "f"), b(this, A, "f") ];
+      i.forEach((i => {
+        if (i.id) {
+          this.validatableControls.set(i.id, {
+            reference: i,
             hasError: false,
             message: undefined
           });
         }
       }));
     }));
-    bt.set(this, (() => {
+    bi.set(this, (() => {
       // populate #controlsValidation with the controls that could have errors.
-      const t = [ b(this, M, "f"), b(this, I, "f"), b(this, B, "f"), b(this, M, "f"), b(this, T, "f"), b(this, K, "f"), b(this, W, "f"), b(this, C, "f"), b(this, A, "f") ];
-      t.forEach((t => {
-        if (t.id) {
-          this.validatableControls.set(t.id, {
-            reference: t,
+      const i = [ b(this, M, "f"), b(this, I, "f"), b(this, P, "f"), b(this, M, "f"), b(this, T, "f"), b(this, B, "f"), b(this, W, "f"), b(this, j, "f"), b(this, C, "f") ];
+      i.forEach((i => {
+        if (i.id) {
+          this.validatableControls.set(i.id, {
+            reference: i,
             hasError: false,
             message: undefined
           });
         }
       }));
     }));
-    /**
-         * @description It allows defining the DBMS that will be used in the solution
-         */
-    // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        vt.set(this, (() => {
-      this.selectLocationCallback().then((t => {
-        if (t) {
-          this.kbLocation = t;
-        }
-      }));
-    }));
-    gt.set(this, (() => {
-      this.locationMode = b(this, j, "f").value;
+    gi.set(this, (async i => {
+      var t;
+      // Capture the button before awaiting. Opening/closing the location picker
+      // restores focus to it programmatically, leaving the :focus-visible outline
+      // lingering as if it were still active. On a successful selection move focus
+      // to the location input (natural next step, keyboard-friendly); otherwise
+      // just blur the button so the outline doesn't stay pinned.
+            const s = i.currentTarget;
+      const e = await this.selectLocationCallback();
+      if (e) {
+        this.kbLocation = e;
+        (t = b(this, z, "f")) === null || t === void 0 ? void 0 : t.focus();
+      } else {
+        s === null || s === void 0 ? void 0 : s.blur();
+      }
     }));
-    mt.set(this, (t => {
-      this.selectedTab = t.detail.newSelectedId;
-      if (t.detail.newSelectedId === Nt) {
+    vi.set(this, (i => {
+      this.selectedTab = i.detail.newSelectedId;
+      if (i.detail.newSelectedId === Li) {
         if (!this.advancedTabIsVisible) {
           this.advancedTabIsVisible = true;
-          b(this, kt, "f").call(this);
+          b(this, mi, "f").call(this);
         }
       } else {
         this.connectionStatus = undefined;
       }
     }));
-    kt.set(this, (async () => {
-      var t, i, s, e, a, o, n;
+    mi.set(this, (async () => {
+      var i, t, s, e, a, o, n;
       if (!this.getAdvancedTabDataCallback || this.loadingAdvancedTab) {
         return;
       }
@@ -652,10 +700,10 @@ const zt = class {
         if (l) {
           if (l.serverName != null) {
             this.serverNameValue = l.serverName;
-            b(this, Z, "f").call(this);
+            b(this, Y, "f").call(this);
           }
-          this.serverInstances = (t = l.serverInstances) !== null && t !== void 0 ? t : this.serverInstances;
-          this.collations = (i = l.collations) !== null && i !== void 0 ? i : this.collations;
+          this.serverInstances = (i = l.serverInstances) !== null && i !== void 0 ? i : this.serverInstances;
+          this.collations = (t = l.collations) !== null && t !== void 0 ? t : this.collations;
           this.authenticationTypes = (s = l.authenticationTypes) !== null && s !== void 0 ? s : this.authenticationTypes;
           this.defaultCollation = (e = l.defaultCollation) !== null && e !== void 0 ? e : this.defaultCollation;
           this.authenticationTypeValue = (n = (o = (a = l.authenticationTypes) === null || a === void 0 ? void 0 : a[0]) === null || o === void 0 ? void 0 : o.id) !== null && n !== void 0 ? n : this.authenticationTypeValue;
@@ -663,7 +711,7 @@ const zt = class {
         } else {
           this.connectionStatus = "failed";
         }
-      } catch (t) {
+      } catch (i) {
         this.connectionStatus = "failed";
       } finally {
         this.loadingAdvancedTab = false;
@@ -674,26 +722,27 @@ const zt = class {
          * by comparing the new state (getFrontEndsCallback result) and previous state.
          */
     // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        wt.set(this, (async () => {
-      const t = await this.getFrontEndsCallback(b(this, w, "f"));
-      if ((t === null || t === void 0 ? void 0 : t.length) > 0) {
-        this.frontEnds = t;
+        ki.set(this, (async () => {
+      const i = await this.getFrontEndsCallback(b(this, w, "f"));
+      if ((i === null || i === void 0 ? void 0 : i.length) > 0) {
+        this.frontEnds = i;
         // Seed the checked map from the data's checked property so that
         // initially checked items render as checked on first load.
                 if (!b(this, k, "f").has(b(this, w, "f"))) {
-          const i = t.filter((t => t.checked)).map((t => t.value || t.id));
-          if (i.length > 0) {
-            b(this, k, "f").set(b(this, w, "f"), i);
+          const t = i.filter((i => i.checked)).map((i => i.value || i.id));
+          if (t.length > 0) {
+            b(this, k, "f").set(b(this, w, "f"), t);
           }
         }
+        b(this, hi, "f").call(this);
       }
     }));
     this.advancedTabIsVisible = false;
     this.loadingAdvancedTab = false;
     this.browseForMoreDialogOpen = false;
     this.databaseNameValue = "";
-    this.locationMode = Dt;
     this.frontEnds = undefined;
+    this.noFrontEndSelected = false;
     this.validatableControls = new Map;
     this.connectionStatus = undefined;
     this.userNameValue = "";
@@ -714,7 +763,7 @@ const zt = class {
     this.serverNameValue = "";
     this.userInterfaceLanguagesComboBoxModel = [];
     this.userInterfaceLanguagesInitialValue = undefined;
-    this.selectedTab = Lt;
+    this.selectedTab = Di;
     this.cancelCallback = undefined;
     this.canSetLocation = false;
     this.getAdvancedTabDataCallback = undefined;
@@ -738,76 +787,69 @@ const zt = class {
     this.userInterfaceLanguages = [];
     this.userName = undefined;
   }
-  watchAuthenticationTypes(t) {
-    if (t === null || t === void 0 ? void 0 : t.length) {
-      this.authenticationTypesComboBoxModel = c(t);
-      this.authenticationTypeValue = h(t);
+  watchAuthenticationTypes(i) {
+    if (i === null || i === void 0 ? void 0 : i.length) {
+      this.authenticationTypesComboBoxModel = d(i);
+      this.authenticationTypeValue = h(i);
     }
   }
-  watchCollations(t) {
-    if (!(t === null || t === void 0 ? void 0 : t.length)) {
+  watchCollations(i) {
+    if (!(i === null || i === void 0 ? void 0 : i.length)) {
       this.collationsComboBoxModel = [];
       return;
     }
-    this.collationsComboBoxModel = c(t);
+    this.collationsComboBoxModel = d(i);
   }
-  watchServerInstances(t) {
-    if (!(t === null || t === void 0 ? void 0 : t.length)) {
+  watchServerInstances(i) {
+    if (!(i === null || i === void 0 ? void 0 : i.length)) {
       this.serverInstancesComboBoxModel = [];
       return;
     }
-    this.serverInstancesComboBoxModel = c(t);
+    this.serverInstancesComboBoxModel = d(i);
   }
-  watchDefaultDataSources(t) {
-    if (t === null || t === void 0 ? void 0 : t.length) {
-      this.defaultDataSourcesComboBoxModel = c(t);
-      const i = r(t, b(this, y, "f"));
-      v(this, y, h(i), "f");
+  watchDefaultDataSources(i) {
+    if (i === null || i === void 0 ? void 0 : i.length) {
+      this.defaultDataSourcesComboBoxModel = d(i);
+      const t = r(i, b(this, y, "f"));
+      g(this, y, h(t), "f");
     }
   }
-  watchDefaultPrototypingEnvironments(t) {
-    if (t === null || t === void 0 ? void 0 : t.length) {
-      this.prototypingEnvironmentsComboBoxModel = c(t);
-      v(this, w, h(t), "f");
-      b(this, wt, "f").call(this);
+  watchDefaultPrototypingEnvironments(i) {
+    if (i === null || i === void 0 ? void 0 : i.length) {
+      this.prototypingEnvironmentsComboBoxModel = d(i);
+      g(this, w, h(i), "f");
+      b(this, ki, "f").call(this);
     }
   }
-  watchPrototypingTargets(t) {
-    if (t === null || t === void 0 ? void 0 : t.length) {
-      this.prototypingTargetsComboBoxModel = c(t);
-      this.prototypingTargetsInitialValue = h(t);
-      b(this, ct, "f").call(this);
+  watchPrototypingTargets(i) {
+    if (i === null || i === void 0 ? void 0 : i.length) {
+      this.prototypingTargetsComboBoxModel = d(i);
+      this.prototypingTargetsInitialValue = h(i);
+      b(this, di, "f").call(this);
     }
   }
-  watchUserInterfaceLanguages(t) {
-    if (t === null || t === void 0 ? void 0 : t.length) {
-      this.userInterfaceLanguagesComboBoxModel = c(t);
-      this.userInterfaceLanguagesInitialValue = h(t);
+  watchUserInterfaceLanguages(i) {
+    if (i === null || i === void 0 ? void 0 : i.length) {
+      this.userInterfaceLanguagesComboBoxModel = d(i);
+      this.userInterfaceLanguagesInitialValue = h(i);
     }
   }
   async componentWillLoad() {
-    var t, i;
-    v(this, m, await l.getComponentStrings(this.el), "f");
-    this.databaseNameValue = b(this, H, "f").call(this, this.kbName);
+    var i, t;
+    g(this, m, await l.getComponentStrings(this.el), "f");
+    this.databaseNameValue = b(this, U, "f").call(this, this.kbName);
     if (this.databaseName) {
       this.databaseNameValue = this.databaseName;
     }
-    this.userNameValue = (t = this.userName) !== null && t !== void 0 ? t : "";
-    this.passwordValue = (i = this.password) !== null && i !== void 0 ? i : "";
-    v(this, _, [ {
-      id: Lt,
+    this.userNameValue = (i = this.userName) !== null && i !== void 0 ? i : "";
+    this.passwordValue = (t = this.password) !== null && t !== void 0 ? t : "";
+    g(this, _, [ {
+      id: Di,
       name: b(this, m, "f").tabBasic.tabLabel
     }, {
-      id: Nt,
+      id: Li,
       name: b(this, m, "f").tabAdvanced.tabLabel
     } ], "f");
-    v(this, L, [ {
-      value: Dt,
-      caption: b(this, m, "f").header.kbLocationDefault
-    }, {
-      value: Ft,
-      caption: b(this, m, "f").header.kbLocationCustom
-    } ], "f");
   }
   connectedCallback() {
     this.watchDefaultDataSources(this.defaultDataSources);
@@ -816,60 +858,62 @@ const zt = class {
     this.watchUserInterfaceLanguages(this.userInterfaceLanguages);
   }
   componentDidLoad() {
-    b(this, pt, "f").call(this);
+    b(this, pi, "f").call(this);
   }
   componentDidRender() {
-    if (this.advancedTabIsVisible && !b(this, g, "f")) {
+    // Defer the one-time setup until the real advanced content is rendered
+    // (not the loader); otherwise the control refs it reads are still undefined.
+    if (this.advancedTabIsVisible && !this.loadingAdvancedTab && !b(this, v, "f")) {
       // just call this once.
-      b(this, ut, "f").call(this);
-      b(this, bt, "f").call(this);
-      v(this, g, true, "f");
+      b(this, ui, "f").call(this);
+      b(this, bi, "f").call(this);
+      g(this, v, true, "f");
     }
-    // Register the location input for validation once it's rendered (custom mode)
-        if (this.locationMode === Ft && !b(this, N, "f") && b(this, F, "f")) {
-      this.validatableControls.set(b(this, F, "f").id, {
-        reference: b(this, F, "f"),
+    // Register the location input for validation once it's rendered
+        if (!b(this, D, "f") && b(this, z, "f")) {
+      this.validatableControls.set(b(this, z, "f").id, {
+        reference: b(this, z, "f"),
         hasError: false,
         message: undefined
       });
-      v(this, N, true, "f");
+      g(this, D, true, "f");
     }
     // Register credential controls when they become visible (SQL Auth selected)
-        if (this.authenticationTypeValue !== xt && !b(this, z, "f") && b(this, K, "f") && b(this, C, "f")) {
-      this.validatableControls.set(b(this, K, "f").id, {
-        reference: b(this, K, "f"),
+        if (this.authenticationTypeValue !== yi && !b(this, L, "f") && b(this, B, "f") && b(this, j, "f")) {
+      this.validatableControls.set(b(this, B, "f").id, {
+        reference: b(this, B, "f"),
         hasError: false,
         message: undefined
       });
-      this.validatableControls.set(b(this, C, "f").id, {
-        reference: b(this, C, "f"),
+      this.validatableControls.set(b(this, j, "f").id, {
+        reference: b(this, j, "f"),
         hasError: false,
         message: undefined
       });
-      v(this, z, true, "f");
+      g(this, L, true, "f");
     }
     // Reset flag when switching back to Windows Auth so they re-register next time
-        if (this.authenticationTypeValue === xt && b(this, z, "f")) {
-      v(this, z, false, "f");
+        if (this.authenticationTypeValue === yi && b(this, L, "f")) {
+      g(this, L, false, "f");
     }
   }
   /**
      * Suspends or reactivates the shortcuts
-     */  async suspendShortcuts(t) {
-    if (t) {
-      b(this, U, "f").suspend = true;
+     */  async suspendShortcuts(i) {
+    if (i) {
+      b(this, K, "f").suspend = true;
     } else {
-      b(this, U, "f").suspend = false;
+      b(this, K, "f").suspend = false;
     }
   }
   render() {
     return s(e, {
       class: "widget"
     }, s("ch-theme", {
-      model: yt
+      model: wi
     }), s("ch-shortcuts", {
       src: b(this, x, "f"),
-      ref: t => v(this, U, t, "f")
+      ref: i => g(this, K, i, "f")
     }), s("section", {
       class: "section"
     }, s("header", {
@@ -894,65 +938,66 @@ const zt = class {
       class: "input kb-input",
       placeholder: "SalesInventory",
       value: this.kbName,
-      onInput: b(this, O, "f"),
-      ref: t => v(this, D, t, "f"),
+      onInput: b(this, H, "f"),
+      ref: i => g(this, F, i, "f"),
       id: "kbName",
       part: "kb-name"
-    }), b(this, rt, "f").call(this, b(this, D, "f"))), this.canSetLocation && s("div", {
-      class: "location-wrapper"
+    }), b(this, li, "f").call(this, b(this, F, "f"))), this.canSetLocation && s("div", {
+      class: "field field-inline"
     }, s("label", {
-      class: "label location-label"
-    }, b(this, m, "f").header.kbLocation), s("ch-radio-group-render", {
-      class: "radio-group",
-      model: b(this, L, "f"),
-      value: Dt,
-      onChange: b(this, gt, "f"),
-      ref: t => v(this, j, t, "f")
-    }), this.locationMode === Ft && s("div", {
+      class: "label",
+      htmlFor: "kbLocation"
+    }, b(this, m, "f").header.kbLocation), s("div", {
       class: "location-custom-wrapper"
     }, s("div", {
       class: "location-field"
     }, s("ch-edit", {
       class: "input",
       value: this.kbLocation,
-      ref: t => v(this, F, t, "f"),
+      ref: i => g(this, z, i, "f"),
       id: "kbLocation",
       part: "kb-location"
-    }), b(this, rt, "f").call(this, b(this, F, "f"))), s("button", {
-      class: "button-tertiary button-icon-only location-icon",
+    }), b(this, li, "f").call(this, b(this, z, "f"))), s("button", {
+      class: "button-tertiary button-icon-only ",
       "aria-label": b(this, m, "f").header.selectLocationButton,
       title: b(this, m, "f").header.selectLocationButton,
       part: "button-select-location",
-      onClick: b(this, vt, "f")
+      onClick: b(this, gi, "f"),
+      type: "button"
     }, s("ch-image", {
       class: "icon-m",
-      src: It
+      src: Wi
     }))))), this.isAdvanced ? s("ch-tab-render", {
       // #tab
       class: {
         scrollable: true,
         tab: true,
-        [Mt]: true
+        [_i]: true
       },
       tabListPosition: "block-start",
       model: b(this, _, "f"),
-      selectedId: Lt,
+      selectedId: Di,
       overflow: "auto",
       contain: "size",
-      onSelectedItemChange: b(this, mt, "f")
+      onSelectedItemChange: b(this, vi, "f")
     }, s("div", {
-      slot: Lt,
-      class: Wt,
+      slot: Di,
+      class: Mi,
       part: "tab-button-basic"
-    }, b(this, ot, "f").call(this)), this.advancedTabIsVisible && s("div", {
-      slot: Nt,
+    }, b(this, ai, "f").call(this)), this.advancedTabIsVisible && s("div", {
+      slot: Li,
       class: "advanced",
       part: "tab-button-advanced"
-    }, b(this, at, "f").call(this))) : s("div", {
-      class: Mt
+    }, this.loadingAdvancedTab ? s("gx-ide-loader", {
+      show: true,
+      class: "advanced-loader",
+      loaderTitle: b(this, m, "f").loader.title,
+      description: b(this, m, "f").loader.description
+    }) : b(this, ei, "f").call(this))) : s("div", {
+      class: _i
     }, s("div", {
-      class: Wt
-    }, b(this, ot, "f").call(this))), s("footer", {
+      class: Mi
+    }, b(this, ai, "f").call(this))), s("footer", {
       class: {
         footer: true,
         "dialog-footer-with-border": true,
@@ -961,24 +1006,35 @@ const zt = class {
       }
     }, this.connectionStatus && s("span", {
       class: {
+        "body-semi-bold-s": true,
         "connection-status": true,
         [`connection-status--${this.connectionStatus}`]: true
       },
       part: `connection-status connection-status-${this.connectionStatus}`
-    }, b(this, m, "f").footer.connectionStatus[this.connectionStatus]), s("div", {
+    }, this.connectionStatus === "connecting" && s("span", {
+      class: "connection-status__spinner"
+    }), this.connectionStatus === "success" && s("ch-image", {
+      class: "icon-m",
+      src: Ei,
+      type: "mask"
+    }), this.connectionStatus === "failed" && s("ch-image", {
+      class: "icon-m",
+      src: Fi,
+      type: "mask"
+    }), b(this, m, "f").footer.connectionStatus[this.connectionStatus]), s("div", {
       class: "buttons-spacer"
     }, s("button", {
       // #cancel
       class: "button-secondary",
       id: "button-cancel",
-      onClick: b(this, nt, "f"),
+      onClick: b(this, oi, "f"),
       part: "button-cancel"
     }, b(this, m, "f").footer.btnCancel), s("button", {
       // #create
       class: "button-primary",
       id: "button-create",
-      disabled: this.connectionStatus === "failed" || this.connectionStatus === "connecting" || b(this, Y, "f").call(this),
-      onClick: b(this, lt, "f"),
+      disabled: this.connectionStatus === "failed" || this.connectionStatus === "connecting" || b(this, J, "f").call(this),
+      onClick: b(this, ni, "f"),
       part: "button-create"
     }, b(this, m, "f").footer.btnCreate)))));
   }
@@ -1001,20 +1057,20 @@ const zt = class {
   }
 };
 
-g = new WeakMap, m = new WeakMap, k = new WeakMap, w = new WeakMap, y = new WeakMap, 
+v = new WeakMap, m = new WeakMap, k = new WeakMap, w = new WeakMap, y = new WeakMap, 
 x = new WeakMap, _ = new WeakMap, M = new WeakMap, W = new WeakMap, I = new WeakMap, 
-T = new WeakMap, E = new WeakMap, D = new WeakMap, F = new WeakMap, j = new WeakMap, 
-L = new WeakMap, N = new WeakMap, z = new WeakMap, C = new WeakMap, S = new WeakMap, 
+T = new WeakMap, E = new WeakMap, F = new WeakMap, z = new WeakMap, D = new WeakMap, 
+L = new WeakMap, j = new WeakMap, N = new WeakMap, S = new WeakMap, C = new WeakMap, 
 P = new WeakMap, A = new WeakMap, B = new WeakMap, $ = new WeakMap, K = new WeakMap, 
 U = new WeakMap, H = new WeakMap, O = new WeakMap, V = new WeakMap, G = new WeakMap, 
 Q = new WeakMap, R = new WeakMap, X = new WeakMap, q = new WeakMap, J = new WeakMap, 
-Y = new WeakMap, Z = new WeakMap, tt = new WeakMap, it = new WeakMap, st = new WeakMap, 
-et = new WeakMap, at = new WeakMap, ot = new WeakMap, nt = new WeakMap, lt = new WeakMap, 
-rt = new WeakMap, ht = new WeakMap, dt = new WeakMap, ct = new WeakMap, ft = new WeakMap, 
-ut = new WeakMap, pt = new WeakMap, bt = new WeakMap, vt = new WeakMap, gt = new WeakMap, 
-mt = new WeakMap, kt = new WeakMap, wt = new WeakMap;
+Y = new WeakMap, Z = new WeakMap, ii = new WeakMap, ti = new WeakMap, si = new WeakMap, 
+ei = new WeakMap, ai = new WeakMap, oi = new WeakMap, ni = new WeakMap, li = new WeakMap, 
+ri = new WeakMap, hi = new WeakMap, ci = new WeakMap, di = new WeakMap, fi = new WeakMap, 
+ui = new WeakMap, pi = new WeakMap, bi = new WeakMap, gi = new WeakMap, vi = new WeakMap, 
+mi = new WeakMap, ki = new WeakMap;
 
-zt.style = p;
+ji.style = p;
 
-export { zt as gx_ide_new_kb };
-//# sourceMappingURL=p-eeae9dd5.entry.js.map
+export { ji as gx_ide_new_kb };
+//# sourceMappingURL=p-95cf766b.entry.js.map