@genexus/genexus-ide-ui 0.0.101 → 0.0.102

package/dist/genexus-ide-ui/p-ac1a72d9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["newObjectCss","GxIdeNewObject","this","renderedFirstTime","shortcutsSrc","getAssetPath","descriptionModifiedByUser","nameModifiedByUser","scrollIntoViewListBoxes","defaultTypeId","categoryListBox","scrollToSelected","typeListBox","setFirstFocusableElement","el","addEventListener","nameEl","focus","validateInitialName","async","result","validateNameCallback","name","validateNameHandler","renderModuleFolder","selectedType","hasModule","hasFolder","labelDescription","_componentLocale","moduleFolder","moduleOnly","folderOnly","h","labelPosition","value","parent","defaultValue","defaultParent","selectEntityCallback","selectModuleCallback","ref","moduleFolderEl","id","part","init","defaultTypeFound","setDefaultType","selectedCategory","typeCategories","types","length","getNameSuggestion","description","typeId","found","outerLoop","i","j","loopTypeId","replace","nameValueHandler","descriptionValueHandler","descriptionEl","onInputNameHandler","e","detail","onBlurNameHandler","onNameValueChangedHandler","onInputDescriptionHandler","undefined","validationMessage","validationStatus","nameIsValid","createCallbackHandler","data","_a","moduleId","_c","_b","createCallback","cancelCallbackHandler","cancelCallback","categoryOnSelectionChangedHandler","selectionEvent","selection","items","index","typeOnSelectionChangedHandler","selected","watchSelectedTypeHandler","componentWillLoad","Locale","getComponentStrings","componentDidLoad","componentDidLoadEvent","emit","componentDidRender","componentDidRenderFirstTime","componentName","suspendShortcuts","gxgShortcutsEl","suspend","render","Host","class","noContentPadding","noContentGap","slimmerFooter","config","gxIdeContainer","containerTitle","displayTitle","noHeadingBorder","noBorder","borderEnd","categorySelectionTitle","onSelectionChanged","map","category","key","icon","theTitle","typeSelectionTitleSuffix","typeSelectionTitle","type","objectName","placeholder","toolTip","tooltip","onInput","onBlur","onValueChanged","debounce","objectDescription","slot","onClick","footer","btnCancel","disabled","btnCreate","src"],"sources":["src/components/new-object/new-object.scss?tag=gx-ide-new-object&encapsulation=shadow","src/components/new-object/new-object.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/*main*/\n.main {\n  display: grid;\n  grid-template-rows: 1fr auto;\n  overflow: auto;\n  height: 100%;\n}\n.categories-types-container {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 1;\n  overflow: hidden;\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  .categories {\n    flex: 1;\n  }\n  .types {\n    flex: 2;\n  }\n}\n.api-description {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gx-ide-grid-row-gap);\n}\n.form {\n  display: grid;\n  grid-template-columns: minmax(95px, auto) 1fr;\n  grid-template-areas:\n    \"name-label name-input\"\n    \"description-label description-input\"\n    \"module-label module-input\";\n  gap: var(--gx-ide-grid-row-gap);\n  column-gap: 0;\n\n  .name-label {\n    grid-area: \"name-label\";\n  }\n  .name-input {\n    grid-area: \"name-input\";\n  }\n  .description-label {\n    grid-area: \"description-label\";\n  }\n  .description-input {\n    grid-area: \"description-input\";\n  }\n  .module-label {\n    grid-area: \"module-label\";\n  }\n  .module-input {\n    grid-area: \"module-input\";\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { EntityData } from \"../../common/types\";\n\n@Component({\n  tag: \"gx-ide-new-object\",\n  styleUrl: \"new-object.scss\",\n  shadow: { delegatesFocus: true },\n  assetsDirs: [\"gx-ide-assets/new-object\"]\n})\nexport class GxIdeNewObject {\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 shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/new-object/shortcuts.json`\n  );\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeNewObjectElement;\n\n  /* References needed to collect data con \"Create\" button submit*/\n  private nameEl!: HTMLGxgFormTextElement;\n  private descriptionEl!: HTMLGxgFormTextElement;\n  private moduleFolderEl!: HTMLGxIdeEntitySelectorElement;\n  private descriptionModifiedByUser = false;\n  private nameModifiedByUser = false;\n  private gxgShortcutsEl: HTMLGxgShortcutsElement;\n  private categoryListBox!: HTMLGxgListBoxElement;\n  private typeListBox!: HTMLGxgListBoxElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() selectedCategory: TypeCategoryData | null;\n  @State() selectedType: TypeData | null;\n  @Watch(\"selectedType\")\n  watchSelectedTypeHandler() {\n    this.descriptionModifiedByUser = false;\n  }\n  @State() nameIsValid = false;\n  // Name of the new object\n  @State() name: string = undefined;\n  // Description of the new object\n  @State() description: string = undefined;\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * Array containing category list and its corresponding types\n   */\n  @Prop() readonly typeCategories!: TypeCategoryData[];\n\n  /**\n   * Current value for Module/Folder\n   */\n  @Prop() readonly parent: EntityData;\n\n  /**\n   * Default value for the Module/Folder field.\n   */\n  @Prop() readonly defaultParent: EntityData;\n\n  /**\n   * Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier\n   */\n  @Prop() readonly defaultTypeId: string;\n\n  /**\n   * Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled.\n   */\n  @Prop() readonly selectModuleCallback: SelectModuleCallback;\n\n  /**\n   * Callback invoked when you must validate a name. Returns error message or 'undefined' if name is not valid.\n   */\n  @Prop() readonly validateNameCallback: ValidateNameCallback;\n\n  /**\n   * Callback invoked when user wants to cancel object creation\n   */\n  @Prop() readonly createCallback: CreateCallback;\n\n  /**\n   * Callback invoked when user wants to confirm object creation\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event emm=its the data needed to create a new object\n   */\n  @Event() create: EventEmitter<NewObjectData>;\n\n  /**\n   * This event is trigger after a validation of the object name is made. Returns undefined if its valid, otherwise an error message\n   */\n  @Event() validateName: EventEmitter<string | undefined>;\n\n  /**\n   * This event emits the 'cancel' event\n   */\n  @Event() cancel: EventEmitter<boolean>;\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs.\n   */\n  @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this.init();\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.nameEl.focus();\n    this.setFirstFocusableElement();\n    this.validateInitialName();\n    this.componentDidLoadEvent.emit(true);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n      this.scrollIntoViewListBoxes();\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  /**\n   * Scroll into view on both list-boxes. Only makes sense if defaultTypeId is not undefined, since otherwise in both list-boxes the initial selected item should be the first one, in which case is not needed to do scrollIntoView. Only call this method after the first render on new-object.\n   */\n  private scrollIntoViewListBoxes = () => {\n    if (this.defaultTypeId) {\n      this.categoryListBox.scrollToSelected();\n      this.typeListBox.scrollToSelected();\n    }\n  };\n\n  private setFirstFocusableElement = () => {\n    this.el.addEventListener(\"focus\", () => {\n      this.nameEl.focus();\n    });\n  };\n\n  private validateInitialName = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.name\n    );\n    this.validateNameHandler(result);\n  };\n\n  private renderModuleFolder = () => {\n    if (this.selectedType.hasModule || this.selectedType.hasFolder) {\n      let labelDescription = this._componentLocale.moduleFolder;\n      if (!this.selectedType.hasFolder) {\n        labelDescription = this._componentLocale.moduleOnly;\n      } else if (!this.selectedType.hasModule) {\n        labelDescription = this._componentLocale.folderOnly;\n      }\n      return [\n        <gxg-label labelPosition=\"start\">{labelDescription}</gxg-label>,\n        <gx-ide-entity-selector\n          value={this.parent}\n          defaultValue={this.defaultParent}\n          selectEntityCallback={this.selectModuleCallback}\n          ref={(el: HTMLGxIdeEntitySelectorElement) =>\n            (this.moduleFolderEl = el as HTMLGxIdeEntitySelectorElement)\n          }\n          id=\"module\"\n          part=\"module\"\n        ></gx-ide-entity-selector>\n      ];\n    }\n    return null;\n  };\n\n  /**\n   * This method defines the initial selected category and type, and it thens initializes tha name value.\n   */\n  private init = () => {\n    const defaultTypeFound = this.setDefaultType(this.defaultTypeId);\n    if (!defaultTypeFound) {\n      this.selectedCategory = this.typeCategories[0];\n      this.selectedType = this.selectedCategory.types[0];\n    }\n    if (this.selectedType && this.selectedType.name.length > 0) {\n      this.name = this.getNameSuggestion(this.selectedType);\n      this.description = this.selectedType.name;\n    }\n  };\n\n  private setDefaultType = (typeId: string | undefined): boolean => {\n    if (!typeId) {\n      return false;\n    }\n    let found = false;\n    outerLoop: for (let i = 0; i < this.typeCategories.length; i++) {\n      for (let j = 0; j < this.typeCategories[i].types.length; j++) {\n        const loopTypeId = this.typeCategories[i].types[j].id;\n        if (loopTypeId === typeId) {\n          this.selectedCategory = this.typeCategories[i];\n          this.selectedType = this.typeCategories[i].types[j];\n          found = true;\n          break outerLoop;\n        }\n      }\n    }\n    return found;\n  };\n\n  private getNameSuggestion = (selectedType: TypeData) => {\n    // Type name can include whitespaces, we need to replace all whitespaces to avoid invalid suggestions:\n    return selectedType.name.replace(/\\s/g, \"\");\n  };\n\n  private nameValueHandler = (): string => {\n    if (this.nameModifiedByUser) {\n      return this.nameEl.value;\n    } else {\n      return this.getNameSuggestion(this.selectedType);\n    }\n  };\n\n  private descriptionValueHandler = () => {\n    if (this.nameModifiedByUser) {\n      return this.descriptionEl.value;\n    } else {\n      return this.selectedType.name;\n    }\n  };\n\n  private onInputNameHandler = (e: CustomEvent<string>) => {\n    const name = e.detail;\n    if (!this.descriptionModifiedByUser) {\n      // description should be equal to name, unless the description was already modified by the user.\n      this.descriptionEl.value = name;\n    }\n    this.nameModifiedByUser = true;\n  };\n\n  private onBlurNameHandler = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.nameEl.value\n    );\n    this.validateNameHandler(result);\n  };\n\n  private onNameValueChangedHandler = async (e: CustomEvent<string>) => {\n    const name = e.detail;\n    const result: string | undefined = await this.validateNameCallback(name);\n    this.validateNameHandler(result);\n  };\n\n  private onInputDescriptionHandler = (e: CustomEvent<string>) => {\n    this.description = e.detail;\n    this.descriptionModifiedByUser = true;\n  };\n\n  /**\n   * If the parameter is undefined, is because the name is valid. Otherwise, if it receives a string, is because the name is not valid. The string is the error message to display.\n   */\n  private validateNameHandler = (result: string | undefined): void => {\n    if (result !== undefined) {\n      // the name is not valid. display message\n      this.nameEl.validationMessage = result;\n      this.nameEl.validationStatus = \"error\";\n      this.nameIsValid = false;\n    } else {\n      // valid name\n      this.nameEl.validationMessage = null;\n      this.nameEl.validationStatus = \"indeterminate\";\n      this.nameIsValid = true;\n    }\n  };\n\n  private createCallbackHandler = async (): Promise<void> => {\n    const data: NewObjectData = {\n      typeId: this.selectedType?.id,\n      name: this.nameEl.value,\n      description: !this.descriptionModifiedByUser\n        ? undefined\n        : this.descriptionEl.value,\n      moduleId: this.moduleFolderEl?.value?.id\n    };\n    const result = await this.createCallback(data);\n    this.validateNameHandler(result);\n  };\n\n  private cancelCallbackHandler = async (): Promise<void> => {\n    await this.cancelCallback();\n  };\n\n  private categoryOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ): void => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selectedCategory = this.typeCategories[selection[0].index];\n      if (selectedCategory) {\n        this.selectedCategory = selectedCategory;\n        if (selectedCategory.types.length > 0) {\n          this.selectedType = selectedCategory.types[0];\n        }\n      }\n    }\n  };\n\n  private typeOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ) => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selected = selection[0];\n      this.selectedType = this.selectedCategory.types[selected.index];\n    }\n  };\n\n  // 10.LOCAL METHODS (RENDER) //\n\n  // 11.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            noHeadingBorder\n          >\n            <main class=\"main\">\n              <div class=\"categories-types-container\">\n                <div class=\"categories\">\n                  {/* select a category listbox*/}\n                  {this.typeCategories.length > 0 ? (\n                    <gxg-list-box\n                      class=\"category\"\n                      single-selection\n                      noBorder\n                      borderEnd\n                      the-title={this._componentLocale.categorySelectionTitle}\n                      onSelectionChanged={\n                        this.categoryOnSelectionChangedHandler\n                      }\n                      ref={el =>\n                        (this.categoryListBox = el as HTMLGxgListBoxElement)\n                      }\n                    >\n                      {this.typeCategories.map(category => (\n                        <gxg-list-box-item\n                          key={category.id}\n                          value={category.id}\n                          icon={category.icon}\n                          part={`category-${category.id}`}\n                          selected={this.selectedCategory.id === category.id}\n                        >\n                          {category.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : null}\n                </div>\n                <div class=\"types\">\n                  {/* types listbox*/}\n                  {this.selectedCategory.types.length > 0 ? (\n                    <gxg-list-box\n                      class=\"types\"\n                      single-selection\n                      noBorder\n                      theTitle={\n                        this.selectedCategory.name\n                          ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`\n                          : this._componentLocale.typeSelectionTitle\n                      }\n                      key={this.selectedCategory.id}\n                      onSelectionChanged={this.typeOnSelectionChangedHandler}\n                      ref={el =>\n                        (this.typeListBox = el as HTMLGxgListBoxElement)\n                      }\n                    >\n                      {this.selectedCategory.types.map(type => (\n                        <gxg-list-box-item\n                          key={`${this.selectedCategory.id}-${type.id}`}\n                          icon={type.icon}\n                          part={`type-${this.selectedCategory.id}-${type.id}`}\n                          selected={this.selectedType.id === type.id}\n                        >\n                          {type.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : (\n                    <p>No Categories to display</p>\n                  )}\n                </div>\n              </div>\n              <div class=\"api-description\">\n                {/* api description title*/}\n                <gxg-title type=\"title-05\">\n                  {this.selectedType?.description}\n                </gxg-title>\n                <div class=\"form\">\n                  {/* selected type name */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectName}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Name\"\n                    max-width=\"100%\"\n                    value={this.nameValueHandler()}\n                    toolTip={config.tooltip}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.nameEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputNameHandler as any}\n                    onBlur={this.onBlurNameHandler}\n                    onValueChanged={this.onNameValueChangedHandler}\n                    debounce\n                    part=\"name\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {/* description */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectDescription}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Description\"\n                    max-width=\"100%\"\n                    value={this.descriptionValueHandler()}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.descriptionEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputDescriptionHandler as any}\n                    part=\"description\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {this.renderModuleFolder()}\n                </div>\n              </div>\n            </main>\n\n            {/* Footer*/}\n            {/* cancel button*/}\n            <gxg-button\n              id=\"button-cancel\"\n              slot=\"footer-end\"\n              type=\"outlined\"\n              onClick={this.cancelCallbackHandler}\n              part=\"gxg-button gxg-button--cancel\"\n            >\n              {this._componentLocale.footer.btnCancel}\n            </gxg-button>\n            {/* create button*/}\n            <gxg-button\n              id=\"button-create\"\n              slot=\"footer-end\"\n              type=\"primary-text-only\"\n              onClick={this.createCallbackHandler}\n              disabled={!this.nameIsValid}\n              part=\"gxg-button gxg-button--create\"\n            >\n              {this._componentLocale.footer.btnCreate}\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 NewObjectData {\n  typeId: string;\n  name: string;\n  description: string | undefined;\n  moduleId: string;\n}\n\nexport type ValidateNameCallback = (\n  name: string\n) => Promise<string | undefined>;\n\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\n\nexport type CreateCallback = (\n  data: NewObjectData\n) => Promise<string | undefined>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type TypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: TypeData[];\n};\n\nexport type TypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  hasModule: boolean;\n  hasFolder: boolean;\n  description: string;\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-4e155cd5.entry.js → p-bf7c17a8.entry.js}

@@ -248,6 +248,7 @@ const f = class {
     this.borderEnd = false;
     this.borderBottom = false;
     this.borderStart = false;
+    this.initialScrollToSelected = false;
     this.selectedItems = [];
     this.checkedItems = [];
     this.hideKeyboardSuggestions = true;
@@ -277,6 +278,13 @@ const f = class {
     }));
     return t;
   }
