@genexus/genexus-ide-ui 0.0.100 → 0.0.102

package/dist/cjs/gx-ide-list-selector_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-list-selector.gx-ide-list-selector-item.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/_helpers/list-selector/list-selector.scss?tag=gx-ide-list-selector&encapsulation=shadow","src/components/_helpers/list-selector/list-selector.tsx","src/components/_helpers/list-selector/list-selector-item/list-selector-item.scss?tag=gx-ide-list-selector-item","src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx"],"sourcesContent":["@import \"../../../global/reset.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@include box-sizing;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  font-family: var(--mer-font-family--primary);\n}\ngxg-title {\n  display: block;\n  margin-block-end: var(--gxg-label-margin-vertical);\n}\n.list {\n  @include reset-defaults;\n  @include reset-list;\n  @include base-component-styles;\n  @include gxg-scrollbar;\n  display: block;\n  background-color: var(--mer-color__surface);\n  max-height: 100%;\n  overflow-y: auto;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n}\n/*no border*/\n:host([no-list-border]) {\n  .list {\n    border: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  // Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { ItemData } from \"./list-selector-item/list-selector-item\";\n\n@Component({\n  tag: \"gx-ide-list-selector\",\n  styleUrl: \"list-selector.scss\",\n  shadow: true\n})\nexport class GxIdeListSelector {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The list title (optional)\n   */\n  @Prop() readonly listTitle: string;\n\n  /**\n   * It determines if the list is ordered, or unordered\n   */\n  @Prop() readonly ordered: boolean = false;\n\n  /**\n   * Makes the list readonly\n   */\n  @Prop() readonly readonly: boolean = false;\n\n  /**\n   * It determines the type of list: single-selection or multi-selection\n   */\n  @Prop() readonly type: \"single-selection\" | \"multi-selection\" =\n    \"single-selection\";\n\n  /**\n   * Makes the list required\n   */\n  @Prop() readonly required: boolean = false;\n\n  /**\n   * The presence of this property will force all the items to not-wrap, and have ellipsis\n   */\n  @Prop() readonly ellipsis: boolean = false;\n\n  /**\n   * The value of the initial (or initials) checked list-item/s\n   */\n  @Prop({ mutable: true }) value: string | string[];\n\n  /**\n   * Icons color\n   */\n  @Prop() readonly iconsColor: Color = \"auto\";\n\n  /**\n   * Icons size\n   */\n  @Prop() readonly iconsSize: Size = \"small\";\n\n  // @Watch(\"value\")\n  // valueHandler(newValue: string) {\n  //   const foundItem = this.getItemByValue(newValue);\n  //   if (foundItem) {\n  //     const input = foundItem.querySelector(\"input\");\n  //     input.checked = true;\n  //   }\n  // }\n\n  /**\n   * The name of this list. This is a required attribute for the list to work.\n   */\n  @Prop() readonly listName!: string;\n\n  /**\n   * Disables the items border\n   */\n  @Prop() readonly noItemsBorder: boolean = false;\n\n  /**\n   * Disables the list border\n   */\n  @Prop({ reflect: true }) readonly noListBorder: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.evaluateChecked();\n    this.evaluateInitialValue();\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"itemSelectionChanged\", { capture: true })\n  itemSelectionChangedHandler(event: CustomEvent<ItemData>) {\n    event.stopPropagation();\n    const checkedItemsInfo: CheckedItemsInfo = [];\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = this.getChecked();\n    const newValue: string | string[] = [];\n    checkedItems.forEach(item => {\n      const value = item.itemValue;\n      newValue.push(value);\n      checkedItemsInfo.push({\n        itemId: item.itemId,\n        itemValue: value\n      });\n    });\n    /* update this.value*/\n    if (this.type === \"single-selection\" && newValue.length > 0) {\n      this.value = newValue[0] || undefined;\n    } else {\n      /* multi-selection*/\n      this.value = newValue;\n    }\n    /* emit selectionChanged*/\n    this.selectionChanged.emit(checkedItemsInfo);\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * It evaluates the checked items, and checks or unchecks if needed\n   */\n  private evaluateChecked = () => {\n    const allListItems = Array.from(\n      this.el.querySelectorAll(\"gx-ide-list-selector-item\")\n    );\n    const checkedItems = allListItems.filter(item => item.itemChecked);\n    /**\n     * INDEX\n     * 1.required and no one checked\n     * 2.single-selection, and more than one checked\n     */\n\n    /* 1.required and no one checked*/\n    if (this.required && checkedItems.length === 0) {\n      allListItems[0].itemChecked = true;\n    } else if (this.type === \"single-selection\" && checkedItems.length > 1) {\n      /* 2.single-selection, and more than one checked*/\n      checkedItems.forEach((item, i) => {\n        if (i !== 0) {\n          item.itemChecked = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * It evaluates the initial value/s\n   */\n  private evaluateInitialValue = () => {\n    const checkedItems = this.getChecked();\n    if (this.type === \"single-selection\" && checkedItems.length > 0) {\n      this.value = checkedItems[0].itemValue;\n    } else if (this.type === \"multi-selection\" && checkedItems.length > 0) {\n      const values: string[] = [];\n      checkedItems.forEach(checked => {\n        values.push(checked.itemValue);\n      });\n      this.value = values;\n    }\n  };\n\n  private getChecked = (): HTMLGxIdeListSelectorItemElement[] => {\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = [];\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked) {\n        checkedItems.push(item);\n      }\n    });\n    return checkedItems;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host exportparts=\"input:input\">\n        {this.listTitle ? (\n          <gxg-title type=\"title-04\">{this.listTitle}</gxg-title>\n        ) : null}\n        {this.ordered ? (\n          <ol class=\"list\" part=\"list\">\n            <slot></slot>\n          </ol>\n        ) : (\n          <ul class=\"list\" part=\"list\">\n            <slot></slot>\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type CheckedItemsInfo = ItemData[];\n","@import \"../../../../global/gx-ide-mixins.scss\";\n@import \"../../../../../node_modules/@genexus/gemini/dist/collection/globals/mixins.scss\";\n@include box-sizing;\n\ngx-ide-list-selector-item {\n  display: block;\n  max-width: 100%;\n  display: flex;\n  font-size: inherit;\n\n  &:hover {\n    .label {\n      background-color: var(--ds-item-background-color--hover);\n      cursor: pointer;\n    }\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--selected-hover);\n    }\n  }\n}\ngx-ide-list-selector-item:not(:first-child) {\n  border-block-start: var(--gx-ide-list-items-border);\n}\n/*change border color if checked*/\ngx-ide-list-selector-item:not(:first-child):has(input:checked) {\n  border-block-color: var(--ds-item-border-color--selected);\n}\n/*readonly*/\ngx-ide-list-selector-item[readonly]:not([readonly=\"false\"]) {\n  .label {\n    pointer-events: none;\n    background-color: transparent;\n  }\n}\n/*ellipsis*/\ngx-ide-list-selector-item[ellipsis]:not([ellipsis=\"false\"]) {\n  .label {\n    &__description {\n      @include elipsis;\n    }\n  }\n}\ninput {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus + .label {\n    @include form-element-common-styles-focus-type-1();\n    outline-offset: var(--gxg-tree-view-item__outline-offset--active);\n  }\n  &:checked + .label {\n    background-color: var(--ds-item-background-color--selected);\n    color: var(--gxg-grid-row-cell__color--selected);\n  }\n}\n\n/*label-wrapper*/\n.label {\n  width: 100%;\n}\n/*label*/\n.label {\n  &__index {\n  }\n  &__wrapper {\n    display: flex;\n    min-height: 28px; /*this prevents height difference between items that have icons and items that do not*/\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    padding: var(--mer-spacing--xxs) var(--mer-spacing--xs);\n    width: 100%;\n  }\n  &__description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n}\n\n/*no border*/\ngx-ide-list-selector-item[no-border] {\n  border-block-start: none;\n}\n\n/*universal slot*/\n.label__universal-slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/*universal slot end*/\n:host([unversal-slot-end]) {\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\n@Component({\n  tag: \"gx-ide-list-selector-item\",\n  styleUrl: \"list-selector-item.scss\",\n  shadow: false\n})\nexport class GxIdeListSelectorItem {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  private parentIsListSelector: boolean;\n  private parentList: HTMLGxIdeListSelectorElement;\n  private checked: boolean;\n  private name: string;\n  private type: string;\n  private hasUniversalSlot = false;\n  private index: string = undefined;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorItemElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The item id\n   */\n  @Prop({ reflect: true }) readonly itemId!: string;\n\n  /**\n   * The item value, that acts as a label as well\n   */\n  @Prop() readonly itemValue!: string;\n\n  /**\n   * This will set the input as checked\n   */\n  @Prop({ mutable: true }) itemChecked = false;\n\n  /**\n   * It allows to select the item by clicking on it. It will emit the item-id\n   */\n  @Prop({ mutable: true, reflect: true }) readonly: boolean;\n\n  /**\n   * The presence of this property will force the item text to not-wrap, and have ellipsis\n   */\n  @Prop({ mutable: true, reflect: true }) ellipsis: boolean;\n\n  /**\n   * The gemini icon name\n   */\n  @Prop() readonly icon: string;\n\n  /**\n   * The gemini icon color. If no one provided, it will inherit the value from the list-selector\n   */\n  @Prop({ mutable: true }) iconColor: Color;\n\n  /**\n   * The gemini icon size. Inherited from the parent.\n   */\n  @Prop({ mutable: true }) iconSize: Size;\n\n  /**\n   * Disables the item border\n   */\n  @Prop({ mutable: true, reflect: true }) noBorder = false;\n\n  /**\n   * Displays the universal slot at the end, instead of at the benign\n   */\n  @Prop({ reflect: true }) readonly universalSlotEnd = false;\n\n  // 5.EVENTS (EMIT) //\n\n  componentWillLoad() {\n    this.evaluateParentIsListSelector();\n    this.evaluateType();\n    this.evaluateSelectable();\n    this.evaluateEllipsis();\n    this.evaluateChecked();\n    this.evaluateIconColor();\n    this.evaluateIconSize();\n    this.evaluateBorder();\n    this.evaluateUniversalSlot();\n    this.assignName();\n    this.evaluateOrderedList();\n  }\n\n  /**\n   * Emits the item data\n   */\n  @Event() itemSelectionChanged: EventEmitter<ItemData>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference\n   */\n  private evaluateParentIsListSelector = () => {\n    const parentList = this.el.parentElement as HTMLGxIdeListSelectorElement;\n    this.parentIsListSelector = parentList?.nodeName === \"GX-IDE-LIST-SELECTOR\";\n    this.parentIsListSelector && (this.parentList = parentList);\n  };\n\n  /**\n   * Determines the type of item, based on the parent list-selector 'type' property value\n   */\n  private evaluateType = () => {\n    const parentList: HTMLGxIdeListSelectorElement = this.el\n      .parentElement as HTMLGxIdeListSelectorElement;\n    this.type = parentList.type === \"single-selection\" ? \"radio\" : \"checkbox\";\n  };\n\n  /**\n   * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item\n   */\n  private evaluateSelectable = () => {\n    if (this.readonly === undefined && this.parentIsListSelector) {\n      this.readonly = this.parentList.readonly;\n    }\n  };\n\n  /**\n   * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item\n   */\n  private evaluateEllipsis = () => {\n    if (this.ellipsis === undefined && this.parentIsListSelector) {\n      this.ellipsis = this.parentList.ellipsis;\n    }\n  };\n\n  /**\n   * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.\n   */\n  private evaluateChecked = () => {\n    if (\n      this.checked === undefined &&\n      this.parentIsListSelector &&\n      this.parentList.value !== undefined &&\n      this.parentList.value === this.itemValue\n    ) {\n      this.checked = true;\n    }\n  };\n\n  private evaluateBorder = () => {\n    if (this.parentIsListSelector) {\n      this.noBorder = this.parentList.noItemsBorder;\n    }\n  };\n\n  private evaluateUniversalSlot = () => {\n    this.hasUniversalSlot = !!this.el.querySelector(\"[slot=universal]\");\n  };\n\n  /**\n   * Gets the listName required value, that is needed for the list selection to properly work\n   */\n  private assignName = () => {\n    this.parentIsListSelector &&\n      this.parentList.listName &&\n      (this.name = this.parentList.listName);\n  };\n\n  private evaluateOrderedList = () => {\n    if (this.parentIsListSelector && this.parentList.ordered) {\n      let index: number | string =\n        Array.from(this.parentList.children).indexOf(this.el) + 1;\n      if (index < 10) {\n        // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.\n        index = `0${index}`;\n      } else {\n        index = `${index}`;\n      }\n      this.index = index;\n    }\n  };\n\n  private evaluateIconColor = () => {\n    this.parentIsListSelector &&\n      this.parentList.iconsColor &&\n      this.iconColor === undefined &&\n      (this.iconColor = this.parentList.iconsColor);\n  };\n\n  private evaluateIconSize = () => {\n    this.parentIsListSelector &&\n      this.parentList.iconsSize &&\n      (this.iconSize = this.parentList.iconsSize);\n  };\n\n  private onChangeHandler = (e: Event) => {\n    this.itemChecked = (e.target as HTMLInputElement).checked;\n    this.itemSelectionChanged.emit({\n      itemId: this.itemId,\n      itemValue: this.itemValue\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <input\n          type={this.type}\n          id={this.itemId}\n          name={this.name}\n          value={this.itemValue}\n          checked={this.itemChecked}\n          onChange={this.onChangeHandler}\n          disabled={this.readonly}\n          part=\"input\"\n        />\n        <label class=\"label\" htmlFor={this.itemId} part=\"label\">\n          <div class=\"label__wrapper\">\n            {this.index ? (\n              <span class=\"label__index\">{this.index}. </span>\n            ) : null}\n            {this.icon ? (\n              <gxg-icon\n                class=\"label__icon\"\n                type={this.icon}\n                size={this.iconSize}\n                color={this.iconColor}\n                part=\"icon\"\n              ></gxg-icon>\n            ) : null}\n            {this.hasUniversalSlot ? (\n              <span class=\"label__universal-slot\" part=\"universal-slot\">\n                <slot name=\"universal\"></slot>\n              </span>\n            ) : null}\n            <span class=\"label__description\" part=\"description\">\n              {this.itemValue ? this.itemValue : <slot></slot>}\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n\nexport type ItemData = {\n  itemId: string;\n  itemValue: string;\n  itemIcon?: string;\n};\n"],"version":3}
+{"file":"gx-ide-list-selector.gx-ide-list-selector-item.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/_helpers/list-selector/list-selector.scss?tag=gx-ide-list-selector&encapsulation=shadow","src/components/_helpers/list-selector/list-selector.tsx","src/components/_helpers/list-selector/list-selector-item/list-selector-item.scss?tag=gx-ide-list-selector-item","src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx"],"sourcesContent":["@import \"../../../global/reset.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/gx-ide-common.scss\";\n@include box-sizing;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  font-family: var(--mer-font-family--primary);\n}\ngxg-title {\n  display: block;\n  margin-block-end: var(--gxg-label-margin-vertical);\n}\n.list {\n  @include reset-defaults;\n  @include reset-list;\n  @include base-component-styles;\n  @include gxg-scrollbar;\n  display: block;\n  background-color: var(--mer-color__surface);\n  max-height: 100%;\n  overflow-y: auto;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n}\n/*no border*/\n:host([no-list-border]) {\n  .list {\n    border: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  // Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { ItemData } from \"./list-selector-item/list-selector-item\";\n\n@Component({\n  tag: \"gx-ide-list-selector\",\n  styleUrl: \"list-selector.scss\",\n  shadow: true\n})\nexport class GxIdeListSelector {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The list title (optional)\n   */\n  @Prop() readonly listTitle: string;\n\n  /**\n   * It determines if the list is ordered, or unordered\n   */\n  @Prop() readonly ordered: boolean = false;\n\n  /**\n   * Makes the list readonly\n   */\n  @Prop() readonly readonly: boolean = false;\n\n  /**\n   * It determines the type of list: single-selection or multi-selection\n   */\n  @Prop() readonly type: \"single-selection\" | \"multi-selection\" =\n    \"single-selection\";\n\n  /**\n   * Makes the list required\n   */\n  @Prop() readonly required: boolean = false;\n\n  /**\n   * The presence of this property will force all the items to not-wrap, and have ellipsis\n   */\n  @Prop() readonly ellipsis: boolean = false;\n\n  /**\n   * The value of the initial (or initials) checked list-item/s\n   */\n  @Prop({ mutable: true }) value: string | string[];\n\n  /**\n   * Icons color\n   */\n  @Prop() readonly iconsColor: Color = \"auto\";\n\n  /**\n   * Icons size\n   */\n  @Prop() readonly iconsSize: Size = \"small\";\n\n  // @Watch(\"value\")\n  // valueHandler(newValue: string) {\n  //   const foundItem = this.getItemByValue(newValue);\n  //   if (foundItem) {\n  //     const input = foundItem.querySelector(\"input\");\n  //     input.checked = true;\n  //   }\n  // }\n\n  /**\n   * The name of this list. This is a required attribute for the list to work.\n   */\n  @Prop() readonly listName!: string;\n\n  /**\n   * Disables the items border\n   */\n  @Prop() readonly noItemsBorder: boolean = false;\n\n  /**\n   * Disables the list border\n   */\n  @Prop({ reflect: true }) readonly noListBorder: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.evaluateChecked();\n    this.evaluateInitialValue();\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"itemSelectionChanged\", { capture: true })\n  itemSelectionChangedHandler(event: CustomEvent<ItemData>) {\n    event.stopPropagation();\n    const checkedItemsInfo: CheckedItemsInfo = [];\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = this.getChecked();\n    const newValue: string | string[] = [];\n    checkedItems.forEach(item => {\n      const value = item.itemValue;\n      newValue.push(value);\n      checkedItemsInfo.push({\n        itemId: item.itemId,\n        itemValue: value\n      });\n    });\n    /* update this.value*/\n    if (this.type === \"single-selection\" && newValue.length > 0) {\n      this.value = newValue[0] || undefined;\n    } else {\n      /* multi-selection*/\n      this.value = newValue;\n    }\n    /* emit selectionChanged*/\n    this.selectionChanged.emit(checkedItemsInfo);\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * It evaluates the checked items, and checks or unchecks if needed\n   */\n  private evaluateChecked = () => {\n    const allListItems = Array.from(\n      this.el.querySelectorAll(\"gx-ide-list-selector-item\")\n    );\n    const checkedItems = allListItems.filter(item => item.itemChecked);\n    /**\n     * INDEX\n     * 1.required and no one checked\n     * 2.single-selection, and more than one checked\n     */\n\n    /* 1.required and no one checked*/\n    if (this.required && checkedItems.length === 0) {\n      allListItems[0].itemChecked = true;\n    } else if (this.type === \"single-selection\" && checkedItems.length > 1) {\n      /* 2.single-selection, and more than one checked*/\n      checkedItems.forEach((item, i) => {\n        if (i !== 0) {\n          item.itemChecked = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * It evaluates the initial value/s\n   */\n  private evaluateInitialValue = () => {\n    const checkedItems = this.getChecked();\n    if (this.type === \"single-selection\" && checkedItems.length > 0) {\n      this.value = checkedItems[0].itemValue;\n    } else if (this.type === \"multi-selection\" && checkedItems.length > 0) {\n      const values: string[] = [];\n      checkedItems.forEach(checked => {\n        values.push(checked.itemValue);\n      });\n      this.value = values;\n    }\n  };\n\n  private getChecked = (): HTMLGxIdeListSelectorItemElement[] => {\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = [];\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked) {\n        checkedItems.push(item);\n      }\n    });\n    return checkedItems;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host exportparts=\"input:input\">\n        {this.listTitle ? (\n          <gxg-title type=\"title-04\">{this.listTitle}</gxg-title>\n        ) : null}\n        {this.ordered ? (\n          <ol class=\"list\" part=\"list\">\n            <slot></slot>\n          </ol>\n        ) : (\n          <ul class=\"list\" part=\"list\">\n            <slot></slot>\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type CheckedItemsInfo = ItemData[];\n","@import \"../../../../global/gx-ide-mixins.scss\";\n@import \"../../../../../node_modules/@genexus/gemini/dist/collection/globals/mixins.scss\";\n@include box-sizing;\n\ngx-ide-list-selector-item {\n  display: block;\n  max-width: 100%;\n  display: flex;\n  font-size: inherit;\n\n  &:hover {\n    .label {\n      background-color: var(--ds-item-background-color--hover);\n      cursor: pointer;\n    }\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--selected-hover);\n    }\n  }\n}\ngx-ide-list-selector-item:not(:first-child) {\n  border-block-start: var(--gx-ide-list-items-border);\n}\n/*change border color if checked*/\ngx-ide-list-selector-item:not(:first-child):has(input:checked) {\n  border-block-color: var(--ds-item-border-color--selected);\n}\n/*readonly*/\ngx-ide-list-selector-item[readonly]:not([readonly=\"false\"]) {\n  .label {\n    pointer-events: none;\n    background-color: transparent;\n  }\n}\n/*ellipsis*/\ngx-ide-list-selector-item[ellipsis]:not([ellipsis=\"false\"]) {\n  .label {\n    &__description {\n      @include elipsis;\n    }\n  }\n}\ninput {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus + .label {\n    @include form-element-common-styles-focus-type-1();\n    outline-offset: var(--gxg-tree-view-item__outline-offset--active);\n  }\n  &:checked + .label {\n    background-color: var(--ds-item-background-color--selected);\n    color: var(--gxg-grid-row-cell__color--selected);\n  }\n}\n\n/*label-wrapper*/\n.label {\n  width: 100%;\n}\n/*label*/\n.label {\n  &__index {\n  }\n  &__wrapper {\n    display: flex;\n    min-height: 28px; /*this prevents height difference between items that have icons and items that do not*/\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    padding: var(--mer-spacing--xxs) var(--mer-spacing--xs);\n    width: 100%;\n  }\n  &__description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n}\n\n/*no border*/\ngx-ide-list-selector-item[no-border] {\n  border-block-start: none;\n}\n\n/*universal slot*/\n.label__universal-slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/*universal slot end*/\n:host([unversal-slot-end]) {\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\n@Component({\n  tag: \"gx-ide-list-selector-item\",\n  styleUrl: \"list-selector-item.scss\",\n  shadow: false\n})\nexport class GxIdeListSelectorItem {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  private parentIsListSelector: boolean;\n  private parentList: HTMLGxIdeListSelectorElement;\n  private checked: boolean;\n  private name: string;\n  private type: string;\n  private hasUniversalSlot = false;\n  private index: string = undefined;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorItemElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The item id\n   */\n  @Prop({ reflect: true }) readonly itemId!: string;\n\n  /**\n   * The item value, that acts as a label as well\n   */\n  @Prop() readonly itemValue!: string;\n\n  /**\n   * This will set the input as checked\n   */\n  @Prop({ mutable: true }) itemChecked = false;\n\n  /**\n   * It allows to select the item by clicking on it. It will emit the item-id\n   */\n  @Prop({ mutable: true, reflect: true }) readonly: boolean;\n\n  /**\n   * The presence of this property will force the item text to not-wrap, and have ellipsis\n   */\n  @Prop({ mutable: true, reflect: true }) ellipsis: boolean;\n\n  /**\n   * The gemini icon name\n   */\n  @Prop() readonly icon: string;\n\n  /**\n   * The gemini icon color. If no one provided, it will inherit the value from the list-selector\n   */\n  @Prop({ mutable: true }) iconColor: Color;\n\n  /**\n   * The gemini icon size. Inherited from the parent.\n   */\n  @Prop({ mutable: true }) iconSize: Size;\n\n  /**\n   * Disables the item border\n   */\n  @Prop({ mutable: true, reflect: true }) noBorder = false;\n\n  /**\n   * Displays the universal slot at the end, instead of at the benign\n   */\n  @Prop({ reflect: true }) readonly universalSlotEnd = false;\n\n  // 5.EVENTS (EMIT) //\n\n  componentWillLoad() {\n    this.evaluateParentIsListSelector();\n    this.evaluateType();\n    this.evaluateSelectable();\n    this.evaluateEllipsis();\n    this.evaluateChecked();\n    this.evaluateIconColor();\n    this.evaluateIconSize();\n    this.evaluateBorder();\n    this.evaluateUniversalSlot();\n    this.assignName();\n    this.evaluateOrderedList();\n  }\n\n  /**\n   * Emits the item data\n   */\n  @Event() itemSelectionChanged: EventEmitter<ItemData>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference\n   */\n  private evaluateParentIsListSelector = () => {\n    const parentList = this.el.parentElement as HTMLGxIdeListSelectorElement;\n    this.parentIsListSelector = parentList?.nodeName === \"GX-IDE-LIST-SELECTOR\";\n    this.parentIsListSelector && (this.parentList = parentList);\n  };\n\n  /**\n   * Determines the type of item, based on the parent list-selector 'type' property value\n   */\n  private evaluateType = () => {\n    const parentList: HTMLGxIdeListSelectorElement = this.el\n      .parentElement as HTMLGxIdeListSelectorElement;\n    this.type = parentList.type === \"single-selection\" ? \"radio\" : \"checkbox\";\n  };\n\n  /**\n   * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item\n   */\n  private evaluateSelectable = () => {\n    if (this.readonly === undefined && this.parentIsListSelector) {\n      this.readonly = this.parentList.readonly;\n    }\n  };\n\n  /**\n   * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item\n   */\n  private evaluateEllipsis = () => {\n    if (this.ellipsis === undefined && this.parentIsListSelector) {\n      this.ellipsis = this.parentList.ellipsis;\n    }\n  };\n\n  /**\n   * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.\n   */\n  private evaluateChecked = () => {\n    if (\n      this.checked === undefined &&\n      this.parentIsListSelector &&\n      this.parentList.value !== undefined &&\n      this.parentList.value === this.itemValue\n    ) {\n      this.checked = true;\n    }\n  };\n\n  private evaluateBorder = () => {\n    if (this.parentIsListSelector) {\n      this.noBorder = this.parentList.noItemsBorder;\n    }\n  };\n\n  private evaluateUniversalSlot = () => {\n    this.hasUniversalSlot = !!this.el.querySelector(\"[slot=universal]\");\n  };\n\n  /**\n   * Gets the listName required value, that is needed for the list selection to properly work\n   */\n  private assignName = () => {\n    this.parentIsListSelector &&\n      this.parentList.listName &&\n      (this.name = this.parentList.listName);\n  };\n\n  private evaluateOrderedList = () => {\n    if (this.parentIsListSelector && this.parentList.ordered) {\n      let index: number | string =\n        Array.from(this.parentList.children).indexOf(this.el) + 1;\n      if (index < 10) {\n        // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.\n        index = `0${index}`;\n      } else {\n        index = `${index}`;\n      }\n      this.index = index;\n    }\n  };\n\n  private evaluateIconColor = () => {\n    this.parentIsListSelector &&\n      this.parentList.iconsColor &&\n      this.iconColor === undefined &&\n      (this.iconColor = this.parentList.iconsColor);\n  };\n\n  private evaluateIconSize = () => {\n    this.parentIsListSelector &&\n      this.parentList.iconsSize &&\n      (this.iconSize = this.parentList.iconsSize);\n  };\n\n  private onChangeHandler = (e: Event) => {\n    this.itemChecked = (e.target as HTMLInputElement).checked;\n    this.itemSelectionChanged.emit({\n      itemId: this.itemId,\n      itemValue: this.itemValue\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <input\n          type={this.type}\n          id={this.itemId}\n          name={this.name}\n          value={this.itemValue}\n          checked={this.itemChecked}\n          onChange={this.onChangeHandler}\n          disabled={this.readonly}\n          part=\"input\"\n        />\n        <label class=\"label\" htmlFor={this.itemId} part=\"label\">\n          <div class=\"label__wrapper\">\n            {this.index ? (\n              <span class=\"label__index\">{this.index}. </span>\n            ) : null}\n            {this.icon ? (\n              <gxg-icon\n                class=\"label__icon\"\n                type={this.icon}\n                size={this.iconSize}\n                color={this.iconColor}\n                part=\"icon\"\n              ></gxg-icon>\n            ) : null}\n            {this.hasUniversalSlot ? (\n              <span class=\"label__universal-slot\" part=\"universal-slot\">\n                <slot name=\"universal\"></slot>\n              </span>\n            ) : null}\n            <span class=\"label__description\" part=\"description\">\n              {this.itemValue ? this.itemValue : <slot></slot>}\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n\nexport type ItemData = {\n  itemId: string;\n  itemValue: string;\n  itemIcon?: string;\n};\n"],"version":3}

