npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.13 → 1.0.15 - Mend

@genexus/genexus-ide-ui 1.0.13 → 1.0.15

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

Files changed (144) hide show

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

	@@ -1 +1 @@
1	- {"file":"gx-ide-new-environment.js","mappings":"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","names":["GxIdeNewEnvironment"],"sources":["src/components/new-environment/new-environment.scss?tag=gx-ide-new-environment&encapsulation=shadow","src/components/new-environment/new-environment.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--mer-color__surface);\n}\n/Header/\n.header {\n display: flex;\n &__label {\n flex: none;\n }\n}\n/Main/\n.main {\n height: 100%;\n}\n/Main > Gxg-Tabs/\n.gxg-tabs {\n margin-top: 0;\n box-shadow: none;\n}\n.tab {\n &__basic {\n &__single-runtime {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--mer-spacing--2xs);\n }\n }\n}\n/Main > Gxg-Tabs > Basic/\n.basic-main {\n display: flex;\n height: 100%;\n\n &__back-end {\n flex: 1;\n //border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n &__front-end {\n flex: 1;\n }\n}\n/Main > Gxg-Tabs > Advanced/\n.advanced-second-row {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 2;\n }\n > :nth-child(2) {\n grid-area: 1 / 2 / 2 / 3;\n }\n}\n.advanced-second-row-col-left {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(4, 1fr);\n grid-template-columns: 1fr auto;\n > * {\n display: flex;\n align-items: self-end;\n }\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 2;\n }\n > :nth-child(2) {\n grid-area: 1 / 2 / 2 / 3;\n }\n > :nth-child(3) {\n grid-area: 2 / 1 / 3 / 2;\n }\n > :nth-child(4) {\n grid-area: 2 / 2 / 3 / 3;\n }\n > :nth-child(5) {\n grid-area: 3 / 1 / 4 / 2;\n }\n > :nth-child(6) {\n grid-area: 3 / 2 / 4 / 3;\n }\n > :nth-child(7) {\n grid-area: 4 / 1 / 5 / 2;\n }\n > :nth-child(8) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.advanced-second-row-col-right {\n grid-template-columns: 1fr;\n grid-template-rows: repeat(4, 1fr);\n grid-auto-rows: 1fr;\n :nth-child(1) {\n grid-area: 1 / 1 / 2 / 2;\n }\n :nth-child(2) {\n grid-area: 2 / 1 / 3 / 2;\n }\n :nth-child(3) {\n grid-area: 3 / 1 / 4 / 2;\n }\n :nth-child(4) {\n grid-area: 4 / 1 / 5 / 2;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n getAssetPath,\n Method\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { RadioData } from \"@genexus/gemini/dist/types/components/form-radio/form-radio\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { setInitialComboValue } from \"../../common/helpers\";\nimport { GxOption } from \"../../common/types\";\nimport { config } from \"../../common/config\";\nimport { renderFormItems } from \"../../common/common\";\nimport { FormSubmitResult } from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/helpers\";\n@Component({\n tag: \"gx-ide-new-environment\",\n styleUrl: \"new-environment.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/new-environment\"]\n})\nexport class GxIdeNewEnvironment {\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE EVENTS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private selectedFrontEndsIds: string[] = [];\n private selectedRuntimeEnvironmentId: string;\n private selectedLanguageId: string;\n private selectedDataStoreId: string;\n private envNameModifiedByUser = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/new-environment/shortcuts.json`\n );\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeNewEnvironmentElement;\n\n / References needed to collect data con \"Create\" button submit/\n private environmentNameEl!: HTMLGxgFormTextElement;\n private languageEl!: HTMLGxgComboBoxElement;\n private runtimeEnvironmentEl!: HTMLGxgFormRadioGroupElement;\n private dataStoreEl!: HTMLGxgComboBoxElement;\n private frontEndsEl!: HTMLGxgFormCheckboxGroupElement;\n private setAsCurrentEnvironmentEl: HTMLGxgFormCheckboxElement;\n private gxgShortcutsEl: HTMLGxgShortcutsElement;\n\n // 3.STATE() VARIABLES //\n\n // 4. PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when user wants to cancel\n /\n @Prop() readonly cancelCallback: CancelCallback;\n\n /\n Callback that will be invoked when user confirms the KB creation\n /\n @Prop() readonly createCallback: CreateCallback;\n\n /\n It allows defining the DBMS that will be used in the solution\n /\n @Prop({ mutable: true }) dataStores!: GxOption[];\n\n /\n It allows selecting multiple generators for the front end\n /\n @Prop() readonly disableAdvanced: boolean = false;\n\n /\n Name of the new environment\n /\n @Prop({ mutable: true }) environmentName: string;\n\n /\n It allows selecting multiple generators for the front end\n /\n @Prop({ mutable: true }) frontEnds!: GxOption[];\n\n /\n Callback invoked when the user changes the language or the selected data source, if and only if the environment name was not modified\n /\n @Prop() readonly getEnvironmentNameCallback: GetEnvironmentNameCallback;\n\n /\n Callback invoked when the user changes the language, allows modifying the list of frontends\n /\n @Prop() readonly getFrontEndsCallback: GetFrontEndsCallback;\n\n /\n Callback invoked when the user changes the language or the runtime\n /\n @Prop() readonly getDataSourcesCallback: GetDataSourcesCallback;\n\n /\n Define if the Advanced tab should be displayed\n /\n @Prop() readonly isAdvanced: boolean = false;\n\n /\n Possible values for 'Language' combo\n /\n @Prop() readonly languages!: GxOption[];\n\n /\n Possible values for 'Runtime Environment' radio button\n /\n @Prop() readonly runtimes!: GxOption[];\n\n /\n Belongs to checkbox 'Set as current environment' @default true\n \n /\n @Prop() readonly setAsTarget?: boolean = true;\n\n // 5.EVENTS (EMIT) //\n\n /*\n @description Gets fired when the component has rendered for the first time.\n /\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateSelectedRuntimeEnvironmentId();\n }\n\n componentDidLoad() {\n this.initialSetup();\n this.environmentNameEl.focus();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n /\n Suspends or reactivates the shortcuts\n /\n @Method()\n async suspendShortcuts(suspendShortcuts: boolean) {\n if (suspendShortcuts) {\n this.gxgShortcutsEl.suspend = true;\n } else {\n this.gxgShortcutsEl.suspend = false;\n }\n }\n\n // 9.LOCAL METHODS //\n\n // 9.LOCAL METHODS -> Helpers //\n\n private initialSetup = () => {\n this.updateSelectedFrontEndsIds();\n this.setInitialRuntimeId();\n this.setInitialLanguageId();\n this.setInitialDataStoreId();\n };\n\n private evaluateSelectedRuntimeEnvironmentId = () => {\n if (this.runtimes.length === 1) {\n this.selectedRuntimeEnvironmentId = this.runtimes[0].id;\n }\n };\n\n private setInitialRuntimeId = () => {\n if (this.runtimeEnvironmentEl?.value) {\n const initialRuntimeEnvironment = this.runtimes.find(\n runtime => runtime.value === this.runtimeEnvironmentEl?.value\n );\n if (initialRuntimeEnvironment) {\n this.selectedRuntimeEnvironmentId = initialRuntimeEnvironment.id;\n }\n }\n };\n\n private setInitialLanguageId = () => {\n if (this.languageEl?.value) {\n const initialLanguage = this.languages.find(\n lang => lang.id === this.languageEl?.value\n );\n if (initialLanguage) {\n this.selectedLanguageId = initialLanguage.id;\n }\n }\n };\n\n private setInitialDataStoreId = () => {\n if (this.dataStoreEl?.value) {\n const initialDataStore = this.dataStores.find(\n dataStore => dataStore.id === this.dataStoreEl?.value\n );\n if (initialDataStore) {\n this.selectedDataStoreId = initialDataStore.id;\n }\n }\n };\n\n // 9.LOCAL METHODS -> Not Helpers //\n\n private envNameInputHandler = (e: CustomEvent<EventEmitter>) => {\n const newEnvName = (e.detail + \"\").trim();\n if (newEnvName !== this.environmentName) {\n this.environmentName = newEnvName;\n this.envNameModifiedByUser = true;\n }\n };\n\n private updateSelectedFrontEndsIds = () => {\n this.selectedFrontEndsIds = [];\n this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {\n frontEndsCheckboxesInfo.forEach(frontEnd => {\n if (frontEnd.value) {\n this.selectedFrontEndsIds.push(frontEnd.id);\n }\n });\n });\n };\n\n private setEnvironmentHandler = async () => {\n if (this.createCallback) {\n const newEnvData: NewEnvironmentData = {\n setAsCurrent: this.setAsCurrentEnvironmentEl.checked,\n name: this.environmentNameEl.value,\n runtime: this.selectedRuntimeEnvironmentId,\n language: this.languageEl.value,\n dataStores: this.dataStoreEl.value,\n frontEnds: this.selectedFrontEndsIds\n };\n const createCallbackPromise = this.createCallback(newEnvData);\n createCallbackPromise.then(formSubmitResult => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private cancelButtonClickedHandler = async (): Promise<void> => {\n if (this.cancelCallback) {\n await this.cancelCallback();\n }\n };\n\n private runtimeEnvironmentChangedHandler = (\n event: CustomEvent<RadioData>\n ): void => {\n this.selectedRuntimeEnvironmentId = event.detail.id;\n this.updateDataSources();\n };\n\n private languageValueChangedHandler = () => {\n / the language item id is used for the value (they are equal)/\n this.selectedLanguageId = this.languageEl.value;\n this.updateDataSources();\n this.updateFrontEnds();\n this.updateEnvironmentName();\n };\n\n private dataStoreValueChangedHandler = () => {\n / the data store item id is used for the value (they are equal)/\n this.selectedDataStoreId = this.dataStoreEl.value;\n this.updateEnvironmentName();\n };\n\n private updateDataSources = async () => {\n if (this.getDataSourcesCallback) {\n const updatedDataSources = await this.getDataSourcesCallback(\n this.selectedLanguageId,\n this.selectedRuntimeEnvironmentId\n );\n if (updatedDataSources?.length > 0) {\n this.dataStores = updatedDataSources;\n }\n }\n };\n\n private updateFrontEnds = async () => {\n if (this.getFrontEndsCallback) {\n const updatedFrontEnds = await this.getFrontEndsCallback(\n this.selectedLanguageId\n );\n if (updatedFrontEnds?.length > 0) {\n this.frontEnds = updatedFrontEnds;\n }\n }\n };\n\n private updateEnvironmentName = async () => {\n if (\n this.getEnvironmentNameCallback &&\n this.environmentNameEl &&\n this.envNameModifiedByUser\n ) {\n const updatedEnvName = await this.getEnvironmentNameCallback(\n this.selectedLanguageId,\n this.selectedDataStoreId\n );\n if (updatedEnvName) {\n this.environmentName = updatedEnvName;\n }\n }\n };\n\n private evaluateSingleRuntimeIcon = () => {\n if (this.runtimes[0].id === \"local\") {\n return \"window-tools/rol\";\n } else {\n return \"window-tools/genexus-cloud\";\n }\n };\n\n // 9.LOCAL METHODS -> Renders //\n\n private renderTabBasic = (): Element => {\n {\n / #basic tab/\n }\n return (\n <gxg-tab\n tab=\"basic\"\n no-padding\n flexContainer\n class=\"tab tab__basic\"\n isSelected={!this.isAdvanced}\n >\n <gx-ide-container\n containerTitle={this._componentLocale.runtime}\n noContentPadding\n displayBorderBottom\n flexRow={this.runtimes.length === 1}\n >\n {/ #runtime environment /}\n {this.runtimes.length > 1 ? (\n <gxg-form-radio-group\n slot=\"header\"\n radiosLabelSize=\"large\"\n ref={(el: HTMLGxgFormRadioGroupElement) =>\n (this.runtimeEnvironmentEl = el as HTMLGxgFormRadioGroupElement)\n }\n row\n center\n onChange={this.runtimeEnvironmentChangedHandler}\n >\n {renderFormItems(\n \"gxg-form-radio\",\n this.runtimes,\n \"runtime-environment\"\n )}\n </gxg-form-radio-group>\n ) : (\n [\n <div class=\"tab__basic__single-runtime\" slot=\"header\">\n <gxg-icon\n color=\"disabled\"\n type={this.evaluateSingleRuntimeIcon()}\n ></gxg-icon>\n <gxg-text textAlign=\"center\">{this.runtimes[0].label}</gxg-text>\n </div>\n ]\n )}\n\n <div class=\"basic-main\">\n {/ #back end/}\n <gx-ide-container\n container-title={\n this._componentLocale.tabBasic.backEnd.backEndLabel\n }\n class=\"basic-main__back-end\"\n contentBorderEnd\n titleType=\"secondary\"\n >\n {/ #language /}\n <gxg-combo-box\n disable-filter\n label={this._componentLocale.tabBasic.backEnd.language}\n value={setInitialComboValue(this.languages)}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.languageEl = el as HTMLGxgComboBoxElement)\n }\n toolTip={config.tooltip}\n onValueChanged={this.languageValueChangedHandler}\n part=\"language\"\n >\n {renderFormItems(\"gxg-combo-box-item\", this.languages)}\n </gxg-combo-box>\n\n {/ #data stores/}\n <gxg-combo-box\n disable-filter\n label={this._componentLocale.tabBasic.backEnd.dataStores}\n value={setInitialComboValue(this.dataStores)}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.dataStoreEl = el as HTMLGxgComboBoxElement)\n }\n onValueChanged={this.dataStoreValueChangedHandler}\n toolTip={config.tooltip}\n part=\"data-store\"\n >\n {renderFormItems(\"gxg-combo-box-item\", this.dataStores)}\n </gxg-combo-box>\n </gx-ide-container>\n <gx-ide-container\n container-title={\n this._componentLocale.tabBasic.frontEnd.frontEndLabel\n }\n class=\"basic-main__front-end\"\n titleType=\"secondary\"\n >\n {/ #front end /}\n <gxg-form-checkbox-group\n checkboxesLabelSize=\"large\"\n ref={(el: HTMLGxgFormCheckboxGroupElement) =>\n (this.frontEndsEl = el as HTMLGxgFormCheckboxGroupElement)\n }\n onGroupValuesChanged={this.updateSelectedFrontEndsIds}\n >\n {renderFormItems(\"gxg-form-checkbox\", this.frontEnds)}\n </gxg-form-checkbox-group>\n </gx-ide-container>\n </div>\n </gx-ide-container>\n </gxg-tab>\n );\n };\n\n private renderTabAdvanced = (): Element => {\n return (\n <gxg-tab tab=\"advanced\" no-padding>\n <gx-ide-container>\n {/ #advanced tab/}\n <slot name=\"property-grid\"></slot>\n </gx-ide-container>\n </gxg-tab>\n );\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n {/ header (environment name)/}\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n noContentPadding\n noBorderFooter\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <header class=\"header\" slot=\"header\">\n {/ #environment name/}\n <gxg-label labelPosition=\"start\" class=\"header__label\">\n {this._componentLocale.name}\n </gxg-label>\n\n {/ #front end /}\n <gxg-form-text\n label-position=\"start\"\n placeholder=\"New Environment\"\n max-width=\"100%\"\n value={this.environmentName}\n ref={(el: HTMLGxgFormTextElement) =>\n (this.environmentNameEl = el as HTMLGxgFormTextElement)\n }\n onInput={\n !this.envNameModifiedByUser &&\n (this.envNameInputHandler as any)\n }\n toolTip={config.tooltip}\n class=\"header__text\"\n part=\"environment-name\"\n ></gxg-form-text>\n </header>\n\n {/ main /}\n <main class=\"main\">\n <gxg-tabs class=\"gxg-tabs\" noBorder>\n {this.isAdvanced ? (\n <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n {/ #basic tab-button/}\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.tabBasic.tabLabel}\n tab=\"basic\"\n is-selected\n ></gxg-tab-button>\n\n {/ #advanced tab-button/}\n {this.isAdvanced ? (\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.tabAdvanced.tabLabel}\n tab=\"advanced\"\n disabled={this.disableAdvanced}\n ></gxg-tab-button>\n ) : null}\n </gxg-tab-bar>\n ) : null}\n\n {this.renderTabBasic()}\n {this.isAdvanced && this.renderTabAdvanced()}\n </gxg-tabs>\n </main>\n\n {/ #footer /}\n {/ #set as current environment/}\n <gxg-form-checkbox\n label={this._componentLocale.footer.setAsCurrentEnvironment}\n ref={(el: HTMLGxgFormCheckboxElement) =>\n (this.setAsCurrentEnvironmentEl =\n el as HTMLGxgFormCheckboxElement)\n }\n checked={this.setAsTarget}\n part=\"set-as-current-environment\"\n slot=\"footer-start\"\n ></gxg-form-checkbox>\n\n {/ #cancel/}\n <gxg-button\n id=\"button-cancel\"\n slot=\"footer-end\"\n type=\"outlined\"\n onClick={this.cancelButtonClickedHandler}\n part=\"gxg-button gxg-button--cancel\"\n >\n {this._componentLocale.footer.btnCancel}\n </gxg-button>\n\n {/ #set new environment */}\n <gxg-button\n id=\"button-create\"\n slot=\"footer-end\"\n type=\"primary-text-only\"\n onClick={this.setEnvironmentHandler}\n part=\"gxg-button gxg-button--create\"\n >\n {this._componentLocale.footer.btnSetNewEnvironment}\n </gxg-button>\n </gx-ide-container>\n </div>\n <gxg-shortcuts\n src={this.shortcutsSrc}\n ref={(el: HTMLGxgShortcutsElement) =>\n (this.gxgShortcutsEl = el as HTMLGxgShortcutsElement)\n }\n ></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface NewEnvironmentData {\n setAsCurrent: boolean;\n name: string;\n runtime: string;\n language: string;\n dataStores: string;\n frontEnds: string[];\n}\n\nexport type CreateCallback = (\n data: NewEnvironmentData\n) => Promise<FormSubmitResult>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type ChangedCallback = (data: NewEnvironmentData) => Promise<void>;\n\nexport type GetDataSourcesCallback = (\n selectedLanguageId: string,\n selectedRuntimeId: string\n) => Promise<GxOption[]>;\n\nexport type GetFrontEndsCallback = (\n selectedLanguageId: string\n) => Promise<GxOption[]>;\n\nexport type GetEnvironmentNameCallback = (\n selectedLanguageId: string,\n selectedDataSourceId: string\n) => Promise<string \| undefined>;\n"],"version":3}
1	+ {"file":"gx-ide-new-environment.js","mappings":"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","names":["GxIdeNewEnvironment"],"sources":["src/components/new-environment/new-environment.scss?tag=gx-ide-new-environment&encapsulation=shadow","src/components/new-environment/new-environment.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n grid-template-rows: max-content 1fr max-content;\n}\n\n.section {\n display: contents;\n}\n\n.basic,\n.advanced {\n padding-block-start: var(--content-block-spacing);\n block-size: 100%;\n overflow: auto;\n}\n.advanced {\n padding-block-end: var(--content-block-spacing);\n}\n\n// basic\n.basic {\n display: grid;\n grid-template:\n \"runtime-environment runtime-environment\" max-content\n \"back-end front-end\" 1fr;\n grid-template-columns: 1fr 1fr;\n}\n.basic__runtime-environment {\n grid-area: runtime-environment;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.control-header__back-end,\n.control-header__front-end {\n padding-block-start: var(--mer-spacing--md);\n}\n.basic__back-end {\n grid-area: back-end;\n}\n.basic__front-end {\n grid-area: front-end;\n}\n.basic__back-end,\n.basic__front-end {\n display: grid;\n grid-template-rows: max-content 1fr;\n grid-auto-rows: max-content;\n overflow: auto;\n}\n.main__back-end {\n border-inline-end: var(--section-common-border);\n}\n.main__back-end,\n.main__front-end {\n grid-auto-rows: max-content;\n padding-block: var(--content-block-spacing);\n overflow: auto;\n}\n\n// WA / TODO: Add a helper class in Mercury to justify text.\n.text-align-center {\n text-align: center; // should be resolved on mercury\n}\n\n.tab::part(page) {\n // WA / TODO: Remove this line when the ch-tab renders supports scrollbar\n // custom styling\n scrollbar-width: thin;\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Element,\n getAssetPath,\n Host,\n Method,\n Prop,\n State,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\nimport {\n mapOptionsToComboBoxItemModel,\n renderChCheckboxItems\n} from \"../../common/helpers\";\nimport { getSelectedItem } from \"../../common/common\";\nimport { FormSubmitResult, GxOption } from \"../../common/types\";\nimport {\n ControlValidation,\n validateControls\n} from \"../../common/form-validation\";\nimport {\n ChRadioGroupRenderCustomEvent,\n TabModel,\n ComboBoxModel,\n ChEditCustomEvent,\n RadioGroupModel\n} from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n // TODO: review if \"utils/form--full\" is required.\n \"resets/box-sizing\",\n \"components/tab\",\n \"components/tooltip\",\n \"utils/form--full\",\n \"utils/layout\",\n \"utils/typography\",\n \"chameleon/scrollbar\"\n];\nconst GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE = getIconPath({\n category: \"window-tools\",\n name: \"genexus-cloud\",\n colorType: \"on-surface\"\n});\nconst GEMINI_TOOLS_ROL_ON_SURFACE = getIconPath({\n category: \"window-tools\",\n name: \"rol\",\n colorType: \"on-surface\"\n});\n\nconst MAIN_SECTION_CLASSES: string = \"main\";\nconst BASIC_SECTION_PARENT_CLASSES: string = \"basic\";\nconst BASIC_TAB_SELECTOR: string = \"basic\";\nconst ADVANCED_TAB_SELECTOR: string = \"advanced\";\n\n@Component({\n tag: \"gx-ide-new-environment\",\n styleUrl: \"new-environment.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/new-environment\"]\n})\nexport class GxIdeNewEnvironment {\n #advancedTabHasBeenRendered: boolean = false;\n #chShortcutsEl!: HTMLChShortcutsElement;\n #envNameModifiedByUser = false;\n #selectedDataStoreId: string;\n #selectedFrontEndsIds: string[] = [];\n #selectedLanguageId: string;\n #selectedRuntimeEnvironmentId: string;\n #shortcutsSrc = getAssetPath(\n `./gx-ide-assets/new-environment/shortcuts.json`\n );\n #newEnvironmentSectionsModel: TabModel = [];\n\n /\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n @Element() el: HTMLGxIdeNewEnvironmentElement;\n\n / References needed to collect data con \"createCallback\" button submit/\n #dataStoreEl!: HTMLChComboBoxRenderElement;\n #environmentNameEl!: HTMLChEditElement;\n #frontEndsEl!: HTMLDivElement;\n #languageEl!: HTMLChComboBoxRenderElement;\n #setAsCurrentEnvironmentEl!: HTMLChCheckboxElement;\n\n @State() advancedTabIsVisible: boolean = false;\n @State() validatableControls = new Map<string, ControlValidation>();\n\n // representations of GxOption[] as ComboBoxModel or RadioGroupModel.\n @State() dataStoresComboBoxModel: ComboBoxModel = [];\n @State() dataStoresInitialValue: string;\n @State() languageComboBoxModel: ComboBoxModel = [];\n @State() languageInitialValue: string;\n @State() runtimesRadioGroupModel: RadioGroupModel = [];\n\n /\n Callback invoked when user wants to cancel\n /\n @Prop() readonly cancelCallback: CancelCallback;\n\n /\n Callback invoked when user confirms the KB creation\n /\n @Prop() readonly createCallback!: CreateCallback;\n\n /\n Allows defining the DBMS to be used in the solution\n /\n @Prop({ mutable: true }) dataStores!: GxOption[];\n @Watch(\"dataStores\")\n dataStoresChanged(newValue: GxOption[]) {\n if (newValue?.length) {\n this.dataStoresComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n this.dataStoresInitialValue = getSelectedItem(newValue);\n }\n }\n\n /\n Allows selecting multiple generators for the front end\n /\n @Prop() readonly disableAdvanced: boolean = false;\n\n /\n Name of the new environment\n /\n @Prop({ mutable: true }) environmentName: string;\n\n /\n Allows selecting multiple generators for the front end\n /\n @Prop({ mutable: true }) frontEnds!: GxOption[];\n\n /\n Callback invoked when user changes the language or the runtime\n /\n @Prop() readonly getDataSourcesCallback: GetDataSourcesCallback;\n\n /\n Callback invoked when user changes the language or data source\n /\n @Prop() readonly getEnvironmentNameCallback: GetEnvironmentNameCallback;\n\n /\n Callback invoked when user changes the language\n /\n @Prop() readonly getFrontEndsCallback: GetFrontEndsCallback;\n\n /\n Define if the Advanced tab should be displayed\n /\n @Prop() readonly isAdvanced: boolean = false;\n\n /\n Possible values for 'Language' combo\n /\n @Prop() readonly languages!: GxOption[];\n @Watch(\"languages\")\n languagesChanged(newValue: GxOption[]) {\n if (newValue?.length) {\n this.languageComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n this.languageInitialValue = getSelectedItem(newValue);\n }\n }\n\n /\n Possible values for 'Runtime Environment' radio button\n /\n @Prop() readonly runtimes!: GxOption[];\n @Watch(\"runtimes\")\n runtimesChanged(newValue: GxOption[]) {\n if (newValue?.length) {\n this.runtimesRadioGroupModel = mapOptionsToComboBoxItemModel(\n this.runtimes\n );\n }\n }\n\n /\n Belongs to checkbox 'Set as current environment' @default true\n \n /\n @Prop() readonly setAsTarget?: boolean = true;\n\n connectedCallback() {\n this.dataStoresChanged(this.dataStores);\n this.languagesChanged(this.languages);\n this.runtimesChanged(this.runtimes);\n }\n\n componentDidLoad() {\n this.#updateSelectedFrontEndsIds();\n this.#initializeValidatableControlsBasicTab();\n }\n\n componentDidRender() {\n if (this.advancedTabIsVisible && !this.#advancedTabHasBeenRendered) {\n // just call this once.\n this.#advancedTabHasBeenRendered = true;\n }\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.#newEnvironmentSectionsModel = [\n {\n id: BASIC_TAB_SELECTOR,\n name: this.#componentLocale.tabBasic.tabLabel\n },\n {\n id: ADVANCED_TAB_SELECTOR,\n name: this.#componentLocale.tabAdvanced.tabLabel\n }\n ];\n this.#evaluateSelectedRuntimeEnvironmentId();\n }\n\n /*\n Suspends or reactivates the shortcuts\n /\n @Method()\n async suspendShortcuts(suspendShortcuts: boolean) {\n if (suspendShortcuts) {\n this.#chShortcutsEl.suspend = true;\n } else {\n this.#chShortcutsEl.suspend = false;\n }\n }\n\n #dataStoreValueChangedHandler = () => {\n / the data store item id is used for the value (they are equal)/\n this.#selectedDataStoreId = this.#dataStoreEl.value;\n this.#updateEnvironmentName();\n };\n\n #envNameInputHandler = (e: ChEditCustomEvent<string> \| InputEvent) => {\n const newEnvName = (e as ChEditCustomEvent<string>).detail.trim();\n if (newEnvName !== this.environmentName) {\n this.environmentName = newEnvName;\n this.#envNameModifiedByUser = true;\n }\n };\n\n #evaluateSelectedRuntimeEnvironmentId = () => {\n this.#selectedRuntimeEnvironmentId = this.runtimes[0]?.value;\n };\n\n #evaluateSingleRuntimeIcon = () => {\n if (this.runtimes[0].id === \"local\") {\n return GEMINI_TOOLS_ROL_ON_SURFACE;\n } else {\n return GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE;\n }\n };\n\n // TODO: We must avoid performing the get 3 times.\n // It is used on new-environment as well.\n #evaluateTooltipRender = (\n controlReference: HTMLElement\n ): HTMLChTooltipElement =>\n this.validatableControls?.get(controlReference?.id)?.hasError &&\n this.validatableControls.get(controlReference.id)?.message && (\n <ch-tooltip\n class=\"tooltip\"\n actionElement={controlReference as unknown as HTMLButtonElement}\n blockAlign={config.tooltipSettings.blockAlign}\n inlineAlign={config.tooltipSettings.inlineAlign}\n delay={config.tooltipSettings.delay}\n >\n {this.validatableControls.get(controlReference.id).message}\n </ch-tooltip>\n );\n\n #getCheckboxValues() {\n const checkboxes = this.#frontEndsEl.querySelectorAll(\"ch-checkbox\");\n const values: Array<string> = Array.from(checkboxes)\n .map((checkbox: any) => checkbox.value)\n .filter(Boolean);\n return values;\n }\n\n #initializeValidatableControlsBasicTab = () => {\n // populate #controlsValidation with the controls that could have errors.\n const validatableControls: HTMLElement[] = [\n this.#dataStoreEl,\n this.#languageEl\n ];\n validatableControls.forEach(validatableControl => {\n if (validatableControl.id) {\n this.validatableControls.set(validatableControl.id, {\n reference: validatableControl,\n hasError: false,\n message: undefined\n });\n }\n });\n };\n\n #languageValueChangedHandler = () => {\n / the language item id is used for the value (they are equal)*/\n this.#selectedLanguageId = this.#languageEl.value;\n this.#updateDataSources();\n this.#updateFrontEnds();\n this.#updateEnvironmentName();\n };\n\n #renderAdvanced = (): Element => {\n return <slot name=\"property-grid\"></slot>;\n };\n\n #renderBasic = (): HTMLElement[] => {\n return [\n <div class=\"basic__runtime-environment control-header-with-border\">\n <h2\n // back end\n class=\"control-header heading-5 text-align-center\"\n >\n {this.#componentLocale.runtime}\n </h2>\n {this.runtimes.length > 1 ? (\n <ch-radio-group-render\n class=\"radio-group\"\n onChange={this.#runtimeEnvironmentChangedHandler}\n model={this.runtimesRadioGroupModel}\n value={this.#selectedRuntimeEnvironmentId}\n ></ch-radio-group-render>\n ) : (\n <div>\n <ch-image\n class=\"icon-sm\"\n src={this.#evaluateSingleRuntimeIcon()}\n ></ch-image>\n <p class=\"text-body\">{this.runtimes[0].label} </p>\n </div>\n )}\n </div>,\n <section class=\"basic__back-end scrollable\">\n <h2\n // back end\n class=\"control-header control-header-with-border control-header__back-end heading-5 text-align-center spacing-body-inline\"\n >\n {this.#componentLocale.tabBasic.backEnd.backEndLabel}\n </h2>\n\n <div class=\"field-group main__back-end spacing-body-inline scrollable\">\n <div\n // #language\n class=\"field field-block\"\n >\n <label class=\"label\" htmlFor=\"language\">\n {this.#componentLocale.tabBasic.backEnd.language}\n </label>\n <ch-combo-box-render\n id=\"language\"\n class=\"combo-box\"\n part=\"language\"\n value={this.languageInitialValue}\n disabled={this.languages.length === 0}\n model={this.languageComboBoxModel}\n onInput={\n this.languages.length > 0 && this.#languageValueChangedHandler\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#languageEl = el as HTMLChComboBoxRenderElement)\n }\n // TODO: toolTip={config.tooltip}\n ></ch-combo-box-render>\n {this.#evaluateTooltipRender(this.#languageEl)}\n </div>\n\n <div\n // #data stores\n class=\"field field-block\"\n >\n <label class=\"label\" htmlFor=\"data-store\">\n {this.#componentLocale.tabBasic.backEnd.dataStores}\n </label>\n <ch-combo-box-render\n id=\"data-store\"\n class=\"combo-box\"\n part=\"data-store\"\n value={this.dataStoresInitialValue}\n model={this.dataStoresComboBoxModel}\n onInput={this.#dataStoreValueChangedHandler}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#dataStoreEl = el as HTMLChComboBoxRenderElement)\n }\n // TODO: toolTip={config.tooltip}\n ></ch-combo-box-render>\n {this.#evaluateTooltipRender(this.#dataStoreEl)}\n </div>\n </div>\n </section>,\n\n <section class=\"basic__front-end scrollable\">\n <h2\n // front end\n class=\"control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline\"\n >\n {this.#componentLocale.tabBasic.frontEnd.frontEndLabel}\n </h2>\n <div\n class=\"field-group front-end__checkboxes spacing-body-inline main__front-end scrollable\"\n role=\"group\"\n aria-labelledby={this.#componentLocale.tabBasic.frontEnd.generators}\n ref={(el: HTMLDivElement) =>\n (this.#frontEndsEl = el as HTMLDivElement)\n }\n >\n {renderChCheckboxItems(\n this.frontEnds,\n \"front-end\",\n this.#updateSelectedFrontEndsIds\n )}\n </div>\n </section>\n ];\n };\n\n #runtimeEnvironmentChangedHandler = (\n event: ChRadioGroupRenderCustomEvent<string>\n ): void => {\n this.#selectedRuntimeEnvironmentId = event.detail;\n this.#updateDataSources();\n };\n\n #setEnvironmentHandler = async () => {\n this.createCallback({\n setAsCurrent: !!this.#setAsCurrentEnvironmentEl?.value,\n name: this.#environmentNameEl.value,\n runtime: this.#selectedRuntimeEnvironmentId,\n language: this.#languageEl.value,\n dataStores: this.#dataStoreEl.value,\n frontEnds: this.#selectedFrontEndsIds\n }).then((formSubmitResult: FormSubmitResult) => {\n this.validatableControls = validateControls(\n formSubmitResult,\n this.validatableControls\n );\n });\n };\n\n #tabSelectionChangedHandler = (\n event: CustomEvent<{\n lastSelectedIndex: number;\n newSelectedId: string;\n newSelectedIndex: number;\n }>\n ): void => {\n if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {\n this.advancedTabIsVisible = true;\n // Some logic for advanced tab is done on componentDidRender lifecycle,\n // since the reference to the elements is needed.\n }\n };\n\n #updateDataSources = async () => {\n if (this.getDataSourcesCallback) {\n const updatedDataSources = await this.getDataSourcesCallback(\n this.#selectedLanguageId,\n this.#selectedRuntimeEnvironmentId\n );\n if (updatedDataSources?.length > 0) {\n this.dataStores = updatedDataSources;\n }\n }\n };\n\n #updateEnvironmentName = async () => {\n if (\n this.getEnvironmentNameCallback &&\n this.#environmentNameEl &&\n !this.#envNameModifiedByUser\n ) {\n const updatedEnvName = await this.getEnvironmentNameCallback(\n this.#selectedLanguageId,\n this.#selectedDataStoreId\n );\n if (updatedEnvName) {\n this.environmentName = updatedEnvName;\n }\n }\n };\n\n #updateSelectedFrontEndsIds = () => {\n this.#selectedFrontEndsIds = this.#getCheckboxValues();\n };\n\n #updateFrontEnds = async () => {\n if (this.getFrontEndsCallback) {\n const updatedFrontEnds = await this.getFrontEndsCallback(\n this.#selectedLanguageId\n );\n if (updatedFrontEnds?.length > 0) {\n this.frontEnds = updatedFrontEnds;\n }\n }\n };\n\n render() {\n return (\n <Host class=\"widget scrollable\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <ch-shortcuts\n src={this.#shortcutsSrc}\n ref={(el: HTMLChShortcutsElement) =>\n (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n }\n ></ch-shortcuts>\n\n <section class=\"section\">\n <header class=\"header control-header-with-border spacing-body-inline spacing-body-block-start\">\n <div\n // #environment name\n class=\"field field-inline\"\n >\n <label class=\"label\" htmlFor=\"environment-name\">\n {this.#componentLocale.name}\n </label>\n <ch-edit\n autoFocus\n id=\"environment-name\"\n class=\"form-input\"\n part=\"environment-name\"\n value={this.environmentName}\n placeholder={this.#componentLocale.environmentNamePlaceholder}\n // TODO: toolTip={config.tooltip}\n ref={(el: HTMLChEditElement) =>\n (this.#environmentNameEl = el as HTMLChEditElement)\n }\n onInput={\n !this.#envNameModifiedByUser &&\n (this.#envNameInputHandler as any)\n }\n ></ch-edit>\n </div>\n </header>\n\n {this.isAdvanced ? (\n <ch-tab-render\n // main section\n class={{\n tab: true,\n [MAIN_SECTION_CLASSES]: true\n }}\n direction=\"block\"\n model={this.#newEnvironmentSectionsModel}\n selectedId={BASIC_TAB_SELECTOR}\n overflow=\"auto\"\n contain=\"size\"\n onSelectedItemChange={\n !this.advancedTabIsVisible && this.#tabSelectionChangedHandler\n }\n >\n <div\n slot={BASIC_TAB_SELECTOR}\n class={BASIC_SECTION_PARENT_CLASSES}\n part=\"tab-button-basic\"\n >\n {this.#renderBasic()}\n </div>\n {this.advancedTabIsVisible && (\n <div\n slot={ADVANCED_TAB_SELECTOR}\n class=\"advanced spacing-body-inline\"\n part=\"tab-button-advanced\"\n >\n {this.#renderAdvanced()}\n </div>\n )}\n </ch-tab-render>\n ) : (\n <div\n // main section\n class={MAIN_SECTION_CLASSES}\n >\n <div class={BASIC_SECTION_PARENT_CLASSES}>\n {this.#renderBasic()}\n </div>\n </div>\n )}\n\n <footer\n class={{\n \"control-footer\": this.isAdvanced,\n \"control-footer-with-border\": !this.isAdvanced,\n \"control-footer-space-between\": true,\n \"spacing-body-block-end\": true,\n \"spacing-body-inline\": true\n }}\n >\n <ch-checkbox\n // #set as current environment\n class=\"checkbox\"\n caption={this.#componentLocale.footer.setAsCurrentEnvironment}\n ref={(el: HTMLChCheckboxElement) =>\n (this.#setAsCurrentEnvironmentEl = el as HTMLChCheckboxElement)\n }\n checkedValue=\"current-environment\"\n value={this.setAsTarget ? \"current-environment\" : \"\"}\n part=\"set-as-current-environment\"\n ></ch-checkbox>\n\n <div class=\"buttons-spacer\">\n <button\n // #cancel\n class=\"button-secondary\"\n onClick={this.cancelCallback}\n part=\"button button--cancel\"\n >\n {this.#componentLocale.footer.btnCancel}\n </button>\n\n <button\n // #set new environment\n class=\"button-primary\"\n onClick={this.#setEnvironmentHandler}\n part=\"button button--create\"\n >\n {this.#componentLocale.footer.btnCreate}\n </button>\n </div>\n </footer>\n </section>\n </Host>\n );\n }\n}\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type ChangedCallback = (data: NewEnvironmentData) => Promise<void>;\n\nexport type CreateCallback = (\n data: NewEnvironmentData\n) => Promise<FormSubmitResult>;\n\nexport type GetDataSourcesCallback = (\n selectedLanguageId: string,\n selectedRuntimeId: string\n) => Promise<GxOption[]>;\n\nexport type GetEnvironmentNameCallback = (\n selectedLanguageId: string,\n selectedDataSourceId: string\n) => Promise<string \| undefined>;\n\nexport type GetFrontEndsCallback = (\n selectedLanguageId: string\n) => Promise<GxOption[]>;\n\nexport interface NewEnvironmentData {\n setAsCurrent: boolean;\n name: string;\n runtime: string;\n language: string;\n dataStores: string;\n frontEnds: string[];\n}\n"],"version":3}

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

