@genexus/genexus-ide-ui 0.0.78 → 0.0.80

package/dist/components/gx-ide-dashboard-home.js

@@ -0,0 +1,191 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { f as formatDate } from './helpers2.js';
+import { d as defineCustomElement$b } from './icon.js';
+import { d as defineCustomElement$a } from './button.js';
+import { d as defineCustomElement$9 } from './card.js';
+import { d as defineCustomElement$8 } from './form-textarea.js';
+import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$6 } from './gxg-label2.js';
+import { d as defineCustomElement$5 } from './pill.js';
+import { d as defineCustomElement$4 } from './text.js';
+import { d as defineCustomElement$3 } from './title-editable.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const dashboardHomeCss = ".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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;height:100%;overflow:auto}:host,.gx-ide-main-wrapper,.grid--basic,.project,.recent-objects{height:100%;overflow:auto}.kb{grid-area:kb;align-self:center}.kb .version-pill{white-space:nowrap;text-overflow:ellipsis}.kb .kb-detail{flex-wrap:wrap;margin-block-start:var(--spacing-comp-04);gap:var(--spacing-comp-04)}.kb .kb-detail .display-inline{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.environment{grid-area:environment}.environment gxg-title-editable{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.environment .grid--environments{flex-grow:1;grid-template-columns:1fr 1fr 1fr;gap:var(--gx-ide-grid-column-gap)}.environment .grid--environments .align-center{gap:var(--spacing-comp-01)}.environment .grid--environments .front-end{display:flex;flex-direction:column;gap:var(--gx-ide-cards-vertical-spacing)}.project{grid-area:project}.project .project-buttons{margin-block-start:var(--spacing-comp-04);gap:var(--spacing-comp-04)}.project gxg-form-textarea::part(textarea){width:100%;background-color:transparent;line-height:var(--line-height-default);font-size:var(--mc-font-size-xs)}.recent-objects{grid-area:recent-objects}.recent-objects .recent-objects-card{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.recent-objects .recent-objects-card:last-child{margin-block-end:0}.recent-objects .recent-objects-card .grid--recent-objects{flex-grow:1;grid-template-columns:1fr 10fr 12fr 1fr;gap:var(--gx-ide-cards-horizontal-spacing);height:100%}.recent-objects .recent-objects-card .grid--recent-objects .obj-name{color:var(--gray-06)}.grid--basic{flex-grow:1;grid-template-columns:1.12fr 1fr;gap:var(--spacing-comp-06);grid-template-areas:\"kb environment\" \"project recent-objects\";grid-template-rows:auto 1fr}gxg-title-editable{width:100%}gx-ide-card{height:100%}";
+
+const mapStatusToIcons = {
+  new: "gx-server/new",
+  modified: "patterns-default-associated/modified",
+  conflicted: "patterns-default-associated/synchronized",
+  unmodified: "gx-server/delete"
+};
+const GxIdeDashboardHome$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    // Kb Name
+    this.handleKbNameChange = async () => {
+      if (this.renameKBCallback) {
+        const response = this.renameKBCallback(this.kbNameEl.value);
+        response.then((result) => {
+          this.editValidation(result, this.kb.name, this.kbNameEl);
+        });
+      }
+    };
+    // Environment Name
+    this.handleEnvNameChange = async () => {
+      if (this.renameEnvironmentCallback) {
+        const response = this.renameEnvironmentCallback(this.envNameEl.value);
+        response.then((result) => {
+          this.editValidation(result, this.environment.name, this.envNameEl);
+        });
+      }
+    };
+    // Project Description
+    this.toggleEditDescription = async () => {
+      this.editingProjectDescription = !this.editingProjectDescription;
+    };
+    this.handleDescriptionChange = async () => {
+      if (this.editDescriptionCallback) {
+        await this.editDescriptionCallback();
+      }
+    };
+    // Recent Objects
+    this.openObject = (id) => {
+      this.openObjectCallback(id);
+    };
+    // Validation
+    this.editValidation = (result, name, el) => {
+      if (!result.success) {
+        el.validationStatus = "error";
+        el.validationMessage = result.errorMessage;
+      }
+    };
+    // 10.RENDER() FUNCTIONS //
+    this.renderProjectContent = () => {
+      return this.editingProjectDescription ? (h("div", null, h("gxg-form-textarea", { rows: 12, value: this.projectDescription, ref: (el) => (this.projectDescriptionEl = el) }), h("div", { class: "project-buttons align-center" }, h("gxg-text", { type: "text-link", onClick: this.handleDescriptionChange }, this._componentLocale.save), h("gxg-text", { type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.discard)))) : (h("div", null, h("div", { innerHTML: this.projectDescription }), h("gxg-text", { icon: "gemini-tools/edit", type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.edit)));
+    };
+    this.editingKbName = false;
+    this.editingEnvName = false;
+    this.editingProjectDescription = false;
+    this.kb = undefined;
+    this.environment = undefined;
+    this.projectDescription = undefined;
+    this.recentObjects = undefined;
+    this.renameKBCallback = undefined;
+    this.renameEnvironmentCallback = undefined;
+    this.editDescriptionCallback = undefined;
+    this.openObjectCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  renderFrontEndTitle() {
+    return this.environment.frontEnd.length <= 1
+      ? this._componentLocale.environment.frontEndLang
+      : this._componentLocale.environment.frontEndLangs;
+  }
+  // 11.RENDER() MAIN FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component", id: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": this.editingKbName, "click-to-edit": true, fluid: true, ref: el => (this.kbNameEl = el), onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", class: "version-pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), h("gxg-text", { class: "display-inline", type: "text-regular", padding: "s", italic: true }, this._componentLocale.created, ":", " ", formatDate(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", formatDate(this.kb.lastBuild, "date-time-short")))), h("div", { class: "environment" }, h("gxg-title-editable", { value: this.environment.name, "disable-edition": this.editingEnvName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "grid grid--environments" }, h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "front-end" }, this.environment.frontEnd.map((obj) => (h("div", { class: "align-center" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
+        "--color-on-background": "var(--gray-05);"
+      } }), obj.name))))), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.backEnd }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.backEnd.icon, color: "onbackground", style: {
+        "--color-on-background": "var(--gray-05);"
+      } }), this.environment.backEnd.name)), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.dataStore }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.dataStore.icon, color: "onbackground", style: {
+        "--color-on-background": "var(--gray-05);"
+      } }), this.environment.dataStore.name)))), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.project.title, class: "project" }, this.renderProjectContent()), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.recent.title, class: "recent-objects", cardType: "section", "no-padding-top": true }, this.recentObjects.map((obj, index) => (h("gxg-card", { background: "gray-01", padding: "m", cardType: "article", class: "recent-objects-card", actionable: true, onClick: () => this.openObject(index) }, h("div", { class: "grid grid--recent-objects" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }), h("gxg-text", { type: "text-regular", class: "obj-name" }, obj.name), h("gxg-text", { italic: true, class: "justify-end" }, this._componentLocale.recent.modified, ":", " ", `${formatDate(obj.modificationDate, "date")}`), h("div", { class: " justify-end" }, h("gxg-icon", { type: mapStatusToIcons[obj.status], color: "auto" })))))))))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/dashboard-home"]; }
+  get el() { return this; }
+  static get style() { return dashboardHomeCss; }
+}, [1, "gx-ide-dashboard-home", {
+    "kb": [16],
+    "environment": [16],
+    "projectDescription": [1, "project-description"],
+    "recentObjects": [16],
+    "renameKBCallback": [16],
+    "renameEnvironmentCallback": [16],
+    "editDescriptionCallback": [16],
+    "openObjectCallback": [16],
+    "editingKbName": [32],
+    "editingEnvName": [32],
+    "editingProjectDescription": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-dashboard-home", "ch-icon", "gxg-button", "gxg-card", "gxg-form-textarea", "gxg-icon", "gxg-label", "gxg-pill", "gxg-text", "gxg-title-editable", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-dashboard-home":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeDashboardHome$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-form-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-pill":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title-editable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeDashboardHome = GxIdeDashboardHome$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeDashboardHome, defineCustomElement };

package/dist/components/gx-ide-kb-manager-export.js

@@ -173,7 +173,7 @@ const clearKbPropertiesFromTree = (actualTreeState) => {
   return updatedTreeData;
 };
 
-const kbManagerExportCss = ".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}.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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}.tree-view-container{display:flex}.header__top{border-top:1px solid var(--gx-ide-container-border-color);display:grid;padding:var(--gxg-container--padding) var(--gxg-container--padding) 0 var(--gxg-container--padding);gap:var(--gx-ide-grid-column-gap);grid-template-columns:1fr auto;grid-template-areas:\"select-directory export-cancel-buttons-group options-btn\"}.header__top .select-directory{grid-area:select-directory}.header__top .export-cancel-buttons-group{grid-area:export-cancel-buttons-group}.header__top .options-btn{grid-area:options-btn}.header__bottom .checkboxes-wrapper{padding:var(--gx-ide-grid-column-gap);display:flex;flex-wrap:wrap;gap:var(--gx-ide-grid-column-gap)}.header__bottom .checkboxes-wrapper .add-checkbox{display:flex}.tree-container--empty{align-items:center;justify-content:center}.tree-container .gx-ide-message{padding:100px 0}.footer-right-wrapper{display:grid;gap:var(--gx-ide-grid-column-gap);grid-template-columns:100px 100px}";
+const kbManagerExportCss = ".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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}.tree-view-container{display:flex}.header__top{border-top:1px solid var(--gx-ide-container-border-color);display:grid;padding:var(--gxg-container--padding) var(--gxg-container--padding) 0 var(--gxg-container--padding);gap:var(--gx-ide-grid-column-gap);grid-template-columns:1fr auto;grid-template-areas:\"select-directory export-cancel-buttons-group options-btn\"}.header__top .select-directory{grid-area:select-directory}.header__top .export-cancel-buttons-group{grid-area:export-cancel-buttons-group}.header__top .options-btn{grid-area:options-btn}.header__bottom .checkboxes-wrapper{padding:var(--gx-ide-grid-column-gap);display:flex;flex-wrap:wrap;gap:var(--gx-ide-grid-column-gap)}.header__bottom .checkboxes-wrapper .add-checkbox{display:flex}.tree-container--empty{align-items:center;justify-content:center}.tree-container .gx-ide-message{padding:100px 0}.footer-right-wrapper{display:grid;gap:var(--gx-ide-grid-column-gap);grid-template-columns:100px 100px}";
 
 const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -367,6 +367,9 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.evaluateObjects();
     this.flattenObjectTypes(this.objectTypes);
   }
+  componentDidLoad() {
+    this.fileNameEl.focus();
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);

package/dist/components/gx-ide-kb-manager-import.js

@@ -159,7 +159,7 @@ const addImportItemResultDataItem = (importItemResultData, importCategoryData, i
   return updatedImportStatusTree;
 };
 
-const kbManagerImportCss = ".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}.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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
+const kbManagerImportCss = ".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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
 
 const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -423,6 +423,9 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       this._componentLocale.main.importStatus.noImportedFiles;
     this.evaluateImportStatusMessage();
   }