package/dist/cjs/gx-ide-new-environment.cjs.entry.js

@@ -9,7 +9,7 @@ const config = require('./config-8246d533.js');
 const common = require('./common-1083a79a.js');
 const formValidation = require('./form-validation-b4788ff9.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}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width: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(--mer-color__surface)}.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(--mer-spacing--xxs)}.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 = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-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(--mer-color__surface)}.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(--mer-spacing--xxs)}.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 = class {
     constructor(hostRef) {

package/dist/cjs/gx-ide-new-environment.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-new-environment.entry.cjs.js","mappings":"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","names":["getAssetPath","formSubmitValidation","h","renderFormItems","setInitialComboValue","config","Locale","Host"],"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--xxs);\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/form-validation\";\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}
+{"file":"gx-ide-new-environment.entry.cjs.js","mappings":"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","names":["getAssetPath","formSubmitValidation","h","renderFormItems","setInitialComboValue","config","Locale","Host"],"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--xxs);\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/form-validation\";\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}

package/dist/cjs/gx-ide-new-kb.cjs.entry.js

@@ -8,7 +8,7 @@ const config = require('./config-8246d533.js');
 const common = require('./common-1083a79a.js');
 const formValidation = require('./form-validation-b4788ff9.js');
 
-const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width: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(--mer-color__surface)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{container-name:basic-row-first;}.basic-row-first__container{display:grid;gap:var(--gx-ide-grid-column-gap);padding:var(--gx-ide-container__padding);border-bottom:1px solid var(--gx-ide-container-border-color);grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.knowledge-base-storage{display:grid;grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{display:grid;gap:var(--gx-ide-grid-row-gap);padding:var(--gx-ide-container__padding);grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-rows:repeat(4, min-content);grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{display:grid;padding:var(--gx-ide-container__padding);gap:var(--gx-ide-grid-row-gap);grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-rows:repeat(4, min-content);grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
+const newKbCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-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(--mer-color__surface)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{container-name:basic-row-first;}.basic-row-first__container{display:grid;gap:var(--gx-ide-grid-column-gap);padding:var(--gx-ide-container__padding);border-bottom:1px solid var(--gx-ide-container-border-color);grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.knowledge-base-storage{display:grid;grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{display:grid;gap:var(--gx-ide-grid-row-gap);padding:var(--gx-ide-container__padding);grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-rows:repeat(4, min-content);grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{display:grid;padding:var(--gx-ide-container__padding);gap:var(--gx-ide-grid-row-gap);grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-rows:repeat(4, min-content);grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
 
 const GxIdeNewKb = class {
     constructor(hostRef) {