@@ -1,51 +1,12 @@
-import { h, proxyCustomElement, HTMLElement, getAssetPath, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
 import { L as Locale } from './locale.js';
 import { g as getSelectedItem } from './common.js';
+import { r as renderChCheckboxItems, m as mapOptionsToComboBoxItemModel } from './helpers.js';
+import { v as validateControls } from './form-validation.js';
 import { g as getIconPath } from './assets-manager.js';
-// formSubmitValidation will be deprecated. use "validateControls" instead.
-// TODO: Improve the way we mark components with error. We must not use error classes.
-const formElementsErrorClassesDictionary = {
-    "ch-checkbox": "checkbox-error",
-    "ch-combo-box-render": "combo-box-error",
-    "ch-edit": "form-input-error"
-};
-const toggleErrorClass = (hasError, element) => {
-    const elementTagName = element.tagName.toLowerCase();
-    const errorClass = formElementsErrorClassesDictionary[elementTagName];
-    if (hasError) {
-        element.classList.add(errorClass);
-    }
-    else {
-        element.classList.remove(errorClass);
-    }
-};
-const validateControls = (formSubmitResult, validatableControls) => {
-    const validatableControlsUpdated = new Map(validatableControls);
-    formSubmitResult.fieldErrors.forEach(fieldResult => {
-        const fieldKey = fieldResult.key;
-        const fieldHasError = fieldResult.hasError;
-        const controlMapRecord = validatableControlsUpdated.get(fieldKey);
-        if (controlMapRecord === null || controlMapRecord === void 0 ? void 0 : controlMapRecord.reference) {
-            // toggle class to add or remove error style
-            toggleErrorClass(fieldHasError, controlMapRecord.reference);
-            validatableControlsUpdated.set(fieldKey, Object.assign(Object.assign({}, controlMapRecord), { hasError: fieldHasError, message: fieldResult.message }));
-        }
-    });
-    // return validatableControls updated.
-    return validatableControlsUpdated;
-};
-const renderChCheckboxItems = (options, group = "undefined-group", callback) => (options === null || options === void 0 ? void 0 : options.length) > 0 &&
-    options.map(option => (h("ch-checkbox", { name: option.name, class: "checkbox", part: `${group}-${option.id}`, checkedValue: option.value || option.id, caption: option.label, disabled: option.disabled, value: option.value, onInput: callback !== null && callback !== void 0 ? callback : null, startImgSrc: option.iconName })));
-const mapOptionsToComboBoxItemModel = (options) => options.map(option => ({
-    value: option.id,
-    caption: option.label
-    // startImgSrc: option.iconName
-}));
-const newKbCss = ":host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header-one-col{grid-template-columns:1fr}.header-two-cols{grid-template-columns:1fr 1fr}.location-wrapper{display:flex;gap:var(--mer-spacing--2xs)}.location{flex-grow:1;grid-area:location}.tab::part(page){scrollbar-width:thin}.basic{grid-template:\"prototyping-target user-interface-language\" max-content \"back-end front-end\" max-content;grid-template-columns:1fr 1fr}.prototyping-target{grid-area:prototyping-target}.user-interface-language{grid-area:user-interface-language}.back-end{grid-area:back-end;grid-auto-rows:max-content}.front-end{grid-area:front-end}.tab-advanced-title{grid-area:tab-advanced-title}.layout-tab-advanced-left-col{grid-area:layout-tab-advanced-left-col}.layout-tab-advanced-right-col{grid-area:layout-tab-advanced-right-col}.basic,.advanced{padding-block:var(--content-block-spacing)}.tab-advanced__field-group{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto}.text-align-center{text-align:center}";
+const newKbCss = ":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-two-cols{grid-template-columns:1fr 1fr}.location-wrapper{display:flex;gap:var(--mer-spacing--2xs)}.location{flex-grow:1;grid-area:location}.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}.control-header__back-end,.control-header__front-end{padding-block-start:var(--mer-spacing--md)}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:var(--content-block-spacing);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}.tab-advanced-title{grid-area:tab-advanced-title}.layout-tab-advanced-left-col{grid-area:layout-tab-advanced-left-col}.layout-tab-advanced-right-col{grid-area:layout-tab-advanced-right-col}.basic,.advanced{padding-block-start:var(--content-block-spacing);overflow:auto;block-size:100%}.tab-advanced__field-group{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -75,7 +36,7 @@ const CSS_BUNDLES = [
 ];
 const WINDOWS_AUTHENTICATION_VALUE = "windows-authentication";
 const MAIN_SECTION_CLASSES = "main";