+  componentDidLoad() {
+    this.fileInputEl.focus();
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);

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

@@ -29,7 +29,7 @@ import { d as defineCustomElement$4 } from './text.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const newEnvironmentCss = ".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}.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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.tab__basic__single-runtime{display:flex;align-items:center;justify-content:center;gap:var(--spacing-comp-01)}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";
+const newEnvironmentCss = ".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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.tab__basic__single-runtime{display:flex;align-items:center;justify-content:center;gap:var(--spacing-comp-01)}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";
 
 const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -177,7 +177,7 @@ const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.renderTabBasic = () => {
       return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true, class: "tab tab__basic", isSelected: !this.isAdvanced }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true, flexRow: this.runtimes.length === 1 }, this.runtimes.length > 1 ? (h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeEnvironmentEl = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))) : ([
         h("div", { class: "tab__basic__single-runtime", slot: "header" }, h("gxg-icon", { color: "disabled", type: this.evaluateSingleRuntimeIcon() }), h("gxg-text", { textAlign: "center" }, this.runtimes[0].label))
-      ]), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: setInitialComboValue(this.languages), ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: setInitialComboValue(this.dataStores), ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
+      ]), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: setInitialComboValue(this.languages), ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language", preventEnterPropagation: true }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: setInitialComboValue(this.dataStores), ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store", preventEnterPropagation: true }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
     };
     this.renderTabAdvanced = () => {
       return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", null, h("slot", { name: "property-grid" }))));
@@ -205,6 +205,7 @@ const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   componentDidLoad() {
     this.initialSetup();
+    this.environmentNameEl.focus();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {

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

@@ -1,20 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
 import { g as getSelectedGxOption, r as renderFormItems } from './common.js';
 import { f as formSubmitValidation } from './form-validation.js';
-import { d as defineCustomElement$j } from './icon.js';
-import { d as defineCustomElement$i } from './container.js';
-import { d as defineCustomElement$h } from './title.js';
-import { d as defineCustomElement$g } from './button.js';
-import { d as defineCustomElement$f } from './combo-box.js';
-import { d as defineCustomElement$e } from './combo-box-item.js';
-import { d as defineCustomElement$d } from './form-checkbox.js';
-import { d as defineCustomElement$c } from './gxg-form-checkbox-group2.js';
-import { d as defineCustomElement$b } from './form-radio.js';
-import { d as defineCustomElement$a } from './form-text.js';
-import { d as defineCustomElement$9 } from './icon2.js';
-import { d as defineCustomElement$8 } from './gxg-label2.js';
+import { d as defineCustomElement$n } from './icon.js';
+import { d as defineCustomElement$m } from './ch-shortcuts2.js';
+import { d as defineCustomElement$l } from './ch-window2.js';
+import { d as defineCustomElement$k } from './ch-window-close2.js';
+import { d as defineCustomElement$j } from './container.js';
+import { d as defineCustomElement$i } from './title.js';
+import { d as defineCustomElement$h } from './button.js';
+import { d as defineCustomElement$g } from './combo-box.js';
+import { d as defineCustomElement$f } from './combo-box-item.js';
+import { d as defineCustomElement$e } from './form-checkbox.js';
+import { d as defineCustomElement$d } from './gxg-form-checkbox-group2.js';
+import { d as defineCustomElement$c } from './form-radio.js';
+import { d as defineCustomElement$b } from './form-text.js';
+import { d as defineCustomElement$a } from './icon2.js';
+import { d as defineCustomElement$9 } from './gxg-label2.js';
+import { d as defineCustomElement$8 } from './shortcuts.js';
 import { d as defineCustomElement$7 } from './tab.js';
 import { d as defineCustomElement$6 } from './tab-bar.js';
 import { d as defineCustomElement$5 } from './tab-button.js';
@@ -22,7 +26,7 @@ import { d as defineCustomElement$4 } from './tabs.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const newKbCss = "/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--gray-01);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gxg-container--padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gxg-container--padding) !important;\n}\n\nch-grid-cell {\n  --spacing-comp-02: var(--gxg-container--padding);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  box-shadow: var(--box-shadow-01) !important;\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-lg);\n  font-family: var(--font-family-primary);\n  line-height: 1.6em;\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-main .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-overflow .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n/*gxg-tree-view*/\n.tree-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  display: block;\n  border: 1px solid var(--gxg-border-color--regular);\n  background-color: var(--color-background);\n}\n\n/*HEADER*/\n.header {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"kb-name-label kb-input\";\n}\n.header--is-advanced {\n  grid-template-columns: auto 1fr min-content;\n  grid-template-areas: \"kb-name-label kb-input .\" \"location-label location-input location-icon\";\n}\n.header .kb-input {\n  grid-area: kb-input;\n}\n.header .kb-name-label {\n  grid-area: kb-label;\n}\n.header .location-label {\n  grid-area: location-label;\n}\n.header .location-input {\n  grid-area: location-input;\n}\n.header .location-icon {\n  grid-area: location-icon;\n}\n\n/*GXG-TABS*/\n.gxg-tabs {\n  margin-top: 0;\n  box-shadow: none;\n}\n\n/*Basic*/\n.basic-row-first {\n  container-name: basic-row-first;\n  container-type: inline-size;\n}\n.basic-row-first__container {\n  display: grid;\n  gap: var(--gx-ide-grid-column-gap);\n  padding: var(--gxg-container--padding);\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  grid-template-columns: repeat(2, 1fr);\n}\n@container (max-width: 640px) {\n  .basic-row-first {\n    /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */\n  }\n  .basic-row-first .basic-row-first__container {\n    grid-template-columns: 1fr;\n  }\n}\n\n.basic-row-second {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  flex-grow: 1;\n}\n\n/*Advanced*/\n.knowledge-base-storage {\n  display: grid;\n  grid-template-areas: \"knowledge-base-storage__col-left knowledge-base-storage__col-right\";\n  grid-template-columns: repeat(2, 1fr);\n  flex-grow: 1;\n  gap: 0;\n}\n.knowledge-base-storage > *:first-child {\n  border-right: 1px solid var(--gx-ide-container-border-color);\n}\n.knowledge-base-storage__col-left {\n  display: grid;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gxg-container--padding);\n  grid-area: knowledge-base-storage__col-left;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\";\n}\n.knowledge-base-storage__col-left .server-name-combo-box {\n  grid-area: server-name-combo-box;\n}\n.knowledge-base-storage__col-left .server-name-button {\n  grid-area: server-name-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .database-name {\n  grid-area: database-name;\n}\n.knowledge-base-storage__col-left .collation-combo-box {\n  grid-area: collation-combo-box;\n}\n.knowledge-base-storage__col-left .collation-button {\n  grid-area: collation-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .create-data-in-kb {\n  grid-area: create-data-in-kb;\n}\n.knowledge-base-storage__col-right {\n  display: grid;\n  padding: var(--gxg-container--padding);\n  gap: var(--gx-ide-grid-row-gap);\n  grid-area: knowledge-base-storage__col-right;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"authentication-type\" \"user-name\" \"password\" \"save-password\";\n}\n.knowledge-base-storage__col-right .authentication-type {\n  grid-area: authentication-type;\n}\n.knowledge-base-storage__col-right .user-name {\n  grid-area: user-name;\n}\n.knowledge-base-storage__col-right .password {\n  grid-area: password;\n}\n.knowledge-base-storage__col-right .save-password {\n  grid-area: save-password;\n}\n.knowledge-base-storage__col-right--windows-authentication {\n  grid-template-areas: \"authentication-type\";\n}";
+const newKbCss = "/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--gray-01);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gxg-container--padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gxg-container--padding) !important;\n}\n\nch-grid-cell {\n  --spacing-comp-02: var(--gxg-container--padding);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  box-shadow: var(--box-shadow-01) !important;\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-lg);\n  font-family: var(--font-family-primary);\n  line-height: 1.6em;\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-main .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-overflow .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n/*gxg-tree-view*/\n.tree-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  display: block;\n  border: 1px solid var(--gxg-border-color--regular);\n  background-color: var(--color-background);\n}\n\n/*HEADER*/\n.header {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"kb-name-label kb-input\";\n}\n.header--is-advanced {\n  grid-template-columns: auto 1fr min-content;\n  grid-template-areas: \"kb-name-label kb-input .\" \"location-label location-input location-icon\";\n}\n.header .kb-input {\n  grid-area: kb-input;\n}\n.header .kb-name-label {\n  grid-area: kb-label;\n}\n.header .location-label {\n  grid-area: location-label;\n}\n.header .location-input {\n  grid-area: location-input;\n}\n.header .location-icon {\n  grid-area: location-icon;\n}\n\n/*GXG-TABS*/\n.gxg-tabs {\n  margin-top: 0;\n  box-shadow: none;\n}\n\n/*Basic*/\n.basic-row-first {\n  container-name: basic-row-first;\n  container-type: inline-size;\n}\n.basic-row-first__container {\n  display: grid;\n  gap: var(--gx-ide-grid-column-gap);\n  padding: var(--gxg-container--padding);\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  grid-template-columns: repeat(2, 1fr);\n}\n@container (max-width: 640px) {\n  .basic-row-first {\n    /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */\n  }\n  .basic-row-first .basic-row-first__container {\n    grid-template-columns: 1fr;\n  }\n}\n\n.basic-row-second {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  flex-grow: 1;\n}\n\n/*Advanced*/\n.knowledge-base-storage {\n  display: grid;\n  grid-template-areas: \"knowledge-base-storage__col-left knowledge-base-storage__col-right\";\n  grid-template-columns: repeat(2, 1fr);\n  flex-grow: 1;\n  gap: 0;\n}\n.knowledge-base-storage > *:first-child {\n  border-right: 1px solid var(--gx-ide-container-border-color);\n}\n.knowledge-base-storage__col-left {\n  display: grid;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gxg-container--padding);\n  grid-area: knowledge-base-storage__col-left;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\";\n}\n.knowledge-base-storage__col-left .server-name-combo-box {\n  grid-area: server-name-combo-box;\n}\n.knowledge-base-storage__col-left .server-name-button {\n  grid-area: server-name-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .database-name {\n  grid-area: database-name;\n}\n.knowledge-base-storage__col-left .collation-combo-box {\n  grid-area: collation-combo-box;\n}\n.knowledge-base-storage__col-left .collation-button {\n  grid-area: collation-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .create-data-in-kb {\n  grid-area: create-data-in-kb;\n}\n.knowledge-base-storage__col-right {\n  display: grid;\n  padding: var(--gxg-container--padding);\n  gap: var(--gx-ide-grid-row-gap);\n  grid-area: knowledge-base-storage__col-right;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"authentication-type\" \"user-name\" \"password\" \"save-password\";\n}\n.knowledge-base-storage__col-right .authentication-type {\n  grid-area: authentication-type;\n}\n.knowledge-base-storage__col-right .user-name {\n  grid-area: user-name;\n}\n.knowledge-base-storage__col-right .password {\n  grid-area: password;\n}\n.knowledge-base-storage__col-right .save-password {\n  grid-area: save-password;\n}\n.knowledge-base-storage__col-right--windows-authentication {\n  grid-template-areas: \"authentication-type\";\n}";
 
 const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -32,6 +36,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
     this.selectedFrontEndsIds = [];
+    this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -253,6 +258,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   componentDidLoad() {
     this.initialSetup();
+    this.kbNameEl.focus();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -274,7 +280,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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" }, 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-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
+      : null), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs" }, 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 })));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   get el() { return this; }
@@ -312,7 +318,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-new-kb", "ch-icon", "gx-ide-container", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-checkbox-group", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-new-kb", "ch-icon", "ch-shortcuts", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-checkbox-group", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-shortcuts", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-new-kb":
       if (!customElements.get(tagName)) {
@@ -321,60 +327,80 @@ function defineCustomElement$1() {
       break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$n();
+      }
+      break;
+    case "ch-shortcuts":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
       }
       break;
     case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "gx-ide-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "gxg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "gxg-combo-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "gxg-combo-box-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "gxg-form-checkbox-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "gxg-form-radio":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "gxg-form-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "gxg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-shortcuts":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }