@genexus/genexus-ide-ui 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-empty-state.cjs.entry.js +3 -2
  3. package/dist/cjs/gx-ide-empty-state.cjs.entry.js.map +1 -1
  4. package/dist/cjs/gx-ide-kb-manager-export.cjs.entry.js +272 -293
  5. package/dist/cjs/gx-ide-kb-manager-export.cjs.entry.js.map +1 -1
  6. package/dist/cjs/gx-ide-loader.cjs.entry.js +1 -1
  7. package/dist/cjs/gx-ide-loader.cjs.entry.js.map +1 -1
  8. package/dist/cjs/gx-ide-recent-news.cjs.entry.js +1 -1
  9. package/dist/cjs/gx-ide-recent-news.cjs.entry.js.map +1 -1
  10. package/dist/cjs/gx-ide-start-page.cjs.entry.js +4 -3
  11. package/dist/cjs/gx-ide-start-page.cjs.entry.js.map +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/collection-manifest.json +1 -1
  14. package/dist/collection/components/_helpers/empty-state/gx-ide-empty-state.css +5 -1
  15. package/dist/collection/components/_helpers/empty-state/gx-ide-empty-state.js +20 -1
  16. package/dist/collection/components/_helpers/empty-state/gx-ide-empty-state.js.map +1 -1
  17. package/dist/collection/components/_helpers/ide-loader/ide-loader.css +2 -2
  18. package/dist/collection/components/kb-manager-export/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.en.json +3 -3
  19. package/dist/collection/components/kb-manager-export/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.ja.json +4 -4
  20. package/dist/collection/components/kb-manager-export/helpers.js +64 -105
  21. package/dist/collection/components/kb-manager-export/helpers.js.map +1 -1
  22. package/dist/collection/components/kb-manager-export/kb-manager-export.css +19 -618
  23. package/dist/collection/components/kb-manager-export/kb-manager-export.js +345 -377
  24. package/dist/collection/components/kb-manager-export/kb-manager-export.js.map +1 -1
  25. package/dist/collection/components/kb-manager-export/types.js +2 -0
  26. package/dist/collection/components/kb-manager-export/types.js.map +1 -0
  27. package/dist/collection/components/start-page/recent-news.js +1 -1
  28. package/dist/collection/components/start-page/recent-news.js.map +1 -1
  29. package/dist/collection/components/start-page/start-page.js +4 -3
  30. package/dist/collection/components/start-page/start-page.js.map +1 -1
  31. package/dist/components/gx-ide-empty-state2.js +4 -2
  32. package/dist/components/gx-ide-empty-state2.js.map +1 -1
  33. package/dist/components/gx-ide-kb-manager-export.js +294 -314
  34. package/dist/components/gx-ide-kb-manager-export.js.map +1 -1
  35. package/dist/components/gx-ide-start-page.js +4 -3
  36. package/dist/components/gx-ide-start-page.js.map +1 -1
  37. package/dist/components/ide-loader.js +1 -1
  38. package/dist/components/ide-loader.js.map +1 -1
  39. package/dist/components/recent-news.js +1 -1
  40. package/dist/components/recent-news.js.map +1 -1
  41. package/dist/esm/genexus-ide-ui.js +1 -1
  42. package/dist/esm/gx-ide-empty-state.entry.js +3 -2
  43. package/dist/esm/gx-ide-empty-state.entry.js.map +1 -1
  44. package/dist/esm/gx-ide-kb-manager-export.entry.js +273 -294
  45. package/dist/esm/gx-ide-kb-manager-export.entry.js.map +1 -1
  46. package/dist/esm/gx-ide-loader.entry.js +1 -1
  47. package/dist/esm/gx-ide-loader.entry.js.map +1 -1
  48. package/dist/esm/gx-ide-recent-news.entry.js +1 -1
  49. package/dist/esm/gx-ide-recent-news.entry.js.map +1 -1
  50. package/dist/esm/gx-ide-start-page.entry.js +4 -3
  51. package/dist/esm/gx-ide-start-page.entry.js.map +1 -1
  52. package/dist/esm/loader.js +1 -1
  53. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  54. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  55. package/dist/genexus-ide-ui/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.en.json +3 -3
  56. package/dist/genexus-ide-ui/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.ja.json +4 -4
  57. package/dist/genexus-ide-ui/p-2cb766ce.entry.js +493 -0
  58. package/dist/genexus-ide-ui/p-2cb766ce.entry.js.map +1 -0
  59. package/dist/genexus-ide-ui/{p-f924f02a.entry.js → p-64101478.entry.js} +2 -2
  60. package/dist/genexus-ide-ui/p-64101478.entry.js.map +1 -0
  61. package/dist/genexus-ide-ui/{p-f220c75a.entry.js → p-885302c2.entry.js} +11 -6
  62. package/dist/genexus-ide-ui/p-885302c2.entry.js.map +1 -0
  63. package/dist/genexus-ide-ui/{p-eb49e4f1.entry.js → p-8ff5da93.entry.js} +36 -31
  64. package/dist/genexus-ide-ui/p-8ff5da93.entry.js.map +1 -0
  65. package/dist/genexus-ide-ui/{p-dd07e68a.entry.js → p-a6b76120.entry.js} +2 -2
  66. package/dist/genexus-ide-ui/p-a6b76120.entry.js.map +1 -0
  67. package/dist/types/components/_helpers/empty-state/gx-ide-empty-state.d.ts +4 -0
  68. package/dist/types/components/kb-manager-export/helpers.d.ts +33 -5
  69. package/dist/types/components/kb-manager-export/kb-manager-export.d.ts +36 -98
  70. package/dist/types/components/kb-manager-export/types.d.ts +21 -0
  71. package/dist/types/components.d.ts +16 -40
  72. package/package.json +4 -4
  73. package/dist/genexus-ide-ui/p-b3baa3d2.entry.js +0 -491
  74. package/dist/genexus-ide-ui/p-b3baa3d2.entry.js.map +0 -1
  75. package/dist/genexus-ide-ui/p-dd07e68a.entry.js.map +0 -1
  76. package/dist/genexus-ide-ui/p-eb49e4f1.entry.js.map +0 -1
  77. package/dist/genexus-ide-ui/p-f220c75a.entry.js.map +0 -1
  78. package/dist/genexus-ide-ui/p-f924f02a.entry.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"names":["KB_PROPERTY","KB_OBJECT","getPropertyIcon","typeId","kbPropertiesTypes","propertyType","find","id","icon","undefined","convertObjectTypeToTreeItem","objectType","caption","name","startImgSrc","leaf","parts","expanded","items","convertObjectToTreeItem","object","objectTypes","get","metadata","findObjectInTree","actualTreeState","objectTreeItemInfo","objectExists","objectTypeIndex","objectTypeTreeItemIndex","findIndex","objectTypeTreeItem","objectFound","_a","objectTreeItem","findPropertyInTree","property","updatedTreeData","found","node","convertPropertyToTreeItem","updateTreeModelWithObjects","objects","forEach","push","objectAsTreeItem","convertKbPropertiesDataToTreeItemData","properties","propertyAlreadyExists","propertyTreeItem","unshift","clearKbPropertiesFromTree","kBPropertiesData","length","kBPropertiesDataIds","map","treeModelWithoutKbProperties","filter","item","includes","kbManagerExportCss","CSS_BUNDLES","GxIdeKbManagerExport","this","checkedPropertiesIds","renderedFirstTime","flattenedObjectTypes","Map","evaluateObjects","noObjects","treeModel","optionsCallbackHandler","optionsCallback","addKBPropertiesCallbackHandler","async","e","checked","detail","value","addKbPropertiesIsChecked","addKBPropertiesCallback","newTreeModel","objectsWithoutProperties","addObjectsCallbackHandler","addObjectsCallback","updateObjects","addReferencesCallbackHandler","addReferencesCallback","checkedObjectsIds","objectsTreeCheckedItemsChangedHandler","event","allItemsWithCheckbox","values","exportCallbackHandler","exportCallback","exportingIsInProcess","exportAllChecked","exportAllCheckboxEl","fileName","fileNameEl","checkedKbPropertiesIds","checkedObjectIds","then","cancelCallbackHandler","cancelCallback","cancelled","clearButtonHandler","objectsTreeEl","updateAllItemsProperties","exportAllChangedHandler","exportAllIsChecked","evaluateTreeViewFilters","evaluateContentToDisplay","renderMessage","h","model","dragDisabled","dropDisabled","toggleCheckboxes","checkbox","filterType","onCheckedItemsChange","ref","el","class","nothingToDisplay","textAlign","config","gxgMessage","common","padding","type","maxWidth","part","_componentLocale","main","noObjectsToDisplay","onClick","beginByADdingSomeObjects","exportAllMessage","clearButtonDisabledConditions","checkedItems","loaderCancelCallbackHandler","onClickCancelCallbackHandler","watchTreeModelHandler","newState","watchExportingIsInProcessHandler","isExporting","loader","loaderEl","show","watchObjectTypesHandler","flattenObjectTypes","componentWillLoad","Locale","getComponentStrings","componentDidLoadEvent","emit","componentDidLoad","focus","componentDidRender","componentDidRenderFirstTime","componentName","set","render","Host","noContentPadding","noHeadingPadding","headingPaddingTop","containerTitle","displayTitle","slimmerFooter","gxIdeContainer","slot","label","header","exportFileName","iconPosition","reduced","disabled","exportButton","cancelButton","optionsButton","addKnowledgeBaseDescription","onChange","exportAll","footer","clearButton","referencesButton","addButton","cancelLabel","container","loaderTitle","title"],"sources":["src/components/kb-manager-export/helpers.ts","src/components/kb-manager-export/kb-manager-export.scss?tag=gx-ide-kb-manager-export&encapsulation=shadow","src/components/kb-manager-export/kb-manager-export.tsx"],"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","@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n/*general*/\n.tree-view-container {\n display: flex;\n}\n\n/*Header*/\n.header {\n &__top {\n border-top: 1px solid var(--gx-ide-container-border-color);\n //border-bottom: 1px solid var(--gx-ide-container-border-color);\n display: grid;\n padding: var(--gx-ide-container__padding) var(--gx-ide-container__padding) 0\n var(--gx-ide-container__padding);\n gap: var(--gx-ide-grid-column-gap);\n grid-template-columns: 1fr auto;\n grid-template-areas: \"select-directory export-cancel-buttons-group options-btn\";\n\n .select-directory {\n grid-area: select-directory;\n }\n .export-cancel-buttons-group {\n grid-area: export-cancel-buttons-group;\n }\n .options-btn {\n grid-area: options-btn;\n }\n }\n &__bottom {\n .checkboxes-wrapper {\n padding: var(--gx-ide-grid-column-gap);\n display: flex;\n flex-wrap: wrap;\n gap: var(--gx-ide-grid-column-gap);\n\n .add-checkbox {\n display: flex;\n }\n }\n }\n}\n\n/*Main*/\n.tree-container {\n block-size: 100%;\n padding: var(--tree-container-padding);\n &--empty {\n align-items: center;\n justify-content: center;\n }\n @include gx-ide-message(\"tall\");\n}\n\ngxg-text {\n block-size: 100%;\n}\n\n// @keyframes toggleTreeObjectsVisibility {\n// 0% {\n// opacity: 1;\n// }\n// 100% {\n// opacity: 0;\n// }\n// }\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n Element,\n State,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* Tree View */\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\nimport { TreeViewItemModelExtended } from \"@genexus/chameleon-controls-library\";\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport {\n TextAlign,\n TextPadding,\n TextType\n} from \"@genexus/gemini/dist/types/components/text/text\";\nimport { CheckboxInfo } from \"@genexus/gemini/dist/types/components/form-checkbox/form-checkbox\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport {\n updateTreeModelWithObjects,\n convertKbPropertiesDataToTreeItemData,\n clearKbPropertiesFromTree\n} from \"./helpers\";\nimport { ObjectType } from \"../../common/types\";\n\nimport { KB_PROPERTY, KB_OBJECT } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/typography\",\n \"components/button\",\n \"components/checkbox\",\n \"components/edit\",\n \"components/tree-view\"\n];\n@Component({\n tag: \"gx-ide-kb-manager-export\",\n styleUrl: \"kb-manager-export.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/kb-manager-export\"]\n})\nexport class GxIdeKbManagerExport {\n // 1.OWN PROPERTIES //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n private checkedPropertiesIds: string[] = [];\n private renderedFirstTime = false;\n private flattenedObjectTypes: Map<string, ObjectType> = new Map();\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeKbManagerExportElement;\n\n private fileNameEl!: HTMLGxgFormTextElement;\n private exportAllCheckboxEl!: HTMLGxgFormCheckboxElement;\n private objectsTreeEl!: HTMLChTreeViewRenderElement;\n private loaderEl!: HTMLGxgIdeLoaderElement;\n private kBPropertiesData!: KBPropertyData[];\n\n // 3.STATE() VARIABLES //\n\n @State() exportAllIsChecked = false;\n @State() addKbPropertiesIsChecked = false;\n @State() checkedObjectsIds: string[] = [];\n @State() noObjects: boolean;\n\n @State() treeModel: TreeViewItemModel[] = [];\n @Watch(\"treeModel\")\n watchTreeModelHandler(newState: TreeViewItemModel[]) {\n this.noObjects = !!(newState.length === 0 || !newState);\n }\n\n @State() exportingIsInProcess = false;\n @Watch(\"exportingIsInProcess\")\n watchExportingIsInProcessHandler(isExporting: boolean) {\n if (isExporting && this.loader) {\n this.loaderEl.show = true;\n } else if (!isExporting && this.loader) {\n this.loaderEl.show = false;\n }\n }\n\n // 4.PUBLIC PROPERTY API //\n\n /**\n * If true it displays the component title on the header\n */\n @Prop() readonly displayTitle = false;\n\n /**\n * It allows defining the default Export File Name\n */\n @Prop() readonly fileName: string;\n\n /**\n * If true, it will display a loader when needed.\n */\n @Prop() readonly loader = false;\n\n /**\n * Array with the possible types of KB properties\n */\n @Prop() readonly kbPropertiesTypes: KBPropertyType[];\n\n /**\n * Array of possible object types\n */\n @Prop() readonly objectTypes: ObjectType[];\n @Watch(\"objectTypes\")\n watchObjectTypesHandler(newState: ObjectType[]) {\n this.flattenObjectTypes(newState);\n }\n\n /**\n * Callback invoked when the user wants to access the export options.\n */\n @Prop() readonly exportFileDirectoryCallback: ExportFileDirectoryCallback;\n\n /**\n * Callback invoked when the user wants to access the export options.\n */\n @Prop() readonly optionsCallback: OptionsCallback;\n\n /**\n * Callback invoked when the user wants to include KB properties.\n */\n @Prop() readonly addKBPropertiesCallback: KBPropertiesCallback;\n\n /**\n *Callback invoked when the user wants to add all the references for the selected objects.\n *@param itemIds:string[] The selected item ids\n *@returns : Returns an object with the items and its references\n */\n @Prop() readonly addReferencesCallback: AddReferencesCallback;\n\n /**\n * Callback invoked when the user wants to add objects.\n */\n @Prop() readonly addObjectsCallback: AddObjectsCallback;\n\n /**\n *Callback invoked when the user wants to initiate the export process.\n *@param fileName:string\n *@param itemIds:string[] The selected item ids\n *@returns : It returns a boolean indicating whether the process was successful\n */\n @Prop() readonly exportCallback: ExportCallback;\n\n /**\n * Callback invoked when the user wants to cancel the export process.\n * @returns It returns a boolean indicating whether the process could be canceled or not.\n */\n @Prop() readonly cancelCallback: CancelCallback;\n\n // 5.EVENTS (EMIT) //\n\n /**\n * This event is emitted once just after the component is fully loaded and the first render() occurs.\n */\n @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n /**\n * This event is emitted once just after the component is fully loaded and the first render() occurs\n */\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.componentDidLoadEvent.emit(true);\n this.evaluateObjects();\n this.flattenObjectTypes(this.objectTypes);\n }\n\n componentDidLoad() {\n this.fileNameEl.focus();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateObjects = () => {\n this.noObjects = !!(this.treeModel?.length === 0 || !this.treeModel);\n };\n\n private optionsCallbackHandler = () => {\n if (this.optionsCallback) {\n this.optionsCallback();\n // returns Promise<void>\n }\n };\n\n private addKBPropertiesCallbackHandler = async (e: CustomEvent) => {\n const checked = e.detail.value;\n this.addKbPropertiesIsChecked = checked;\n if (checked && this.addKBPropertiesCallback) {\n this.kBPropertiesData = await this.addKBPropertiesCallback();\n if (this.kBPropertiesData.length === 0) {\n // nothing to do\n } else {\n // 'convertObjectDataToTreeItemData' can be used for converting KBPropertiesData as well, because the two types share the same properties\n const newTreeModel = convertKbPropertiesDataToTreeItemData(\n this.kBPropertiesData,\n this.kbPropertiesTypes,\n this.treeModel\n );\n this.treeModel = newTreeModel;\n }\n } else if (!checked) {\n // previous properties (if any) should be removed\n const objectsWithoutProperties = clearKbPropertiesFromTree(\n this.kBPropertiesData,\n this.treeModel\n );\n this.treeModel = objectsWithoutProperties;\n }\n };\n\n private addObjectsCallbackHandler = async () => {\n if (this.addObjectsCallback) {\n const objects: ObjectData[] = await this.addObjectsCallback();\n this.updateObjects(objects);\n }\n };\n\n private addReferencesCallbackHandler = async () => {\n if (this.addReferencesCallback) {\n const objects: ObjectData[] = await this.addReferencesCallback(\n this.checkedObjectsIds\n );\n this.updateObjects(objects);\n }\n };\n\n /*\n * Used to update objects. Objects are updated when calling the 'addObjectsCallback' or 'addReferencesCallback'\n */\n private updateObjects = (objects: ObjectData[]) => {\n if (objects.length) {\n const newTreeModel = updateTreeModelWithObjects(\n objects,\n this.flattenedObjectTypes,\n this.treeModel\n );\n this.treeModel = newTreeModel;\n }\n };\n\n /*\n * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'\n */\n private objectsTreeCheckedItemsChangedHandler = (\n event: CustomEvent<Map<string, TreeViewItemModelExtended>>\n ) => {\n // filter 'checked objects' and 'checked properties' ids\n const checkedObjectsIds: string[] = [];\n const checkedPropertiesIds: string[] = [];\n const allItemsWithCheckbox = [...event.detail.values()];\n allItemsWithCheckbox.forEach(node => {\n if (node.item.checked && node.item.metadata === KB_OBJECT) {\n checkedObjectsIds.push(node.item.id);\n } else if (node.item.checked && node.item.metadata === KB_PROPERTY) {\n checkedPropertiesIds.push(node.item.id);\n }\n });\n this.checkedObjectsIds = checkedObjectsIds;\n this.checkedPropertiesIds = checkedPropertiesIds;\n };\n\n private exportCallbackHandler = async () => {\n if (this.exportCallback) {\n this.exportingIsInProcess = true;\n const exportAllChecked = this.exportAllCheckboxEl.checked;\n const fileName: string = this.fileNameEl.value;\n const checkedKbPropertiesIds = this.addKbPropertiesIsChecked\n ? this.checkedPropertiesIds\n : [];\n const checkedObjectIds = exportAllChecked\n ? undefined\n : this.checkedObjectsIds;\n this.exportCallback(\n fileName,\n checkedKbPropertiesIds,\n checkedObjectIds\n ).then(() => {\n this.exportingIsInProcess = false;\n });\n // returns Promise<boolean> but no procedure was detailed on the spec.\n }\n };\n\n private cancelCallbackHandler = async () => {\n if (this.cancelCallback) {\n const cancelled = await this.cancelCallback();\n if (cancelled) {\n this.exportingIsInProcess = false;\n }\n }\n };\n\n private clearButtonHandler = () => {\n /* revisar*/\n this.objectsTreeEl.updateAllItemsProperties({ checked: false });\n };\n\n private exportAllChangedHandler = (event: CustomEvent<CheckboxInfo>) => {\n this.exportAllIsChecked = event.detail.value;\n };\n\n private flattenObjectTypes(newState: ObjectType[]) {\n newState.forEach(objectType => {\n this.flattenedObjectTypes.set(objectType.id, objectType);\n });\n }\n\n private evaluateTreeViewFilters = (): string => {\n if (this.addKbPropertiesIsChecked && this.exportAllIsChecked) {\n // only show properties\n return KB_PROPERTY;\n } else if (!this.addKbPropertiesIsChecked && !this.exportAllIsChecked) {\n // only show objects\n return KB_OBJECT;\n }\n return \"none\"; // Applies if !this.addKbPropertiesIsChecked && this.exportAllIsChecked\n };\n\n private evaluateContentToDisplay = () => {\n // Nothing to display on the tree-view\n if (this.noObjects) {\n return this.renderMessage(true);\n }\n\n // The tree should be empty, because all filters are being applied.\n // Display a message to prevent a white screen.\n if (!this.addKbPropertiesIsChecked && this.exportAllIsChecked) {\n return this.renderMessage(false);\n }\n\n return (\n <ch-tree-view-render\n model={this.treeModel}\n dragDisabled={true}\n dropDisabled={true}\n toggleCheckboxes={true}\n checked={true}\n checkbox={true}\n filter={this.evaluateTreeViewFilters()}\n filterType={\n this.addKbPropertiesIsChecked && !this.exportAllIsChecked\n ? \"none\"\n : \"metadata\"\n }\n onCheckedItemsChange={this.objectsTreeCheckedItemsChangedHandler}\n ref={el => (this.objectsTreeEl = el as HTMLChTreeViewRenderElement)}\n show-lines=\"last\"\n class=\"tree-view\"\n ></ch-tree-view-render>\n );\n };\n\n private renderMessage = (nothingToDisplay: boolean) => {\n return (\n <gxg-text\n textAlign={config.gxgMessage.common.textAlign as TextAlign}\n padding={config.gxgMessage.common.textAlign as TextPadding}\n type={config.gxgMessage.common.type as TextType}\n maxWidth={config.gxgMessage.common.maxWidth}\n class=\"gx-ide-message gx-ide-message--short\"\n part=\"referenced-by-empty-status-message\"\n >\n {nothingToDisplay ? (\n [\n <span>{this._componentLocale.main.noObjectsToDisplay}</span>,\n <gxg-text\n type=\"text-link-no-line\"\n textAlign=\"center\"\n onClick={this.addObjectsCallbackHandler}\n >\n {this._componentLocale.main.beginByADdingSomeObjects}\n </gxg-text>\n ]\n ) : (\n <span>{this._componentLocale.main.exportAllMessage}</span>\n )}\n </gxg-text>\n );\n };\n\n private clearButtonDisabledConditions = (): boolean => {\n const checkedItems = this.treeModel.filter(item => {\n return item.checked;\n });\n return checkedItems.length === 0;\n };\n\n private loaderCancelCallbackHandler = async () => {\n this.cancelCallbackHandler();\n };\n\n private onClickCancelCallbackHandler = async () => {\n this.cancelCallbackHandler();\n };\n\n // 10.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n noContentPadding\n noHeadingPadding\n headingPaddingTop\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <header slot=\"header\" class=\"header\">\n {/* header top */}\n <div class=\"header__top\">\n {/* export file name*/}\n <gxg-form-text\n class={{ \"select-file-input\": true }}\n value={this.fileName}\n part=\"xpz-file\"\n label={this._componentLocale.header.exportFileName}\n ref={el => (this.fileNameEl = el as HTMLGxgFormTextElement)}\n icon=\"gemini-tools/file\"\n iconPosition=\"start\"\n ></gxg-form-text>\n {/* export button / cancel button*/}\n <gxg-buttons-container\n reduced\n class=\"export-cancel-buttons-group\"\n >\n <gxg-button\n id=\"export-kb-btn\"\n part=\"export-btn\"\n onClick={this.exportCallbackHandler}\n disabled={this.noObjects}\n >\n {this._componentLocale.header.exportButton}\n </gxg-button>\n <gxg-button\n id=\"cancel-kb-export-btn\"\n part=\"cancel-button\"\n onClick={this.onClickCancelCallbackHandler}\n disabled={!this.exportingIsInProcess || this.noObjects}\n >\n {this._componentLocale.header.cancelButton}\n </gxg-button>\n </gxg-buttons-container>\n {/* settings/options button*/}\n <gxg-button\n type=\"secondary-icon-only\"\n icon=\"gemini-tools/settings\"\n part=\"select-kb-btn\"\n class={{ \"options-btn\": true }}\n onClick={this.optionsCallbackHandler}\n >\n {this._componentLocale.header.optionsButton}\n </gxg-button>\n </div>\n {/* header bottom */}\n <div class=\"header__bottom\">\n <div class={{ \"checkboxes-wrapper\": true }}>\n {/* checkboxes */}\n <gxg-form-checkbox\n label={\n this._componentLocale.main.addKnowledgeBaseDescription\n }\n onChange={this.addKBPropertiesCallbackHandler}\n part=\"add-kb-checkbox\"\n ></gxg-form-checkbox>\n <gxg-form-checkbox\n label={this._componentLocale.main.exportAll}\n part=\"export-all-checkbox\"\n ref={el =>\n (this.exportAllCheckboxEl =\n el as HTMLGxgFormCheckboxElement)\n }\n onChange={this.exportAllChangedHandler}\n ></gxg-form-checkbox>\n </div>\n </div>\n </header>\n\n {/* main */}\n\n <div\n class={{\n \"tree-container\": true,\n \"tree-container--empty\":\n this.noObjects ||\n (!this.noObjects &&\n this.exportAllIsChecked &&\n !this.addKbPropertiesIsChecked)\n // \"tree-container--export-all\": this.exportAllIsChecked\n }}\n >\n {this.evaluateContentToDisplay()}\n </div>\n\n {/* footer */}\n {/* clear 'button' */}\n <gxg-text\n type=\"button-like\"\n part=\"export-button\"\n slot=\"footer-start\"\n onClick={this.clearButtonHandler}\n disabled={this.clearButtonDisabledConditions()}\n >\n {this._componentLocale.footer.clearButton}\n </gxg-text>\n {/* references button */}\n <gxg-button\n onClick={this.addReferencesCallbackHandler}\n type=\"outlined-text-icon\"\n icon=\"general/references\"\n part=\"export-button\"\n class={{ \"cancel-btn\": true }}\n disabled={this.exportAllIsChecked}\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.referencesButton}\n </gxg-button>\n {/* add button */}\n <gxg-button\n type=\"primary-text-icon\"\n icon=\"menus/new-object\"\n part=\"export-button\"\n class={{ \"cancel-btn\": true }}\n onClick={this.addObjectsCallbackHandler}\n disabled={this.exportAllIsChecked}\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.addButton}\n </gxg-button>\n </gx-ide-container>\n </div>\n {this.loader && false ? (\n <gxg-ide-loader\n cancelLabel={this._componentLocale.loader.cancelLabel}\n container={this.el}\n loaderTitle={this._componentLocale.loader.title}\n ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n cancelCallback={this.loaderCancelCallbackHandler}\n ></gxg-ide-loader>\n ) : null}\n </Host>\n );\n }\n}\n\n/* Kb Property*/\nexport type KBPropertiesCallback = () => Promise<KBPropertyData[]>;\nexport type KBPropertyData = {\n typeId: string;\n id: string;\n name: string;\n};\nexport type KBPropertyType = {\n id: string;\n icon: string;\n};\n\n/* Objects */\nexport type ObjectData = {\n typeId: string;\n id: string;\n name: string;\n};\n\n/* Callbacks*/\nexport type ExportFileDirectoryCallback = () => Promise<string>;\n\nexport type OptionsCallback = () => Promise<void>;\n\nexport type AddObjectsCallback = () => Promise<ObjectData[]>;\n\nexport type ExportCallback = (\n fileName: string,\n checkedKbPropertiesIds: string[],\n checkedObjectIds: string[]\n) => Promise<boolean>;\n\nexport type AddReferencesCallback = (\n objectIds: string[]\n) => Promise<ObjectData[]>;\n\nexport type CancelCallback = () => Promise<boolean>;\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["ideLoaderCss","CSS_BUNDLES","IdeLoader","_IdeLoader_timeoutReference","set","this","_IdeLoader_cancelProcess","cancelCallback","clearTimeout","__classPrivateFieldGet","show","_IdeLoader_renderCancelButton","cancelLabel","h","class","type","onClick","_IdeLoader_renderDescription","description","_IdeLoader_renderTitle","loaderTitle","render","Host","model","showWrapper","part","popover","call"],"sources":["src/components/_helpers/ide-loader/ide-loader.scss?tag=gx-ide-loader&encapsulation=shadow","src/components/_helpers/ide-loader/ide-loader.tsx"],"sourcesContent":["$animation: fadeIn var(--mer-timing--fast) forwards;\n\n.loader {\n &__wrapper {\n position: absolute;\n border: none;\n opacity: 0;\n transition: var(--show-transition) opacity;\n inline-size: 100%;\n block-size: 100%;\n display: flex;\n background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n padding: var(--gxg-ide-loader-wrapper__padding);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n color: var(--gxg-ide-loader-wrapper__color);\n z-index: 99; // WA to prevent tree-view chevron arrow to appear above.\n\n &--visible {\n opacity: 1;\n }\n }\n &__spinner {\n border: var(--gxg-ide-loader-spinner__border);\n border-block-start: var(--gxg-ide-loader-spinner__border-top);\n border-radius: 50%;\n animation: spinner 0.6s infinite linear;\n inline-size: var(--gxg-ide-loader-spinner__width);\n block-size: var(--gxg-ide-loader-spinner__width);\n flex-shrink: 0;\n opacity: 1;\n }\n\n &__content-wrapper {\n display: flex;\n text-align: center;\n flex-direction: column;\n margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n gap: var(--mer-spacing--xs);\n max-block-size: var(--gxg-ide-loader-content-wrapper__max-width);\n &--hidden {\n display: none;\n }\n animation: $animation;\n opacity: 1;\n }\n}\n\n/*background color animation*/\n@keyframes wrapper {\n 0% {\n background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n }\n 100% {\n background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(359deg);\n }\n}\n\n:host([display-border]) {\n .loader {\n &__wrapper {\n border: 1px solid var(--mer-color__elevation--02);\n }\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"utils/typography\"\n];\n@Component({\n tag: \"gx-ide-loader\",\n styleUrl: \"ide-loader.scss\",\n shadow: true\n})\nexport class IdeLoader {\n #timeoutReference: ReturnType<typeof setTimeout>;\n\n /**\n * shows the '.loader-wrapper'\n */\n @State() showWrapper = true;\n\n /**\n * The time the loader will await before abort.\n */\n @Prop() readonly abortTime: number = 5 * 60 * 1000; // 5 minutes\n\n /**\n * The cancel callback\n */\n @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n /**\n * The cancel button label (optional)\n */\n @Prop() readonly cancelLabel: string;\n\n /**\n * The loader description (optional)\n */\n @Prop() readonly description: string;\n\n /**\n * Displays a border all around\n */\n @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n /**\n * The loader title (optional)\n */\n @Prop() readonly loaderTitle: string;\n\n /**\n * It shows the loader\n */\n @Prop({ mutable: true }) show = false;\n\n /**\n * This event is emitted when \"show\" is false.\n */\n @Event() loaderFinished: EventEmitter<void>;\n\n #cancelProcess = (): void => {\n if (this.cancelCallback) {\n this.cancelCallback();\n }\n clearTimeout(this.#timeoutReference);\n this.show = false;\n };\n\n #renderCancelButton = (): HTMLButtonElement | null =>\n this.cancelLabel && (\n <div>\n <button\n class=\"button-secondary\"\n type=\"button\"\n onClick={this.#cancelProcess}\n >\n {this.cancelLabel}\n </button>\n </div>\n );\n\n #renderDescription = (): HTMLParagraphElement | null =>\n this.description && <p class=\"text-body-italic-s\">{this.description}</p>;\n\n #renderTitle = (): HTMLParagraphElement | null =>\n this.loaderTitle && <p class=\"text-body-regular-m\">{this.loaderTitle}</p>;\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n {this.show && (\n <div\n class={{\n [`loader__wrapper`]: true,\n \"loader__wrapper--visible\": this.showWrapper\n }}\n part=\"loader-wrapper\"\n popover=\"\"\n >\n <div class=\"loader__spinner\"></div>\n <div\n class={{\n \"loader__content-wrapper\": true,\n \"loader__content-wrapper--hidden\":\n !this.description && !this.loaderTitle && !this.cancelLabel\n }}\n >\n {this.#renderTitle()}\n {this.#renderDescription()}\n {this.#renderCancelButton()}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"],"mappings":";;AAAA,MAAMA,IAAe;;;;;;;;;;ACYrB,MAAMC,IAA8B,EAClC,qBACA,qBACA;;MAOWC,IAAS;;;;IACpBC,EAAAC,IAAAC,WAAA;IA+CAC,EAAAF,IAAAC,OAAiB;MACf,IAAIA,KAAKE,gBAAgB;QACvBF,KAAKE;;MAEPC,aAAaC,EAAAJ,MAAIF,GAAA;MACjBE,KAAKK,OAAO;AAAK;IAGnBC,EAAAP,IAAAC,OAAsB,MACpBA,KAAKO,eACHC,EAAA,aACEA,EAAA;MACEC,OAAM;MACNC,MAAK;MACLC,SAASP,EAAAJ,MAAIC,GAAA;OAEZD,KAAKO;IAKdK,EAAAb,IAAAC,OAAqB,MACnBA,KAAKa,eAAeL,EAAA;MAAGC,OAAM;OAAsBT,KAAKa;IAE1DC,EAAAf,IAAAC,OAAe,MACbA,KAAKe,eAAeP,EAAA;MAAGC,OAAM;OAAuBT,KAAKe;uBAnEpC;qBAKc,IAAI,KAAK;;;;yBAoBa;;gBAU3B;;EAkChC,MAAAC;IACE,OACER,EAACS,GAAI,MACHT,EAAA;MAAUU,OAAOtB;QAChBI,KAAKK,QACJG,EAAA;MACEC,OAAO;QACL,CAAC,oBAAoB;QACrB,4BAA4BT,KAAKmB;;MAEnCC,MAAK;MACLC,SAAQ;OAERb,EAAA;MAAKC,OAAM;QACXD,EAAA;MACEC,OAAO;QACL,2BAA2B;QAC3B,oCACGT,KAAKa,gBAAgBb,KAAKe,gBAAgBf,KAAKO;;OAGnDH,EAAAJ,MAAIc,GAAA,KAAaQ,KAAjBtB,OACAI,EAAAJ,MAAIY,GAAA,KAAmBU,KAAvBtB,OACAI,EAAAJ,MAAIM,GAAA,KAAoBgB,KAAxBtB"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["startPageCss","CSS_BUNDLES","KB_ICON","getIconPath","category","name","FOLDER_ICON","colorType","GxIdeStartPage","_GxIdeStartPage_recentKbsFilter","set","this","_GxIdeStartPage_kbsFilterValue","_GxIdeStartPage_evaluateRenderKbs","_a","kbs","length","__classPrivateFieldGet","_GxIdeStartPage_renderKbs","call","h","class","stateIconSrc","stateTitle","_componentLocale","emptyState","title","stateDescription","description","_GxIdeStartPage_filterKbs","filteredKbs","filter","kb","toLowerCase","includes","_GxIdeStartPage_getNewsCallbackRecentNews","async","Promise","resolve","news","getNewsCallback","_GxIdeStartPage_openKbHandler","e","kbId","currentTarget","id","openKbCallback","_GxIdeStartPage_renderKb","formattedDate","formatDate","lastOpenedDate","dateCaption","recentKbs","lastOpened","toLocaleLowerCase","_b","key","type","onClick","src","config","headingsClasses","cardSmall","hiChar","map","noKbsFiltered","_GxIdeStartPage_searchKbsInputHandler","event","__classPrivateFieldSet","target","value","_GxIdeStartPage_searchNewsInputHandler","newsFilterValue","watchNews","newsFilterThreshold","displayNewsFilter","kbsChanged","loadingKbs","kbsFilterThreshold","displayKbsFilter","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","focus","render","Host","model","cardRegular","placeholder","onInput","ref","disabled","loaderTitle","loader","show","recentNews","inputPlaceholder","_c","openNewsCallback","filterValue"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../global/reset.scss\";\n\n@include hiChar();\n\n:host {\n overflow: auto;\n container-type: inline-size;\n container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n block-size: 100%;\n overflow: auto;\n}\n@container host (max-width: 768px) {\n .layout.layout-main {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n}\n\n// recent kb's\n.panel-recent-kbs {\n position: relative;\n}\n.recent-kbs,\n.recent-news {\n display: grid;\n grid-template-rows: auto 1fr;\n gap: var(--mer-spacing--md);\n overflow: auto;\n\n &__header {\n display: grid;\n gap: var(--mer-spacing--md);\n }\n}\n\n.kbs-container {\n display: grid;\n gap: var(--mer-spacing--xs);\n overflow: auto;\n grid-auto-rows: max-content;\n container-type: inline-size;\n container-name: kb-container;\n animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--lg);\n container-type: inline-size;\n container-name: card-kb;\n\n &__left-col {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n }\n}\n@container kb-container (max-width: 360px) {\n .card-kb {\n align-items: center;\n flex-direction: column;\n gap: var(--mer-spacing--xs);\n justify-content: start;\n }\n}\n\n// recent news\ngx-ide-recent-news {\n overflow: auto;\n}\n.panel-recent-news {\n position: relative;\n}\n\n@keyframes exactMatchBright {\n 100% {\n filter: brightness(1.25);\n }\n}\n.exact-match-bright {\n animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4\n alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n border: var(--mer-border__width--sm) solid\n var(--mer-border-color__on-elevation--01);\n border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n}\n","/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { formatDate, hiChar } from \"../../common/helpers\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\"\n];\n\nconst KB_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst FOLDER_ICON = getIconPath({\n category: \"system\",\n name: \"folder\",\n colorType: \"on-elevation\"\n});\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n\n #recentKbsFilter: HTMLChEditElement;\n #kbsFilterValue: string = \"\";\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n /**\n * The condition required to display the kbs filter\n */\n @State() displayKbsFilter: boolean = true;\n\n /**\n * The condition required to display the news filter\n */\n @State() displayNewsFilter: boolean = false;\n\n /**\n * The filtered KBs after user input\n */\n @State() filteredKbs: RecentKBData[] = [];\n\n /**\n * The filtered news after user input\n */\n @State() filteredNews: NewsData[] = [];\n\n /**\n * True if kbs have been not loaded yet.\n */\n @State() loadingKbs: boolean = true;\n\n /**\n * A list of recent news\n */\n @State() news: NewsData[];\n @Watch(\"news\")\n watchNews(news: NewsData[]) {\n if (news?.length >= this.newsFilterThreshold) {\n this.displayNewsFilter = true;\n } else {\n this.displayNewsFilter = false;\n }\n }\n\n /**\n * The filter value for the recent news set by the user input\n */\n @State() newsFilterValue: string;\n\n /**\n * True if the component has been rendered for the first time.\n */\n @State() renderedFirstTime = false;\n\n /**\n * Callback invoked to load the news feed (right panel \"Recent News\").\n */\n @Prop() readonly getNewsCallback!: GetNewsCallback;\n\n /**\n * Ann array of the user's KB's\n */\n @Prop() readonly kbs: RecentKBData[] = [];\n @Watch(\"kbs\")\n kbsChanged(kbs: RecentKBData[]) {\n this.loadingKbs = false;\n this.#filterKbs();\n if (kbs?.length >= this.kbsFilterThreshold) {\n this.displayKbsFilter = true;\n } else {\n this.displayKbsFilter = false;\n }\n }\n\n /**\n * The minimum number of \"kbs\" that is required to display the kb's filter.\n */\n @Prop() readonly kbsFilterThreshold: number = 6;\n\n /**\n * The minimum number of \"news\" that is required to display the news's filter.\n */\n @Prop() readonly newsFilterThreshold: number = 6;\n\n /**\n * Callback invoked to open a knowledge base when the user clicks on a KB card.\n */\n @Prop() readonly openKbCallback!: OpenKbCallback;\n\n /**\n * Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback!: OpenNewsCallback;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.#recentKbsFilter?.focus();\n }\n\n #evaluateRenderKbs = () => {\n if (this.kbs?.length > 0) {\n return this.#renderKbs();\n } else {\n return (\n <gx-ide-empty-state\n class=\"kbs-empty-state\"\n stateIconSrc={FOLDER_ICON}\n stateTitle={this._componentLocale.emptyState.title}\n stateDescription={this._componentLocale.emptyState.description}\n ></gx-ide-empty-state>\n );\n }\n };\n\n #filterKbs = () => {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name?.toLowerCase().includes(this.#kbsFilterValue)\n );\n };\n\n #getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n return new Promise(async resolve => {\n this.news = await this.getNewsCallback();\n resolve(this.news);\n });\n };\n\n #openKbHandler = async (e: MouseEvent) => {\n const kbId = (e.currentTarget as HTMLElement).id;\n await this.openKbCallback(kbId);\n };\n\n #renderKb = (kb: RecentKBData): HTMLButtonElement | null => {\n const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n const dateCaption = formattedDate\n ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n : null;\n return (\n <article class=\"display-contents\">\n <button\n class={{\n \"card-small\": true,\n \"card-small--actionable\": true,\n \"card-kb\": true,\n \"exact-match-bright\":\n kb.name?.toLocaleLowerCase() ===\n this.#kbsFilterValue?.toLowerCase()\n }}\n id={kb.id}\n key={kb.id}\n type=\"button\"\n onClick={this.#openKbHandler}\n >\n <div class=\"card-kb__left-col\">\n <ch-image src={KB_ICON} class=\"icon-md\"></ch-image>\n <h2 class={config.headingsClasses.cardSmall}>\n {hiChar(kb.name, this.#kbsFilterValue)}\n </h2>\n </div>\n {dateCaption && <div class=\"card-kb__right-col\">{dateCaption}</div>}\n </button>\n </article>\n );\n };\n\n #renderKbs = () => {\n if (this.filteredKbs.length) {\n return (\n <div class=\"kbs-container scrollable\">\n {this.filteredKbs?.map(this.#renderKb)}\n </div>\n );\n }\n return (\n <gx-ide-empty-state\n stateIconSrc={KB_ICON}\n stateTitle={this._componentLocale.recentKbs.noKbsFiltered.title}\n ></gx-ide-empty-state>\n );\n };\n\n #searchKbsInputHandler = (event: Event | ChEditCustomEvent<InputEvent>) => {\n this.#kbsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n this.#filterKbs();\n };\n\n #searchNewsInputHandler = (event: Event | ChEditCustomEvent<InputEvent>) => {\n this.newsFilterValue = (\n event as ChEditCustomEvent<InputEvent>\n ).target.value.toLowerCase();\n };\n\n render() {\n return (\n <Host class=\"start-page-host\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"layout layout-main layout--cols-2\">\n <div class=\"layout__panel panel-recent-kbs\">\n <section class=\"card-regular recent-kbs\">\n <header class=\"recent-kbs__header\">\n <h2\n class={{\n [config.headingsClasses.cardRegular]: true,\n \"recent-kbs__title\": true\n }}\n >\n {this._componentLocale.recentKbs.title}\n </h2>\n {this.displayKbsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-kbs__name-filter\"\n placeholder={this._componentLocale.recentKbs.placeholder}\n onInput={this.#searchKbsInputHandler}\n ref={el =>\n (this.#recentKbsFilter = el as HTMLChEditElement)\n }\n disabled={!(this.kbs?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n {this.loadingKbs ? (\n <gx-ide-loader\n loaderTitle={this._componentLocale.recentKbs.loader.title}\n description={\n this._componentLocale.recentKbs.loader.description\n }\n show={true}\n ></gx-ide-loader>\n ) : (\n this.#evaluateRenderKbs()\n )}\n </section>\n </div>\n\n <div class=\"layout__panel panel-recent-news\">\n <section class=\"card-regular recent-news\">\n <header class=\"recent-news__header\">\n <h2 class={config.headingsClasses.cardRegular}>\n {this._componentLocale.recentNews.title}\n </h2>\n {this.displayNewsFilter && (\n <ch-edit\n type=\"text\"\n class=\"form-input recent-news__filter\"\n placeholder={\n this._componentLocale.recentNews.inputPlaceholder\n }\n onInput={\n this.news?.length > 0\n ? this.#searchNewsInputHandler\n : null\n }\n disabled={!(this.news?.length > 0)}\n ></ch-edit>\n )}\n </header>\n\n <gx-ide-recent-news\n getNewsCallback={this.#getNewsCallbackRecentNews}\n openNewsCallback={this.openNewsCallback}\n filterValue={this.newsFilterValue}\n ></gx-ide-recent-news>\n </section>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n id: string;\n name: string;\n lastOpenedDate?: Date;\n};\nexport type NewsData = {\n id: string;\n title: string;\n body: string;\n};\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["gxIdeEmptyStateCss","CSS_BUNDLES","GxIdeEmptyState","render","h","Host","model","class","this","stateIconSrc","src","stateTitle","stateDescription"],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n\n:host {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n animation: fadeIn var(--mer-timing--fast) forwards;\n inline-size: 100%;\n position: relative;\n inset-block-start: 0;\n}\n.main-container {\n max-width: 320px;\n margin: 0 auto;\n gap: var(--mer-spacing--md);\n padding: var(--mer-spacing--md);\n\n &__icon-wrapper {\n border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n border-radius: 50%;\n min-width: 40px;\n min-height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__content {\n gap: var(--mer-spacing--sm);\n }\n}\n.main-container,\n.main-container__content {\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n inset-block-start: 5px;\n }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/icon\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-empty-state\",\n styleUrl: \"gx-ide-empty-state.scss\",\n shadow: true\n})\nexport class GxIdeEmptyState {\n @Element() el: HTMLGxIdeEmptyStateElement;\n\n /**\n * The state description\n */\n @Prop() readonly stateDescription?: string;\n\n /**\n * The state icon\n */\n @Prop() readonly stateIconSrc?: string;\n\n /**\n * The state title\n */\n @Prop() readonly stateTitle!: string;\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <article class=\"main-container\">\n {this.stateIconSrc && (\n <span class=\"main-container__icon-wrapper\">\n <ch-image src={this.stateIconSrc} class=\"icon-md\"></ch-image>\n </span>\n )}\n <div class=\"main-container__content\">\n {this.stateTitle && (\n <h2 class=\"text-body-regular-m\">{this.stateTitle}</h2>\n )}\n {this.stateDescription && (\n <p class=\"text-body-regular-s\">{this.stateDescription}</p>\n )}\n </div>\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;ACG3B,MAAMC,IAA8B,EAClC,qBACA,qBACA,mBACA;;MAQWC,IAAe;;;;;;;EAkB1B,MAAAC;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MAAUE,OAAOL;QACjBG,EAAA;MAASG,OAAM;OACZC,KAAKC,gBACJL,EAAA;MAAMG,OAAM;OACVH,EAAA;MAAUM,KAAKF,KAAKC;MAAcF,OAAM;SAG5CH,EAAA;MAAKG,OAAM;OACRC,KAAKG,cACJP,EAAA;MAAIG,OAAM;OAAuBC,KAAKG,aAEvCH,KAAKI,oBACJR,EAAA;MAAGG,OAAM;OAAuBC,KAAKI,oBAGzCR,EAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["recentNewsCss","NEWS_ICON","getIconPath","category","name","colorType","CSS_BUNDLES","GxIdeRecentNews","_GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR","set","this","_GxIdeRecentNews_newsRendered","_GxIdeRecentNews_setTimeOutNewsDelay","_GxIdeRecentNews_newsContainerEl","_GxIdeRecentNews_displayNews","__classPrivateFieldGet","undefined","news","Array","from","querySelectorAll","forEach","setTimeout","classList","add","__classPrivateFieldSet","_GxIdeRecentNews_evaluateNewsDisplay","length","call","_GxIdeRecentNews_evaluateNewsRender","newsLoadFailed","h","stateIconSrc","stateTitle","_componentLocale","recentNews","newsNotFetched","title","class","onClick","_GxIdeRecentNews_getNews","tryAgainButtonLabel","href","onlineNewsURL","target","readThemOnline","noNewsToDisplay","_a","filteredNews","noNewsFiltered","_GxIdeRecentNews_renderNewsList","async","loadingNews","newsResult","getNewsCallback","_GxIdeRecentNews_openNewsHandler","newsId","openNewsCallback","_GxIdeRecentNews_refreshFilteredNews","filterValue","filter","singleNews","toLowerCase","includes","_b","body","_GxIdeRecentNews_renderNewsItem","id","visible","key","type","src","config","headingsClasses","cardSmall","hiChar","ref","el","map","newsChanged","watchNews","newFilterValue","componentWillLoad","Locale","getComponentStrings","componentDidRender","componentDidLoad","render","Host","empty","scrollable","model","abortTime","loaderTitle","loader","description","show"],"sources":["src/components/start-page/recent-news.scss?tag=gx-ide-recent-news&encapsulation=shadow","src/components/start-page/recent-news.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n@include hiChar();\n\n:host(.empty) {\n overflow: hidden !important; // WA to avoid scrollbar \"flickering\"\n}\n.news-container {\n display: grid;\n gap: var(--mer-spacing--xs);\n grid-auto-rows: max-content;\n // padding-inline-end: var(--mer-spacing--xs);\n}\n.news-item {\n opacity: 0;\n transition: 150ms opacity;\n\n &.visible {\n opacity: 1;\n }\n}\n.card-news {\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: var(--mer-spacing--xs);\n\n &__header {\n display: flex;\n gap: var(--mer-spacing--sm);\n align-items: center;\n }\n}\n\ngx-ide-loader::part(loader-wrapper) {\n border: var(--mer-border__width--sm) solid\n var(--mer-border-color__on-elevation--01);\n border-radius: var(--mer-border__radius--md);\n}\n\n.text-link {\n color: var(--mer-accent__primary);\n\n &:hover {\n text-decoration: underline;\n }\n}\n","import { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { hiChar } from \"../../common/helpers\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\nconst NEWS_ICON = getIconPath({\n category: \"system\",\n name: \"news\",\n colorType: \"on-surface\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/icon\",\n \"utils/typography\",\n \"utils/layout\",\n \"chameleon/scrollbar\"\n];\n@Component({\n tag: \"gx-ide-recent-news\",\n styleUrl: \"recent-news.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n\n #NEWS_ITEM_CLASS_SELECTOR = \"news-item\";\n #newsRendered = false;\n #setTimeOutNewsDelay = 75;\n\n @Element() el: HTMLGxIdeRecentNewsElement;\n\n #newsContainerEl: HTMLDivElement;\n\n /**\n * The list of news after the filter\n */\n @State() filteredNews: NewsData[] = [];\n\n /**\n * True if news are being requested\n */\n @State() loadingNews = true;\n\n /**\n * The list of news\n */\n @State() news: NewsData[] = [];\n @Watch(\"news\")\n newsChanged(news: NewsData[]) {\n this.#refreshFilteredNews(this.filterValue, news);\n this.#displayNews();\n }\n\n /**\n * True if news couldn't be loaded\n */\n @State() newsLoadFailed = false;\n\n /**\n * Callback invoked to load the news feed (right panel \"Recent News\").\n */\n @Prop() readonly getNewsCallback!: GetNewsCallback;\n\n /**\n * Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback!: OpenNewsCallback;\n\n /**\n * The news filter value inserted by the user on the news input filter\n */\n @Prop() readonly filterValue: string = \"\";\n @Watch(\"filterValue\")\n watchNews(newFilterValue: string) {\n this.#refreshFilteredNews(newFilterValue, this.news);\n }\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidRender() {\n this.#evaluateNewsDisplay();\n }\n\n componentDidLoad() {\n this.#getNews();\n }\n\n #displayNews = () => {\n if (this.#newsContainerEl !== undefined) {\n const news = Array.from(\n this.#newsContainerEl.querySelectorAll(\n `.${this.#NEWS_ITEM_CLASS_SELECTOR}`\n )\n );\n news.forEach(news => {\n // display news with a cascade effect\n setTimeout(() => {\n news.classList.add(\"visible\");\n }, this.#setTimeOutNewsDelay);\n this.#setTimeOutNewsDelay += 45;\n });\n }\n };\n\n #evaluateNewsDisplay = () => {\n if (\n !this.#newsRendered &&\n this.news.length > 0 &&\n this.#newsContainerEl !== undefined\n ) {\n this.#displayNews();\n this.#newsRendered = true;\n }\n };\n\n #evaluateNewsRender = (): HTMLElement => {\n if (this.newsLoadFailed) {\n return (\n <gx-ide-empty-state\n stateIconSrc={NEWS_ICON}\n stateTitle={this._componentLocale.recentNews.newsNotFetched.title}\n >\n <button\n class=\"empty-state__button button-primary\"\n onClick={this.#getNews}\n >\n {\n this._componentLocale.recentNews.newsNotFetched\n .tryAgainButtonLabel\n }\n </button>\n <a\n class=\"text-link text-body-regular-s\"\n href={this._componentLocale.recentNews.newsNotFetched.onlineNewsURL}\n target=\"_blank\"\n >\n {this._componentLocale.recentNews.newsNotFetched.readThemOnline}\n </a>\n </gx-ide-empty-state>\n );\n }\n if (this.news.length === 0) {\n return (\n <gx-ide-empty-state\n stateIconSrc={NEWS_ICON}\n stateTitle={this._componentLocale.recentNews.noNewsToDisplay.title}\n >\n <a\n class=\"empty-state__link text-body-regular-s\"\n href={this._componentLocale.recentNews.onlineNewsURL}\n target=\"_blank\"\n >\n {this._componentLocale.recentNews.readThemOnline}\n </a>\n </gx-ide-empty-state>\n );\n }\n if (this.filteredNews?.length === 0) {\n return (\n <gx-ide-empty-state\n class=\"news-empty-state\"\n stateIconSrc={NEWS_ICON}\n stateTitle={this._componentLocale.recentNews.noNewsFiltered.title}\n ></gx-ide-empty-state>\n );\n }\n return this.#renderNewsList();\n };\n\n #getNews = async () => {\n this.loadingNews = true;\n const newsResult = await this.getNewsCallback();\n this.loadingNews = false;\n if (newsResult && newsResult.length > 0) {\n this.news = newsResult;\n this.newsLoadFailed = false;\n } else {\n this.newsLoadFailed = true;\n }\n };\n\n #openNewsHandler = (newsId: string) => async () => {\n await this.openNewsCallback(newsId);\n };\n\n #refreshFilteredNews = (filterValue: string, news: NewsData[]) => {\n this.filteredNews = news.filter(\n singleNews =>\n singleNews.title?.toLowerCase().includes(filterValue) ||\n singleNews.body?.toLowerCase().includes(filterValue)\n );\n };\n\n #renderNewsItem = (news: NewsData): HTMLGxgCardElement | null => {\n if (news.id && news.title) {\n return (\n <article>\n <button\n class={{\n \"card-small\": true,\n \"card-small--actionable\": true,\n \"card-news\": true,\n [this.#NEWS_ITEM_CLASS_SELECTOR]: true,\n \"visible\": this.#newsRendered\n }}\n id={news.id}\n key={news.id}\n type=\"button\"\n onClick={this.#openNewsHandler(news.id)}\n >\n <header class=\"card-news__header\">\n <ch-image src={NEWS_ICON} class=\"icon-md\"></ch-image>\n <h2 class={config.headingsClasses.cardSmall}>\n {hiChar(news.title, this.filterValue)}\n </h2>\n </header>\n {news.body && (\n <p class=\"text-body-regular-s\">\n {hiChar(news.body, this.filterValue)}\n </p>\n )}\n </button>\n </article>\n );\n }\n return null;\n };\n\n #renderNewsList = (): HTMLElement => (\n <div\n class=\"news-container\"\n ref={el => (this.#newsContainerEl = el as HTMLDivElement)}\n >\n {this.filteredNews?.map(this.#renderNewsItem)}\n </div>\n );\n\n render() {\n return (\n <Host\n // Improve accessibility by announcing live changes\n aria-live=\"polite\"\n // Wait until all changes are made to prevents assistive\n // technologies from announcing changes before updates are done\n aria-busy={this.loadingNews ? \"true\" : \"false\"}\n class={{ empty: this.filteredNews.length === 0, scrollable: true }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n {this.loadingNews ? (\n <gx-ide-loader\n abortTime={8000}\n loaderTitle={this._componentLocale.loader.title}\n description={this._componentLocale.loader.description}\n show={true}\n ></gx-ide-loader>\n ) : (\n this.#evaluateNewsRender()\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}