@genexus/genexus-ide-ui 1.1.14 → 1.1.16

package/dist/collection/components/data-type-selector/data-type-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-type-selector.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/data-type-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemActionable,\n  ActionListItemModel,\n  ActionListItemModelExtended,\n  ActionListItemType,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemAdditionalBase,\n  ActionListItemGroup\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"components/list-box\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() statusInfo: StatusInfo[] = [];\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n    });\n    this.loading = false;\n    this.#showAllObjects();\n  }\n\n  /**\n   * Callback invoked when user select an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #handleSelectionChange = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const name = event.detail[0].item.caption;\n\n      const itemAdditionalBase = event.detail[0].item.additionalInformation[\n        \"stretch-start\"\n      ].center[0] as ActionListItemAdditionalBase;\n      const icon = itemAdditionalBase.imgSrc;\n\n      this.dataTypeSelectedCallback({\n        name: name,\n        icon: icon\n      });\n\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"actionable\");\n    } else if (eventType === \"group\") {\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"group\");\n    }\n  };\n\n  #updateListBoxModelState = (name: string, type: ActionListItemType) => {\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      this.recentlyUsedActionListModel.forEach(item => {\n        // clear selected\n        (item as ActionListItemActionable).selected = false;\n      });\n      const selectedItemIndex = this.recentlyUsed.findIndex(\n        item => item.name === name\n      );\n      if (selectedItemIndex !== -1) {\n        (\n          this.recentlyUsedActionListModel[\n            selectedItemIndex\n          ] as ActionListItemActionable\n        ).selected = true;\n      }\n    } else if (\n      type === \"group\" &&\n      this.#categoriesActionListItemGroupMap.has(name)\n    ) {\n      const group = this.#categoriesActionListItemGroupMap.get(\n        name\n      ) as ActionListItemGroup;\n      const groupUpdated = { ...group, expanded: group.expanded };\n      this.#categoriesActionListItemGroupMap.set(name, groupUpdated);\n    }\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onSelectedItemsChange={this.#handleSelectionChange}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\ntype StatusInfo = {\n  [key: string]: {\n    display: boolean;\n  };\n};\n\nexport type DataTypeCategoryData = {\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  name: string;\n  icon: string;\n};\n\nexport type DataTypeSelectedCallback = (data: {\n  name: string;\n  icon: string;\n}) => Promise<void>;\n"]}
+{"version":3,"file":"data-type-selector.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/data-type-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemModel,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport { ActionListItemGroup } from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/list-box\",\n  \"utils/form--full\",\n  \"utils/typography\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ARROW_UP_KEY = \"ArrowUp\";\nconst ARROW_DOWN_KEY = \"ArrowDown\";\nconst ENTER_KEY = \"Enter\";\nconst TAB_KEY = \"Tab\";\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  #dataTypeCategoryMap: Map<string, string> = new Map<string, string>();\n  #dataTypeDataIdMap: Map<string, DataTypeData> = new Map<\n    string,\n    DataTypeData\n  >();\n  #lastArrowKey: typeof ARROW_UP_KEY | typeof ARROW_DOWN_KEY | null = null;\n  #selectedDataTypeIds: SelectedDataTypeIds = {\n    // For setting focus\n    categoryId: undefined,\n    dataTypeId: undefined\n  };\n  #focusAlreadySet: boolean = false;\n\n  #actionListEl!: HTMLChActionListRenderElement;\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n  @State() categoriesJustChanged: boolean = false;\n  @State() actionListDidRender: boolean = false;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n      category.types.forEach(type => {\n        const isSelected = type.selected;\n        if (isSelected) {\n          // For setting focus\n          this.#selectedDataTypeIds.categoryId = category.name;\n          this.#selectedDataTypeIds.dataTypeId = type.name;\n        }\n\n        this.#dataTypeCategoryMap.set(type.name, category.id);\n        this.#dataTypeDataIdMap.set(type.name, {\n          id: category.id,\n          name: type.name,\n          icon: type.icon,\n          selected: type.selected\n        });\n      });\n    });\n    this.loading = false;\n    this.#showAllObjects();\n    this.categoriesJustChanged = true;\n  }\n\n  /**\n   * Callback invoked when the user has selected an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly arrowUpOnFirstElement: ArrowFirstOnFirstElement;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly focusType: \"first-element\" | \"selected\" = \"first-element\";\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #evaluateSelectionChanged = (path: EventTarget[]) => {\n    const chActionListItem = path.find(\n      el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n    );\n    if (chActionListItem) {\n      const id = (chActionListItem as HTMLElement).id;\n      const dataTypeData = this.#dataTypeDataIdMap.get(id);\n      this.dataTypeSelectedCallback(dataTypeData);\n    }\n  };\n\n  #listKeyDownHandler = (event: KeyboardEvent) => {\n    const pressedKey = event.key;\n    const path = event.composedPath();\n\n    if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {\n      this.#lastArrowKey = pressedKey;\n\n      if (pressedKey === ARROW_UP_KEY) {\n        // Check if this is the first group. IF it is, let the host know,\n        // so it can close the dialog.\n\n        const chActionListItem = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n        );\n\n        if (chActionListItem !== undefined) {\n          return;\n        }\n\n        // This is a ch-action-list-group\n        const actionGroup = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-GROUP\"\n        );\n        const currentFocusedActionGroupId = (actionGroup as HTMLElement).id;\n\n        const firstActionListGroupId =\n          this.#actionListEl.shadowRoot.firstElementChild.id;\n\n        if (currentFocusedActionGroupId === firstActionListGroupId) {\n          this.arrowUpOnFirstElement();\n        }\n      }\n    } else if (pressedKey === ENTER_KEY) {\n      this.#evaluateSelectionChanged(path);\n    } else if (pressedKey === TAB_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #listClickHandler = (event: MouseEvent) => {\n    if (this.#lastArrowKey) {\n      // User navigated with ArrowUp or ArrowDown\n      // Ignore, since this was not a click event.\n    } else if (event.detail === 0) {\n      // ignore keyboard Enter (Enter happens by default on buttons on onClick)\n      return;\n    } else {\n      const path = event.composedPath();\n      this.#evaluateSelectionChanged(path);\n    }\n    this.#lastArrowKey = null;\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #handleButtonTab = (event: KeyboardEvent) => {\n    // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event\n    // in a parent element.\n    if (event.key === TAB_KEY || event.key === ENTER_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n              onKeyDown={this.#handleButtonTab}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            onKeyDown={this.#handleButtonTab}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                onKeyDown={this.#handleButtonTab}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  #setFocus = async () => {\n    if (this.#focusAlreadySet) {\n      return;\n    }\n    let focusableElement: HTMLElement;\n\n    setTimeout(() => {\n      // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly\n      if (\n        this.focusType === \"selected\" &&\n        this.#selectedDataTypeIds.categoryId &&\n        this.#selectedDataTypeIds.dataTypeId\n      ) {\n        // set focus on the selected element\n        const selectedDataTypeEl = this.#actionListEl.shadowRoot.getElementById(\n          this.#selectedDataTypeIds.dataTypeId\n        );\n        if (selectedDataTypeEl) {\n          focusableElement = selectedDataTypeEl;\n        }\n      } else {\n        // set focus of the first element\n        const firstActionListGroup =\n          this.#actionListEl.shadowRoot.firstElementChild;\n\n        const firstButton = firstActionListGroup.shadowRoot.firstElementChild;\n        focusableElement = firstButton as HTMLButtonElement;\n      }\n\n      focusableElement && (focusableElement as HTMLElement).focus();\n      this.#focusAlreadySet = true;\n    }, 150);\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              ref={async el => {\n                this.#actionListEl = el as HTMLChActionListRenderElement;\n                this.#setFocus();\n              }}\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onKeyDown={this.#listKeyDownHandler}\n              onClick={this.#listClickHandler}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type DataTypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  selected: boolean;\n};\n\nexport type DataTypeSelectedCallback = (data: DataTypeData) => Promise<void>;\n\ntype SelectedDataTypeIds = {\n  categoryId: string;\n  dataTypeId: string;\n};\n\nexport type ArrowFirstOnFirstElement = () => Promise<void>;\n"]}

