@genexus/genexus-ide-ui 1.1.15 → 1.1.17

package/dist/types/components/team-dev/bring-changes/bring-changes.d.ts

@@ -35,7 +35,7 @@ export declare class GxIdeTeamDevBringChanges {
      */
     markedObjectsSet: Set<string>;
     /**
-     * A map that holds the current commit objects states ("pending" | "warning" | "error" | "merged")
+     * A map that holds the current commit objects states ("pending" | "warning" | "error" | "merged" | "reverted")
      */
     objectsStatesMap: Map<string, ObjectState>;
     objectsStatesMapChanged(newCommitObjectsStateMap: Map<string, ObjectState>): void;
@@ -68,6 +68,10 @@ export declare class GxIdeTeamDevBringChanges {
      * Determines whether the filters are rendered or not.
      */
     readonly hideFilters: boolean;
+    /**
+     * The type of operation to perform: "merge" or "revert".
+     */
+    readonly operationType: OperationType;
     /**
      * The callback that is triggered when the user wants to merge more than one commit.
      */
@@ -90,6 +94,7 @@ export declare class GxIdeTeamDevBringChanges {
     updateObjectState(objectId: string, newState: ObjectState, message: string): Promise<void>;
     render(): any;
 }
+export type OperationType = "merge" | "revert";
 export type CommitDetail = {
     genexusServer: string;
     knowledgeBase: string;
@@ -110,8 +115,8 @@ export type CommitObject = {
     actionTaken: ObjectActionTaken;
 };
 export type ObjectActionTaken = "Inserted" | "Deleted" | "Modified" | "Unchanged" | "Unknown";
-export type ObjectState = "to-merge" | "to-merge-marked" | "merging" | "pending" | "warning" | "error" | "merged";
-type ObjectStateForFilter = Extract<ObjectState, "to-merge" | "warning" | "error" | "merged"> | "all";
+export type ObjectState = "to-merge" | "to-merge-marked" | "to-revert" | "merging" | "pending" | "warning" | "error" | "merged" | "reverted" | "reverting";
+type ObjectStateForFilter = Extract<ObjectState, "to-merge" | "to-revert" | "warning" | "error" | "merged" | "reverted"> | "all";
 export type ObjectType = {
     name: string;
     icon: string;

package/dist/types/components.d.ts

@@ -62,7 +62,7 @@ import { AuthStep, TeamData as TeamData1 } from "./components/sign-in-team/sign-
 import { MessageType as MessageType1 } from "./components/splash/splash";
 import { RecentKBData, SecondarySection } from "./components/start-page/start-page";
 import { CheckedItemsInfo as CheckedItemsInfo1 } from "./components/_helpers/list-selector/list-selector";
-import { CommitDetail, CommitInformation, CommitObject, MergeObjectsCallback, ObjectState } from "./components/team-dev/bring-changes/bring-changes";
+import { CommitDetail, CommitInformation, CommitObject, MergeObjectsCallback, ObjectState, OperationType } from "./components/team-dev/bring-changes/bring-changes";
 import { CommitCallback, CommitSelectCallback, GetRecentComment, LoadCallback as LoadCallback4, ObjectsContextMenuCallback, PendingItemsCheckedCallback } from "./components/team-dev/commit/commit";
 import { LoadCallback as LoadCallback5, LoadDetailCallback, ObjectType as ObjectType1, SelectedVersionChangeCallback } from "./components/team-dev/history/history";
 import { ItemNode as ItemNode1 } from "./components/select-kb-items/select-kb-items";
@@ -133,7 +133,7 @@ export { AuthStep, TeamData as TeamData1 } from "./components/sign-in-team/sign-
 export { MessageType as MessageType1 } from "./components/splash/splash";
 export { RecentKBData, SecondarySection } from "./components/start-page/start-page";
 export { CheckedItemsInfo as CheckedItemsInfo1 } from "./components/_helpers/list-selector/list-selector";
-export { CommitDetail, CommitInformation, CommitObject, MergeObjectsCallback, ObjectState } from "./components/team-dev/bring-changes/bring-changes";
+export { CommitDetail, CommitInformation, CommitObject, MergeObjectsCallback, ObjectState, OperationType } from "./components/team-dev/bring-changes/bring-changes";
 export { CommitCallback, CommitSelectCallback, GetRecentComment, LoadCallback as LoadCallback4, ObjectsContextMenuCallback, PendingItemsCheckedCallback } from "./components/team-dev/commit/commit";
 export { LoadCallback as LoadCallback5, LoadDetailCallback, ObjectType as ObjectType1, SelectedVersionChangeCallback } from "./components/team-dev/history/history";
 export { ItemNode as ItemNode1 } from "./components/select-kb-items/select-kb-items";
@@ -2133,6 +2133,10 @@ export namespace Components {
           * If true, the "Action" column will display a button instead of a pill, only when the action is
          */
         "mergePillAsButton": boolean;
+        /**
+          * The type of operation to perform: "merge" or "revert".
+         */
+        "operationType": OperationType;
         /**
           * It allows the host updating an object state, by providing the object id.
           * @param objectId The ID of the object to update.
@@ -5741,6 +5745,10 @@ declare namespace LocalJSX {
           * If true, the "Action" column will display a button instead of a pill, only when the action is
          */
         "mergePillAsButton"?: boolean;
+        /**
+          * The type of operation to perform: "merge" or "revert".
+         */
+        "operationType"?: OperationType;
     }
     interface GxIdeTeamDevCommit {
         /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -1 +0,0 @@
-{"version":3,"names":["bringChangesCss","CSS_BUNDLES","COMBO_BOX_ALL_VALUE","DETAIL_LABEL_CLASSES","ADD_ICON","getIconPath","category","name","colorType","EDITED_ICON","FILTER_ICON","SEARCH_ICON","SUBSTRACT_ICON","WARNING_ICON","ERROR_ICON","GxIdeTeamDevBringChanges","_GxIdeTeamDevBringChanges_componentLocale","set","this","_GxIdeTeamDevBringChanges_commitLabel","_GxIdeTeamDevBringChanges_comboBoxStatesModel","_GxIdeTeamDevBringChanges_checkedObjectsIdsArray","_GxIdeTeamDevBringChanges_formatComments","commitInformation","length","comment","mergedComment","map","commit","i","isLast","afterCommentBreakline","id","_GxIdeTeamDevBringChanges_mergeCheckedClickedHandler","async","merging","newobjectsStatesMap","Map","objectsStatesMap","__classPrivateFieldGet","forEach","checkedObjectId","mergeObjectsCallback","_GxIdeTeamDevBringChanges_mergeSingleObject","objectId","_GxIdeTeamDevBringChanges_renderActionCellContent","actionTaken","icon","caption","iconColor","objects","actions","delete","insert","modify","h","class","type","src","style","backgroundColor","_GxIdeTeamDevBringChanges_renderCommitsNumbers","onlyNumbers","_a","_b","loading","_GxIdeTeamDevBringChanges_renderFormatedDate","date","dateObject","Date","lang","navigator","languages","language","toLocaleDateString","toLocaleTimeString","hour","minute","hour12","_GxIdeTeamDevBringChanges_renderObjectActions","openDisabled","compareWithCurrentRevisionDisabled","menuContextAction","revisionChangesDisabled","previewMergeDisabled","disabled","objectActions","open","compareWithCurrentRevision","revisionChanges","previewMerge","_GxIdeTeamDevBringChanges_renderObjectState","objectType","states","classes","mergePillAsButton","onClick","call","statesForButton","_GxIdeTeamDevBringChanges_renderObjectType","_GxIdeTeamDevBringChanges_renderObjectsRows","objectsFiltered","commitObject","marked","markedObjectsSet","has","alreadyMerged","alreadyMergedObjectsIdsArray","find","errorOrWarningMessage","commitObjectsMessagesMap","get","state","MESSAGE_ICON","key","rowid","ref","el","setAttribute","size","description","_GxIdeTeamDevBringChanges_rowContextMenuHandler","event","rowId","detail","_GxIdeTeamDevBringChanges_updateMenuContextActions","_GxIdeTeamDevBringChanges_rowMarkingChangedHandler","newobjectsMarkedSet","Set","markedRowsIds","rowsId","checkedObjectsIgnoringAlreadyMerged","filter","markedObjectId","includes","__classPrivateFieldSet","add","atLeastOneObjectIsChecked","objectCurrentState","markedRowIndex","findIndex","splice","_GxIdeTeamDevBringChanges_searchInputHandler","searchValue","toLowerCase","_GxIdeTeamDevBringChanges_updateFilteredObjects","_GxIdeTeamDevBringChanges_stateChangedHandler","stateFilterValue","currentObjectContextMenuId","object","commitObjects","filteredObjects","objectState","includesName","includesType","includesDescription","objectsStatesMapChanged","newCommitObjectsStateMap","someObjectIsMerging","entries","commitObjectsChanged","newCommitObjects","componentWillLoad","Locale","getComponentStrings","commmits","commmit","all","value","warning","error","merged","updateObjectState","newState","message","checkedObject","push","tabularGridEl","markRow","render","enableRichRowSelector","disableControls","Host","model","commitDetail","bringChangesDetail","genexusServer","href","target","knowledgeBase","currentVersion","mergeFromVersion","title","ids","from","to","htmlFor","comments","multiline","readonly","hideFilters","startImgSrc","placeholder","searchPlaceholder","onInput","statePlaceholder","mergeChecked","keyboardNavigationMode","rowSelectionMode","onRowMarkingChanged","onRowContextMenu","columnId","columnName","columnType","richRowSelector","richRowSelectorMode","settingable","action","status","columnNameHidden","richRowActions","enableRowOptions","showOnRowActions","showOnRowContext","isAnimated","stateIconSrc","stateTitle","cancelLabel","loader","loaderTitle","show"],"sources":["src/components/team-dev/bring-changes/bring-changes.scss?tag=gx-ide-team-dev-bring-changes&encapsulation=shadow","src/components/team-dev/bring-changes/bring-changes.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n\n:host {\n  --pill-border-radius: 12px;\n  --pill-padding-inline: 8px;\n  --pill-padding-block: 2px;\n  --pill-font-size: var(--font-size-body-s);\n\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: max-content max-content 1fr;\n}\n$header-item-common-inline-padding: 24px;\n$header-item-common-separator-border: 1px solid\n  var(--mer-border-color__on-elevation--01);\n\n%header-item-common-inline-sizes {\n  max-inline-size: 250px;\n  min-inline-size: 180px;\n}\n%header-item-common {\n  padding-inline: $header-item-common-inline-padding;\n  border-inline-end: $header-item-common-separator-border;\n  @extend %header-item-common-inline-sizes;\n}\n%header-item-common-start {\n  padding-inline-end: $header-item-common-inline-padding;\n  border-inline-end: $header-item-common-separator-border;\n}\n%header-item-common-end {\n  padding-inline-start: $header-item-common-inline-padding;\n}\n\n.section {\n  display: contents;\n}\n\n.header {\n  display: grid;\n  gap: 24px;\n}\n\n// header detail\n.header__detail {\n  display: grid;\n  grid-template-areas:\n    \"detail-title detail-title detail-title detail-title\"\n    \"detail-commit-name detail-commit-name detail-commit-name detail-commit-name\"\n    \"detail-genexus-server detail-knowledge-base detail-current-version detail-merge-from-version\";\n  row-gap: 16px;\n  // grid-auto-columns: max-content;\n  // grid-template-columns: max-content auto auto auto;\n  grid-template-columns: minmax(250px, 350px) repeat(3, minmax(180px, 250px));\n}\n.detail__label {\n  color: var(--mer-color__neutral-gray--400);\n}\n.detail__title {\n  grid-area: detail-title;\n}\n.detail__commit-name {\n  grid-area: detail-commit-name;\n}\n.detail__genexus-server {\n  grid-area: detail-genexus-server;\n  @extend %header-item-common-start;\n\n  > a {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: inline-block;\n  }\n}\n.detail__link {\n  align-items: start;\n  color: var(--mer-text__primary);\n  text-decoration: underline;\n  &:hover {\n    color: var(--mer-text__primary--hover);\n  }\n  &:active {\n    color: var(--mer-text__primary--active);\n  }\n}\n.detail__knowledge-base {\n  grid-area: detail-knowledge-base;\n  @extend %header-item-common;\n}\n.detail__current-version {\n  grid-area: detail-current-version;\n  @extend %header-item-common;\n}\n.detail__merge-from-version {\n  grid-area: detail-merge-from-version;\n  @extend %header-item-common-end;\n}\n\n// header information\n.header__information {\n  display: grid;\n  row-gap: 10px;\n  grid-template-areas:\n    \"information-title information-title\"\n    \"information-col-1 information-col-2\";\n  grid-template-columns: max-content 1fr;\n  grid-template-rows: max-content 64px;\n}\n.information__title {\n  grid-area: information-title;\n}\n.information__col-1 {\n  grid-area: information-col-1;\n  display: flex;\n  gap: 24px;\n  @extend %header-item-common-start;\n}\n.information__col-2 {\n  display: grid;\n  grid-area: information-col-2;\n  @extend %header-item-common-end;\n}\n\n// filter / controls-container\n.controls-container {\n  display: grid;\n  margin-block-start: 24px;\n}\n.filter {\n  grid-template-columns: 232px 186px 1fr;\n  gap: 12px;\n}\n.button-merge-checked {\n  margin-inline-start: auto;\n}\n\n// main\n.main {\n  position: relative;\n  display: grid;\n  overflow: auto;\n}\n.loader {\n  position: relative;\n  inline-size: 100%;\n  block-size: 100%;\n  inset-block-start: 0;\n}\n.tabular-grid {\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.empty-state {\n  block-size: 100%;\n}\n.loader {\n  --elevation-background-color: var(--mer-surface__elevation--01);\n}\n\n.warning-error-description {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  max-inline-size: 800px;\n  line-height: 1.5; // WA. Line height looks too tight.\n}\n.warning-error-icon {\n  flex-shrink: 0;\n}\n\n.tabular-grid.empty-result::part(main) {\n  // WA to avoid scrollbar flickering when displaying the empty-state message\n  overflow: hidden;\n}\n\n// - - - - - - - - - - - - - -\n// WA (WORK AROUNDS)\n// - - - - - - - - - - - - - -\n\n.input-comments-container {\n  position: relative;\n}\n// ch-edit for comments WA's\n// Figma design for this component displays the textarea witout border, and with a little more line-height.\n// The following styles are a temporary WA that should be brouhgt to Mercury DS.\n.input-comments {\n  --control__border-color: transparent;\n  padding-block: 0 !important;\n  padding-inline: 0 !important;\n  --line-height-tight: 1.4;\n  block-size: 100%;\n  background-color: var(--mer-surface);\n  transition: var(--mer-timing--super-fast) block-size,\n    var(--mer-timing--super-fast) background-color,\n    var(--mer-timing--super-fast) padding-block,\n    var(--mer-timing--super-fast) padding-inline;\n}\n.input-comments:focus {\n  position: absolute;\n  block-size: 200px;\n  inline-size: 100%;\n  z-index: 99;\n  background-color: var(--mer-surface__elevation--01);\n  padding-block: var(--control__padding-block) !important;\n  padding-inline: var(--control__padding-inline) !important;\n}\n\nch-tabular-grid-cell.tabular-grid-cell::part(actions-icon) {\n  background-size: contain; //force icon fit container\n  margin-inline-end: 0;\n  --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--enabled);\n  cursor: pointer;\n  &:hover {\n    --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--hover);\n  }\n  &:active {\n    --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--active);\n  }\n}\n\n.tabular-grid-row-actions::part(main),\n.property-grid-row-actions::part(main) {\n  // gap not required since buttons are tertiary.\n  // extra space perceived.\n  gap: 0 !important;\n}\n\n.custom-icon-text-wrapper {\n  // To align an icon and a text, with gap\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tabular-grid-row-actions {\n  // Butons are center by default, but design dictates start alignemnt\n  > button {\n    justify-content: start;\n  }\n}\n\n// These static type of pills do not exist on Mercury yet.\n// They should be defined on Mercury. The actual pills on Mercury\n// are combo-boxes. Not what we need for this case.\n\n.pill {\n  --pill-background-color: transparent;\n  --pill-color: transparent;\n  --pill-border-color: transparent;\n\n  background-color: var(--pill-background-color);\n  color: var(--pill-color);\n  border: 1px solid var(--pill-border-color);\n  inline-size: 100%;\n  padding: var(--pill-padding-block) var(--pill-padding-inline);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--pill-border-radius);\n  position: relative;\n  font-weight: var(--font-weight-semi-bold);\n\n  &--to-merge {\n    --pill-background-color: var();\n    --pill-color: var(--mer-color__neutral-gray--400);\n    --pill-border-color: var();\n  }\n  &--to-merge-marked {\n    --pill-background-color: var();\n    --pill-color: var(--mer-border-color__primary);\n    --pill-border-color: var();\n  }\n  &--pending {\n    --pill-background-color: var(--mer-color__tinted-primary--8);\n    --pill-color: var(--mer-border-color__primary);\n    --pill-border-color: var(--mer-color__tinted-primary--50);\n  }\n  &--warning {\n    --pill-background-color: var(--mer-color__tinted-yellow--5);\n    --pill-color: var(--mer-border-color__warning);\n    --pill-border-color: var(--mer-color__tinted-yellow--60);\n  }\n  &--error {\n    --pill-background-color: var(--mer-color__tinted-red--5);\n    --pill-color: var(--mer-border-color__error);\n    --pill-border-color: var(--mer-color__tinted-red--60);\n  }\n  &--merged {\n    --pill-background-color: var(--mer-color__tinted-green--5);\n    --pill-color: var(--mer-border-color__success);\n    --pill-border-color: var(--mer-color__tinted-green--60);\n  }\n  &--transitioning {\n    // used to hide the text, before updating the caption (smooth transtion)\n    --pill-color: transparent;\n  }\n}\n.merging-spinner-caption {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  $size: 14px;\n  --status-circle-color: transparent;\n  --status-circle-size: $size;\n  --status-circle-inset-inline-start: 14px;\n  --pill-color: var(--mer-border-color__primary);\n  &::before {\n    display: inline-block;\n    content: \"\";\n\n    @include spinner(\n      $size,\n      var(--mer-color__primary--300),\n      var(--mer-color__tinted-primary--50)\n    );\n  }\n}\n.tabular-grid .button-secondary {\n  --control__padding-block: var(--pill-padding-block);\n  --control__padding-inline: var(--pill-padding-inline);\n  font-size: inherit;\n  font-weight: inherit;\n  /* font-size: var(--pill-font-size); */\n}\n\n.tabular-grid .tabular-grid-cell--for-pill {\n  --grid-cell__padding-block: 4px;\n  align-items: center;\n  justify-content: center;\n\n  // --grid-cell__padding-inline: 0;\n}\n\n.tabular-grid.disabled-custom-selector .tabular-grid-cell::part(selector-label),\n.tabular-grid.disabled-custom-selector .tabular-grid-column::part(bar-selector),\n.tabular-grid.disabled-custom-selector .tabular-grid-cell::part(actions-icon) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n.tabular-grid-column--settings-custom-selector,\n.tabular-grid-cell--settings-custom-selector {\n  --grid-cell__padding-inline: 0;\n  --grid-cell__padding-block: 0;\n}\n.tabular-grid-cell::part(actions-icon) {\n  padding-block: 6px;\n}\nch-tabular-grid-cell.tabular-grid-cell::part(actions-icon) {\n  block-size: 100%;\n  display: block;\n  background-size: 14px;\n  padding-inline: 16px;\n}\n\n.tabular-grid-cell.no-checkbox-custom-selector::part(selector-label) {\n  visibility: hidden;\n}\n\n.tabular-grid-row-actions::part(window) {\n  background-color: var(--mer-surface__elevation--02) !important;\n}\n\n.tabular-grid-row .tabular-grid-cell:nth-child(3) {\n  min-inline-size: 400px;\n}\n\n// - - - - - - - - - - - - - -\n// END OF WA\n// - - - - - - - - - - - - - -\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Method,\n  JSX,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { Locale } from \"../../../common/locale\";\nimport {\n  ChEditCustomEvent,\n  TabularGridMarkingChangedEvent,\n  TabularGridRowContextMenuEvent\n} from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tabular-grid\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst COMBO_BOX_ALL_VALUE = \"all\";\n\nconst DETAIL_LABEL_CLASSES = \"detail__label body-semi-bold-s\";\n\nconst ADD_ICON = getIconPath({\n  category: \"system\",\n  name: \"add\",\n  colorType: \"on-elevation\"\n});\nconst EDITED_ICON = getIconPath({\n  category: \"system\",\n  name: \"edit\",\n  colorType: \"on-elevation\"\n});\nconst FILTER_ICON = getIconPath({\n  category: \"window-tools\",\n  name: \"filter\",\n  colorType: \"on-elevation\"\n});\nconst SEARCH_ICON = getIconPath({\n  category: \"system\",\n  name: \"search\",\n  colorType: \"on-elevation\"\n});\nconst SUBSTRACT_ICON = getIconPath({\n  category: \"system\",\n  name: \"substract\",\n  colorType: \"on-elevation\"\n});\nconst WARNING_ICON = getIconPath({\n  category: \"system\",\n  name: \"warning\",\n  colorType: \"warning\"\n});\nconst ERROR_ICON = getIconPath({\n  category: \"system\",\n  name: \"error\",\n  colorType: \"error\"\n});\n\n@Component({\n  tag: \"gx-ide-team-dev-bring-changes\",\n  styleUrl: \"bring-changes.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/team-dev-bring-changes\"]\n})\nexport class GxIdeTeamDevBringChanges {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  #commitLabel: string;\n  #comboBoxStatesModel: { caption: string; value: ObjectStateForFilter }[];\n  #checkedObjectsIdsArray: string[] = [];\n\n  @Element() el: HTMLGxIdeTeamDevBringChangesElement;\n\n  private tabularGridEl!: HTMLChTabularGridElement;\n\n  /**\n   * An array that holds the id's of the objects that have been merged already.\n   */\n  @State() alreadyMergedObjectsIdsArray: string[] = [];\n\n  /**\n   * It hols a boolean indicating if at least one object from the tabular-grid is checked, for merging.\n   */\n  @State() atLeastOneObjectIsChecked: boolean = false;\n\n  /**\n   * True while commitObjects hasn't been loaded or is empty. Used to display a loader.\n   */\n  @State() loading: boolean = true;\n\n  /**\n   * The current search filter value\n   */\n  @State() menuContextAction: ObjectActionTaken;\n\n  /**\n   * It hols a boolean indicating if at least one object from the tabular-grid is checked, for merging.\n   */\n  @State() objectsFiltered: CommitObject[] = [];\n\n  /**\n   * The current search filter value\n   */\n  @State() searchValue: string = \"\";\n\n  /**\n   * The current state filter value\n   */\n  @State() stateFilterValue: ObjectStateForFilter = COMBO_BOX_ALL_VALUE;\n\n  /**\n   * A set that stores the marked state of each object cell. This is necessary because filtering the grid * causes marked cells to lose their state.\n   */\n  @State() markedObjectsSet: Set<string> = new Set<string>();\n\n  /**\n   * A map that holds the current commit objects states (\"pending\" | \"warning\" | \"error\" | \"merged\")\n   */\n  @State() objectsStatesMap: Map<string, ObjectState> = new Map();\n  @Watch(\"objectsStatesMap\")\n  objectsStatesMapChanged(newCommitObjectsStateMap: Map<string, ObjectState>) {\n    const someObjectIsMerging = [...newCommitObjectsStateMap.entries()].find(\n      ([, state]) => state === \"merging\"\n    );\n\n    if (!someObjectIsMerging) {\n      this.merging = false;\n    }\n  }\n\n  /**\n   * A map that holds object messages, if any, for objects that could not be merged (these objects are in a \"warning\" or \"error\" state)\n   */\n  @State() commitObjectsMessagesMap: Map<string, string> = new Map();\n\n  /**\n   * Set to true when objects are being mered. This helps disabling controls until all objects are done.\n   */\n  @State() merging: boolean = false;\n\n  /**\n   * Detail about the commit\n   */\n  @Prop() readonly commitDetail: CommitDetail;\n\n  /**\n   * Commit information\n   */\n  @Prop() readonly commitInformation: CommitInformation[] = [];\n\n  /**\n   * Array of commit\n   */\n  @Prop() readonly commitObjects: CommitObject[] = [];\n  @Watch(\"commitObjects\")\n  commitObjectsChanged(newCommitObjects: CommitObject[]) {\n    if (newCommitObjects.length) {\n      // This is the first and only objects asignment\n      this.loading = false;\n\n      // All commit objects begin as \"pending to merge\"\n      newCommitObjects.forEach(commitObject => {\n        this.objectsStatesMap.set(commitObject.id, \"to-merge\");\n      });\n\n      this.objectsFiltered = this.commitObjects;\n    }\n  }\n\n  /**\n   * Determines whether the row options are enabled or not.\n   */\n  @Prop() readonly enableRowOptions: boolean = false;\n\n  /**\n   * Determines whether the filters are rendered or not.\n   */\n  @Prop() readonly hideFilters: boolean = false;\n\n  /**\n   * The callback that is triggered when the user wants to merge more than one commit.\n   */\n  @Prop() readonly mergeObjectsCallback!: MergeObjectsCallback;\n\n  /**\n   * If true, the \"Action\" column will display a button instead of a pill, only when the action is\n   */\n  @Prop() readonly mergePillAsButton: boolean;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#commitLabel =\n      this.commitInformation.length > 1\n        ? this.#componentLocale.commmits\n        : this.#componentLocale.commmit;\n\n    // Initiate \"states\" combo box filter\n    this.#comboBoxStatesModel = [\n      {\n        caption: this.#componentLocale.states.all,\n        value: COMBO_BOX_ALL_VALUE\n      },\n      {\n        caption: this.#componentLocale.states[\"to-merge\"],\n        value: \"to-merge\"\n      },\n      {\n        caption: this.#componentLocale.states.warning,\n        value: \"warning\"\n      },\n      {\n        caption: this.#componentLocale.states.error,\n        value: \"error\"\n      },\n      {\n        caption: this.#componentLocale.states.merged,\n        value: \"merged\"\n      }\n    ];\n\n    if (this.commitObjects?.length) {\n      // if commitObjects already set...\n      this.commitObjectsChanged(this.commitObjects);\n    }\n  }\n\n  #formatComments = (): string => {\n    if (this.commitInformation.length === 1) {\n      // return comment without revison number\n      return this.commitInformation[0].comment;\n    }\n\n    // return comments with revison number\n    let mergedComment = \"\";\n    this.commitInformation.map((commit, i) => {\n      const isLast = i === this.commitInformation.length - 1;\n      const afterCommentBreakline = isLast ? \"\" : \"\\n\\n\";\n      mergedComment += `Commit ${commit.id}:\\n${commit.comment}${afterCommentBreakline}`;\n    });\n\n    return mergedComment;\n  };\n\n  #mergeCheckedClickedHandler = async () => {\n    this.merging = true;\n    const newobjectsStatesMap = new Map(this.objectsStatesMap);\n    this.#checkedObjectsIdsArray.forEach(checkedObjectId => {\n      newobjectsStatesMap.set(checkedObjectId, \"merging\");\n    });\n\n    this.objectsStatesMap = newobjectsStatesMap;\n    await this.mergeObjectsCallback(this.#checkedObjectsIdsArray);\n  };\n\n  #mergeSingleObject: (objectId: string) => () => void =\n    objectId => async () => {\n      this.merging = true;\n      const newobjectsStatesMap = new Map(this.objectsStatesMap);\n      newobjectsStatesMap.set(objectId, \"merging\");\n      this.objectsStatesMap = newobjectsStatesMap;\n      await this.mergeObjectsCallback([objectId]);\n    };\n\n  #renderActionCellContent = (\n    actionTaken: ObjectActionTaken\n  ): JSX.Element[] => {\n    let icon: string;\n    let caption: string;\n    let iconColor: string;\n\n    if (actionTaken === \"Deleted\") {\n      icon = SUBSTRACT_ICON;\n      caption = this.#componentLocale.objects.actions.delete;\n      iconColor = \"--mer-icon__error\";\n    } else if (actionTaken === \"Inserted\") {\n      icon = ADD_ICON;\n      caption = this.#componentLocale.objects.actions.insert;\n      iconColor = \"--mer-icon__success\";\n    } else {\n      // modified\n      icon = EDITED_ICON;\n      caption = this.#componentLocale.objects.actions.modify;\n      iconColor = \"--mer-icon__warning\";\n    }\n\n    return (\n      <span class=\"custom-icon-text-wrapper\">\n        <ch-image\n          type=\"mask\"\n          class=\"icon-md\"\n          src={icon}\n          style={{ backgroundColor: `var(${iconColor})` }}\n        ></ch-image>\n        {`${caption}`}\n      </span>\n    );\n  };\n\n  #renderCommitsNumbers = (onlyNumbers: boolean = false): string => {\n    if (this.commitInformation?.length > 1) {\n      // more than one commit\n      return onlyNumbers\n        ? `${this.commitInformation[0].id} ... ${\n            this.commitInformation[this.commitInformation.length - 1].id\n          }`\n        : `${this.#commitLabel} ${this.commitInformation[0].id} ... ${\n            this.commitInformation[this.commitInformation.length - 1].id\n          }`;\n    } else if (this.commitInformation?.length === 1) {\n      // just one commit\n      return onlyNumbers\n        ? this.commitInformation[0].id\n        : `${this.#commitLabel} ${this.commitInformation[0].id}`;\n    } else {\n      // Probably commits have not been loaded yet (loading state)\n      return onlyNumbers\n        ? `${this.#componentLocale.loading}`\n        : `${this.#commitLabel} ${this.#componentLocale.loading}`;\n    }\n  };\n\n  #renderFormatedDate = (date: Date): string => {\n    const dateObject = new Date(date);\n    const lang = navigator.languages?.[0] || navigator.language;\n\n    return `${dateObject.toLocaleDateString(\n      lang\n    )} ${dateObject.toLocaleTimeString(lang, {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n      hour12: false\n    })}`;\n  };\n\n  #renderObjectActions = (): JSX.Element[] => {\n    const openDisabled = false;\n    const compareWithCurrentRevisionDisabled =\n      this.menuContextAction === \"Inserted\";\n    const revisionChangesDisabled = this.menuContextAction === \"Inserted\";\n    const previewMergeDisabled = false;\n\n    return [\n      <button type=\"button\" class=\"button-tertiary\" disabled={openDisabled}>\n        {this.#componentLocale.objectActions.open}\n      </button>,\n      <button\n        type=\"button\"\n        class=\"button-tertiary\"\n        disabled={compareWithCurrentRevisionDisabled}\n      >\n        {this.#componentLocale.objectActions.compareWithCurrentRevision}\n      </button>,\n      <button\n        type=\"button\"\n        class=\"button-tertiary\"\n        disabled={revisionChangesDisabled}\n      >\n        {this.#componentLocale.objectActions.revisionChanges}\n      </button>,\n      <button\n        type=\"button\"\n        class=\"button-tertiary\"\n        disabled={previewMergeDisabled}\n      >\n        {this.#componentLocale.objectActions.previewMerge}\n      </button>\n    ];\n  };\n\n  #renderObjectState = (\n    objectType: ObjectState,\n    objectId: string\n  ): JSX.Element[] => {\n    if (objectType === \"merging\") {\n      return (\n        <span class=\"merging-spinner-caption\">\n          {this.#componentLocale.states.merging}\n        </span>\n      );\n    }\n    const classes = `pill pill--${objectType}`;\n    if (\n      this.mergePillAsButton &&\n      (objectType === \"to-merge\" || objectType === \"to-merge-marked\")\n    ) {\n      return (\n        <button\n          class={{ [classes]: true, \"button-secondary\": true }}\n          onClick={this.#mergeSingleObject(objectId)}\n        >\n          {this.#componentLocale.statesForButton[objectType]}\n        </button>\n      );\n    } else {\n      return (\n        <span class={classes}>{this.#componentLocale.states[objectType]}</span>\n      );\n    }\n  };\n\n  #renderObjectType = (objectType: ObjectType): JSX.Element[] => {\n    const icon = objectType.icon;\n\n    return (\n      <span class=\"custom-icon-text-wrapper\">\n        <ch-image class=\"icon-md\" src={icon}></ch-image>\n        {`${objectType.name}`}\n      </span>\n    );\n  };\n\n  #renderObjectsRows = (): JSX.Element[] => {\n    return this.objectsFiltered.map(commitObject => {\n      const marked = this.markedObjectsSet.has(commitObject.id);\n\n      const alreadyMerged = this.alreadyMergedObjectsIdsArray.find(\n        checkedObjectId => checkedObjectId === commitObject.id\n      );\n      const errorOrWarningMessage = this.commitObjectsMessagesMap.get(\n        commitObject.id\n      );\n      const state = this.objectsStatesMap.get(commitObject.id);\n\n      let MESSAGE_ICON;\n      if (state === \"error\") {\n        MESSAGE_ICON = ERROR_ICON;\n      } else if (state === \"warning\") {\n        MESSAGE_ICON = WARNING_ICON;\n      }\n\n      return (\n        <ch-tabular-grid-row\n          class=\"tabular-grid-row\"\n          key={commitObject.id}\n          rowid={commitObject.id}\n          ref={(el: HTMLElement) =>\n            marked && el?.setAttribute(\"marked\", \"true\")\n          }\n        >\n          <ch-tabular-grid-cell\n            cell-type=\"rich\"\n            row-selector=\"true\"\n            class={{\n              \"tabular-grid-cell\": true,\n              \"no-checkbox-custom-selector\": alreadyMerged\n            }}\n            size=\"max-content\"\n          >\n            {commitObject.name}\n          </ch-tabular-grid-cell>\n          <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n            {this.#renderObjectType(commitObject.type)}\n          </ch-tabular-grid-cell>\n          <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n            {commitObject.description}\n          </ch-tabular-grid-cell>\n          <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n            {this.#renderActionCellContent(commitObject.actionTaken)}\n          </ch-tabular-grid-cell>\n          <ch-tabular-grid-cell class=\"tabular-grid-cell tabular-grid-cell--for-pill\">\n            {this.#renderObjectState(\n              this.objectsStatesMap.get(commitObject.id),\n              commitObject.id\n            )}\n          </ch-tabular-grid-cell>\n          <ch-tabular-grid-cell\n            class=\"tabular-grid-cell tabular-grid-cell--settings-custom-selector\"\n            cell-type=\"rich\"\n            row-actions=\"true\"\n          ></ch-tabular-grid-cell>\n          {errorOrWarningMessage && (\n            <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n              <ch-tabular-grid-rowset-empty\n                class={{ \"tabular-grid-rowset-empty\": true, [state]: true }}\n              >\n                <p class=\"warning-error-description\">\n                  <ch-image\n                    class=\"icon-md warning-error-icon\"\n                    src={MESSAGE_ICON}\n                  ></ch-image>\n                  {errorOrWarningMessage}\n                </p>\n              </ch-tabular-grid-rowset-empty>\n            </ch-tabular-grid-rowset>\n          )}\n        </ch-tabular-grid-row>\n      );\n    });\n  };\n\n  #rowContextMenuHandler = (\n    event: CustomEvent<TabularGridRowContextMenuEvent>\n  ) => {\n    const rowId = event.detail.rowId;\n    this.#updateMenuContextActions(rowId);\n  };\n\n  #rowMarkingChangedHandler = (\n    event: CustomEvent<TabularGridMarkingChangedEvent>\n  ) => {\n    const newobjectsMarkedSet = new Set<string>();\n    const newobjectsStatesMap = new Map(this.objectsStatesMap);\n    const markedRowsIds = event.detail.rowsId;\n    const checkedObjectsIgnoringAlreadyMerged = markedRowsIds.filter(\n      markedObjectId =>\n        !this.alreadyMergedObjectsIdsArray.includes(markedObjectId)\n    );\n    this.#checkedObjectsIdsArray = [...checkedObjectsIgnoringAlreadyMerged];\n\n    // Update markedObjectsSet\n    this.#checkedObjectsIdsArray.forEach(checkedObjectId => {\n      newobjectsMarkedSet.add(checkedObjectId);\n    });\n    this.markedObjectsSet = newobjectsMarkedSet;\n\n    this.atLeastOneObjectIsChecked = markedRowsIds.length > 0;\n\n    newobjectsStatesMap.forEach(objectId => {\n      const objectCurrentState = this.objectsStatesMap.get(objectId);\n      if (\n        objectCurrentState !== \"to-merge\" &&\n        objectCurrentState !== \"to-merge-marked\"\n      ) {\n        return;\n      }\n\n      const markedRowIndex = markedRowsIds.findIndex(id => id === objectId);\n      if (markedRowIndex !== -1) {\n        newobjectsStatesMap.set(objectId, \"to-merge-marked\");\n        markedRowsIds.splice(markedRowIndex, 1);\n        markedRowsIds;\n      } else {\n        newobjectsStatesMap.set(objectId, \"to-merge\");\n      }\n    });\n\n    this.objectsStatesMap = newobjectsStatesMap;\n  };\n\n  #searchInputHandler = (event: ChEditCustomEvent<string> | InputEvent) => {\n    this.searchValue = (event.detail as string).toLowerCase();\n    this.#updateFilteredObjects();\n  };\n\n  #stateChangedHandler = (event: CustomEvent<string> | InputEvent) => {\n    this.stateFilterValue = event.detail as ObjectStateForFilter;\n    this.#updateFilteredObjects();\n  };\n\n  #updateMenuContextActions = (currentObjectContextMenuId: string): void => {\n    const object = this.commitObjects.find(\n      commitObject => commitObject.id === currentObjectContextMenuId\n    );\n    this.menuContextAction = object.actionTaken;\n  };\n\n  #updateFilteredObjects = () => {\n    let filteredObjects = [...this.commitObjects];\n\n    // filter by state (ch-combo-box-render) ...\n    if (this.stateFilterValue !== \"all\") {\n      filteredObjects = filteredObjects.filter(object => {\n        const objectState = this.objectsStatesMap.get(object.id);\n        return objectState === this.stateFilterValue;\n      });\n    }\n\n    // and filter by value (ch-edit) as well\n    filteredObjects = filteredObjects.filter(object => {\n      const includesName = object.name.toLowerCase().includes(this.searchValue);\n\n      const includesType = object.type.name\n        .toLowerCase()\n        .includes(this.searchValue);\n\n      const includesDescription = object.description\n        .toLowerCase()\n        .includes(this.searchValue);\n\n      if (includesName || includesType || includesDescription) {\n        return true;\n      }\n      return false;\n    });\n\n    this.objectsFiltered = filteredObjects;\n  };\n\n  /**\n   * It allows the host updating an object state, by providing the object id.\n   * @param objectId The ID of the object to update.\n   * @param newState The new state to set on the object.\n   * @param message Optional message explaining the change.\n   *\n   * @example\n   * bringChanges.updateObjectState('obj-24', \"merging\", null);\n   * bringChanges.updateObjectState('obj-27', \"error\", \"The server did not respond.\");\n   */\n  @Method()\n  async updateObjectState(\n    objectId: string,\n    newState: ObjectState,\n    message: string\n  ) {\n    // update object state\n    const newobjectsStatesMap = new Map(this.objectsStatesMap);\n    newobjectsStatesMap.set(objectId, newState);\n    this.objectsStatesMap = newobjectsStatesMap;\n\n    // add message if state is \"warning\" or \"error\"\n    if (message?.length > 0) {\n      this.commitObjectsMessagesMap.set(objectId, message);\n    }\n\n    if (newState === \"merged\") {\n      // remove from checked\n      this.#checkedObjectsIdsArray = this.#checkedObjectsIdsArray.filter(\n        checkedObject => checkedObject !== objectId\n      );\n\n      // add to \"already merged\". This will hide the checkbox\n      this.alreadyMergedObjectsIdsArray.push(objectId);\n\n      // unmark checkbox:\n      this.tabularGridEl.markRow(objectId, false);\n\n      // remove message if any\n      this.commitObjectsMessagesMap.delete(objectId);\n    }\n  }\n\n  render() {\n    const enableRichRowSelector =\n      this.alreadyMergedObjectsIdsArray.length !== this.commitObjects.length;\n\n    const disableControls = this.merging || this.loading;\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header class=\"header spacing-body-inline spacing-body-block-start\">\n            <div\n              // header details\n              class=\"header__detail\"\n            >\n              <p class=\"detail__title subtitle-semi-bold-xs\">\n                {this.#componentLocale.commitDetail.bringChangesDetail}\n              </p>\n              <p class=\"detail__commit-name subtitle-semi-bold-s\">\n                {this.#renderCommitsNumbers()}\n              </p>\n              <div\n                // genexus server\n                class=\"detail__genexus-server field field-block\"\n              >\n                <span class={DETAIL_LABEL_CLASSES}>\n                  {this.#componentLocale.commitDetail.genexusServer}\n                </span>\n                <a\n                  class=\"detail__link body-regular-s\"\n                  href={this.commitDetail.genexusServer}\n                  target=\"_blank\"\n                >\n                  {this.commitDetail.genexusServer}\n                </a>\n              </div>\n\n              <div\n                // knowledge base\n                class=\"detail__knowledge-base field field-block\"\n              >\n                <span class={DETAIL_LABEL_CLASSES}>\n                  {this.#componentLocale.commitDetail.knowledgeBase}\n                </span>\n                <p class=\"body-regular-s\">{this.commitDetail.knowledgeBase}</p>\n              </div>\n\n              <div\n                // current version\n                class=\"detail__current-version field field-block\"\n              >\n                <span class={DETAIL_LABEL_CLASSES}>\n                  {this.#componentLocale.commitDetail.currentVersion}\n                </span>\n                <a class=\"body-regular-s\">{this.commitDetail.currentVersion}</a>\n              </div>\n\n              <div\n                // merge from version\n                class=\"detail__merge-from-version field field-block\"\n              >\n                <span class={DETAIL_LABEL_CLASSES}>\n                  {this.#componentLocale.commitDetail.mergeFromVersion}\n                </span>\n                <p class=\"body-regular-s\">\n                  {this.commitDetail.mergeFromVersion}\n                </p>\n              </div>\n            </div>\n            <div\n              // header information\n              class=\"header__information\"\n            >\n              <p class=\"information__title subtitle-semi-bold-xs\">\n                {this.#componentLocale.commitInformation.title}\n              </p>\n              <div\n                // header information (col-1)\n                class=\"information__col-1\"\n              >\n                <div\n                  // IDs\n                  class=\"field field-block\"\n                >\n                  <span class={DETAIL_LABEL_CLASSES}>\n                    {this.commitInformation.length === 1\n                      ? this.#componentLocale.commitInformation.id\n                      : this.#componentLocale.commitInformation.ids}\n                  </span>\n                  <p class=\"body-regular-s\">\n                    {this.#renderCommitsNumbers(true)}\n                  </p>\n                </div>\n                {this.commitInformation.length === 1 ? (\n                  <div class=\"field field-block\">\n                    <span class={DETAIL_LABEL_CLASSES}>\n                      {this.#componentLocale.commitInformation.date}\n                    </span>\n                    <p class=\"body-regular-s\">\n                      {this.#renderFormatedDate(this.commitInformation[0].date)}\n                    </p>\n                  </div>\n                ) : (\n                  [\n                    <div class=\"field field-block\">\n                      <span class={DETAIL_LABEL_CLASSES}>\n                        {this.#componentLocale.commitInformation.from}\n                      </span>\n                      <p class=\"body-regular-s\">\n                        {this.#renderFormatedDate(\n                          this.commitInformation[0].date\n                        )}\n                      </p>\n                    </div>,\n                    <div class=\"field field-block\">\n                      <span class={DETAIL_LABEL_CLASSES}>\n                        {this.#componentLocale.commitInformation.to}\n                      </span>\n                      <p class=\"body-regular-s\">\n                        {this.#renderFormatedDate(\n                          this.commitInformation[\n                            this.commitInformation.length - 1\n                          ].date\n                        )}\n                      </p>\n                    </div>\n                  ]\n                )}\n              </div>\n\n              <div\n                // header information (col-2)\n                class=\"information__col-2\"\n              >\n                <div\n                  // To\n                  class=\"field field-block\"\n                >\n                  <label class={DETAIL_LABEL_CLASSES} htmlFor=\"commit-comments\">\n                    {this.commitInformation.length > 1\n                      ? this.#componentLocale.commitInformation.comments\n                      : this.#componentLocale.commitInformation.comment}\n                  </label>\n                  <div class=\"input-comments-container\">\n                    <ch-edit\n                      id=\"commit-comments\"\n                      class=\"input scrollable input-comments body-regular-s\"\n                      type=\"text\"\n                      multiline\n                      readonly\n                      value={this.#formatComments()}\n                    ></ch-edit>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </header>\n          <div\n            class={{\n              \"controls-container\": true,\n              \"filter\": !this.hideFilters,\n              \"spacing-body-inline\": true\n            }}\n          >\n            {!this.hideFilters && [\n              <ch-edit\n                class=\"input\"\n                disabled={disableControls}\n                startImgSrc={SEARCH_ICON}\n                placeholder={this.#componentLocale.filter.searchPlaceholder}\n                type=\"search\"\n                onInput={this.#searchInputHandler}\n              ></ch-edit>,\n              <ch-combo-box-render\n                class=\"combo-box\"\n                disabled={disableControls}\n                model={this.#comboBoxStatesModel}\n                value={this.stateFilterValue}\n                onInput={this.#stateChangedHandler}\n                placeholder={this.#componentLocale.filter.statePlaceholder}\n              ></ch-combo-box-render>\n            ]}\n\n            <button\n              class=\"button-primary button-merge-checked\"\n              disabled={!this.atLeastOneObjectIsChecked || disableControls}\n              onClick={this.#mergeCheckedClickedHandler}\n            >\n              {this.#componentLocale.filter.mergeChecked}\n            </button>\n          </div>\n          <div class=\"main spacing-body\">\n            {this.commitObjects.length ? (\n              <ch-tabular-grid\n                class={{\n                  \"tabular-grid\": true,\n                  \"objects-tabular-grid\": true,\n                  \"disabled-custom-selector\": this.merging,\n                  \"empty-result\": this.objectsFiltered.length === 0\n                }}\n                keyboardNavigationMode=\"focus\"\n                rowSelectionMode=\"multiple\"\n                onRowMarkingChanged={this.#rowMarkingChangedHandler}\n                onRowContextMenu={this.#rowContextMenuHandler}\n                ref={el =>\n                  (this.tabularGridEl = el as HTMLChTabularGridElement)\n                }\n              >\n                <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n                  <ch-tabular-grid-column\n                    class=\"tabular-grid-column\"\n                    columnId=\"name\"\n                    columnName={this.#componentLocale.objects.name}\n                    columnType=\"rich\"\n                    richRowSelector={enableRichRowSelector}\n                    richRowSelectorMode=\"mark\"\n                    settingable={false}\n                    size=\"max-content\"\n                  />\n                  <ch-tabular-grid-column\n                    class=\"tabular-grid-column\"\n                    columnId=\"type\"\n                    columnName={this.#componentLocale.objects.type}\n                    settingable={false}\n                    size=\"max-content\"\n                  />\n                  <ch-tabular-grid-column\n                    class=\"tabular-grid-column\"\n                    columnId=\"description\"\n                    columnName={this.#componentLocale.objects.description}\n                    settingable={false}\n                    size=\"auto\"\n                  />\n                  <ch-tabular-grid-column\n                    class=\"tabular-grid-column\"\n                    columnId=\"action\"\n                    columnName={this.#componentLocale.objects.action}\n                    settingable={false}\n                    size=\"max-content\"\n                  />\n                  <ch-tabular-grid-column\n                    // size of this column should the enough for the largest pill, and no more.\n                    // this prevents layout shifts when pills state changes.\n                    class=\"tabular-grid-column\"\n                    columnId=\"status\"\n                    columnName={this.#componentLocale.objects.status}\n                    settingable={false}\n                    size=\"100px\"\n                  />\n                  <ch-tabular-grid-column\n                    class=\"tabular-grid-column tabular-grid-column--settings-custom-selector\"\n                    columnId=\"actions\"\n                    columnName=\"Actions\"\n                    columnNameHidden\n                    size=\"min-content\"\n                    columnType=\"rich\"\n                    richRowActions\n                    settingable={false}\n                  ></ch-tabular-grid-column>\n                </ch-tabular-grid-columnset>\n                {this.#renderObjectsRows()}\n                {this.enableRowOptions && (\n                  <ch-tabular-grid-row-actions\n                    class=\"tabular-grid-row-actions\"\n                    showOnRowActions\n                  >\n                    {this.#renderObjectActions()}\n                  </ch-tabular-grid-row-actions>\n                )}\n                {this.enableRowOptions && (\n                  <ch-tabular-grid-row-actions\n                    class=\"tabular-grid-row-actions\"\n                    showOnRowContext\n                  >\n                    {this.#renderObjectActions()}\n                  </ch-tabular-grid-row-actions>\n                )}\n\n                <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n                  {this.objectsFiltered.length === 0 && (\n                    <ch-tabular-grid-rowset-empty>\n                      <gx-ide-empty-state\n                        class=\"empty-state\"\n                        isAnimated\n                        stateIconSrc={FILTER_ICON}\n                        stateTitle=\"No object matched your filter\"\n                      ></gx-ide-empty-state>\n                    </ch-tabular-grid-rowset-empty>\n                  )}\n                </ch-tabular-grid-rowset>\n              </ch-tabular-grid>\n            ) : (\n              <gx-ide-loader\n                cancelLabel={this.#componentLocale.loader.cancelLabel}\n                loaderTitle={this.#componentLocale.loader.title}\n                description={this.#componentLocale.loader.description}\n                show\n                class=\"loader\"\n              ></gx-ide-loader>\n            )}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type CommitDetail = {\n  genexusServer: string;\n  knowledgeBase: string;\n  currentVersion: string;\n  mergeFromVersion: string;\n};\n\nexport type CommitInformation = {\n  id: string;\n  comment: string;\n  date: Date;\n};\n\nexport type CommitObject = {\n  id: string;\n  date: Date;\n  name: string;\n  type: ObjectType;\n  description: string;\n  actionTaken: ObjectActionTaken;\n};\n\nexport type ObjectActionTaken =\n  | \"Inserted\"\n  | \"Deleted\"\n  | \"Modified\"\n  | \"Unchanged\"\n  | \"Unknown\";\n\nexport type ObjectState =\n  | \"to-merge\"\n  | \"to-merge-marked\"\n  | \"merging\"\n  | \"pending\"\n  | \"warning\"\n  | \"error\"\n  | \"merged\";\n\ntype ObjectStateForFilter =\n  | Extract<ObjectState, \"to-merge\" | \"warning\" | \"error\" | \"merged\">\n  | \"all\";\n\nexport type ObjectType = {\n  name: string;\n  icon: string;\n};\n\nexport type MergeObjectsCallback = (objectsIds: string[]) => Promise<void>;\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["mapCategoryToListItemGroup","category","categoryGroup","caption","name","id","type","expanded","expandable","items","types","map","selected","additionalInformation","center","imgSrc","icon","mapDataTypesToList","dataTypes","dataType","index","undefined","order","dataTypeSelectorCss","CSS_BUNDLES","ARROW_UP_KEY","ARROW_DOWN_KEY","ENTER_KEY","TAB_KEY","ALL_CATEGORY_ID","RECENTLY_USED_CATEGORY_ID","CLOCK_ICON","getIconPath","colorType","GxIdeKbManagerImport","_GxIdeKbManagerImport__componentLocale","set","this","_GxIdeKbManagerImport_showAll","_GxIdeKbManagerImport_categoriesActionListItemGroupMap","Map","_GxIdeKbManagerImport_dataTypeCategoryMap","_GxIdeKbManagerImport_dataTypeDataIdMap","_GxIdeKbManagerImport_lastArrowKey","_GxIdeKbManagerImport_selectedDataTypeIds","categoryId","dataTypeId","_GxIdeKbManagerImport_focusAlreadySet","_GxIdeKbManagerImport_actionListEl","_GxIdeKbManagerImport_evaluateSelectionChanged","path","chActionListItem","find","el","tagName","dataTypeData","__classPrivateFieldGet","get","dataTypeSelectedCallback","_GxIdeKbManagerImport_listKeyDownHandler","event","pressedKey","key","composedPath","__classPrivateFieldSet","actionGroup","currentFocusedActionGroupId","firstActionListGroupId","shadowRoot","firstElementChild","arrowUpOnFirstElement","call","stopPropagation","_GxIdeKbManagerImport_listClickHandler","detail","_GxIdeKbManagerImport_showAllObjects","allCategoriesActionListModel","counter","mapLength","size","keys","push","categoriesListBoxModel","selectedCategory","_GxIdeKbManagerImport_showRecentlyObjects","recentlyUsedActionListModel","selectedCategoryHandler","e","currentTarget","dataset","newSelectedCategory","_GxIdeKbManagerImport_handleButtonTab","_GxIdeKbManagerImport_renderFooter","recentlyUsedBtnClass","allBtnClass","selectedCategoryDescription","fixedTypes","recentlyUsed","all","h","class","length","select","title","onClick","onKeyDown","src","categories","buttonClass","_GxIdeKbManagerImport_setFocus","async","focusableElement","setTimeout","focusType","selectedDataTypeEl","getElementById","firstActionListGroup","firstButton","focus","categoriesChanged","newCategories","clear","forEach","categoryListBoxModel","isSelected","loading","categoriesJustChanged","recentlyUsedChanged","newRecentlyUsed","componentWillLoad","Locale","getComponentStrings","render","Host","model","loaderTitle","loader","description","show","ref","selection"],"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","// 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"],"mappings":"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"}