+  async scrollToSelected() {
+    const e = this.getSelectedItemsFunc();
+    if (e.length) {
+      const t = e[0];
+      t.scrollIntoView();
+    }
+  }
   componentDidRender() {
     if (this.theTitle) {
       this.headerHeight = this.header.clientHeight;
@@ -284,6 +292,7 @@ const f = class {
   }
   componentDidLoad() {
     //this.setInitialActive();
+    this.initialScrollToSelected && this.scrollToSelected();
   }
   checkboxClickedHandler() {
     this.containerEl.focus();
@@ -865,4 +874,4 @@ const b = class {
 b.style = h;
 
 export { f as gxg_list_box, b as gxg_list_box_item };
-//# sourceMappingURL=p-4e155cd5.entry.js.map
+//# sourceMappingURL=p-bf7c17a8.entry.js.map

package/dist/genexus-ide-ui/p-bf7c17a8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["repositionScroll","scollableElementRef","activeItem","direction","scrollableElement","hasVerticalScrollbar","scrollHeight","clientHeight","scrollableElementScrollTop","scrollTop","KK","ARROW_UP","scrollableElementTop","getBoundingClientRect","top","selectedItemTop","offset","scrollTo","ARROW_DOWN","scrollableElementBottom","bottom","selectedItemBottom","console","log","listBoxCss","GxgListBox","constructor","hostRef","this","userUsedKeyboard","selectedItemsState","formMessageLogic","setIndexes","allItems","getAllItems","forEach","item","i","index","initialSetup","enabledItems","getEnabledItems","selectedItemsLength","selectItem","allowsEmpty","firstDeselectedItem","find","selected","singleSelection","selectedItems","getSelectedItemsFunc","selectedItem","currentActiveItem","getActiveItem","firstEnabledItem","active","disabled","disabledHandler","checkboxes","checkbox","handleKeyDown","e","ctrlKey","cmdKey","metaKey","shiftKey","code","preventDefault","handleArrow","unselectHighlightedItems","clearSelectedItems","selectItems","clearHighlightedItems","checked","highlightAll","newElement","activeElement","getNextItem","getPrevItem","unhighlightAll","setActiveItem","highlightItem","main","setSiblingSelected","async","length","siblingIsSelected","getIndexByElement","el","element","evaluateSelectedItems","selectedItemsArray","selectedItemsArrayFullInfo","getSelectedItems","then","result","push","value","arraysDiffer","JSON","stringify","updateSelectedItems","allItemsArray","querySelectorAll","theTitle","undefined","emitEmptySelection","keyboardSuggestions","checkCheckbox","uncheckCheckbox","disableSuggestions","noBorder","borderTop","borderEnd","borderBottom","borderStart","initialScrollToSelected","checkedItems","hideKeyboardSuggestions","headerHeight","required","validationStatus","validationMessage","informationMessage","selectedItemsInformation","textContent","scrollToSelected","firstSelectedItem","scrollIntoView","componentDidRender","header","componentDidLoad","checkboxClickedHandler","containerEl","focus","itemLoadedHandler","itemClickedHandler","event","clickedItem","unselectItems","fromIndex","toIndex","activeItemIndex","selectMultipleItems","unhighlightItem","toggleItem","selectedItemsHandler","newArray","selectionChanged","emit","items","checkedItemsHandler","checkedChanged","disabledItems","getDisabledItems","hideKeyboardSuggestionsHandler","newValue","oldValue","localStorage","setItem","itemSelectedHandler","checkboxStateChangedHandler","checkedItemEl","detail","checkedItem","checkedItemValue","checkedItemsArray","enabledItem","getItem","ignoreHighlighted","actualSelectedItems","doNotActivate","highlighted","ignoreActiveItem","toggleHighlightedItems","highlightedItems","getHighlightedItems","selectHighlightedItems","spacePressed","highlightedItemsArray","getHighlightedItemsLength","highlightedItemsLength","getItemByIndex","itemByIndex","currentActive","enabledActiveItemIndex","findIndex","Array","isArray","unselected","clearActiveItem","enabledItemsArray","disabledItemsArray","setCheckboxState","check","changed","getFirstEnabledItem","getFirstSelectedItem","comparator","fromIndexCopy","renderKeyboardSuggestions","Object","keys","itemsArray","key","listItem","h","class","type","icon","onClick","render","Host","large","state","formClasses","commonClassesNames","onKeyDown","container","tabindex","ref","style","height","listBoxItemCss","GxgListboxItem","parts","handleCheckboxClick","checkboxClicked","stopPropagation","target","attachExportParts","part","getAttribute","exportPartsResult","exportParts","exportparts","emitCheckboxChange","mouseOver","watchPropHandler","itemSelected","checkedChangedHandler","checkboxChangedHandler","checkboxStateChanged","iconColor","componentWillLoad","itemLoaded","itemClickedFunc","itemClicked","onMouseOver","onMouseOut","bind","color","size"],"sources":["node_modules/@genexus/gemini/dist/collection/common/reposition-scroll.js","node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.css?tag=gxg-list-box&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.js","node_modules/@genexus/gemini/dist/collection/components/list-box-item/list-box-item.css?tag=gxg-list-box-item&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/list-box-item/list-box-item.js"],"sourcesContent":["import { KeyboardKeys as KK } from \"./types\";\nexport const repositionScroll = (scollableElementRef, activeItem, direction) => {\n    const scrollableElement = scollableElementRef;\n    const hasVerticalScrollbar = scrollableElement?.scrollHeight > scrollableElement?.clientHeight;\n    if (hasVerticalScrollbar && activeItem) {\n        const scrollableElementScrollTop = scrollableElement.scrollTop;\n        if (direction === KK.ARROW_UP) {\n            const scrollableElementTop = scrollableElement.getBoundingClientRect().top;\n            const selectedItemTop = activeItem.getBoundingClientRect().top;\n            if (selectedItemTop < scrollableElementTop) {\n                const offset = scrollableElementTop - selectedItemTop;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop - offset);\n            }\n        }\n        else if (direction === KK.ARROW_DOWN) {\n            const scrollableElementBottom = scrollableElement.getBoundingClientRect().bottom;\n            const selectedItemBottom = activeItem.getBoundingClientRect().bottom;\n            if (selectedItemBottom > scrollableElementBottom) {\n                console.log(\"selectedItemBottom\", selectedItemBottom);\n                console.log(\"scrollableElementBottom\", scrollableElementBottom);\n                const offset = selectedItemBottom - scrollableElementBottom;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop + offset);\n            }\n        }\n    }\n};\n//# sourceMappingURL=reposition-scroll.js.map\n",":host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host {\n  display: block;\n  font-size: var(--ds-base-font-size);\n  font-family: var(--ds-base-font-family-primary);\n  background-color: var(--ds-base-background-color);\n  color: var(--ds-base-font-color);\n  height: 100%;\n}\n:host .container {\n  height: 100%;\n  border: var(--gxg-list-box-container__border);\n  border-radius: var(--gxg-list-box-general__border-radius);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n:host .header {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  background-color: var(--gxg-list-box-header__background-color);\n  border-bottom: var(--ds-border-common-styles);\n  padding: var(--gxg-list-box-header__padding);\n  text-transform: capitalize;\n  font-size: inherit;\n  font-weight: var(--gxg-list-box-header__font-weight);\n  color: var(--gxg-list-box-header__color);\n}\n:host .icon {\n  margin-inline-end: var(--spacing-comp-01);\n}\n:host .checkbox {\n  margin-inline-end: var(--spacing-comp-01);\n}\n\n.main {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  padding: var(--gxg-list-box-main__padding);\n  box-sizing: border-box;\n}\n.main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n.main--no-border {\n  border: none;\n}\n\n.container:focus-within {\n  outline: none;\n}\n\n.container:not(:focus-within) {\n  --ds-border-color-control--focused: transparent;\n  --ds-border-color--focused: transparent;\n  --ds-focus-border-color: transparent;\n}\n\n:host([no-border]) .container {\n  border: none;\n}\n\n/*SUGGESTION LIST*/\n.suggestions__container {\n  background-color: var(--gxg-list-box-suggestions-container__background-color);\n  color: var(--gxg-list-box-suggestions-container__color);\n  font-family: inherit;\n  font-size: var(--gxg-list-box-suggestions-container__font-size);\n  padding: var(--gxg-list-box-suggestions-container__padding);\n  display: flex;\n  gap: var(--gxg-list-box-suggestions-container__gap);\n  align-items: center;\n}\n.suggestions__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  flex-grow: 1;\n}\n\n/*BORDERS*/\n:host([no-border]) .container {\n  border: none;\n}\n\n:host([border-top]) .container {\n  border-top: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-end]) .container {\n  border-inline-end: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-bottom]) .container {\n  border-bottom: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-start]) .container {\n  border-inline-start: 1px solid var(--ds-border-color--regular);\n}\n\n/*Disabled*/\n:host(.gxg--disabled) .header {\n  color: var(--ds-color--disabled);\n  border-bottom-color: var(--ds-border-color-disabled);\n}\n\n/*********************************************\nVALIDATION\n**********************************************/\n.messages-wrapper {\n  margin-top: var(--spacing-comp-02);\n  display: flex;\n  gap: var(--spacing-comp-01);\n  flex-direction: column;\n}","import { Host, h } from \"@stencil/core\";\nimport { formMessageLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { repositionScroll } from \"../../common/reposition-scroll\";\nimport state from \"../store\";\nexport class GxgListBox {\n    constructor() {\n        this.theTitle = undefined;\n        this.checkboxes = false;\n        this.singleSelection = false;\n        this.allowsEmpty = false;\n        this.emitEmptySelection = false;\n        this.keyboardSuggestions = {\n            checkCheckbox: \"to check a checkbox press (shift + space)\",\n            uncheckCheckbox: \"to uncheck a checkbox press (shift + ctrl + space)\"\n        };\n        this.disableSuggestions = false;\n        this.noBorder = false;\n        this.borderTop = false;\n        this.borderEnd = false;\n        this.borderBottom = false;\n        this.borderStart = false;\n        this.initialScrollToSelected = false;\n        this.selectedItems = [];\n        this.checkedItems = [];\n        this.hideKeyboardSuggestions = true;\n        this.headerHeight = 0;\n        this.disabled = false;\n        this.required = false;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.informationMessage = undefined;\n    }\n    /**\n     * This event emits the items that are currently selected. event.detail contains the selected items as objects. Each object contains the item idex and the item value. If value was not provided, the value will be the item innerText.\n     */\n    selectionChanged;\n    checkedChanged;\n    el;\n    header;\n    main;\n    containerEl;\n    /**\n     * This is needed to evaluate if keyboard suggestions should be displayed.\n     */\n    userUsedKeyboard = false;\n    activeItem;\n    selectedItemsState = [];\n    /*VALIDATION*/\n    formMessageLogic = formMessageLogic;\n    /*********************************\n    METHODS\n    *********************************/\n    async getSelectedItems() {\n        const selectedItems = this.getSelectedItemsFunc();\n        const selectedItemsInformation = [];\n        selectedItems.forEach(selectedItem => {\n            selectedItemsInformation.push({\n                active: selectedItem.active,\n                selected: selectedItem.selected,\n                checked: selectedItem.checked,\n                index: selectedItem.index,\n                value: selectedItem.value || selectedItem.textContent\n            });\n        });\n        return selectedItemsInformation;\n    }\n    async scrollToSelected() {\n        const selectedItems = this.getSelectedItemsFunc();\n        if (selectedItems.length) {\n            const firstSelectedItem = selectedItems[0];\n            firstSelectedItem.scrollIntoView();\n        }\n    }\n    componentDidRender() {\n        if (this.theTitle) {\n            this.headerHeight = this.header.clientHeight;\n        }\n    }\n    componentDidLoad() {\n        //this.setInitialActive();\n        this.initialScrollToSelected && this.scrollToSelected();\n    }\n    setIndexes = () => {\n        const allItems = this.getAllItems();\n        allItems.forEach((item, i) => {\n            item.index = i;\n        });\n    };\n    initialSetup = () => {\n        const enabledItems = this.getEnabledItems();\n        const selectedItemsLength = this.selectedItemsLength();\n        //1. Select item if allowsEmpty is false and no item is currently selected\n        const selectItem = !this.allowsEmpty && selectedItemsLength === 0;\n        if (selectItem) {\n            const firstDeselectedItem = enabledItems.find(item => {\n                return !item.selected;\n            });\n            firstDeselectedItem && (firstDeselectedItem.selected = true);\n        }\n        else if (this.singleSelection && selectedItemsLength > 1) {\n            //Only one item can be selected. Unselect every selected items, except the first one.\n            const selectedItems = this.getSelectedItemsFunc();\n            selectedItems.forEach((selectedItem, i) => {\n                if (i !== 0) {\n                    selectedItem.selected = false;\n                }\n            });\n        }\n        //2. Set active item, if not active item exists yet\n        const currentActiveItem = this.getActiveItem();\n        if (!currentActiveItem) {\n            const firstEnabledItem = this.getEnabledItems()[0];\n            if (firstEnabledItem) {\n                firstEnabledItem.active = true;\n                this.activeItem = firstEnabledItem;\n            }\n        }\n        //3. Set index on every item\n        this.setIndexes();\n        //4. disable items\n        if (this.disabled) {\n            this.disabledHandler(true);\n        }\n        //5. set checkboxes\n        if (this.checkboxes) {\n            const allItems = this.getAllItems();\n            allItems.forEach(item => {\n                item.checkbox = true;\n            });\n        }\n    };\n    checkboxClickedHandler() {\n        this.containerEl.focus();\n    }\n    itemLoadedHandler() {\n        this.initialSetup();\n        this.updateSelectedItems();\n    }\n    itemClickedHandler(event) {\n        const { clickedItem, ctrlKey, cmdKey, shiftKey, index } = event[\"detail\"];\n        if (this.singleSelection) {\n            this.setActiveItem(clickedItem);\n        }\n        this.containerEl.focus();\n        //this.clearActiveItem();\n        if (this.singleSelection) {\n            if (clickedItem.selected &&\n                !this.allowsEmpty) {\n                /*same item. do nothing.*/\n                return;\n            }\n            if (this.allowsEmpty && (ctrlKey || cmdKey)) {\n                this.unselectItems(clickedItem);\n            }\n            else {\n                this.clearHighlightedItems();\n                this.clearSelectedItems();\n                this.selectItems(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n        }\n        else {\n            /*multiple-selection allowed*/\n            if (shiftKey || (!cmdKey && !cmdKey)) {\n                this.clearHighlightedItems();\n                this.clearSelectedItems();\n            }\n            if (shiftKey) {\n                if (this.activeItem === clickedItem)\n                    return;\n                let fromIndex;\n                const toIndex = index;\n                if (this.activeItem) {\n                    const activeItemIndex = this.getIndexByElement(this.activeItem);\n                    if (index === activeItemIndex) {\n                        return;\n                    }\n                    fromIndex = activeItemIndex;\n                }\n                else {\n                    fromIndex = 0;\n                }\n                this.selectMultipleItems(fromIndex, toIndex);\n            }\n            else if (ctrlKey || cmdKey) {\n                if (!this.allowsEmpty &&\n                    this.selectedItemsLength() === 1 &&\n                    clickedItem.selected) {\n                    return;\n                }\n                this.unhighlightItem(this.activeItem);\n                this.toggleItem(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n            else {\n                this.selectItems(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n        }\n        this.setActiveItem(clickedItem);\n        this.evaluateSelectedItems();\n    }\n    selectedItemsHandler(newArray) {\n        this.selectionChanged.emit({ items: newArray });\n    }\n    checkedItemsHandler(newArray) {\n        this.checkedChanged.emit(newArray);\n    }\n    disabledHandler(disabled) {\n        if (disabled) {\n            const enabledItems = this.getEnabledItems();\n            enabledItems?.forEach(item => {\n                item.disabled = true;\n            });\n        }\n        else {\n            const disabledItems = this.getDisabledItems();\n            disabledItems?.forEach(item => {\n                item.disabled = false;\n            });\n        }\n    }\n    hideKeyboardSuggestionsHandler(newValue, oldValue) {\n        newValue === true &&\n            oldValue === false &&\n            localStorage.setItem(\"gxg-list-box-hide-keyboard-suggestions\", \"true\");\n    }\n    itemSelectedHandler() {\n        this.setSiblingSelected();\n    }\n    checkboxStateChangedHandler(e) {\n        const checkedItemEl = e.detail.checkedItem;\n        const checkedItemValue = e.detail.checked;\n        /*Update checkboxes array*/\n        const checkedItemsArray = [];\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(enabledItem => {\n                let item;\n                if (enabledItem === checkedItemEl) {\n                    item = checkedItemEl;\n                }\n                else {\n                    item = enabledItem;\n                }\n                const checked = enabledItem === checkedItemEl ? checkedItemValue : item.checked;\n                if (item && checked) {\n                    checkedItemsArray.push({\n                        active: item.active,\n                        selected: item.selected,\n                        checked: checked,\n                        index: item.index,\n                        value: item.value || item.textContent\n                    });\n                }\n            });\n            this.checkedItems = checkedItemsArray;\n        }\n        /*Local Storage*/\n        const localStorageExists = localStorage.getItem(\"gxg-list-box-hide-keyboard-suggestions\");\n        if (!localStorageExists &&\n            !this.disableSuggestions &&\n            this.userUsedKeyboard) {\n            // this.hideKeyboardSuggestions = false;\n        }\n    }\n    handleKeyDown = (e) => {\n        this.userUsedKeyboard = true;\n        const ctrlKey = e.ctrlKey;\n        const cmdKey = e.metaKey;\n        const shiftKey = e.shiftKey;\n        //const activeItemIndex = this.getIndexByElement(this.activeItem);\n        if (e.code === \"ArrowDown\" ||\n            e.code === \"ArrowUp\" ||\n            e.code === \"Space\" ||\n            e.code === \"Backspace\" ||\n            e.code === \"Delete\" ||\n            e.code === \"KeyA\") {\n            e.preventDefault();\n        }\n        if (e.code === \"ArrowDown\" || e.code === \"ArrowUp\") {\n            this.handleArrow(e.code, shiftKey);\n        }\n        else if (e.code === \"Space\") {\n            if (shiftKey && ctrlKey) {\n                /*uncheck checkbox*/\n                // const changedLength = this.setCheckboxState(\n                //   this.getHighlightedItems(),\n                //   false\n                // );\n                //changedLength > 0 && (this.hideKeyboardSuggestions = true);\n            }\n            else if (shiftKey && (!ctrlKey || !cmdKey)) {\n                // const changedLength = this.setCheckboxState(\n                //   this.getHighlightedItems(),\n                //   true\n                // );\n                // changedLength > 0 && (this.hideKeyboardSuggestions = true);\n            }\n            else if (!shiftKey &&\n                (ctrlKey || cmdKey) &&\n                this.selectedItemsLength() >= 1) {\n                this.unselectHighlightedItems(true);\n            }\n            else if (!ctrlKey && !cmdKey) {\n                if (this.singleSelection) {\n                    if (this.activeItem === this.getSelectedItemsFunc()[0]) {\n                        return;\n                    }\n                    this.clearSelectedItems();\n                    this.selectItems(this.activeItem);\n                }\n                else {\n                    /*multi-select allowed*/\n                    if (ctrlKey || cmdKey) {\n                        this.clearHighlightedItems();\n                    }\n                    else {\n                        this.selectItems(this.activeItem);\n                        //this.selectHighlightedItems();\n                    }\n                }\n            }\n            const selectedItems = this.getSelectedItemsFunc();\n            if (!ctrlKey || !cmdKey) {\n                selectedItems.forEach(item => {\n                    item.checked = true;\n                });\n            }\n            else {\n                selectedItems.forEach(item => {\n                    item.checked = false;\n                });\n            }\n        }\n        else if (e.code === \"KeyA\" &&\n            (ctrlKey || cmdKey) &&\n            !this.singleSelection) {\n            /*highlight all*/\n            this.highlightAll();\n        }\n        else if (e.code === \"Delete\" || e.code === \"Backspace\") {\n            /*Deselect highlighted items*/\n            this.unselectHighlightedItems();\n        }\n        //this.evaluateSelectedItems();\n    };\n    handleArrow = (direction, shiftKey) => {\n        /*Get the next element*/\n        let newElement;\n        const activeElement = this.getActiveItem();\n        newElement =\n            direction === \"ArrowDown\"\n                ? (newElement = this.getNextItem(activeElement))\n                : (newElement = this.getPrevItem(activeElement));\n        /*Handle*/\n        if (newElement) {\n            this.singleSelection &&\n                !this.allowsEmpty &&\n                newElement !== this.getSelectedItemsFunc()[0] &&\n                this.clearSelectedItems();\n            if (shiftKey && !this.singleSelection) {\n                !this.activeItem.selected && this.selectItems(this.activeItem);\n                !newElement.selected && this.selectItems(newElement);\n            }\n            this.unhighlightAll();\n            this.setActiveItem(newElement);\n            this.highlightItem(newElement);\n            if (shiftKey && !this.singleSelection) {\n                //this.selectItems(this.activeItem);\n            }\n            if ((this.singleSelection || (!this.singleSelection && shiftKey)) &&\n                !newElement.selected &&\n                !this.allowsEmpty) {\n                this.selectItems(newElement);\n            }\n            else if (this.singleSelection) {\n            }\n            repositionScroll(this.main, newElement, direction);\n        }\n    };\n    /* SELECTED */\n    setSiblingSelected = async () => {\n        const allItems = this.getAllItems();\n        allItems.forEach((item, i) => {\n            if (i === allItems.length - 1) {\n                item.siblingIsSelected = false;\n            }\n            else {\n                if (allItems[i + 1].selected) {\n                    item.siblingIsSelected = true;\n                }\n                else {\n                    item.siblingIsSelected = false;\n                }\n            }\n        });\n    };\n    clearSelectedItems(ignoreHighlighted = false) {\n        const actualSelectedItems = ignoreHighlighted\n            ? this.el.querySelectorAll(\"gxg-list-box-item[selected]:not([highlighted])\")\n            : this.el.querySelectorAll(\"gxg-list-box-item[selected]\");\n        if (actualSelectedItems.length > 0) {\n            actualSelectedItems.forEach(item => {\n                this.unselectItems(item);\n            });\n        }\n    }\n    selectedItemsLength = () => {\n        return this.getSelectedItemsFunc().length;\n    };\n    getSelectedItemsFunc() {\n        const selectedItemsArray = [];\n        const enabledItems = this.getAllItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.selected && selectedItemsArray.push(item);\n            });\n        }\n        return selectedItemsArray;\n    }\n    /* HIGHLIGHTED */\n    highlightItem(item, doNotActivate = false) {\n        if (item) {\n            this.singleSelection && this.clearHighlightedItems();\n            item.highlighted = true;\n            !doNotActivate && (this.activeItem = item);\n        }\n    }\n    unhighlightItem(item) {\n        if (item) {\n            item.highlighted = false;\n        }\n    }\n    unhighlightAll(ignoreActiveItem = false) {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                ignoreActiveItem && item === this.activeItem\n                    ? null\n                    : (item.highlighted = false);\n            });\n            return enabledItems.length;\n        }\n        return 0;\n    }\n    toggleHighlightedItems() {\n        const highlightedItems = this.getHighlightedItems();\n        highlightedItems.forEach(item => {\n            this.toggleItem(item);\n        });\n    }\n    selectHighlightedItems() {\n        const selectedItems = this.selectItems(this.getHighlightedItems());\n        return selectedItems;\n    }\n    unselectHighlightedItems(spacePressed = false) {\n        const length = this.unselectItems(this.getHighlightedItems(), spacePressed);\n        return length;\n    }\n    clearHighlightedItems() {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.highlighted && this.unhighlightItem(item);\n            });\n        }\n    }\n    getHighlightedItems() {\n        const highlightedItemsArray = [];\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.highlighted && highlightedItemsArray.push(item);\n            });\n        }\n        return highlightedItemsArray;\n    }\n    getHighlightedItemsLength() {\n        return this.getHighlightedItems().length;\n    }\n    highlightAll() {\n        let highlightedItemsLength = 0;\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                this.highlightItem(item, true);\n                highlightedItemsLength++;\n            });\n        }\n        return highlightedItemsLength;\n    }\n    /* INDEX */\n    getItemByIndex(index) {\n        const enabledItems = this.getEnabledItems();\n        let itemByIndex;\n        if (enabledItems?.length) {\n            itemByIndex = enabledItems.find(item => item.index === index);\n        }\n        return itemByIndex;\n    }\n    getIndexByElement = (el) => {\n        let index;\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            const element = enabledItems.find(item => item === el);\n            element && (index = element.index);\n        }\n        return index;\n    };\n    /* PREV/NEXT */\n    getNextItem(currentActive) {\n        const enabledItems = this.getEnabledItems();\n        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {\n            return enabledItem === currentActive;\n        });\n        //If is the last item, do nothing\n        if (enabledActiveItemIndex === enabledItems.length - 1) {\n            return null;\n        }\n        else {\n            return enabledItems[enabledActiveItemIndex + 1];\n        }\n    }\n    getPrevItem(currentActive) {\n        const enabledItems = this.getEnabledItems();\n        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {\n            return enabledItem === currentActive;\n        });\n        //If is the first item, do nothing\n        if (enabledActiveItemIndex === 0) {\n            return null;\n        }\n        else {\n            return enabledItems[enabledActiveItemIndex - 1];\n        }\n    }\n    /* SELECTED */\n    selectItems(items) {\n        let selected = 0;\n        if (items && Array.isArray(items) && items.length > 0) {\n            items.forEach(item => {\n                if (!item.selected && !item.disabled) {\n                    (item.selected = true) && selected++;\n                }\n                this.activeItem !== item && this.unhighlightItem(item);\n            });\n        }\n        else if (items && !Array.isArray(items)) {\n            if (!items.selected && !items.disabled) {\n                (items.selected = true) && selected++;\n            }\n            this.activeItem !== items && this.unhighlightItem(items);\n        }\n        //this.updateSelectedItems();\n        return selected;\n    }\n    unselectItems(items, spacePressed = false) {\n        let unselected = 0;\n        let selectedItemsLength = this.selectedItemsLength();\n        if (items &&\n            Array.isArray(items) &&\n            items.length > 0 &&\n            selectedItemsLength > 0) {\n            items.forEach(item => {\n                if (item.selected && !item.disabled) {\n                    if (this.allowsEmpty) {\n                        item.selected = false;\n                        unselected++;\n                    }\n                    else {\n                        /*al least one item has to stay selected*/\n                        if (selectedItemsLength > 1) {\n                            item.selected = false;\n                            unselected++;\n                            selectedItemsLength--;\n                        }\n                    }\n                }\n                this.activeItem !== item && this.unhighlightItem(item);\n                if (spacePressed) {\n                    item.checked = false;\n                }\n            });\n        }\n        else if (items && !Array.isArray(items)) {\n            if (items.selected && !items.disabled) {\n                items.selected = false;\n                if (spacePressed) {\n                    items.checked = false;\n                }\n                unselected++;\n            }\n            this.activeItem !== items && this.unhighlightItem(items);\n        }\n        //unselected > 0 && this.updateSelectedItems();\n        return unselected;\n    }\n    toggleItem(item) {\n        if (item?.selected) {\n            this.unselectItems(item);\n        }\n        else {\n            this.selectItems(item);\n        }\n    }\n    evaluateSelectedItems = () => {\n        const selectedItemsArray = [];\n        const selectedItemsArrayFullInfo = [];\n        const selectedItems = this.getSelectedItems();\n        selectedItems.then(result => {\n            result.forEach(item => {\n                selectedItemsArray.push(item.value);\n                selectedItemsArrayFullInfo.push({\n                    active: item.active,\n                    selected: item.selected,\n                    checked: item.checked,\n                    index: item.index,\n                    value: item.value\n                });\n            });\n            const arraysDiffer = JSON.stringify(this.selectedItemsState) !==\n                JSON.stringify(selectedItemsArray);\n            if (arraysDiffer) {\n                this.selectedItemsState = selectedItemsArray;\n                this.selectedItems = [...selectedItemsArrayFullInfo];\n            }\n        });\n    };\n    updateSelectedItems = () => {\n        const selectedItemsArray = [];\n        const selectedItems = this.getSelectedItems();\n        selectedItems.then(result => {\n            result.forEach(item => {\n                selectedItemsArray.push(item.value);\n            });\n            const arraysDiffer = JSON.stringify(this.selectedItemsState) !==\n                JSON.stringify(selectedItemsArray);\n            if (arraysDiffer) {\n                this.selectedItemsState = selectedItemsArray;\n            }\n        });\n    };\n    /* ACTIVE */\n    getActiveItem() {\n        const enabledItems = this.getEnabledItems();\n        return enabledItems.find(item => item.active);\n    }\n    setActiveItem(item) {\n        if (item) {\n            this.clearActiveItem(); /*Only one active item allowed at a time*/\n            item.active = true;\n            this.activeItem = item;\n            return true;\n        }\n        return false;\n    }\n    clearActiveItem() {\n        const activeItem = this.getActiveItem();\n        if (activeItem) {\n            activeItem.active = false;\n            return true;\n        }\n        return false;\n    }\n    /* ENABLED */\n    getEnabledItems() {\n        const enabledItemsArray = [];\n        const enabledItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        enabledItems.forEach(item => {\n            !item.disabled && enabledItemsArray.push(item);\n        });\n        return enabledItemsArray;\n    }\n    /* DISABLED*/\n    getDisabledItems() {\n        const disabledItemsArray = [];\n        const allItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        allItems.forEach(item => {\n            item.disabled && disabledItemsArray.push(item);\n        });\n        return disabledItemsArray;\n    }\n    /* CHECKBOX */\n    setCheckboxState(items, check = true) {\n        if (items && Array.isArray(items) && items.length !== 0) {\n            let changed = 0;\n            items.forEach(item => {\n                if (!item.checked && check) {\n                    item.checked = true;\n                    changed++;\n                }\n                else if (item.checked && !check) {\n                    item.checked = false;\n                    changed++;\n                }\n            });\n            return changed;\n        }\n        else if (!(items && Array.isArray(items))) {\n            const item = items;\n            if (!item.checked && check) {\n                item.checked = true;\n                return 1;\n            }\n            else if (item.checked && !check) {\n                item.checked = false;\n                return 1;\n            }\n        }\n        return 0;\n    }\n    /* OTHER */\n    getAllItems = () => {\n        const allItemsArray = [];\n        const allItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        if (allItems?.length) {\n            allItems.forEach(item => {\n                allItemsArray.push(item);\n            });\n        }\n        return allItemsArray;\n    };\n    getFirstEnabledItem() {\n        return this.getEnabledItems()[0] || null;\n    }\n    getFirstSelectedItem() {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length && enabledItems[0].selected) {\n            return enabledItems[0];\n        }\n        return undefined;\n    }\n    selectMultipleItems(fromIndex, toIndex) {\n        let comparator = toIndex;\n        const selectedItems = [];\n        if (fromIndex === toIndex) {\n            return;\n        }\n        else if (fromIndex > toIndex) {\n            const fromIndexCopy = fromIndex;\n            fromIndex = toIndex;\n            toIndex = fromIndexCopy;\n            comparator = fromIndex;\n        }\n        for (let i = fromIndex; i <= toIndex; i++) {\n            const item = this.getItemByIndex(i);\n            item && selectedItems.push(item);\n            if (i === comparator) {\n                this.highlightItem(item);\n            }\n        }\n        if (selectedItems?.length > 0) {\n            this.selectItems(selectedItems);\n        }\n    }\n    renderKeyboardSuggestions() {\n        if (Object.keys(this.keyboardSuggestions).length) {\n            const itemsArray = [];\n            for (const key in this.keyboardSuggestions) {\n                const listItem = (h(\"li\", { class: \"suggestions-__list-item\" }, this.keyboardSuggestions[key]));\n                itemsArray.push(listItem);\n            }\n            return (h(\"div\", { class: \"suggestions suggestions__container\" }, h(\"ul\", { class: \"suggestions__list\" }, itemsArray), h(\"gxg-button\", { class: \"suggestions__button\", type: \"secondary-icon-only\", icon: \"gemini-tools/close\", onClick: () => (this.hideKeyboardSuggestions = true) })));\n        }\n    }\n    /* RENDER */\n    render() {\n        return (h(Host, { class: {\n                large: state.large,\n                \"has-title\": !!this.theTitle,\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, onKeyDown: this.handleKeyDown }, h(\"div\", { class: { container: true, \"form-element\": true }, tabindex: this.disabled ? \"-1\" : \"0\", ref: el => (this.containerEl = el) }, this.theTitle ? (h(\"header\", { class: { header: true }, ref: el => (this.header = el) }, this.theTitle)) : null, !this.disableSuggestions && !this.hideKeyboardSuggestions\n            ? this.renderKeyboardSuggestions()\n            : null, h(\"main\", { class: {\n                main: true\n            }, style: {\n                height: `calc(100% - ${this.headerHeight}px)`\n            }, ref: el => (this.main = el) }, h(\"slot\", null))), formMessageLogic(this)));\n    }\n    static get is() { return \"gxg-list-box\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"list-box.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"list-box.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"theTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The listbox title that appears on the header\"\n                },\n                \"attribute\": \"the-title\",\n                \"reflect\": false\n            },\n            \"checkboxes\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will display a checkbox for every item\"\n                },\n                \"attribute\": \"checkboxes\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"singleSelection\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will deactivate multi-selection\"\n                },\n                \"attribute\": \"single-selection\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"allowsEmpty\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute allows the list-box to not have any list-box-item selected\"\n                },\n                \"attribute\": \"allows-empty\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"emitEmptySelection\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute prevents 'selectionChanged' event from being emitted if the selection is empty.\"\n                },\n                \"attribute\": \"emit-empty-selection\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"keyboardSuggestions\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"KeyboardSuggestions\",\n                    \"resolved\": \"{ checkCheckbox: string; uncheckCheckbox: string; }\",\n                    \"references\": {\n                        \"KeyboardSuggestions\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::KeyboardSuggestions\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An object with suggestions about the possible keyboard combinations\"\n                },\n                \"defaultValue\": \"{\\n    checkCheckbox: \\\"to check a checkbox press (shift + space)\\\",\\n    uncheckCheckbox: \\\"to uncheck a checkbox press (shift + ctrl + space)\\\"\\n  }\"\n            },\n            \"disableSuggestions\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Disable suggestions about keyboard combinations\"\n                },\n                \"attribute\": \"disable-suggestions\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute disables the border all around\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderTop\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the top\"\n                },\n                \"attribute\": \"border-top\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderEnd\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the end\"\n                },\n                \"attribute\": \"border-end\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderBottom\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the bottom\"\n                },\n                \"attribute\": \"border-bottom\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderStart\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the start\"\n                },\n                \"attribute\": \"border-start\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"initialScrollToSelected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Scrolls to the first selected item after componentDidLoad\"\n                },\n                \"attribute\": \"initial-scroll-to-selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the component disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"required\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Make the radio-buttons required\"\n                },\n                \"attribute\": \"required\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The required message if this input is required and no value is provided (optional). If this is not provided, the default browser required message will show up\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"informationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An informative message to help the user filling the information\"\n                },\n                \"attribute\": \"information-message\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"selectedItems\": {},\n            \"checkedItems\": {},\n            \"hideKeyboardSuggestions\": {},\n            \"headerHeight\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selectionChanged\",\n                \"name\": \"selectionChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This event emits the items that are currently selected. event.detail contains the selected items as objects. Each object contains the item idex and the item value. If value was not provided, the value will be the item innerText.\"\n                },\n                \"complexType\": {\n                    \"original\": \"SelectionChangedEvent\",\n                    \"resolved\": \"{ items: ItemsInformation[]; }\",\n                    \"references\": {\n                        \"SelectionChangedEvent\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::SelectionChangedEvent\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"checkedChanged\",\n                \"name\": \"checkedChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"getSelectedItems\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<ItemsInformation[]>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"ItemsInformation\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::ItemsInformation\"\n                        },\n                        \"HTMLGxgListBoxItemElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLGxgListBoxItemElement\"\n                        }\n                    },\n                    \"return\": \"Promise<ItemsInformation[]>\"\n                },\n                \"docs\": {\n                    \"text\": \"*******************************\\nMETHODS\\n*******************************\",\n                    \"tags\": []\n                }\n            },\n            \"scrollToSelected\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"selectedItems\",\n                \"methodName\": \"selectedItemsHandler\"\n            }, {\n                \"propName\": \"checkedItems\",\n                \"methodName\": \"checkedItemsHandler\"\n            }, {\n                \"propName\": \"disabled\",\n                \"methodName\": \"disabledHandler\"\n            }, {\n                \"propName\": \"hideKeyboardSuggestions\",\n                \"methodName\": \"hideKeyboardSuggestionsHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"checkboxClicked\",\n                \"method\": \"checkboxClickedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemLoaded\",\n                \"method\": \"itemLoadedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemClicked\",\n                \"method\": \"itemClickedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemSelected\",\n                \"method\": \"itemSelectedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"checkboxStateChanged\",\n                \"method\": \"checkboxStateChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=list-box.js.map\n",":host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  --ds-icon-size-box--regular: var(--gxg-list-box-item-icon__size-box--regular);\n  --ds-icon-size--regular: var(--gxg-list-box-item-icon__size--regular);\n  display: block;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: inherit;\n  color: inherit;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -o-user-select: none;\n  outline: none;\n  border-bottom: var(--gxg-list-box-item__border) !important;\n}\n:host .container {\n  display: flex;\n  align-items: center;\n  padding: var(--gxg-list-box-item-container__padding);\n  width: 100%;\n  height: var(--ds-list-item-height--spaced);\n  box-sizing: border-box;\n}\n:host .icon {\n  margin-inline-end: var(--gxg-list-box-item-icon__margin-inline-end);\n  flex-shrink: 0;\n}\n:host gxg-form-checkbox::part(box) {\n  outline: none;\n}\n\n.checkbox {\n  margin-inline-end: 8px;\n}\n\n:host(:not([disabled])) {\n  cursor: pointer !important;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  border-bottom: transparent;\n  color: var(--ds-color-on-disabled);\n}\n\n:host(:hover:not([selected])) {\n  background-color: var(--gxg-list-box-item__background-color--hover);\n}\n\n:host(.has-icon.no-checkbox) .container {\n  padding-inline-start: calc(var(--gxg-list-box-item-container-icon-no-checkbox__padding-inline-start) * 1.5);\n}\n\n.description {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  /* Adjust as needed */\n}\n\n/*HIGHLIGHTED*/\n/*ACTIVE*/\n:host([active]) {\n  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);\n  outline-offset: -1px;\n  outline-offset: 0;\n  color: var(--ds-item-color--hover);\n  outline-offset: var(--gxg-tree-view-item__outline-offset--active);\n}\n\n/*SELECTED*/\n:host([selected]:not(.gxg--disabled)) {\n  background-color: var(--ds-item-background-color--selected);\n  color: var(--gxg-grid-row-cell__color--selected);\n}\n\n:host([selected][sibling-is-selected]:not(.gxg--disabled)) {\n  border-bottom-color: var(--ds-item-border-color--selected) !important;\n}\n\n:host([selected]:hover) {\n  background-color: var(--ds-item-background-color--selected-hover);\n}\n\n:host:last-child {\n  border-bottom: none;\n}","import { Host, h } from \"@stencil/core\";\nimport state from \"../store\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgListboxItem {\n    constructor() {\n        this.disabled = undefined;\n        this.icon = undefined;\n        this.selected = false;\n        this.siblingIsSelected = false;\n        this.highlighted = false;\n        this.active = false;\n        this.index = null;\n        this.emitCheckboxChange = true;\n        this.value = undefined;\n        this.checkbox = false;\n        this.checked = false;\n        this.mouseOver = false;\n    }\n    parts = {\n        checkbox: \"checkbox\"\n    };\n    exportparts;\n    el;\n    /**\n     * (This event is for internal use.)\n     */\n    itemClicked;\n    /**\n     * (This event is for internal use.)\n     */\n    itemLoaded;\n    /**\n     * (This event is for internal use.)\n     */\n    itemSelected;\n    /**\n     * (This event is for internal use.)\n     */\n    checkboxStateChanged;\n    /**\n     * (This event is for internal use.)\n     */\n    checkboxClicked;\n    watchPropHandler() {\n        this.itemSelected.emit();\n    }\n    checkedChangedHandler(e) {\n        this.checked = e;\n    }\n    checkboxChangedHandler(e) {\n        const checked = e.detail.value;\n        this.emitCheckboxChange &&\n            this.checkboxStateChanged.emit({\n                checkedItem: this.el,\n                checked: checked\n            });\n    }\n    handleCheckboxClick = (e) => {\n        this.checkboxClicked.emit(this.el);\n        e.stopPropagation();\n        e.target.checked\n            ? (this.checked = true)\n            : (this.checked = false);\n    };\n    iconColor() {\n        if (this.disabled) {\n            return \"disabled\";\n        }\n        else if (this.selected) {\n            return \"primary-enabled\";\n        }\n        else {\n            return \"auto\";\n        }\n    }\n    componentWillLoad() {\n        this.attachExportParts();\n    }\n    attachExportParts = () => {\n        const part = this.el.getAttribute(\"part\");\n        const exportPartsResult = exportParts(part, this.parts);\n        exportPartsResult.length && (this.exportparts = exportPartsResult);\n    };\n    componentDidLoad() {\n        this.itemLoaded.emit({ value: this.value });\n    }\n    itemClickedFunc(e) {\n        this.itemClicked.emit({\n            clickedItem: this.el,\n            ctrlKey: e.ctrlKey,\n            cmdKey: e.metaKey,\n            shiftKey: e.shiftKey,\n            index: this.index\n        });\n    }\n    onMouseOver() {\n        this.mouseOver = true;\n    }\n    onMouseOut() {\n        this.mouseOver = false;\n    }\n    render() {\n        return (h(Host, { class: {\n                \"has-icon\": this.icon !== undefined,\n                \"no-checkbox\": !this.checkbox,\n                large: state.large,\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, onClick: this.itemClickedFunc.bind(this),\n            // onMouseOver={this.onMouseOver.bind(this)}\n            // onMouseOut={this.onMouseOut.bind(this)}\n            exportParts: this.exportparts ? this.exportparts : null }, h(\"div\", { class: { container: true, \"form-element\": true } }, this.checkbox && !this.disabled ? (h(\"gxg-form-checkbox\", { tabindex: \"-1\", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox, class: \"checkbox\" })) : null, this.icon !== undefined ? (h(\"gxg-icon\", { class: \"icon\", color: this.iconColor(), size: \"regular\", type: this.icon })) : null, h(\"div\", { class: \"description\" }, h(\"slot\", null)))));\n    }\n    static get is() { return \"gxg-list-box-item\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"list-box-item.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"list-box-item.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute disabled the list-box-item\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": true\n            },\n            \"icon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"selected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as selected\"\n                },\n                \"attribute\": \"selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"siblingIsSelected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This property is for internal use\"\n                },\n                \"attribute\": \"sibling-is-selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"highlighted\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as highlighted\"\n                },\n                \"attribute\": \"highlighted\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as active (it is as if it was focused)\\nOnly one item at a time should be active.\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"index\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This property is set by the list-box item. It should not be set by the user.\"\n                },\n                \"attribute\": \"index\",\n                \"reflect\": true,\n                \"defaultValue\": \"null\"\n            },\n            \"emitCheckboxChange\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute emits the 'checkboxChanged' event every time a checkbox value is changed.\"\n                },\n                \"attribute\": \"emit-checkbox-change\",\n                \"reflect\": false,\n                \"defaultValue\": \"true\"\n            },\n            \"value\": {\n                \"type\": \"any\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The item value. If value is not provided, the value will be the item innerHTML.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"checkbox\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will add a checkbox to the item.\"\n                },\n                \"attribute\": \"checkbox\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will make the checkbox checked.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"mouseOver\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"itemClicked\",\n                \"name\": \"itemClicked\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"ItemClicked\",\n                    \"resolved\": \"{ clickedItem: HTMLGxgListBoxItemElement; ctrlKey: boolean; cmdKey: boolean; shiftKey: boolean; index: number; }\",\n                    \"references\": {\n                        \"ItemClicked\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box-item/list-box-item.tsx\",\n                            \"id\": \"src/components/list-box-item/list-box-item.tsx::ItemClicked\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"itemLoaded\",\n                \"name\": \"itemLoaded\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"itemSelected\",\n                \"name\": \"itemSelected\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"checkboxStateChanged\",\n                \"name\": \"checkboxStateChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"ItemChecked\",\n                    \"resolved\": \"{ checkedItem: HTMLGxgListBoxItemElement; checked: boolean; }\",\n                    \"references\": {\n                        \"ItemChecked\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box-item/list-box-item.tsx\",\n                            \"id\": \"src/components/list-box-item/list-box-item.tsx::ItemChecked\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"checkboxClicked\",\n                \"name\": \"checkboxClicked\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"selected\",\n                \"methodName\": \"watchPropHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"checked\",\n                \"method\": \"checkedChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"change\",\n                \"method\": \"checkboxChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=list-box-item.js.map\n"],"mappings":"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"}

package/dist/types/components/new-object/new-object.d.ts

@@ -12,7 +12,10 @@ export declare class GxIdeNewObject {
     private descriptionEl;
     private moduleFolderEl;
     private descriptionModifiedByUser;
+    private nameModifiedByUser;
     private gxgShortcutsEl;
+    private categoryListBox;
+    private typeListBox;
     selectedCategory: TypeCategoryData | null;
     selectedType: TypeData | null;
     watchSelectedTypeHandler(): void;
@@ -39,6 +42,10 @@ export declare class GxIdeNewObject {
      * Default value for the Module/Folder field.
      */
     readonly defaultParent: EntityData;
+    /**
+     * Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier
+     */
+    readonly defaultTypeId: string;
     /**
      * Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled.
      */
@@ -82,14 +89,21 @@ export declare class GxIdeNewObject {
      * Suspends or reactivates the shortcuts
      */
     suspendShortcuts(suspendShortcuts: boolean): Promise<void>;
+    /**
+     * Scroll into view on both list-boxes. Only makes sense if defaultTypeId is not undefined, since otherwise in both list-boxes the initial selected item should be the first one, in which case is not needed to do scrollIntoView. Only call this method after the first render on new-object.
+     */
+    private scrollIntoViewListBoxes;
     private setFirstFocusableElement;
     private validateInitialName;
     private renderModuleFolder;
     /**
-     * This method initializes tha name value. It depends on 'this.selectedType'
+     * This method defines the initial selected category and type, and it thens initializes tha name value.
      */
     private init;
+    private setDefaultType;
     private getNameSuggestion;
+    private nameValueHandler;
+    private descriptionValueHandler;
     private onInputNameHandler;
     private onBlurNameHandler;
     private onNameValueChangedHandler;

package/dist/types/components.d.ts

@@ -989,6 +989,10 @@ export namespace Components {
           * Default value for the Module/Folder field.
          */
         "defaultParent": EntityData;
+        /**
+          * Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier
+         */
+        "defaultTypeId": string;
         /**
           * If true it displays the component title on the header
          */
@@ -3190,6 +3194,10 @@ declare namespace LocalJSX {
           * Default value for the Module/Folder field.
          */
         "defaultParent"?: EntityData;
+        /**
+          * Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier
+         */
+        "defaultTypeId"?: string;
         /**
           * If true it displays the component title on the header
          */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,10 +36,10 @@
     "@types/react": "^18.2.8"
   },
   "peerDependencies": {
-    "@genexus/gemini": "*0.2.108"
+    "@genexus/gemini": "*0.2.109"
   },
   "devDependencies": {
-    "@genexus/gemini": "*0.2.108",
+    "@genexus/gemini": "*0.2.109",
     "@stencil-community/eslint-plugin": "^0.6.0",
     "@stencil/core": "~4.9.0",
     "@stencil/sass": "~1.4.0",

package/dist/genexus-ide-ui/p-4a5ad686.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["newObjectCss","GxIdeNewObject","this","renderedFirstTime","shortcutsSrc","getAssetPath","descriptionModifiedByUser","setFirstFocusableElement","el","addEventListener","nameEl","focus","validateInitialName","async","result","validateNameCallback","name","validateNameHandler","renderModuleFolder","selectedType","hasModule","hasFolder","labelDescription","_componentLocale","moduleFolder","moduleOnly","folderOnly","h","labelPosition","value","parent","defaultValue","defaultParent","selectEntityCallback","selectModuleCallback","ref","moduleFolderEl","id","part","init","selectedCategory","typeCategories","types","length","getNameSuggestion","description","replace","onInputNameHandler","e","detail","descriptionEl","onBlurNameHandler","onNameValueChangedHandler","onInputDescriptionHandler","undefined","validationMessage","validationStatus","nameIsValid","createCallbackHandler","data","typeId","_a","moduleId","_c","_b","createCallback","cancelCallbackHandler","cancelCallback","categoryOnSelectionChangedHandler","selectionEvent","selection","items","index","typeOnSelectionChangedHandler","selected","watchSelectedTypeHandler","componentWillLoad","Locale","getComponentStrings","componentDidLoad","componentDidLoadEvent","emit","componentDidRender","componentDidRenderFirstTime","componentName","suspendShortcuts","gxgShortcutsEl","suspend","render","Host","class","noContentPadding","noContentGap","slimmerFooter","config","gxIdeContainer","containerTitle","displayTitle","noHeadingBorder","noBorder","borderEnd","categorySelectionTitle","onSelectionChanged","map","category","key","icon","theTitle","typeSelectionTitleSuffix","typeSelectionTitle","type","objectName","placeholder","toolTip","tooltip","onInput","onBlur","onValueChanged","debounce","objectDescription","slot","onClick","footer","btnCancel","disabled","btnCreate","src"],"sources":["src/components/new-object/new-object.scss?tag=gx-ide-new-object&encapsulation=shadow","src/components/new-object/new-object.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/*main*/\n.main {\n  display: grid;\n  grid-template-rows: 1fr auto;\n  overflow: auto;\n  height: 100%;\n}\n.categories-types-container {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 1;\n  overflow: hidden;\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  .categories {\n    flex: 1;\n  }\n  .types {\n    flex: 2;\n  }\n}\n.api-description {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gx-ide-grid-row-gap);\n}\n.form {\n  display: grid;\n  grid-template-columns: minmax(95px, auto) 1fr;\n  grid-template-areas:\n    \"name-label name-input\"\n    \"description-label description-input\"\n    \"module-label module-input\";\n  gap: var(--gx-ide-grid-row-gap);\n  column-gap: 0;\n\n  .name-label {\n    grid-area: \"name-label\";\n  }\n  .name-input {\n    grid-area: \"name-input\";\n  }\n  .description-label {\n    grid-area: \"description-label\";\n  }\n  .description-input {\n    grid-area: \"description-input\";\n  }\n  .module-label {\n    grid-area: \"module-label\";\n  }\n  .module-input {\n    grid-area: \"module-input\";\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { EntityData } from \"../../common/types\";\n\n@Component({\n  tag: \"gx-ide-new-object\",\n  styleUrl: \"new-object.scss\",\n  shadow: { delegatesFocus: true },\n  assetsDirs: [\"gx-ide-assets/new-object\"]\n})\nexport class GxIdeNewObject {\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 shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/new-object/shortcuts.json`\n  );\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeNewObjectElement;\n\n  /* References needed to collect data con \"Create\" button submit*/\n  private nameEl!: HTMLGxgFormTextElement;\n  private descriptionEl!: HTMLGxgFormTextElement;\n  private moduleFolderEl!: HTMLGxIdeEntitySelectorElement;\n  private descriptionModifiedByUser = false;\n  private gxgShortcutsEl: HTMLGxgShortcutsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() selectedCategory: TypeCategoryData | null;\n  @State() selectedType: TypeData | null;\n  @Watch(\"selectedType\")\n  watchSelectedTypeHandler() {\n    this.descriptionModifiedByUser = false;\n  }\n  @State() nameIsValid = false;\n  // Name of the new object\n  @State() name: string = undefined;\n  // Description of the new object\n  @State() description: string = undefined;\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * Array containing category list and its corresponding types\n   */\n  @Prop() readonly typeCategories!: TypeCategoryData[];\n\n  /**\n   * Current value for Module/Folder\n   */\n  @Prop() readonly parent: EntityData;\n\n  /**\n   * Default value for the Module/Folder field.\n   */\n  @Prop() readonly defaultParent: EntityData;\n\n  /**\n   * Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled.\n   */\n  @Prop() readonly selectModuleCallback: SelectModuleCallback;\n\n  /**\n   * Callback invoked when you must validate a name. Returns error message or 'undefined' if name is not valid.\n   */\n  @Prop() readonly validateNameCallback: ValidateNameCallback;\n\n  /**\n   * Callback invoked when user wants to cancel object creation\n   */\n  @Prop() readonly createCallback: CreateCallback;\n\n  /**\n   * Callback invoked when user wants to confirm object creation\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event emm=its the data needed to create a new object\n   */\n  @Event() create: EventEmitter<NewObjectData>;\n\n  /**\n   * This event is trigger after a validation of the object name is made. Returns undefined if its valid, otherwise an error message\n   */\n  @Event() validateName: EventEmitter<string | undefined>;\n\n  /**\n   * This event emits the 'cancel' event\n   */\n  @Event() cancel: EventEmitter<boolean>;\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs.\n   */\n  @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this.init();\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.nameEl.focus();\n    this.setFirstFocusableElement();\n    this.validateInitialName();\n    this.componentDidLoadEvent.emit(true);\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  private setFirstFocusableElement = () => {\n    this.el.addEventListener(\"focus\", () => {\n      this.nameEl.focus();\n    });\n  };\n\n  private validateInitialName = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.name\n    );\n    this.validateNameHandler(result);\n  };\n\n  private renderModuleFolder = () => {\n    if (this.selectedType.hasModule || this.selectedType.hasFolder) {\n      let labelDescription = this._componentLocale.moduleFolder;\n      if (!this.selectedType.hasFolder) {\n        labelDescription = this._componentLocale.moduleOnly;\n      } else if (!this.selectedType.hasModule) {\n        labelDescription = this._componentLocale.folderOnly;\n      }\n      return [\n        <gxg-label labelPosition=\"start\">{labelDescription}</gxg-label>,\n        <gx-ide-entity-selector\n          value={this.parent}\n          defaultValue={this.defaultParent}\n          selectEntityCallback={this.selectModuleCallback}\n          ref={(el: HTMLGxIdeEntitySelectorElement) =>\n            (this.moduleFolderEl = el as HTMLGxIdeEntitySelectorElement)\n          }\n          id=\"module\"\n          part=\"module\"\n        ></gx-ide-entity-selector>\n      ];\n    }\n    return null;\n  };\n\n  /**\n   * This method initializes tha name value. It depends on 'this.selectedType'\n   */\n  private init = () => {\n    this.selectedCategory = this.typeCategories[0];\n    this.selectedType = this.typeCategories[0].types[0];\n\n    if (this.selectedType && this.selectedType.name.length > 0) {\n      this.name = this.getNameSuggestion(this.selectedType);\n      this.description = this.selectedType.name;\n    }\n  };\n\n  private getNameSuggestion = (selectedType:TypeData) => {\n    //Type name can include whitespaces, we need to replace all whitespaces to avoid invalid suggestions:\n    return selectedType.name.replace(/\\s/g, '');\n  }\n\n  private onInputNameHandler = (e: CustomEvent<string>) => {\n    const name = e.detail;\n    if (!this.descriptionModifiedByUser) {\n      // description should be equal to name, unless the description was already modified by the user.\n      this.descriptionEl.value = name;\n    }\n  };\n\n  private onBlurNameHandler = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.nameEl.value\n    );\n    this.validateNameHandler(result);\n  };\n\n  private onNameValueChangedHandler = async (e: CustomEvent<string>) => {\n    const name = e.detail;\n    const result: string | undefined = await this.validateNameCallback(name);\n    this.validateNameHandler(result);\n  };\n\n  private onInputDescriptionHandler = (e: CustomEvent<string>) => {\n    this.description = e.detail;\n    this.descriptionModifiedByUser = true;\n  };\n\n  /**\n   * If the parameter is undefined, is because the name is valid. Otherwise, if it receives a string, is because the name is not valid. The string is the error message to display.\n   */\n  private validateNameHandler = (result: string | undefined): void => {\n    if (result !== undefined) {\n      // the name is not valid. display message\n      this.nameEl.validationMessage = result;\n      this.nameEl.validationStatus = \"error\";\n      this.nameIsValid = false;\n    } else {\n      // valid name\n      this.nameEl.validationMessage = null;\n      this.nameEl.validationStatus = \"indeterminate\";\n      this.nameIsValid = true;\n    }\n  };\n\n  private createCallbackHandler = async (): Promise<void> => {\n    const data: NewObjectData = {\n      typeId: this.selectedType?.id,\n      name: this.nameEl.value,\n      description: !this.descriptionModifiedByUser\n        ? undefined\n        : this.descriptionEl.value,\n      moduleId: this.moduleFolderEl?.value?.id\n    };\n    const result = await this.createCallback(data);\n    this.validateNameHandler(result);\n  };\n\n  private cancelCallbackHandler = async (): Promise<void> => {\n    await this.cancelCallback();\n  };\n\n  private categoryOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ): void => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selectedCategory = this.typeCategories[selection[0].index];\n      if (selectedCategory) {\n        this.selectedCategory = selectedCategory;\n        if (selectedCategory.types.length > 0) {\n          this.selectedType = selectedCategory.types[0];\n        }\n      }\n    }\n  };\n\n  private typeOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ) => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selected = selection[0];\n      this.selectedType = this.selectedCategory.types[selected.index];\n    }\n  };\n\n  // 10.LOCAL METHODS (RENDER) //\n\n  // 11.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            noHeadingBorder\n          >\n            <main class=\"main\">\n              <div class=\"categories-types-container\">\n                <div class=\"categories\">\n                  {/* select a category listbox*/}\n                  {this.typeCategories.length > 0 ? (\n                    <gxg-list-box\n                      class=\"category\"\n                      single-selection\n                      noBorder\n                      borderEnd\n                      the-title={this._componentLocale.categorySelectionTitle}\n                      onSelectionChanged={\n                        this.categoryOnSelectionChangedHandler\n                      }\n                    >\n                      {this.typeCategories.map(category => (\n                        <gxg-list-box-item\n                          key={category.id}\n                          value={category.id}\n                          icon={category.icon}\n                          part={`category-${category.id}`}\n                        >\n                          {category.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : null}\n                </div>\n                <div class=\"types\">\n                  {/* types listbox*/}\n                  {this.selectedCategory.types.length > 0 ? (\n                    <gxg-list-box\n                      class=\"types\"\n                      single-selection\n                      noBorder\n                      theTitle={\n                        this.selectedCategory.name\n                          ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`\n                          : this._componentLocale.typeSelectionTitle\n                      }\n                      key={this.selectedCategory.id}\n                      onSelectionChanged={this.typeOnSelectionChangedHandler}\n                    >\n                      {this.selectedCategory.types.map(type => (\n                        <gxg-list-box-item\n                          key={`${this.selectedCategory.id}-${type.id}`}\n                          icon={type.icon}\n                          part={`type-${this.selectedCategory.id}-${type.id}`}\n                        >\n                          {type.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : (\n                    <p>No Categories to display</p>\n                  )}\n                </div>\n              </div>\n              <div class=\"api-description\">\n                {/* api description title*/}\n                <gxg-title type=\"title-05\">\n                  {this.selectedType?.description}\n                </gxg-title>\n                <div class=\"form\">\n                  {/* selected type name */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectName}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Name\"\n                    max-width=\"100%\"\n                    value={this.getNameSuggestion(this.selectedType)}\n                    toolTip={config.tooltip}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.nameEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputNameHandler as any}\n                    onBlur={this.onBlurNameHandler}\n                    onValueChanged={this.onNameValueChangedHandler}\n                    debounce\n                    part=\"name\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {/* description */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectDescription}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Description\"\n                    max-width=\"100%\"\n                    value={this.selectedType.name}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.descriptionEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputDescriptionHandler as any}\n                    part=\"description\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {this.renderModuleFolder()}\n                </div>\n              </div>\n            </main>\n\n            {/* Footer*/}\n            {/* cancel button*/}\n            <gxg-button\n              id=\"button-cancel\"\n              slot=\"footer-end\"\n              type=\"outlined\"\n              onClick={this.cancelCallbackHandler}\n              part=\"gxg-button gxg-button--cancel\"\n            >\n              {this._componentLocale.footer.btnCancel}\n            </gxg-button>\n            {/* create button*/}\n            <gxg-button\n              id=\"button-create\"\n              slot=\"footer-end\"\n              type=\"primary-text-only\"\n              onClick={this.createCallbackHandler}\n              disabled={!this.nameIsValid}\n              part=\"gxg-button gxg-button--create\"\n            >\n              {this._componentLocale.footer.btnCreate}\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 NewObjectData {\n  typeId: string;\n  name: string;\n  description: string | undefined;\n  moduleId: string;\n}\n\nexport type ValidateNameCallback = (\n  name: string\n) => Promise<string | undefined>;\n\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\n\nexport type CreateCallback = (\n  data: NewObjectData\n) => Promise<string | undefined>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type TypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: TypeData[];\n};\n\nexport type TypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  hasModule: boolean;\n  hasFolder: boolean;\n  description: string;\n};\n"],"mappings":"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"}