-const BASIC_SECTION_PARENT_CLASSES = "basic field-group spacing-body-inline";
+const BASIC_SECTION_PARENT_CLASSES = "basic";
 const SYSTEM_ICON = getIconPath({
     category: "system",
     name: "folder",
@@ -144,9 +105,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 }, h("label", { class: "label", htmlFor: "serverName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.serverNames.length === 0, placeholder: this.serverNames.length === 0
                         ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName
                             .disabledPlaceholder
-                        : "", value: this.serverNamesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_serverNameEl, el, "f")), model: this.serverNamesComboBoxModel, onInput: this.serverNames.length > 0
-                        ? __classPrivateFieldGet(this, _GxIdeNewKb_handlerServerNameInput, "f")
-                        : undefined, id: "serverName", part: "server-name" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"))), h("div", {
+                        : "", value: this.serverNamesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_serverNameEl, el, "f")), model: this.serverNamesComboBoxModel, onInput: this.serverNames.length > 0 && __classPrivateFieldGet(this, _GxIdeNewKb_handlerServerNameInput, "f"), id: "serverName", part: "server-name" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"))), h("div", {
                     // #authentication type
                     class: "field field-block authentication-type-field"
                 }, h("label", { class: "label", htmlFor: "authenticationType" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.authenticationType.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.authenticationTypes.length === 0, placeholder: this.authenticationTypes.length === 0
@@ -189,7 +148,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         });
         _GxIdeNewKb_renderBasic.set(this, () => {
             return [
-                h("div", {
+                h("section", { class: "basic__header field-group control-header-with-border spacing-body-inline" }, h("div", {
                     // #prototyping  target
                     class: "field field-block prototyping-target"
                 }, h("label", { class: "label", htmlFor: "prototypingTarget" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.prototypingTarget.label), h("ch-combo-box-render", { id: "prototypingTarget", class: "combo-box", part: "prototyping-target", disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
@@ -197,18 +156,17 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                             .disabledPlaceholder
                         : "", value: this.prototypingTargetsInitialValue, model: this.prototypingTargetsComboBoxModel, onInput: this.prototypingTargets.length > 0
                         ? __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetValueChangedHandler, "f")
-                        : undefined, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingTargetEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"))),
-                h("div", {
+                        : undefined, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingTargetEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"))), h("div", {
                     // #user interface
                     class: "field field-block user-interface-language"
                 }, h("label", { class: "label", htmlFor: "userInterfaceLanguage" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.userInterfaceLanguages.length === 0, placeholder: this.userInterfaceLanguages.length === 0
                         ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage
                             .disabledPlaceholder
-                        : "", value: this.userInterfaceLanguagesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userInterfaceLanguageEl, el, "f")), model: this.userInterfaceLanguagesComboBoxModel, id: "userInterfaceLanguage", part: "user-interface-language" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f"))),
-                h("div", null, h("h2", {
+                        : "", value: this.userInterfaceLanguagesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userInterfaceLanguageEl, el, "f")), model: this.userInterfaceLanguagesComboBoxModel, id: "userInterfaceLanguage", part: "user-interface-language" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")))),
+                h("section", { class: "section__back-end" }, h("h2", {
                     // back end
-                    class: "control-header heading-5 text-align-center"
-                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.backEndLabel), h("div", { class: "field-group back-end" }, h("div", {
+                    class: "control-header control-header-with-border control-header__back-end heading-5 text-align-center spacing-body-inline"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.backEndLabel), h("div", { class: "field-group main__back-end spacing-body-inline scrollable" }, h("div", {
                     // #prototyping environment
                     class: "field field-block"
                 }, h("label", { class: "label", htmlFor: "prototypingEnvironment" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.prototypingEnvironment
@@ -224,10 +182,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                         ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource
                             .disabledPlaceholder
                         : "", value: this.defaultDataSourcesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_dataSourceEl, el, "f")), model: this.defaultDataSourcesComboBoxModel, part: "data-source", id: "dataSource" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f"))))),
-                h("div", null, h("h2", {
-                    // front end
-                    class: "control-header heading-5 text-align-center"
-                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group front-end", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
+                h("section", { class: "section__front-end" }, h("h2", { class: "control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group main__front-end spacing-body-inline scrollable", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
             ];
         });
         // - - - - - - - - - -
@@ -238,28 +193,25 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         });
         _GxIdeNewKb_createKbHandler.set(this, () => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            if (this.createCallback) {
-                const createCallbackPromise = this.createCallback({
-                    authenticationType: (_a = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
-                    collation: (_b = __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
-                    createDataFilesInKBFolder: !!((_c = __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f")) === null || _c === void 0 ? void 0 : _c.value),
-                    dataSource: (_d = __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f")) === null || _d === void 0 ? void 0 : _d.value,
-                    databaseName: (_e = __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f")) === null || _e === void 0 ? void 0 : _e.value,
-                    frontEnds: __classPrivateFieldGet(this, _GxIdeNewKb_selectedFrontEndsIds, "f"),
-                    kbLocation: (_f = __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f")) === null || _f === void 0 ? void 0 : _f.value,
-                    kbName: (_g = __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f")) === null || _g === void 0 ? void 0 : _g.value,
-                    password: (_h = __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")) === null || _h === void 0 ? void 0 : _h.value,
-                    prototypingEnvironment: (_j = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f")) === null || _j === void 0 ? void 0 : _j.value,
-                    prototypingTarget: (_k = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f")) === null || _k === void 0 ? void 0 : _k.value,
-                    savePassword: !!((_l = __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")) === null || _l === void 0 ? void 0 : _l.value),
-                    serverName: (_m = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f")) === null || _m === void 0 ? void 0 : _m.value,
-                    userInterfaceLanguage: (_o = __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")) === null || _o === void 0 ? void 0 : _o.value,
-                    userName: (_p = __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")) === null || _p === void 0 ? void 0 : _p.value
-                });
-                createCallbackPromise.then((formSubmitResult) => {
-                    this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
-                });
-            }
+            this.createCallback({
+                authenticationType: (_a = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
+                collation: (_b = __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
+                createDataFilesInKBFolder: !!((_c = __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f")) === null || _c === void 0 ? void 0 : _c.value),
+                dataSource: (_d = __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f")) === null || _d === void 0 ? void 0 : _d.value,
+                databaseName: (_e = __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f")) === null || _e === void 0 ? void 0 : _e.value,
+                frontEnds: __classPrivateFieldGet(this, _GxIdeNewKb_selectedFrontEndsIds, "f"),
+                kbLocation: (_f = __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f")) === null || _f === void 0 ? void 0 : _f.value,
+                kbName: (_g = __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f")) === null || _g === void 0 ? void 0 : _g.value,
+                password: (_h = __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")) === null || _h === void 0 ? void 0 : _h.value,
+                prototypingEnvironment: (_j = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f")) === null || _j === void 0 ? void 0 : _j.value,
+                prototypingTarget: (_k = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f")) === null || _k === void 0 ? void 0 : _k.value,
+                savePassword: !!((_l = __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")) === null || _l === void 0 ? void 0 : _l.value),
+                serverName: (_m = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f")) === null || _m === void 0 ? void 0 : _m.value,
+                userInterfaceLanguage: (_o = __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")) === null || _o === void 0 ? void 0 : _o.value,
+                userName: (_p = __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")) === null || _p === void 0 ? void 0 : _p.value
+            }).then((formSubmitResult) => {
+                this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
+            });
         });
         /**
          * Disable "Create Data in Knowledge Base Folder" if the first Server Name
@@ -275,6 +227,8 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 this.createDataInKbDisabled = false;
             }
         });
+        // TODO: evaluate if this should be a global helper function.
+        // It is used on new-kb as well.
         _GxIdeNewKb_evaluateTooltipRender.set(this, (controlReference) => {
             var _a, _b, _c;
             return ((_b = (_a = this.validatableControls) === null || _a === void 0 ? void 0 : _a.get(controlReference === null || controlReference === void 0 ? void 0 : controlReference.id)) === null || _b === void 0 ? void 0 : _b.hasError) &&
@@ -581,7 +535,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 scrollable: true,
                 tab: true,
                 [MAIN_SECTION_CLASSES]: true
-            }, direction: "block", model: __classPrivateFieldGet(this, _GxIdeNewKb_kbSectionsModel, "f"), selectedId: BASIC_TAB_SELECTOR, overflow: "auto scroll", contain: "size", onSelectedItemChange: !this.advancedTabIsVisible && __classPrivateFieldGet(this, _GxIdeNewKb_tabSelectionChangedHandler, "f")
+            }, direction: "block", model: __classPrivateFieldGet(this, _GxIdeNewKb_kbSectionsModel, "f"), selectedId: BASIC_TAB_SELECTOR, overflow: "auto", contain: "size", onSelectedItemChange: !this.advancedTabIsVisible && __classPrivateFieldGet(this, _GxIdeNewKb_tabSelectionChangedHandler, "f")
         }, h("div", { slot: BASIC_TAB_SELECTOR, class: BASIC_SECTION_PARENT_CLASSES, part: "tab-button-basic" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)), this.advancedTabIsVisible && (h("div", { slot: ADVANCED_TAB_SELECTOR, class: "advanced spacing-body-inline", part: "tab-button-advanced" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderAdvanced, "f").call(this))))) : (h("div", { class: MAIN_SECTION_CLASSES }, h("div", { class: BASIC_SECTION_PARENT_CLASSES }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)))), h("footer", { class: {
                 "control-footer": this.isAdvanced,
                 "control-footer-with-border": !this.isAdvanced,