package/dist/collection/components/data-type-selector/gx-ide-assets/data-type-selector/langs/data-type-selector.lang.en.json

@@ -2,7 +2,7 @@
   "componentName": "Data Type Selector",
   "loader": {
     "title": "Loading Data Types",
-    "description": "Hango on please..."
+    "description": "Hang on please..."
   },
   "fixedTypes": {
     "all": "All",

package/dist/collection/components/data-type-selector/helpers.js

@@ -9,6 +9,7 @@ export const mapCategoryToListItemGroup = (category) => {
             return {
                 caption: type.name,
                 id: type.name,
+                selected: type.selected,
                 additionalInformation: {
                     "stretch-start": {
                         center: [{ imgSrc: type.icon }]
@@ -25,6 +26,7 @@ export const mapDataTypesToList = (dataTypes) => {
         return {
             caption: dataType.name,
             id: dataType.name,
+            selected: dataType.selected,
             additionalInformation: {
                 "stretch-start": {
                     center: [{ imgSrc: dataType.icon || undefined }]

package/dist/collection/components/data-type-selector/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/helpers.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,QAA8B,EACT,EAAE;IACvB,MAAM,aAAa,GAAwB;QACzC,OAAO,EAAE,QAAQ,CAAC,IAAI;QACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,EAAE,EAAE,IAAI,CAAC,IAAI;gBACb,qBAAqB,EAAE;oBACrB,eAAe,EAAE;wBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;qBAChC;iBACF;gBACD,IAAI,EAAE,YAAY;aACnB,CAAC;QACJ,CAAC,CAAC;KACH,CAAC;IACF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,SAAyB,EACR,EAAE;IACnB,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;QACvC,OAAO;YACL,OAAO,EAAE,QAAQ,CAAC,IAAI;YACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;YACjB,qBAAqB,EAAE;gBACrB,eAAe,EAAE;oBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;iBACjD;aACF;YACD,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,KAAK;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/helpers.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,QAA8B,EACT,EAAE;IACvB,MAAM,aAAa,GAAwB;QACzC,OAAO,EAAE,QAAQ,CAAC,IAAI;QACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,EAAE,EAAE,IAAI,CAAC,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,qBAAqB,EAAE;oBACrB,eAAe,EAAE;wBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;qBAChC;iBACF;gBACD,IAAI,EAAE,YAAY;aACnB,CAAC;QACJ,CAAC,CAAC;KACH,CAAC;IACF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,SAAyB,EACR,EAAE;IACnB,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;QACvC,OAAO;YACL,OAAO,EAAE,QAAQ,CAAC,IAAI;YACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;YACjB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,qBAAqB,EAAE;gBACrB,eAAe,EAAE;oBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;iBACjD;aACF;YACD,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,KAAK;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        selected: type.selected,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      selected: dataType.selected,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n"]}

package/dist/components/gx-ide-data-type-selector.js

@@ -14,6 +14,7 @@ const mapCategoryToListItemGroup = (category) => {
             return {
                 caption: type.name,
                 id: type.name,
+                selected: type.selected,
                 additionalInformation: {
                     "stretch-start": {
                         center: [{ imgSrc: type.icon }]
@@ -30,6 +31,7 @@ const mapDataTypesToList = (dataTypes) => {
         return {
             caption: dataType.name,
             id: dataType.name,
+            selected: dataType.selected,
             additionalInformation: {
                 "stretch-start": {
                     center: [{ imgSrc: dataType.icon || undefined }]
@@ -41,7 +43,7 @@ const mapDataTypesToList = (dataTypes) => {
     });
 };
 
-const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto}";
+const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto;padding:var(--mer-spacing--xs)}.list-box::part(item__action),.list-box::part(group__action){font-size:var(--font-size-body-s) !important}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -59,19 +61,20 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_handleSelectionChange, _GxIdeKbManagerImport_updateListBoxModelState, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_renderFooter;
+var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_dataTypeCategoryMap, _GxIdeKbManagerImport_dataTypeDataIdMap, _GxIdeKbManagerImport_lastArrowKey, _GxIdeKbManagerImport_selectedDataTypeIds, _GxIdeKbManagerImport_focusAlreadySet, _GxIdeKbManagerImport_actionListEl, _GxIdeKbManagerImport_evaluateSelectionChanged, _GxIdeKbManagerImport_listKeyDownHandler, _GxIdeKbManagerImport_listClickHandler, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_handleButtonTab, _GxIdeKbManagerImport_renderFooter, _GxIdeKbManagerImport_setFocus;
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "components/tab",
-    "components/tooltip",
     "components/list-box",
-    "components/tree-view",
     "utils/form--full",
-    "utils/layout",
     "utils/typography",
+    "utils/layout",
     "utils/spacing",
     "chameleon/scrollbar"
 ];
+const ARROW_UP_KEY = "ArrowUp";
+const ARROW_DOWN_KEY = "ArrowDown";
+const ENTER_KEY = "Enter";
+const TAB_KEY = "Tab";
 const ALL_CATEGORY_ID = "all";
 const RECENTLY_USED_CATEGORY_ID = "recenttly-used";
 const CLOCK_ICON = getIconPath({
@@ -87,41 +90,64 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         _GxIdeKbManagerImport__componentLocale.set(this, void 0);
         _GxIdeKbManagerImport_showAll.set(this, false);
         _GxIdeKbManagerImport_categoriesActionListItemGroupMap.set(this, new Map());
-        _GxIdeKbManagerImport_handleSelectionChange.set(this, (event) => {
-            var _a;
-            const eventType = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item.type;
-            if (eventType === "actionable") {
-                const name = event.detail[0].item.caption;
-                const itemAdditionalBase = event.detail[0].item.additionalInformation["stretch-start"].center[0];
-                const icon = itemAdditionalBase.imgSrc;
-                this.dataTypeSelectedCallback({
-                    name: name,
-                    icon: icon
-                });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "actionable");
-            }
-            else if (eventType === "group") {
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "group");
+        _GxIdeKbManagerImport_dataTypeCategoryMap.set(this, new Map());
+        _GxIdeKbManagerImport_dataTypeDataIdMap.set(this, new Map());
+        _GxIdeKbManagerImport_lastArrowKey.set(this, null);
+        _GxIdeKbManagerImport_selectedDataTypeIds.set(this, {
+            // For setting focus
+            categoryId: undefined,
+            dataTypeId: undefined
+        });
+        _GxIdeKbManagerImport_focusAlreadySet.set(this, false);
+        _GxIdeKbManagerImport_actionListEl.set(this, void 0);
+        _GxIdeKbManagerImport_evaluateSelectionChanged.set(this, (path) => {
+            const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+            if (chActionListItem) {
+                const id = chActionListItem.id;
+                const dataTypeData = __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").get(id);
+                this.dataTypeSelectedCallback(dataTypeData);
             }
         });
-        _GxIdeKbManagerImport_updateListBoxModelState.set(this, (name, type) => {
-            if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {
-                this.recentlyUsedActionListModel.forEach(item => {
-                    // clear selected
-                    item.selected = false;
-                });
-                const selectedItemIndex = this.recentlyUsed.findIndex(item => item.name === name);
-                if (selectedItemIndex !== -1) {
-                    this.recentlyUsedActionListModel[selectedItemIndex].selected = true;
+        _GxIdeKbManagerImport_listKeyDownHandler.set(this, (event) => {
+            const pressedKey = event.key;
+            const path = event.composedPath();
+            if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, pressedKey, "f");
+                if (pressedKey === ARROW_UP_KEY) {
+                    // Check if this is the first group. IF it is, let the host know,
+                    // so it can close the dialog.
+                    const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+                    if (chActionListItem !== undefined) {
+                        return;
+                    }
+                    // This is a ch-action-list-group
+                    const actionGroup = path.find(el => el.tagName === "CH-ACTION-LIST-GROUP");
+                    const currentFocusedActionGroupId = actionGroup.id;
+                    const firstActionListGroupId = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild.id;
+                    if (currentFocusedActionGroupId === firstActionListGroupId) {
+                        this.arrowUpOnFirstElement();
+                    }
                 }
             }
-            else if (type === "group" &&
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").has(name)) {
-                const group = __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").get(name);
-                const groupUpdated = Object.assign(Object.assign({}, group), { expanded: group.expanded });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(name, groupUpdated);
+            else if (pressedKey === ENTER_KEY) {
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            else if (pressedKey === TAB_KEY) {
+                event.stopPropagation();
             }
         });
+        _GxIdeKbManagerImport_listClickHandler.set(this, (event) => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_lastArrowKey, "f")) ;
+            else if (event.detail === 0) {
+                // ignore keyboard Enter (Enter happens by default on buttons on onClick)
+                return;
+            }
+            else {
+                const path = event.composedPath();
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, null, "f");
+        });
         _GxIdeKbManagerImport_showAllObjects.set(this, () => {
             if (!__classPrivateFieldGet(this, _GxIdeKbManagerImport_showAll, "f")) {
                 const allCategoriesActionListModel = [];
@@ -152,6 +178,13 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
             this.categoriesListBoxModel = newSelectedCategory;
             __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, false, "f");
         };
+        _GxIdeKbManagerImport_handleButtonTab.set(this, (event) => {
+            // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event
+            // in a parent element.
+            if (event.key === TAB_KEY || event.key === ENTER_KEY) {
+                event.stopPropagation();
+            }
+        });
         _GxIdeKbManagerImport_renderFooter.set(this, () => {
             const recentlyUsedBtnClass = this.selectedCategory === RECENTLY_USED_CATEGORY_ID
                 ? "button-secondary"
@@ -170,20 +203,49 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
             else {
                 selectedCategoryDescription = this.selectedCategory;
             }
-            return (h("footer", { class: "footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
+            return (h("footer", { class: "footer control-footer control-footer-start scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
                 const buttonClass = category.name === this.selectedCategory
                     ? "button-secondary"
                     : "button-tertiary";
-                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
+                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
             })), h("p", { class: "body-regular-s selected-category" }, selectedCategoryDescription)));
         });
+        _GxIdeKbManagerImport_setFocus.set(this, async () => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_focusAlreadySet, "f")) {
+                return;
+            }
+            let focusableElement;
+            setTimeout(() => {
+                // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly
+                if (this.focusType === "selected" &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId) {
+                    // set focus on the selected element
+                    const selectedDataTypeEl = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.getElementById(__classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId);
+                    if (selectedDataTypeEl) {
+                        focusableElement = selectedDataTypeEl;
+                    }
+                }
+                else {
+                    // set focus of the first element
+                    const firstActionListGroup = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild;
+                    const firstButton = firstActionListGroup.shadowRoot.firstElementChild;
+                    focusableElement = firstButton;
+                }
+                focusableElement && focusableElement.focus();
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_focusAlreadySet, true, "f");
+            }, 150);
+        });
         this.categoriesListBoxModel = [];
         this.selectedCategory = undefined;
-        this.statusInfo = [];
         this.recentlyUsedActionListModel = [];
         this.loading = true;
+        this.categoriesJustChanged = false;
+        this.actionListDidRender = false;
         this.categories = undefined;
         this.dataTypeSelectedCallback = undefined;
+        this.arrowUpOnFirstElement = undefined;
+        this.focusType = "first-element";
         this.recentlyUsed = [];
     }
     categoriesChanged(newCategories) {
@@ -194,9 +256,25 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         newCategories.forEach(category => {
             const categoryListBoxModel = mapCategoryToListItemGroup(category);
             __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(category.name, categoryListBoxModel);
+            category.types.forEach(type => {
+                const isSelected = type.selected;
+                if (isSelected) {
+                    // For setting focus
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId = category.name;
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId = type.name;
+                }
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeCategoryMap, "f").set(type.name, category.id);
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").set(type.name, {
+                    id: category.id,
+                    name: type.name,
+                    icon: type.icon,
+                    selected: type.selected
+                });
+            });
         });
         this.loading = false;
         __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f").call(this);
+        this.categoriesJustChanged = true;
     }
     recentlyUsedChanged(newRecentlyUsed) {
         this.recentlyUsedActionListModel = null;
@@ -208,7 +286,10 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { class: "list-box", model: this.categoriesListBoxModel, selection: "single", onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleSelectionChange, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { ref: async (el) => {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_actionListEl, el, "f");
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_setFocus, "f").call(this);
+            }, class: "list-box", model: this.categoriesListBoxModel, selection: "single", onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listKeyDownHandler, "f"), onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listClickHandler, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
     }
     static get assetsDirs() { return ["gx-ide-assets/data-type-selector"]; }
     get el() { return this; }
@@ -220,17 +301,20 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
 }, [1, "gx-ide-data-type-selector", {
         "categories": [16],
         "dataTypeSelectedCallback": [16],
+        "arrowUpOnFirstElement": [16],
+        "focusType": [1, "focus-type"],
         "recentlyUsed": [16],
         "categoriesListBoxModel": [32],
         "selectedCategory": [32],
-        "statusInfo": [32],
         "recentlyUsedActionListModel": [32],
-        "loading": [32]
+        "loading": [32],
+        "categoriesJustChanged": [32],
+        "actionListDidRender": [32]
     }, undefined, {
         "categories": ["categoriesChanged"],
         "recentlyUsed": ["recentlyUsedChanged"]
     }]);
-_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_handleSelectionChange = new WeakMap(), _GxIdeKbManagerImport_updateListBoxModelState = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap();
+_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeCategoryMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeDataIdMap = new WeakMap(), _GxIdeKbManagerImport_lastArrowKey = new WeakMap(), _GxIdeKbManagerImport_selectedDataTypeIds = new WeakMap(), _GxIdeKbManagerImport_focusAlreadySet = new WeakMap(), _GxIdeKbManagerImport_actionListEl = new WeakMap(), _GxIdeKbManagerImport_evaluateSelectionChanged = new WeakMap(), _GxIdeKbManagerImport_listKeyDownHandler = new WeakMap(), _GxIdeKbManagerImport_listClickHandler = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_handleButtonTab = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap(), _GxIdeKbManagerImport_setFocus = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/gx-ide-data-type-selector.js.map

@@ -1 +1 @@
-{"file":"gx-ide-data-type-selector.js","mappings":"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","names":[],"sources":["src/components/data-type-selector/helpers.ts","src/components/data-type-selector/data-type-selector.scss?tag=gx-ide-data-type-selector&encapsulation=shadow","src/components/data-type-selector/data-type-selector.tsx"],"sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n",":host {\n  position: relative;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  // WA: Prevent a custom css rule on genexus-web from overriding --control__border-width value.\n  // TDOO: remove this when the custom style is removed from genexus-web.\n  // custom stlye is: .gx-struct-editor .tabular-grid-cell {\n  //   --control__border-width: 0;\n  // }\n\n  --control__border-width: var(--mer-border__width--sm);\n  --control__border-radius: var(--mer-border__radius--sm);\n}\n\n.main {\n  display: contents;\n}\n\n.selected-category {\n  margin: 0;\n  text-transform: capitalize;\n  margin-inline-start: var(\n    --mer-spacing--md\n  ); // TODO: Create a semantic class in Mercury for this case.\n  white-space: nowrap;\n}\n\n.footer {\n  overflow: auto;\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemActionable,\n  ActionListItemModel,\n  ActionListItemModelExtended,\n  ActionListItemType,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemAdditionalBase,\n  ActionListItemGroup\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"components/list-box\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() statusInfo: StatusInfo[] = [];\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n    });\n    this.loading = false;\n    this.#showAllObjects();\n  }\n\n  /**\n   * Callback invoked when user select an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #handleSelectionChange = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const name = event.detail[0].item.caption;\n\n      const itemAdditionalBase = event.detail[0].item.additionalInformation[\n        \"stretch-start\"\n      ].center[0] as ActionListItemAdditionalBase;\n      const icon = itemAdditionalBase.imgSrc;\n\n      this.dataTypeSelectedCallback({\n        name: name,\n        icon: icon\n      });\n\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"actionable\");\n    } else if (eventType === \"group\") {\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"group\");\n    }\n  };\n\n  #updateListBoxModelState = (name: string, type: ActionListItemType) => {\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      this.recentlyUsedActionListModel.forEach(item => {\n        // clear selected\n        (item as ActionListItemActionable).selected = false;\n      });\n      const selectedItemIndex = this.recentlyUsed.findIndex(\n        item => item.name === name\n      );\n      if (selectedItemIndex !== -1) {\n        (\n          this.recentlyUsedActionListModel[\n            selectedItemIndex\n          ] as ActionListItemActionable\n        ).selected = true;\n      }\n    } else if (\n      type === \"group\" &&\n      this.#categoriesActionListItemGroupMap.has(name)\n    ) {\n      const group = this.#categoriesActionListItemGroupMap.get(\n        name\n      ) as ActionListItemGroup;\n      const groupUpdated = { ...group, expanded: group.expanded };\n      this.#categoriesActionListItemGroupMap.set(name, groupUpdated);\n    }\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onSelectedItemsChange={this.#handleSelectionChange}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\ntype StatusInfo = {\n  [key: string]: {\n    display: boolean;\n  };\n};\n\nexport type DataTypeCategoryData = {\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  name: string;\n  icon: string;\n};\n\nexport type DataTypeSelectedCallback = (data: {\n  name: string;\n  icon: string;\n}) => Promise<void>;\n"],"version":3}
+{"file":"gx-ide-data-type-selector.js","mappings":";;;;;AAMO,MAAM,0BAA0B,GAAG,CACxC,QAA8B;IAE9B,MAAM,aAAa,GAAwB;QACzC,OAAO,EAAE,QAAQ,CAAC,IAAI;QACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAC5B,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,EAAE,EAAE,IAAI,CAAC,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,qBAAqB,EAAE;oBACrB,eAAe,EAAE;wBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;qBAChC;iBACF;gBACD,IAAI,EAAE,YAAY;aACnB,CAAC;SACH,CAAC;KACH,CAAC;IACF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEK,MAAM,kBAAkB,GAAG,CAChC,SAAyB;IAEzB,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK;QACnC,OAAO;YACL,OAAO,EAAE,QAAQ,CAAC,IAAI;YACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;YACjB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,qBAAqB,EAAE;gBACrB,eAAe,EAAE;oBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;iBACjD;aACF;YACD,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,KAAK;SACb,CAAC;KACH,CAAC,CAAC;AACL,CAAC;;ACjDD,MAAM,mBAAmB,GAAG,8fAA8f;;;;;;;;;;;;;;;;;;;ACa1hB,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,qBAAqB;IACrB,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,qBAAqB;CACtB,CAAC;AAEF,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,MAAM,cAAc,GAAG,WAAW,CAAC;AACnC,MAAM,SAAS,GAAG,OAAO,CAAC;AAC1B,MAAM,OAAO,GAAG,KAAK,CAAC;AAEtB,MAAM,eAAe,GAAG,KAAK,CAAC;AAC9B,MAAM,yBAAyB,GAAG,gBAAgB,CAAC;AAEnD,MAAM,UAAU,GAAG,WAAW,CAAC;IAC7B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,oBAAoB;;;;;QAC/B,yDAAuB;QACvB,wCAAoB,KAAK,EAAC;QAC1B,iEAAsE,IAAI,GAAG,EAG1E,EAAC;QAEJ,oDAA4C,IAAI,GAAG,EAAkB,EAAC;QACtE,kDAAgD,IAAI,GAAG,EAGpD,EAAC;QACJ,6CAAoE,IAAI,EAAC;QACzE,oDAA4C;;YAE1C,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,SAAS;SACtB,EAAC;QACF,gDAA4B,KAAK,EAAC;QAElC,qDAA8C;QAgF9C,yDAA4B,CAAC,IAAmB;YAC9C,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAChC,EAAE,IAAK,EAAkB,CAAC,OAAO,KAAK,qBAAqB,CAC5D,CAAC;YACF,IAAI,gBAAgB,EAAE;gBACpB,MAAM,EAAE,GAAI,gBAAgC,CAAC,EAAE,CAAC;gBAChD,MAAM,YAAY,GAAG,uBAAA,IAAI,+CAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACrD,IAAI,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC;aAC7C;SACF,EAAC;QAEF,mDAAsB,CAAC,KAAoB;YACzC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC;YAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAElC,IAAI,UAAU,KAAK,YAAY,IAAI,UAAU,KAAK,cAAc,EAAE;gBAChE,uBAAA,IAAI,sCAAiB,UAAU,MAAA,CAAC;gBAEhC,IAAI,UAAU,KAAK,YAAY,EAAE;;;oBAI/B,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAChC,EAAE,IAAK,EAAkB,CAAC,OAAO,KAAK,qBAAqB,CAC5D,CAAC;oBAEF,IAAI,gBAAgB,KAAK,SAAS,EAAE;wBAClC,OAAO;qBACR;;oBAGD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAC3B,EAAE,IAAK,EAAkB,CAAC,OAAO,KAAK,sBAAsB,CAC7D,CAAC;oBACF,MAAM,2BAA2B,GAAI,WAA2B,CAAC,EAAE,CAAC;oBAEpE,MAAM,sBAAsB,GAC1B,uBAAA,IAAI,0CAAc,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;oBAErD,IAAI,2BAA2B,KAAK,sBAAsB,EAAE;wBAC1D,IAAI,CAAC,qBAAqB,EAAE,CAAC;qBAC9B;iBACF;aACF;iBAAM,IAAI,UAAU,KAAK,SAAS,EAAE;gBACnC,uBAAA,IAAI,sDAA0B,MAA9B,IAAI,EAA2B,IAAI,CAAC,CAAC;aACtC;iBAAM,IAAI,UAAU,KAAK,OAAO,EAAE;gBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,EAAC;QAEF,iDAAoB,CAAC,KAAiB;YACpC,IAAI,uBAAA,IAAI,0CAAc,EAAE,CAGvB;iBAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;;gBAE7B,OAAO;aACR;iBAAM;gBACL,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;gBAClC,uBAAA,IAAI,sDAA0B,MAA9B,IAAI,EAA2B,IAAI,CAAC,CAAC;aACtC;YACD,uBAAA,IAAI,sCAAiB,IAAI,MAAA,CAAC;SAC3B,EAAC;QAEF,+CAAkB;YAChB,IAAI,CAAC,uBAAA,IAAI,qCAAS,EAAE;gBAClB,MAAM,4BAA4B,GAA0B,EAAE,CAAC;gBAC/D,IAAI,OAAO,GAAG,CAAC,CAAC;gBAChB,MAAM,SAAS,GAAG,uBAAA,IAAI,8DAAkC,CAAC,IAAI,CAAC;gBAC9D,KAAK,MAAM,GAAG,IAAI,uBAAA,IAAI,8DAAkC,CAAC,IAAI,EAAE,EAAE;oBAC/D,4BAA4B,CAAC,IAAI,CAC/B,uBAAA,IAAI,8DAAkC,CAAC,GAAG,CAAC,GAAG,CAAC,CAChD,CAAC;oBACF,IAAI,OAAO,KAAK,SAAS,EAAE;wBACzB,4BAA4B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;qBAC1D;oBACD,OAAO,EAAE,CAAC;iBACX;gBACD,IAAI,CAAC,sBAAsB,GAAG,4BAA4B,CAAC;gBAC3D,uBAAA,IAAI,iCAAY,IAAI,MAAA,CAAC;gBACrB,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;aACzC;SACF,EAAC;QAEF,oDAAuB;YACrB,uBAAA,IAAI,iCAAY,KAAK,MAAA,CAAC;YACtB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,2BAA2B,CAAC;YAC/D,IAAI,CAAC,gBAAgB,GAAG,yBAAyB,CAAC;SACnD,EAAC;QAEM,4BAAuB,GAAG,CAAC,CAAa;YAC9C,IAAI,CAAC,gBAAgB,GAAI,CAAC,CAAC,aAAmC,CAAC,OAAO,CAAC,IAAI,CAAC;YAC5E,MAAM,mBAAmB,GAAG;gBAC1B,uBAAA,IAAI,8DAAkC,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;aAClE,CAAC;YACF,IAAI,CAAC,sBAAsB,GAAG,mBAAmB,CAAC;YAClD,uBAAA,IAAI,iCAAY,KAAK,MAAA,CAAC;SACvB,CAAC;QAEF,gDAAmB,CAAC,KAAoB;;;YAGtC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;gBACpD,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,EAAC;QAEF,6CAAgB;YACd,MAAM,oBAAoB,GACxB,IAAI,CAAC,gBAAgB,KAAK,yBAAyB;kBAC/C,kBAAkB;kBAClB,iBAAiB,CAAC;YACxB,MAAM,WAAW,GACf,IAAI,CAAC,gBAAgB,KAAK,eAAe;kBACrC,kBAAkB;kBAClB,iBAAiB,CAAC;YACxB,IAAI,2BAA2B,GAAG,IAAI,CAAC,gBAAgB,CAAC;YACxD,IAAI,IAAI,CAAC,gBAAgB,KAAK,yBAAyB,EAAE;gBACvD,2BAA2B;oBACzB,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,YAAY,CAAC;aAClD;iBAAM,IAAI,IAAI,CAAC,gBAAgB,KAAK,eAAe,EAAE;gBACpD,2BAA2B,GAAG,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,GAAG,CAAC;aACrE;iBAAM;gBACL,2BAA2B,GAAG,IAAI,CAAC,gBAAgB,CAAC;aACrD;YAED,QACE,cACE,KAAK,EAAC,+DACP,IAEC,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,KAChD,cACE,KAAK,EAAE,oBAAoB,oBAAoB,EAAE,gBACrC,GAAG,uBAAA,IAAI,8CAAkB,CAAC,MAAM,IAC1C,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,YACpC,EAAE,EACF,KAAK,EAAE,GAAG,uBAAA,IAAI,8CAAkB,CAAC,MAAM,IACrC,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,YACpC,EAAE,EACF,OAAO,EAAE,uBAAA,IAAI,iDAAqB,EAClC,SAAS,EAAE,uBAAA,IAAI,6CAAiB,IAEhC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU,GAAa,CAC/C,CACV,EACD,cACE,KAAK,EAAE,oBAAoB,WAAW,EAAE,EACxC,OAAO,EAAE,uBAAA,IAAI,4CAAgB,EAC7B,SAAS,EAAE,uBAAA,IAAI,6CAAiB,gBACpB,GAAG,uBAAA,IAAI,8CAAkB,CAAC,MAAM,IAC1C,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,GACpC,EAAE,EACF,KAAK,EAAE,GAAG,uBAAA,IAAI,8CAAkB,CAAC,MAAM,IACrC,uBAAA,IAAI,8CAAkB,CAAC,UAAU,CAAC,GACpC,EAAE,UAGK,EACR,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ;gBAC3B,MAAM,WAAW,GACf,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,gBAAgB;sBACnC,kBAAkB;sBAClB,iBAAiB,CAAC;gBAExB,QACE,cACE,KAAK,EAAE,oBAAoB,WAAW,EAAE,gBAC5B,QAAQ,CAAC,IAAI,EACzB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,SAAS,EAAE,uBAAA,IAAI,6CAAiB,eACrB,QAAQ,CAAC,IAAI,IAExB,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,GAAa,CAClD,EACT;aACH,CAAC,CACE,EACN,SAAG,KAAK,EAAC,kCAAkC,IACxC,2BAA2B,CAC1B,CACG,EACT;SACH,EAAC;QAEF,yCAAY;YACV,IAAI,uBAAA,IAAI,6CAAiB,EAAE;gBACzB,OAAO;aACR;YACD,IAAI,gBAA6B,CAAC;YAElC,UAAU,CAAC;;gBAET,IACE,IAAI,CAAC,SAAS,KAAK,UAAU;oBAC7B,uBAAA,IAAI,iDAAqB,CAAC,UAAU;oBACpC,uBAAA,IAAI,iDAAqB,CAAC,UAAU,EACpC;;oBAEA,MAAM,kBAAkB,GAAG,uBAAA,IAAI,0CAAc,CAAC,UAAU,CAAC,cAAc,CACrE,uBAAA,IAAI,iDAAqB,CAAC,UAAU,CACrC,CAAC;oBACF,IAAI,kBAAkB,EAAE;wBACtB,gBAAgB,GAAG,kBAAkB,CAAC;qBACvC;iBACF;qBAAM;;oBAEL,MAAM,oBAAoB,GACxB,uBAAA,IAAI,0CAAc,CAAC,UAAU,CAAC,iBAAiB,CAAC;oBAElD,MAAM,WAAW,GAAG,oBAAoB,CAAC,UAAU,CAAC,iBAAiB,CAAC;oBACtE,gBAAgB,GAAG,WAAgC,CAAC;iBACrD;gBAED,gBAAgB,IAAK,gBAAgC,CAAC,KAAK,EAAE,CAAC;gBAC9D,uBAAA,IAAI,yCAAoB,IAAI,MAAA,CAAC;aAC9B,EAAE,GAAG,CAAC,CAAC;SACT,EAAC;sCAxSuD,EAAE;;2CAEH,EAAE;uBAC9B,IAAI;qCACU,KAAK;mCACP,KAAK;0BAKS,SAAS;;;yBAiDJ,eAAe;4BAK1B,EAAE;;IApDlD,iBAAiB,CAAC,aAAqC;QACrD,IAAI,EAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAA,EAAE;YAC1B,OAAO;SACR;QAED,uBAAA,IAAI,8DAAkC,CAAC,KAAK,EAAE,CAAC;QAC/C,aAAa,CAAC,OAAO,CAAC,QAAQ;YAC5B,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;YAClE,uBAAA,IAAI,8DAAkC,CAAC,GAAG,CACxC,QAAQ,CAAC,IAAI,EACb,oBAAoB,CACrB,CAAC;YACF,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;gBACzB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;gBACjC,IAAI,UAAU,EAAE;;oBAEd,uBAAA,IAAI,iDAAqB,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC;oBACrD,uBAAA,IAAI,iDAAqB,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC;iBAClD;gBAED,uBAAA,IAAI,iDAAqB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACtD,uBAAA,IAAI,+CAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE;oBACrC,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;aACJ,CAAC,CAAC;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,uBAAA,IAAI,4CAAgB,MAApB,IAAI,CAAkB,CAAC;QACvB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;KACnC;IAsBD,mBAAmB,CAAC,eAA+B;QACjD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QACxC,IAAI,CAAC,2BAA2B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;KACxE;IAED,MAAM,iBAAiB;QACrB,uBAAA,IAAI,0CAAqB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;;QAEnE,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzE;IA+ND,MAAM;QACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,IAClB,gBAAU,KAAK,EAAE,WAAW,GAAa,EACxC,IAAI,CAAC,OAAO,IACX,qBACE,WAAW,EAAE,uBAAA,IAAI,8CAAkB,CAAC,MAAM,CAAC,KAAK,EAChD,WAAW,EAAE,uBAAA,IAAI,8CAAkB,CAAC,MAAM,CAAC,WAAW,EACtD,IAAI,SACW,KAEjB,eAAS,KAAK,EAAC,MAAM,IACnB,6BACE,GAAG,EAAE,OAAM,EAAE;gBACX,uBAAA,IAAI,sCAAiB,EAAmC,MAAA,CAAC;gBACzD,uBAAA,IAAI,sCAAU,MAAd,IAAI,CAAY,CAAC;aAClB,EACD,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAClC,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,uBAAA,IAAI,gDAAoB,EACnC,OAAO,EAAE,uBAAA,IAAI,8CAAkB,GACR,EACxB,uBAAA,IAAI,0CAAc,MAAlB,IAAI,CAAgB,CACb,CACX,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/data-type-selector/helpers.ts","src/components/data-type-selector/data-type-selector.scss?tag=gx-ide-data-type-selector&encapsulation=shadow","src/components/data-type-selector/data-type-selector.tsx"],"sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        selected: type.selected,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      selected: dataType.selected,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n",":host {\n  position: relative;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  // WA: Prevent a custom css rule on genexus-web from overriding --control__border-width value.\n  // TDOO: remove this when the custom style is removed from genexus-web.\n  // custom stlye is: .gx-struct-editor .tabular-grid-cell {\n  //   --control__border-width: 0;\n  // }\n\n  --control__border-width: var(--mer-border__width--sm);\n  --control__border-radius: var(--mer-border__radius--sm);\n}\n\n.main {\n  display: contents;\n}\n\n.selected-category {\n  margin: 0;\n  text-transform: capitalize;\n  margin-inline-start: var(\n    --mer-spacing--md\n  ); // TODO: Create a semantic class in Mercury for this case.\n  white-space: nowrap;\n}\n\n.footer {\n  overflow: auto;\n  padding: var(--mer-spacing--xs);\n}\n\n// WA: Reduce font-size. This should be solved on Mercury.\n.list-box::part(item__action),\n.list-box::part(group__action) {\n  font-size: var(--font-size-body-s) !important;\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemModel,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport { ActionListItemGroup } from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/list-box\",\n  \"utils/form--full\",\n  \"utils/typography\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ARROW_UP_KEY = \"ArrowUp\";\nconst ARROW_DOWN_KEY = \"ArrowDown\";\nconst ENTER_KEY = \"Enter\";\nconst TAB_KEY = \"Tab\";\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  #dataTypeCategoryMap: Map<string, string> = new Map<string, string>();\n  #dataTypeDataIdMap: Map<string, DataTypeData> = new Map<\n    string,\n    DataTypeData\n  >();\n  #lastArrowKey: typeof ARROW_UP_KEY | typeof ARROW_DOWN_KEY | null = null;\n  #selectedDataTypeIds: SelectedDataTypeIds = {\n    // For setting focus\n    categoryId: undefined,\n    dataTypeId: undefined\n  };\n  #focusAlreadySet: boolean = false;\n\n  #actionListEl!: HTMLChActionListRenderElement;\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n  @State() categoriesJustChanged: boolean = false;\n  @State() actionListDidRender: boolean = false;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n      category.types.forEach(type => {\n        const isSelected = type.selected;\n        if (isSelected) {\n          // For setting focus\n          this.#selectedDataTypeIds.categoryId = category.name;\n          this.#selectedDataTypeIds.dataTypeId = type.name;\n        }\n\n        this.#dataTypeCategoryMap.set(type.name, category.id);\n        this.#dataTypeDataIdMap.set(type.name, {\n          id: category.id,\n          name: type.name,\n          icon: type.icon,\n          selected: type.selected\n        });\n      });\n    });\n    this.loading = false;\n    this.#showAllObjects();\n    this.categoriesJustChanged = true;\n  }\n\n  /**\n   * Callback invoked when the user has selected an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly arrowUpOnFirstElement: ArrowFirstOnFirstElement;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly focusType: \"first-element\" | \"selected\" = \"first-element\";\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #evaluateSelectionChanged = (path: EventTarget[]) => {\n    const chActionListItem = path.find(\n      el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n    );\n    if (chActionListItem) {\n      const id = (chActionListItem as HTMLElement).id;\n      const dataTypeData = this.#dataTypeDataIdMap.get(id);\n      this.dataTypeSelectedCallback(dataTypeData);\n    }\n  };\n\n  #listKeyDownHandler = (event: KeyboardEvent) => {\n    const pressedKey = event.key;\n    const path = event.composedPath();\n\n    if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {\n      this.#lastArrowKey = pressedKey;\n\n      if (pressedKey === ARROW_UP_KEY) {\n        // Check if this is the first group. IF it is, let the host know,\n        // so it can close the dialog.\n\n        const chActionListItem = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n        );\n\n        if (chActionListItem !== undefined) {\n          return;\n        }\n\n        // This is a ch-action-list-group\n        const actionGroup = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-GROUP\"\n        );\n        const currentFocusedActionGroupId = (actionGroup as HTMLElement).id;\n\n        const firstActionListGroupId =\n          this.#actionListEl.shadowRoot.firstElementChild.id;\n\n        if (currentFocusedActionGroupId === firstActionListGroupId) {\n          this.arrowUpOnFirstElement();\n        }\n      }\n    } else if (pressedKey === ENTER_KEY) {\n      this.#evaluateSelectionChanged(path);\n    } else if (pressedKey === TAB_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #listClickHandler = (event: MouseEvent) => {\n    if (this.#lastArrowKey) {\n      // User navigated with ArrowUp or ArrowDown\n      // Ignore, since this was not a click event.\n    } else if (event.detail === 0) {\n      // ignore keyboard Enter (Enter happens by default on buttons on onClick)\n      return;\n    } else {\n      const path = event.composedPath();\n      this.#evaluateSelectionChanged(path);\n    }\n    this.#lastArrowKey = null;\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #handleButtonTab = (event: KeyboardEvent) => {\n    // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event\n    // in a parent element.\n    if (event.key === TAB_KEY || event.key === ENTER_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n              onKeyDown={this.#handleButtonTab}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            onKeyDown={this.#handleButtonTab}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                onKeyDown={this.#handleButtonTab}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  #setFocus = async () => {\n    if (this.#focusAlreadySet) {\n      return;\n    }\n    let focusableElement: HTMLElement;\n\n    setTimeout(() => {\n      // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly\n      if (\n        this.focusType === \"selected\" &&\n        this.#selectedDataTypeIds.categoryId &&\n        this.#selectedDataTypeIds.dataTypeId\n      ) {\n        // set focus on the selected element\n        const selectedDataTypeEl = this.#actionListEl.shadowRoot.getElementById(\n          this.#selectedDataTypeIds.dataTypeId\n        );\n        if (selectedDataTypeEl) {\n          focusableElement = selectedDataTypeEl;\n        }\n      } else {\n        // set focus of the first element\n        const firstActionListGroup =\n          this.#actionListEl.shadowRoot.firstElementChild;\n\n        const firstButton = firstActionListGroup.shadowRoot.firstElementChild;\n        focusableElement = firstButton as HTMLButtonElement;\n      }\n\n      focusableElement && (focusableElement as HTMLElement).focus();\n      this.#focusAlreadySet = true;\n    }, 150);\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              ref={async el => {\n                this.#actionListEl = el as HTMLChActionListRenderElement;\n                this.#setFocus();\n              }}\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onKeyDown={this.#listKeyDownHandler}\n              onClick={this.#listClickHandler}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type DataTypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  selected: boolean;\n};\n\nexport type DataTypeSelectedCallback = (data: DataTypeData) => Promise<void>;\n\ntype SelectedDataTypeIds = {\n  categoryId: string;\n  dataTypeId: string;\n};\n\nexport type ArrowFirstOnFirstElement = () => Promise<void>;\n"],"version":3}