@genexus/genexus-ide-ui 1.0.3 → 1.0.5

package/dist/collection/components/kb-manager-export/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/kb-manager-export/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["// /* Tree View */\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\nimport {\n  ObjectData,\n  KBPropertyData,\n  KBPropertyType\n} from \"./kb-manager-export\";\nimport { ObjectType } from \"../../common/types\";\nexport const KB_PROPERTY = \"property\";\nexport const KB_OBJECT = \"object\";\n\n/*\nINDEX:\n1. getObjectIcon\n2. convertObjectTypeToTreeItem\n3. convertObjectToTreeItem\n4. getObjectType\n5. findObjectInTree\n6. findPropertyInTree\n7. convertPropertyToTreeItem\n8. updateTreeModelWithObjects\n9. convertKbPropertiesDataToTreeItemData\n10. clearKbPropertiesFromTree\n*/\n\n/* 1.2 getIcon (for properties)*/\nconst getPropertyIcon = (\n  typeId: string,\n  kbPropertiesTypes: KBPropertyType[]\n): string => {\n  // The object icon has to be retrieved from the ObjetTypes array, by matching the ObjectData typeId with the ObjectType id.\n  const propertyType = kbPropertiesTypes.find(\n    propertyType => propertyType.id === typeId\n  );\n  if (propertyType) {\n    return propertyType.icon;\n  } else {\n    return undefined;\n  }\n};\n\n/* 2. convertObjectTypeToTreeItem*/\nconst convertObjectTypeToTreeItem = (\n  objectType: ObjectType\n): TreeViewItemModel => ({\n  caption: objectType.name,\n  id: objectType.id,\n  startImgSrc: objectType.icon,\n  leaf: false,\n  parts: \"object-type tree-view-item\",\n  expanded: true,\n  items: []\n});\n\n/* 3. convertObjectToTreeItem*/\nconst convertObjectToTreeItem = (\n  object: ObjectData,\n  objectTypes: Map<string, ObjectType>\n): TreeViewItemModel => ({\n  caption: object.name,\n  id: object.id,\n  startImgSrc: objectTypes.get(object.typeId).icon,\n  parts: \"object tree-view-item\",\n  metadata: KB_OBJECT,\n  leaf: true\n});\n\n/* 5. findObjectInTree*/\nconst findObjectInTree = (\n  object: ObjectData,\n  actualTreeState: TreeViewItemModel[]\n): ObjectTreeInfo => {\n  const objectTreeItemInfo = {\n    objectExists: false,\n    objectTypeIndex: -1\n  };\n  if (actualTreeState) {\n    const objectTypeTreeItemIndex = actualTreeState.findIndex(\n      objectTypeTreeItem => {\n        return objectTypeTreeItem.id === object.typeId;\n      }\n    );\n    if (objectTypeTreeItemIndex !== -1) {\n      objectTreeItemInfo.objectTypeIndex = objectTypeTreeItemIndex;\n      // objectType exists as a node in the actual tree.\n      // Now try to find the object\n      const objectFound = actualTreeState[objectTypeTreeItemIndex].items?.find(\n        objectTreeItem => {\n          return objectTreeItem.id === object.id;\n        }\n      );\n      if (objectFound) {\n        objectTreeItemInfo.objectExists = true;\n      }\n    }\n  }\n  return objectTreeItemInfo;\n};\n\n/* 6. findPropertyInTree */\nconst findPropertyInTree = (\n  property: KBPropertyData,\n  updatedTreeData: TreeViewItemModel[]\n): boolean => {\n  const found = updatedTreeData.find(node => {\n    return node.id === property.id;\n  });\n  if (found) {\n    return true;\n  }\n  return false;\n};\n\n/* 7. convertPropertyToTreeItem */\nconst convertPropertyToTreeItem = (\n  property: KBPropertyData,\n  kbPropertiesTypes: KBPropertyType[]\n): TreeViewItemModel => ({\n  caption: property.name,\n  id: property.id,\n  startImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),\n  parts: \"property tree-view-item\",\n  metadata: KB_PROPERTY,\n  leaf: true\n});\n\n/* 8. updateTreeModelWithObjects*/\nexport const updateTreeModelWithObjects = (\n  objects: ObjectData[] | undefined,\n  objectTypes: Map<string, ObjectType>,\n  actualTreeState: TreeViewItemModel[]\n): TreeViewItemModel[] => {\n  const updatedTreeData: TreeViewItemModel[] = [...actualTreeState];\n  if (!objects) {\n    // nothing to do\n    return updatedTreeData;\n  }\n  objects.forEach(object => {\n    // objects that already exists in the actual actualTreeState should not be added.\n    // We can find the object in the actual actualTreeState.\n    const objectTreeItemInfo: ObjectTreeInfo = findObjectInTree(\n      object,\n      updatedTreeData\n    );\n    if (!objectTreeItemInfo.objectExists) {\n      // object does not exists in actualTreeState\n      // if the objectType tree node exists, insert inside.\n      // if the objectType tree node does not exists, create object type node first.\n      if (objectTreeItemInfo.objectTypeIndex === -1) {\n        const objectType: ObjectType = objectTypes.get(object.typeId);\n        if (objectType !== undefined) {\n          const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);\n          objectTreeItemInfo.objectTypeIndex =\n            updatedTreeData.push(objectTypeTreeItem) - 1;\n        }\n      }\n      const objectAsTreeItem: TreeViewItemModel = convertObjectToTreeItem(\n        object,\n        objectTypes\n      );\n      // insert object in tree (under the object type tree node)\n      updatedTreeData[objectTreeItemInfo.objectTypeIndex].items.push(\n        objectAsTreeItem\n      );\n    }\n  });\n  return updatedTreeData;\n};\n\n/* 9. convertKbPropertiesDataToTreeItemData*/\nexport const convertKbPropertiesDataToTreeItemData = (\n  properties: KBPropertyData[],\n  kbPropertiesTypes: KBPropertyType[],\n  actualTreeState: TreeViewItemModel[]\n): TreeViewItemModel[] => {\n  const updatedTreeData: TreeViewItemModel[] = [...actualTreeState];\n  if (!properties) {\n    // nothing to do\n    return updatedTreeData;\n  }\n  properties.forEach(property => {\n    // properties have no parent node, and they should be added at the beginning of the tree\n    const propertyAlreadyExists = findPropertyInTree(property, updatedTreeData);\n    if (!propertyAlreadyExists) {\n      const propertyTreeItem = convertPropertyToTreeItem(\n        property,\n        kbPropertiesTypes\n      );\n      updatedTreeData.unshift(propertyTreeItem);\n    }\n  });\n  return updatedTreeData;\n};\n\ntype ObjectTreeInfo = {\n  objectExists: boolean;\n  objectTypeIndex: number;\n};\n\n/* 10. clearKbPropertiesFromTree*/\nexport const clearKbPropertiesFromTree = (\n  kBPropertiesData: KBPropertyData[],\n  actualTreeState: TreeViewItemModel[]\n): TreeViewItemModel[] => {\n  if (!(actualTreeState.length > 0)) {\n    // nothing to do.\n    return [];\n  }\n  const kBPropertiesDataIds: string[] = kBPropertiesData.map(property => {\n    return property.id;\n  });\n\n  const treeModelWithoutKbProperties: TreeViewItemModel[] =\n    actualTreeState.filter(item => {\n      return !kBPropertiesDataIds.includes(item.id);\n    });\n\n  return treeModelWithoutKbProperties;\n};\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/kb-manager-export/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["// /* Tree View */\nimport {\n  TreeViewItemModel,\n  TreeViewModel\n} from \"@genexus/chameleon-controls-library\";\nimport { ObjectData, KBPropertyData, KBPropertyType } from \"./types\";\nimport { ObjectType } from \"../../common/types\";\nexport const KB_PROPERTY = \"property\";\nexport const KB_OBJECT = \"object\";\n\nconst getPropertyIcon = (\n  typeId: string,\n  kbPropertiesTypes: KBPropertyType[]\n): string =>\n  // The object icon has to be retrieved from the ObjectTypes array, by\n  // matching the ObjectData typeId with the ObjectType id\n  kbPropertiesTypes.find(propertyType => propertyType.id === typeId).icon;\n\nconst convertObjectTypeToTreeItem = (\n  objectType: ObjectType\n): TreeViewItemModel => ({\n  caption: objectType.name,\n  id: objectType.id,\n  startImgSrc: objectType.icon,\n  leaf: false,\n  parts: \"object-type tree-view-item\",\n  expanded: true,\n  items: []\n});\n\nconst convertObjectToTreeItem = (\n  object: ObjectData,\n  objectTypes: Map<string, ObjectType>\n): TreeViewItemModel => ({\n  caption: object.name,\n  id: object.id,\n  startImgSrc: objectTypes.get(object.typeId).icon,\n  parts: \"object tree-view-item\",\n  metadata: KB_OBJECT,\n  leaf: true\n});\n\nconst convertPropertyToTreeItem = (\n  property: KBPropertyData,\n  kbPropertiesTypes: KBPropertyType[]\n): TreeViewItemModel => ({\n  caption: property.name,\n  id: property.id,\n  startImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),\n  parts: \"property tree-view-item\",\n  metadata: KB_PROPERTY,\n  leaf: true\n});\n\n/**\n * Updates the tree model with the provided objects.\n * Objects may already exist and are placed under their parent node.\n * If the parent node doesn't exist (identified by typeId on ObjectTypes),\n * it is created and added at the bottom.\n *\n * @param {ObjectData[] | undefined} objects - The array of objects to update.\n * @param {Map<string, ObjectType>} objectTypesMap - A map of object types by ID.\n * @param {Set<string>} objectsSet - A set of existing object IDs.\n * @param {TreeViewModel} actualTreeState - The current tree state to be updated.\n * @returns {TreeViewModel} - The updated tree view model.\n */\nexport const updateObjectsTreeModel = (\n  objects: ObjectData[] | undefined,\n  objectTypesMap: Map<string, ObjectType>,\n  objectsSet: Set<string>,\n  actualTreeState: TreeViewModel\n): TreeViewModel => {\n  if (!objects) {\n    return [...actualTreeState];\n  }\n\n  const updatedTreeData: TreeViewModel = [...actualTreeState];\n  objects.forEach(object => {\n    // objects that already exists in the actual actualTreeState should not be added.\n\n    if (objectsSet.has(object.id)) {\n      // object already exists\n      return;\n    }\n\n    const objectTreeItem = convertObjectToTreeItem(object, objectTypesMap);\n\n    // TODO: Improve the algorithm efficiency. This check visits potentially all nodes\n    // from the TreeViewModel on each iteration. Using a Map to pre-store the TreeView\n    // nodes would improve efficiency.\n    const objectTypeTreeItemIndex = updatedTreeData.findIndex(\n      treeItem => treeItem.id === object.typeId\n    );\n\n    if (objectTypeTreeItemIndex === -1) {\n      // Create and add new object type tree item\n      const objectType = objectTypesMap.get(object.typeId);\n      if (objectType) {\n        const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);\n        objectTypeTreeItem.items.push(objectTreeItem);\n        updatedTreeData.push(objectTypeTreeItem);\n      }\n    } else {\n      // objectType exists already. insert object as children of the object type tree item.\n      updatedTreeData[objectTypeTreeItemIndex].items.push(objectTreeItem);\n    }\n\n    objectsSet.add(object.id);\n  });\n\n  return updatedTreeData;\n};\n\n/**\n * Converts an array of KB properties data into tree item data for a tree view.\n *\n * @param {KBPropertyData[]} properties - The array of KB property data.\n * @param {KBPropertyType[]} kbPropertiesTypes - The array of KB property types.\n * @param {TreeViewModel} actualTreeState - The current state of the tree.\n * @returns {TreeViewModel} - The updated tree view item models.\n */\nexport const convertKbPropertiesDataToTreeItemData = (\n  properties: KBPropertyData[],\n  kbPropertiesTypes: KBPropertyType[],\n  actualTreeState: TreeViewModel\n): TreeViewModel => {\n  if (!properties) {\n    return [...actualTreeState];\n  }\n\n  const updatedTreeData: TreeViewModel = [...actualTreeState];\n  properties.forEach(property => {\n    // properties have no parent node, and they should be added at the beginning of the tree\n    const propertyAlreadyExists =\n      updatedTreeData.find(node => node.id === property.id) !== undefined;\n    if (propertyAlreadyExists) {\n      return;\n    }\n    const propertyTreeItem = convertPropertyToTreeItem(\n      property,\n      kbPropertiesTypes\n    );\n    updatedTreeData.unshift(propertyTreeItem);\n  });\n  return updatedTreeData;\n};\n\n/**\n * Removes properties from the tree model.\n *\n * @param {TreeViewModel} actualTreeState - The current state of the tree,\n * containing various tree view items.\n * @returns {TreeViewModel} - A new array of tree view items that excludes\n * any items with metadata of type `KB_PROPERTY`.\n */\nexport const clearKbPropertiesFromTree = (\n  actualTreeState: TreeViewModel\n): TreeViewModel =>\n  actualTreeState.filter(item => item.metadata !== KB_PROPERTY);\n"]}

package/dist/collection/components/kb-manager-export/kb-manager-export.css

@@ -1,633 +1,34 @@
-:root {
-  --ui-animaton-speed: 0.2s;
-}
-
-/*ALIGNMENT*/
-/*Ellipsis*/
-/*****************************************************
-TYPOGRAPHY
-*****************************************************/
-/*Title 01 (Positive)*/
-.gxg-title-01 {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-01-font-weight);
-  font-size: var(--ds-title-01-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-/*Title 01 (Negative)*/
-.gxg-title-01--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-01-font-weight);
-  font-size: var(--ds-title-01-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--negative);
-}
-
-/*Title 02 (Positive)*/
-.gxg-title-02 {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-02-font-weight);
-  font-size: var(--ds-title-02-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  text-transform: uppercase;
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-.gxg-title-02--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-02-font-weight);
-  font-size: var(--ds-title-02-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  text-transform: uppercase;
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--color-on-primary);
-}
-
-/*Title 03*/
-.gxg-title-03 {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-03-font-weight);
-  font-size: var(--ds-title-03-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  text-transform: uppercase;
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-.gxg-title-03--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-03-font-weight);
-  font-size: var(--ds-title-03-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  text-transform: uppercase;
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--negative);
-}
-
-/*Title 04*/
-.gxg-title-04 {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-04-font-weight);
-  font-size: var(--ds-title-04-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-.gxg-title-04--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-04-font-weight);
-  font-size: var(--ds-title-04-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--negative);
-}
-
-/*Title 05*/
-.gxg-title-05 {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-05-font-weight);
-  font-size: var(--ds-title-05-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-.gxg-title-05--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--ds-title-05-font-weight);
-  font-size: var(--ds-title-05-font-size);
-  letter-spacing: var(--ds-base-font-letter-spacing--regular);
-  color: var(--ds-base-font-color);
-  text-align: start;
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--negative);
-}
-
-/*Text*/
-.gxg-text {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-}
-
-.gxg-text--negative {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--negative);
-}
-
-.gxg-text--gray {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--dimmed);
-}
-
-/*Quote*/
-.gxg-quote {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  font-style: italic;
-}
-
-.gxg-quote--negative {
-  color: var(--ds-base-font-color--negative);
-}
-
-/*Link*/
-.gxg-link {
-  line-height: unset;
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--link);
-  text-decoration: underline;
-  cursor: pointer;
-  display: inline-block;
-}
-.gxg-link:hover {
-  color: var(--ds-base-font-color--link-hover);
-}
-.gxg-link:active {
-  color: var(--ds-base-font-color--link-active);
-}
-
-.gxg-link-gray {
-  line-height: unset;
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--link);
-  text-decoration: underline;
-  cursor: pointer;
-  display: inline-block;
-  color: var(--ds-base-font-color--dimmed);
-}
-.gxg-link-gray:hover {
-  line-height: unset;
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--link);
-  text-decoration: underline;
-  cursor: pointer;
-  display: inline-block;
-  color: var(--ds-base-font-color--dimmed);
-  filter: brightness(1.4);
-}
-
-/*Alerts*/
-.gxg-alert-error {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--error);
-  display: inline-block;
-}
-
-.gxg-alert-warning {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--warning);
-  display: inline-block;
-}
-
-.gxg-alert-success {
-  font-family: var(--ds-base-font-family-primary);
-  font-size: var(--ds-base-font-size);
-  color: var(--ds-base-font-size-color);
-  font-weight: var(--ds-base-font-size-weight);
-  line-height: var(--ds-base-font-line-height--comfortable);
-  color: var(--ds-base-font-color--success);
-  display: inline-block;
-}
-
-/*Tab*/
-.gxg-tab--disabled {
-  color: var(--color-primary-disabled);
-  pointer-events: none;
-}
-.gxg-tab--disabled[disabled] {
-  color: var(--color-primary-disabled);
-  pointer-events: none;
-}
-
-/*Label*/
-.gxg-label {
-  font-family: var(--ds-base-font-family-primary);
-  font-weight: var(--gxg-label-font-weight);
-  font-size: var(--gxg-label-font-size);
-  color: var(--gxg-label-color);
-  text-align: center;
-  line-height: 1.455em;
-  display: flex;
-  align-items: center;
-}
-.gxg-label:hover {
-  color: var(--color-primary-hover);
-}
-.gxg-label:focus {
-  color: var(--color-primary-active);
-}
-.gxg-label:active {
-  color: var(--color-primary-active);
-}
-.gxg-label[disabled] {
-  color: var(--color-primary-disabled);
-}
-
-.gxg-label--negative {
-  color: var(--color-on-primary);
-}
-.gxg-label--negative[disabled] {
-  color: var(--color-on-disabled);
-}
-
-/*****************************************************
-GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
-*****************************************************/
-/*****************************************************
-FORM ELEMENTS
-*****************************************************/
-.gxg-scrollbar {
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-}
-.gxg-scrollbar::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
-  height: var(--gxg-scrollbar-width);
-}
-.gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
-}
-.gxg-scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
-}
-.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
-}
-.gxg-scrollbar::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-
-/*Gx Ide*/
-/*@container queries*/
-/* hiChar styles
-Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
-*/
-/* - - - - - - - - - - - - - - - - -
-New classes for Chameleon + Mercury
-- - - - - - - - - - - - - - - - - */
-:host {
-  display: grid;
-  block-size: 100%;
-}
-
-.card-regular {
-  background-color: var(--mer-surface__elevation--01);
-  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
-  border-radius: var(--mer-border__radius--md);
-  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+.section {
   display: grid;
-}
-
-.card-small {
-  background-color: var(--mer-surface__elevation--02);
-  border-radius: var(--mer-border__radius--sm);
-  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
-}
-.card-small--actionable:hover {
-  background-color: var(--mer-color__neutral-gray--600);
-}
-.card-small--actionable:active {
-  background-color: var(--mer-color__neutral-gray--650);
-}
-.card-small:focus-visible {
-  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
-  outline-offset: var(--focus__outline-offset);
-}
-
-.empty-state {
   block-size: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: var(--mer-spacing--sm);
-  text-align: center;
-}
-.empty-state__title, .empty-state__button, .empty-state__link {
-  max-inline-size: 300px;
-}
-
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-1 {
-  opacity: 1;
+  grid-template: "export-file-name buttons-container buttons-container buttons-container" max-content "checkboxes checkboxes checkboxes checkboxes" max-content "main main main main" 1fr "footer footer footer footer" max-content/1fr max-content max-content max-content;
 }
 
-.display-contents {
+.header {
   display: contents;
 }
-
-/* - - - - - - - - - - - - - - - - - - - 
-Old classes (Gemini) to be removed soon
-- - - - - - - - - - - - - - - - - - - */
-/* Helper Classes */
-.gxi-hidden {
-  display: none !important;
-}
-
-.gxi-full-height {
-  height: 100%;
-}
-
-.gxi-overflow-auto {
-  overflow: auto;
-}
-
-.gxi-display-flex {
-  display: flex;
-}
-
-.align-start {
-  display: flex;
-  align-items: start;
-}
-
-.align-center {
-  display: flex;
-  align-items: center;
-}
-
-.align-end {
-  display: flex;
-  align-items: end;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.justify-start {
-  display: flex;
-  justify-content: start;
-}
-
-.justify-center {
-  display: flex;
-  justify-content: center;
-}
-
-.justify-end {
-  display: flex;
-  justify-content: end;
-}
-
-/* Grids */
-.grid {
-  display: grid;
-  grid-row-gap: var(--gx-ide-grid-row-gap);
-  grid-column-gap: var(--gx-ide-grid-column-gap);
-  grid-template-rows: auto;
-}
-
-ch-grid-cell {
-  display: flex;
-}
-
-ch-grid {
-  overflow: auto;
-  height: 100%;
-}
-
-ch-grid-column {
-  /*to be removed when this works inside a component with shadow: true*/
-  z-index: 99;
-  border-bottom: 1px solid var(--mer-color__neutral-gray--800);
-}
-
-ch-grid-column:first-child {
-  padding-inline-start: var(--gx-ide-container__padding) !important;
-}
-
-ch-grid-column:last-child {
-  padding-inline-end: var(--gx-ide-container__padding) !important;
-}
-
-ch-grid-cell {
-  --mer-spacing--xs: var(--gx-ide-container__padding);
-}
-
-/*--- Layout ---*/
-.layout {
-  display: grid;
-  gap: var(--mer-spacing--lg);
-  box-sizing: border-box;
-}
-.layout--two-cols {
-  grid-template-columns: 1fr 1fr;
-}
-.layout--space-above {
-  padding-block-start: var(--mer-spacing--lg);
+.header .export-file-name {
+  grid-area: export-file-name;
 }
-
-/*Gxg Tabs*/
-gxg-tabs {
-  box-shadow: none;
-}
-
-/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
-:host(.gx-ide-component) {
-  height: 100% !important;
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-/*stylize the top bar*/
-:host(:focus-within) gx-ide-top-bar::part(wrapper) {
-  background-color: var(--color-secondary-enabled);
-}
-
-/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
-.gx-ide-main-wrapper {
-  color: var(--gx-ide-component-text-color);
-  font-weight: var(--mer-font__weight--regular);
-  font-size: var(--mer-font__size--xs);
-  font-family: var(--mer-font-family--primary);
-  height: 100%;
-  background-color: var(--gx-ide-component-background-color);
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  box-sizing: border-box;
-}
-
-/*This is the main element. This is the one that take the remaining vertical space*/
-.gx-ide-main {
-  flex-grow: 1;
-  overflow-y: auto;
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-}
-.gx-ide-main::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
-  height: var(--gxg-scrollbar-width);
-}
-.gx-ide-main::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
-}
-.gx-ide-main::-webkit-scrollbar-thumb {
-  background-color: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
-}
-.gx-ide-main::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
-}
-.gx-ide-main::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-
-.gx-ide-overflow {
-  overflow-y: auto;
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-}
-.gx-ide-overflow::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
-  height: var(--gxg-scrollbar-width);
-}
-.gx-ide-overflow::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
-}
-.gx-ide-overflow::-webkit-scrollbar-thumb {
-  background-color: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
-}
-.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
-}
-.gx-ide-overflow::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-
-.tree-view-primary {
-  font-size: var(--mer-font__size--2xs);
-}
-
-p {
-  margin: 0;
-  font-size: var(--mer-font__size--xxs);
-}
-
-/* - - - - - - - - - - - - - - - - - -
-New : For Mercury
-- - - - - - - - - - - - - - - - - - */
-.buttons-container {
+.header__buttons-container {
+  grid-area: buttons-container;
   display: flex;
-  gap: var(--mer-spacing--xs);
+  gap: var(--mer-spacing--sm);
 }
-
-/*Gx Ide*/
-/*@container queries*/
-/* hiChar styles
-Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
-*/
-/*general*/
-.tree-view-container {
-  display: flex;
+.header__checkboxes {
+  grid-area: checkboxes;
+  grid-template-columns: max-content 1fr;
 }
 
-/*Header*/
-.header__top {
-  border-top: 1px solid var(--gx-ide-container-border-color);
-  display: grid;
-  padding: var(--gx-ide-container__padding) var(--gx-ide-container__padding) 0 var(--gx-ide-container__padding);
-  gap: var(--gx-ide-grid-column-gap);
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "select-directory export-cancel-buttons-group options-btn";
-}
-.header__top .select-directory {
-  grid-area: select-directory;
-}
-.header__top .export-cancel-buttons-group {
-  grid-area: export-cancel-buttons-group;
-}
-.header__top .options-btn {
-  grid-area: options-btn;
-}
-.header__bottom .checkboxes-wrapper {
-  padding: var(--gx-ide-grid-column-gap);
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gx-ide-grid-column-gap);
-}
-.header__bottom .checkboxes-wrapper .add-checkbox {
-  display: flex;
+.main {
+  grid-area: main;
+  position: relative;
 }
 
-/*Main*/
-.tree-container {
-  block-size: 100%;
-  padding: var(--tree-container-padding);
-}
-.tree-container--empty {
-  align-items: center;
-  justify-content: center;
-}
-.tree-container .gx-ide-message {
-  padding: 100px 0;
+.footer {
+  grid-area: footer;
+  justify-content: space-between;
 }
-
-gxg-text {
-  block-size: 100%;
+.footer .clear-btn {
+  margin-inline-end: auto;
 }