npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.16 → 1.0.18 - Mend

@genexus/genexus-ide-ui 1.0.16 → 1.0.18

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 (372) hide show

package/dist/esm/gx-ide-create-kb-from-server.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-create-kb-from-server.entry.js","mappings":"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","names":[],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--mer-color__surface);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n\n @State() kbs: KBData[] = [];\n @Watch(\"kbs\")\n watchPropHandler(newKbs: KBData[]) {\n / When the list of servers are updated, the first server is selected by default /\n this.kbIdSelected = newKbs[0].id;\n this.kbName = newKbs[0].name;\n }\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = true;\n\n /\n The knowledge base default suggested name\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\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() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\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 setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n tool-tip\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n tool-tip\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n tool-tip\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n singleSelection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}
1	+ {"file":"gx-ide-create-kb-from-server.entry.js","mappings":"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","names":[],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--mer-color__surface);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n\n @State() kbs: KBData[] = [];\n @Watch(\"kbs\")\n watchPropHandler(newKbs: KBData[]) {\n / When the list of servers are updated, the first server is selected by default /\n this.kbIdSelected = newKbs[0].id;\n this.kbName = newKbs[0].name;\n }\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = true;\n\n /\n The knowledge base default suggested name\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\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() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\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 setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n tool-tip\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n tool-tip\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n tool-tip\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n singleSelection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}

package/dist/esm/gx-ide-dashboard-home.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-27c691bc.js';
-import { g as getIconPath } from './assets-manager-120996e9.js';
+import { g as getIconPath } from './assets-manager-251883e0.js';
 import { L as Locale } from './locale-3c32f251.js';
 import { f as formatDate } from './helpers-64e1dd0b.js';
-const dashboardHomeCss = ":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound 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.\n*/\n/* - - - - - - - - - - - - - - - - -\nNew classes for Chameleon + Mercury\n- - - - - - - - - - - - - - - - - */\n:host {\n  display: grid;\n  block-size: 100%;\n}\n\n.card-regular {\n  background-color: var(--mer-surface__elevation--01);\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n  padding: var(--mer-spacing--md) var(--mer-spacing--md);\n  display: grid;\n}\n\n.card-small {\n  background-color: var(--mer-surface__elevation--02);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.card-small--actionable:hover {\n  background-color: var(--mer-color__neutral-gray--600);\n}\n.card-small--actionable:active {\n  background-color: var(--mer-color__neutral-gray--650);\n}\n.card-small:focus-visible {\n  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);\n  outline-offset: var(--focus__outline-offset);\n}\n\n.empty-state {\n  block-size: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  text-align: center;\n}\n.empty-state__title, .empty-state__button, .empty-state__link {\n  max-inline-size: 300px;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-1 {\n  opacity: 1;\n}\n\n.display-contents {\n  display: contents;\n}\n\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--mer-color__neutral-gray--800);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-cell {\n  --mer-spacing--xs: var(--gx-ide-container__padding);\n}\n\n/*--- Layout ---*/\n.layout {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n  box-sizing: border-box;\n}\n.layout--two-cols {\n  grid-template-columns: 1fr 1fr;\n}\n.layout--space-above {\n  padding-block-start: var(--mer-spacing--lg);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*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*/\n:host(.gx-ide-component) {\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--mer-font__weight--regular);\n  font-size: var(--mer-font__size--xs);\n  font-family: var(--mer-font-family--primary);\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-overflow::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.tree-view-primary {\n  font-size: var(--mer-font__size--2xs);\n}\n\np {\n  margin: 0;\n  font-size: var(--mer-font__size--xxs);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nNew : For Mercury\n- - - - - - - - - - - - - - - - - - */\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound 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.\n*/\n:host {\n  display: block;\n  height: 100%;\n  overflow: auto;\n  margin: var(--mer-spacing--lg);\n}\n\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n  height: 100%;\n  overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n  container-name: dashboard-main-wrapper;\n  container-type: inline-size;\n}\n\n.kb {\n  grid-area: kb;\n  align-self: center;\n}\n.kb .version-pill {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.kb .kb-detail {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex-wrap: wrap;\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.kb .kb-detail .display-inline {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  font-style: italic;\n  opacity: 0.5;\n}\n\n.environment {\n  grid-area: environment;\n}\n.environment__environments {\n  padding-block-end: var(--gx-ide-grid-column-gap);\n  display: flex;\n  flex-direction: row;\n  gap: var(--gx-ide-grid-column-gap);\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  overflow-x: auto;\n}\n.environment__environments::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.environment__environments::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.environment__environments::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n.environment__environments .environment-card {\n  min-width: 180px;\n  flex-grow: 1;\n}\n.environment__environments .environment-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.environment__environments .environment-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--2xs);\n}\n\n.environment-title {\n  margin-block-end: var(--mer-spacing--xs);\n  display: block;\n}\n\n.project {\n  grid-area: project;\n}\n.project .project-buttons {\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.project .project-description > *:first-child {\n  margin-block-start: 0;\n}\n.project .project-description > *:last-child {\n  margin-block-end: 0;\n}\n\n.recent-objects {\n  grid-area: recent-objects;\n}\n.recent-objects__container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.recent-objects__object {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__object .obj-name {\n  color: var(--gray-06);\n}\n.recent-objects__object .col {\n  display: flex;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__empty-state {\n  height: 100%;\n}\n\n.grid--basic {\n  flex-grow: 1;\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n  gap: var(--mer-spacing--xl);\n  grid-template-areas: \"kb environment\" \"project recent-objects\";\n  grid-template-rows: auto 1fr;\n}\n\n@container (width < 768px) {\n  .grid--basic {\n    grid-template-rows: auto auto auto;\n    grid-template-areas: \"kb environment\" \"project project\" \"recent-objects recent-objects\";\n  }\n}\ngxg-title-editable {\n  width: 100%;\n}\n\ngx-ide-card {\n  height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n  border: var(--mer-elevation__border-01);\n  border-radius: var(--gxg-card-section_border-radius);\n}";
+const dashboardHomeCss = ":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound 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.\n*/\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/* - - - - - - - - - - - - - - - - -\nNew classes for Chameleon + Mercury\n- - - - - - - - - - - - - - - - - */\n:host {\n  display: grid;\n  block-size: 100%;\n}\n\n.card-regular {\n  background-color: var(--mer-surface__elevation--01);\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n  padding: var(--mer-spacing--md) var(--mer-spacing--md);\n  display: grid;\n}\n\n.card-small {\n  background-color: var(--mer-surface__elevation--02);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.card-small--actionable:hover {\n  background-color: var(--mer-color__neutral-gray--600);\n}\n.card-small--actionable:active {\n  background-color: var(--mer-color__neutral-gray--650);\n}\n.card-small:focus-visible {\n  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);\n  outline-offset: var(--focus__outline-offset);\n}\n\n.empty-state {\n  block-size: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  text-align: center;\n}\n.empty-state__title, .empty-state__button, .empty-state__link {\n  max-inline-size: 300px;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-1 {\n  opacity: 1;\n}\n\n.display-contents {\n  display: contents;\n}\n\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--mer-color__neutral-gray--800);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-cell {\n  --mer-spacing--xs: var(--gx-ide-container__padding);\n}\n\n/*--- Layout ---*/\n.layout {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n  box-sizing: border-box;\n}\n.layout--two-cols {\n  grid-template-columns: 1fr 1fr;\n}\n.layout--space-above {\n  padding-block-start: var(--mer-spacing--lg);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*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*/\n:host(.gx-ide-component) {\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--mer-font__weight--regular);\n  font-size: var(--mer-font__size--xs);\n  font-family: var(--mer-font-family--primary);\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-overflow::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.tree-view-primary {\n  font-size: var(--mer-font__size--2xs);\n}\n\np {\n  margin: 0;\n  font-size: var(--mer-font__size--xxs);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nNew : For Mercury\n- - - - - - - - - - - - - - - - - - */\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound 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.\n*/\n:host {\n  display: block;\n  height: 100%;\n  overflow: auto;\n  margin: var(--mer-spacing--lg);\n}\n\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n  height: 100%;\n  overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n  container-name: dashboard-main-wrapper;\n  container-type: inline-size;\n}\n\n.kb {\n  grid-area: kb;\n  align-self: center;\n}\n.kb .version-pill {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.kb .kb-detail {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex-wrap: wrap;\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.kb .kb-detail .display-inline {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  font-style: italic;\n  opacity: 0.5;\n}\n\n.environment {\n  grid-area: environment;\n}\n.environment__environments {\n  padding-block-end: var(--gx-ide-grid-column-gap);\n  display: flex;\n  flex-direction: row;\n  gap: var(--gx-ide-grid-column-gap);\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  overflow-x: auto;\n}\n.environment__environments::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.environment__environments::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.environment__environments::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.environment__environments::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n.environment__environments .environment-card {\n  min-width: 180px;\n  flex-grow: 1;\n}\n.environment__environments .environment-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.environment__environments .environment-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--2xs);\n}\n\n.environment-title {\n  margin-block-end: var(--mer-spacing--xs);\n  display: block;\n}\n\n.project {\n  grid-area: project;\n}\n.project .project-buttons {\n  margin-block-start: var(--mer-spacing--md);\n  gap: var(--mer-spacing--md);\n}\n.project .project-description > *:first-child {\n  margin-block-start: 0;\n}\n.project .project-description > *:last-child {\n  margin-block-end: 0;\n}\n\n.recent-objects {\n  grid-area: recent-objects;\n}\n.recent-objects__container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-cards-vertical-spacing);\n}\n.recent-objects__object {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__object .obj-name {\n  color: var(--gray-06);\n}\n.recent-objects__object .col {\n  display: flex;\n  gap: var(--gx-ide-cards-horizontal-spacing);\n}\n.recent-objects__empty-state {\n  height: 100%;\n}\n\n.grid--basic {\n  flex-grow: 1;\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n  gap: var(--mer-spacing--xl);\n  grid-template-areas: \"kb environment\" \"project recent-objects\";\n  grid-template-rows: auto 1fr;\n}\n\n@container (width < 768px) {\n  .grid--basic {\n    grid-template-rows: auto auto auto;\n    grid-template-areas: \"kb environment\" \"project project\" \"recent-objects recent-objects\";\n  }\n}\ngxg-title-editable {\n  width: 100%;\n}\n\ngx-ide-card {\n  height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n  border: var(--mer-elevation__border-01);\n  border-radius: var(--gxg-card-section_border-radius);\n}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)

package/dist/esm/gx-ide-dashboard-home.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-dashboard-home.entry.js","mappings":"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","names":[],"sources":["src/components/dashboard-home/dashboard-home.scss?tag=gx-ide-dashboard-home&encapsulation=shadow","src/components/dashboard-home/dashboard-home.tsx"],"sourcesContent":["@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n height: 100%;\n overflow: auto;\n margin: var(--mer-spacing--lg);\n}\n\n// Manage height and overflow\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n height: 100%;\n overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n container-name: dashboard-main-wrapper;\n container-type: inline-size;\n}\n\n.kb {\n grid-area: kb;\n align-self: center;\n .version-pill {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .kb-detail {\n display: flex;\n flex-direction: column;\n align-items: start;\n flex-wrap: wrap;\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n .display-inline {\n @include line-clamp;\n font-style: italic;\n opacity: 0.5;\n }\n }\n}\n\n.environment {\n grid-area: environment;\n &__environments {\n padding-block-end: var(--gx-ide-grid-column-gap);\n display: flex;\n flex-direction: row;\n gap: var(--gx-ide-grid-column-gap);\n @include gxg-scrollbar;\n overflow-x: auto;\n .environment-card {\n min-width: 180px;\n flex-grow: 1;\n }\n .environment-container {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-cards-vertical-spacing);\n }\n .environment-item {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--2xs);\n }\n }\n}\n.environment-title {\n margin-block-end: var(--mer-spacing--xs);\n display: block;\n}\n\n.project {\n grid-area: project;\n .project-buttons {\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n }\n .project-description {\n > :first-child {\n margin-block-start: 0;\n }\n > :last-child {\n margin-block-end: 0;\n }\n }\n}\n\n.recent-objects {\n grid-area: recent-objects;\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-cards-vertical-spacing);\n }\n &__object {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gx-ide-cards-horizontal-spacing);\n .obj-name {\n color: var(--gray-06);\n }\n .col {\n display: flex;\n gap: var(--gx-ide-cards-horizontal-spacing);\n }\n }\n &__empty-state {\n height: 100%;\n }\n}\n\n.grid--basic {\n flex-grow: 1;\n grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n gap: var(--mer-spacing--xl);\n grid-template-areas:\n \"kb environment\"\n \"project recent-objects\";\n grid-template-rows: auto 1fr;\n}\n@container (width < 768px) {\n .grid--basic {\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"kb environment\"\n \"project project\"\n \"recent-objects recent-objects\";\n }\n}\n\ngxg-title-editable {\n width: 100%;\n}\n\ngx-ide-card {\n height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n border: var(--mer-elevation__border-01);\n border-radius: var(--gxg-card-section_border-radius);\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { getIconPath } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n [key in RecentObjectStatus]: StatusIcons;\n} = {\n \"new\": \"gx-server/new\",\n \"modified\": \"patterns-default-associated/modified\",\n \"conflicted\": \"patterns-default-associated/synchronized\",\n \"unmodified\": null,\n \"not-connected\": null\n};\n\nconst mapStatusToLocale: {\n [key in RecentObjectStatus]: string;\n} = {\n \"new\": \"new\",\n \"modified\": \"modified\",\n \"conflicted\": \"conflicted\",\n \"unmodified\": \"unmodified\",\n \"not-connected\": \"notConnected\"\n};\n\n@Component({\n tag: \"gx-ide-dashboard-home\",\n styleUrl: \"dashboard-home.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n // 1.Own Properties\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n #folderIcon = getIconPath({\n category: \"system\",\n name: \"folder\",\n colorType: \"on-elevation\"\n });\n\n // 2.Reference To Elements\n\n @Element() el: HTMLGxIdeDashboardHomeElement;\n private loaderEl!: HTMLGxgIdeLoaderElement;\n private kbNameEl!: HTMLGxgTitleEditableElement;\n private envNameEl!: HTMLGxgTitleEditableElement;\n private recentObjectsContainerEl!: HTMLGxgCardElement;\n / private projectDescriptionEl!: HTMLGxgFormTextareaElement;/\n\n // 3.State\n\n /\n The editing state for the environment name.\n /\n @State() editingEnvName = false;\n\n /\n The editing state for the project details.\n /\n @State() editingProjectDescription = false;\n\n // 4.Public Property API\n\n /\n The KB basic properties.\n /\n @Prop() readonly kb: KBData;\n\n /\n This allows the kb to be editable by the user.\n /\n @Prop() readonly enableEditKBName: boolean = false;\n\n /\n Information of the current environment.\n /\n @Prop() readonly environment: EnvironmentData;\n\n /\n This allows the environment name to be editable by the user.\n /\n @Prop() readonly enableEditEnvironmentName: boolean = false;\n\n /\n Project Detail description.\n /\n @Prop() readonly projectDescription: string;\n\n /\n This allows the project description to be modified by the user.\n /\n @Prop() readonly enableEditDescription: boolean = false;\n\n /\n Recently edited objects.\n /\n @Prop() readonly recentObjects: recentObjectData[];\n @Watch(\"recentObjects\")\n recentObjectsHandler(newRecentObjects: recentObjectData[]) {\n if (newRecentObjects) {\n this.loaderEl.show = false;\n }\n }\n\n /\n Callback invoked when user tries to rename the KB.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n /\n @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n /\n Callback invoked when user tries to rename the KB environment.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n /\n @Prop() readonly renameEnvironmentCallback: (\n name: string\n ) => Promise<EditResult>;\n\n /\n Callback invoked when user tries to edit the Project Description.\n * The edition is resolved by the host.\n /\n @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n /\n Callback invoked when user tries to open one of the listed Recent Objects\n * Receives the internal ID of the object\n /\n @Prop() readonly openObjectCallback: (id: string) => Promise<void>;\n\n // 5.Events\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.Component Lifecycle Events\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.evaluateLoader();\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 evaluateLoader = () => {\n if (this.recentObjects === undefined) {\n this.loaderEl.container = this.recentObjectsContainerEl;\n this.loaderEl.show = true;\n }\n };\n\n // Kb Name\n\n private handleKbNameChange = async (updatedTitle: CustomEvent<string>) => {\n const updatedKbName = updatedTitle.detail;\n if (this.renameKBCallback) {\n const response = this.renameKBCallback(updatedKbName);\n response.then((result: EditResult) => {\n if (result.success) {\n this.kb.name = updatedKbName;\n }\n this.editValidation(result, this.kbNameEl);\n });\n }\n };\n\n // Environment Name\n private handleEnvNameChange = async () => {\n if (this.renameEnvironmentCallback) {\n const response = this.renameEnvironmentCallback(this.envNameEl.value);\n response.then((result: EditResult) => {\n if (result.success) {\n this.environment.name = this.envNameEl.value;\n }\n this.editValidation(result, this.envNameEl);\n });\n }\n };\n\n private handleDescriptionChange = async () => {\n if (this.editDescriptionCallback) {\n await this.editDescriptionCallback();\n }\n };\n\n // Recent Objects\n\n private openObject = (id: string) => {\n this.openObjectCallback(id);\n };\n\n // Validation\n\n private editValidation = (\n result: EditResult,\n el: HTMLGxgTitleEditableElement\n ) => {\n if (!result.success) {\n el.validationStatus = \"error\";\n el.validationMessage = result.errorMessage;\n } else {\n el.validationStatus = \"indeterminate\";\n el.validationMessage = \"\";\n }\n };\n\n // 10.Render Function\n\n private renderProjectContent = (): Element => {\n return this.projectDescription ? (\n <div class=\"project-description\" innerHTML={this.projectDescription}>\n {this.enableEditDescription ? (\n <gxg-button\n type=\"secondary-text-icon\"\n icon=\"gemini-tools/edit\"\n onClick={this.handleDescriptionChange}\n >\n {this._componentLocale.edit}\n </gxg-button>\n ) : null}\n </div>\n ) : null;\n };\n\n private renderFrontEndTitle() {\n return this.environment.frontEnd.length <= 1\n ? this._componentLocale.environment.frontEndLang\n : this._componentLocale.environment.frontEndLangs;\n }\n\n private renderKbDates() {\n return this.kb.created \|\| this.kb.lastBuild ? (\n <gxg-text class=\"display-inline\" type=\"text-gray\" padding=\"s\">\n {\n / created/\n this.kb.created\n ? `${this._componentLocale.created}: ${formatDate(\n this.kb.created,\n \"date-time-short\"\n )}`\n : null\n }\n {this.kb.created && this.kb.lastBuild ? \" - \" : null}\n {\n / last build date /\n this.kb.lastBuild\n ? `${this._componentLocale.lastBuild}: ${formatDate(\n this.kb.lastBuild,\n \"date-time-short\"\n )}`\n : null\n }\n </gxg-text>\n ) : null;\n }\n\n // 11.RENDER() MAIN FUNCTION //\n\n render() {\n return (\n <Host>\n <div class=\"gx-ide-main-wrapper\">\n <div class=\"grid grid--basic\">\n <div class=\"kb gxi-overflow-auto\">\n <gxg-title-editable\n value={this.kb.name}\n disable-edition={!this.enableEditKBName}\n click-to-edit={true}\n fluid\n onValueChanged={this.handleKbNameChange}\n focusType=\"text\"\n debounce\n ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n ></gxg-title-editable>\n <div class=\"align-center kb-detail\">\n <gxg-pill id=\"pill\" type=\"static\" icon=\"objects/procedure\">\n {this._componentLocale.version}: {this.kb.currentVersion}\n </gxg-pill>\n\n {this.renderKbDates()}\n </div>\n </div>\n\n <div class=\"environment\">\n <gxg-title-editable\n class=\"environment-title\"\n value={this.environment.name}\n disable-edition={!this.enableEditEnvironmentName}\n click-to-edit={true}\n title-type=\"h3\"\n ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n onValueChanged={this.handleEnvNameChange}\n focusType=\"text\"\n debounce\n ></gxg-title-editable>\n <div class=\"environment__environments\">\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this.renderFrontEndTitle()}\n >\n <div class=\"environment-container\">\n {this.environment?.frontEnd?.map(\n (obj: EnvironmentItemData) => (\n <div class=\"environment-item\">\n <gxg-icon\n type={obj.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {obj.name}\n </div>\n )\n )}\n </div>\n </gxg-card>\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this._componentLocale.environment.backEnd}\n >\n <div class=\"environment-container\">\n <div class=\"environment-item\">\n <gxg-icon\n type={this.environment.backEnd.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.backEnd.name}\n </div>\n </div>\n </gxg-card>\n\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this._componentLocale.environment.dataStore}\n >\n <div class=\"environment-container\">\n <div class=\"environment-item\">\n <gxg-icon\n type={this.environment.dataStore.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.dataStore.name}\n </div>\n </div>\n </gxg-card>\n </div>\n </div>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.project.title}\n class=\"project\"\n >\n {/ <gxg-tabs height=\"auto\" minWidth=\"100%\">\n <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.description}\n tab=\"description\"\n is-selected\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.lookFeel}\n tab=\"lookFeel\"\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.architecture}\n tab=\"architecture\"\n ></gxg-tab-button>\n </gxg-tab-bar>\n <gxg-tab noPadding tab=\"description\" flexContainer>\n {this.renderProjectContent()}\n </gxg-tab>\n <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n </gxg-tabs> */}\n {this.renderProjectContent()}\n </gxg-card>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.recentObjects.title}\n class=\"recent-objects\"\n cardType=\"section\"\n noPaddingTop\n ref={el =>\n (this.recentObjectsContainerEl = el as HTMLGxgCardElement)\n }\n >\n <div class=\"recent-objects__container\">\n {this.recentObjects?.length === 0 ? (\n <gx-ide-empty-state\n class=\"recent-objects__empty-state\"\n stateIconSrc={this.#folderIcon}\n stateTitle={\n this._componentLocale.recentObjects.emptyState.title\n }\n stateDescription={\n this._componentLocale.recentObjects.emptyState.description\n }\n ></gx-ide-empty-state>\n ) : (\n this.recentObjects?.map((obj: recentObjectData) => {\n const statusLocale = mapStatusToLocale[obj.status];\n const statusDescription =\n this._componentLocale.recentObjects.status[statusLocale];\n return (\n <gxg-card\n background=\"gray-01\"\n padding=\"m\"\n cardType=\"article\"\n class=\"recent-objects__card\"\n actionable\n onClick={() => this.openObject(obj.id)}\n >\n <div class=\"recent-objects__object\">\n <div class=\"col col-left\">\n <gxg-icon\n type={obj.typeIcon}\n color=\"auto\"\n ></gxg-icon>\n <gxg-text type=\"text-regular\" class=\"obj-name\">\n {obj.name}\n </gxg-text>\n </div>\n <div class=\"col col-right\">\n <gxg-text italic>\n {statusDescription}\n {obj.status === \"modified\"\n ? formatDate(obj.modificationDate, \"date\")\n : null}\n </gxg-text>\n {obj.status !== \"unmodified\" &&\n obj.status !== \"not-connected\" ? (\n <gxg-icon\n type={mapStatusToIcons[obj.status]}\n color=\"auto\"\n ></gxg-icon>\n ) : null}\n </div>\n </div>\n </gxg-card>\n );\n })\n )}\n </div>\n </gxg-card>\n </div>\n </div>\n <gxg-ide-loader\n loaderTitle={this._componentLocale.loader.title}\n description={this._componentLocale.loader.description}\n ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n ></gxg-ide-loader>\n </Host>\n );\n }\n}\n\nexport type KBData = {\n name: string;\n currentVersion: string;\n created: Date;\n lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n name: string;\n frontEnd: EnvironmentItemData[];\n backEnd: EnvironmentItemData;\n dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n icon: string;\n name: string;\n};\n\nexport type recentObjectData = {\n id: string;\n typeIcon: string;\n name: string;\n modificationDate: Date;\n status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n \| \"new\"\n \| \"modified\"\n \| \"conflicted\"\n \| \"unmodified\"\n \| \"not-connected\";\n\nexport type StatusIcons =\n // toDo: Add proper icons!!\n \| \"gx-server/new\"\n \| \"patterns-default-associated/modified\"\n \| \"patterns-default-associated/synchronized\"\n \| \"gx-server/delete\";\n\nexport type EditResult = {\n success: boolean;\n errorMessage: string;\n};\n"],"version":3}
1	+ {"file":"gx-ide-dashboard-home.entry.js","mappings":"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","names":[],"sources":["src/components/dashboard-home/dashboard-home.scss?tag=gx-ide-dashboard-home&encapsulation=shadow","src/components/dashboard-home/dashboard-home.tsx"],"sourcesContent":["@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n height: 100%;\n overflow: auto;\n margin: var(--mer-spacing--lg);\n}\n\n// Manage height and overflow\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n height: 100%;\n overflow: auto;\n}\n\n.gx-ide-main-wrapper {\n container-name: dashboard-main-wrapper;\n container-type: inline-size;\n}\n\n.kb {\n grid-area: kb;\n align-self: center;\n .version-pill {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .kb-detail {\n display: flex;\n flex-direction: column;\n align-items: start;\n flex-wrap: wrap;\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n .display-inline {\n @include line-clamp;\n font-style: italic;\n opacity: 0.5;\n }\n }\n}\n\n.environment {\n grid-area: environment;\n &__environments {\n padding-block-end: var(--gx-ide-grid-column-gap);\n display: flex;\n flex-direction: row;\n gap: var(--gx-ide-grid-column-gap);\n @include gxg-scrollbar;\n overflow-x: auto;\n .environment-card {\n min-width: 180px;\n flex-grow: 1;\n }\n .environment-container {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-cards-vertical-spacing);\n }\n .environment-item {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--2xs);\n }\n }\n}\n.environment-title {\n margin-block-end: var(--mer-spacing--xs);\n display: block;\n}\n\n.project {\n grid-area: project;\n .project-buttons {\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n }\n .project-description {\n > :first-child {\n margin-block-start: 0;\n }\n > :last-child {\n margin-block-end: 0;\n }\n }\n}\n\n.recent-objects {\n grid-area: recent-objects;\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-cards-vertical-spacing);\n }\n &__object {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gx-ide-cards-horizontal-spacing);\n .obj-name {\n color: var(--gray-06);\n }\n .col {\n display: flex;\n gap: var(--gx-ide-cards-horizontal-spacing);\n }\n }\n &__empty-state {\n height: 100%;\n }\n}\n\n.grid--basic {\n flex-grow: 1;\n grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n gap: var(--mer-spacing--xl);\n grid-template-areas:\n \"kb environment\"\n \"project recent-objects\";\n grid-template-rows: auto 1fr;\n}\n@container (width < 768px) {\n .grid--basic {\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"kb environment\"\n \"project project\"\n \"recent-objects recent-objects\";\n }\n}\n\ngxg-title-editable {\n width: 100%;\n}\n\ngx-ide-card {\n height: 100%;\n}\n\ngxg-ide-loader::part(loader-wrapper) {\n border: var(--mer-elevation__border-01);\n border-radius: var(--gxg-card-section_border-radius);\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { getIconPath } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n [key in RecentObjectStatus]: StatusIcons;\n} = {\n \"new\": \"gx-server/new\",\n \"modified\": \"patterns-default-associated/modified\",\n \"conflicted\": \"patterns-default-associated/synchronized\",\n \"unmodified\": null,\n \"not-connected\": null\n};\n\nconst mapStatusToLocale: {\n [key in RecentObjectStatus]: string;\n} = {\n \"new\": \"new\",\n \"modified\": \"modified\",\n \"conflicted\": \"conflicted\",\n \"unmodified\": \"unmodified\",\n \"not-connected\": \"notConnected\"\n};\n\n@Component({\n tag: \"gx-ide-dashboard-home\",\n styleUrl: \"dashboard-home.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n // 1.Own Properties\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n #folderIcon = getIconPath({\n category: \"system\",\n name: \"folder\",\n colorType: \"on-elevation\"\n });\n\n // 2.Reference To Elements\n\n @Element() el: HTMLGxIdeDashboardHomeElement;\n private loaderEl!: HTMLGxgIdeLoaderElement;\n private kbNameEl!: HTMLGxgTitleEditableElement;\n private envNameEl!: HTMLGxgTitleEditableElement;\n private recentObjectsContainerEl!: HTMLGxgCardElement;\n / private projectDescriptionEl!: HTMLGxgFormTextareaElement;/\n\n // 3.State\n\n /\n The editing state for the environment name.\n /\n @State() editingEnvName = false;\n\n /\n The editing state for the project details.\n /\n @State() editingProjectDescription = false;\n\n // 4.Public Property API\n\n /\n The KB basic properties.\n /\n @Prop() readonly kb: KBData;\n\n /\n This allows the kb to be editable by the user.\n /\n @Prop() readonly enableEditKBName: boolean = false;\n\n /\n Information of the current environment.\n /\n @Prop() readonly environment: EnvironmentData;\n\n /\n This allows the environment name to be editable by the user.\n /\n @Prop() readonly enableEditEnvironmentName: boolean = false;\n\n /\n Project Detail description.\n /\n @Prop() readonly projectDescription: string;\n\n /\n This allows the project description to be modified by the user.\n /\n @Prop() readonly enableEditDescription: boolean = false;\n\n /\n Recently edited objects.\n /\n @Prop() readonly recentObjects: recentObjectData[];\n @Watch(\"recentObjects\")\n recentObjectsHandler(newRecentObjects: recentObjectData[]) {\n if (newRecentObjects) {\n this.loaderEl.show = false;\n }\n }\n\n /\n Callback invoked when user tries to rename the KB.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n /\n @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n /\n Callback invoked when user tries to rename the KB environment.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n /\n @Prop() readonly renameEnvironmentCallback: (\n name: string\n ) => Promise<EditResult>;\n\n /\n Callback invoked when user tries to edit the Project Description.\n * The edition is resolved by the host.\n /\n @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n /\n Callback invoked when user tries to open one of the listed Recent Objects\n * Receives the internal ID of the object\n /\n @Prop() readonly openObjectCallback: (id: string) => Promise<void>;\n\n // 5.Events\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.Component Lifecycle Events\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.evaluateLoader();\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 evaluateLoader = () => {\n if (this.recentObjects === undefined) {\n this.loaderEl.container = this.recentObjectsContainerEl;\n this.loaderEl.show = true;\n }\n };\n\n // Kb Name\n\n private handleKbNameChange = async (updatedTitle: CustomEvent<string>) => {\n const updatedKbName = updatedTitle.detail;\n if (this.renameKBCallback) {\n const response = this.renameKBCallback(updatedKbName);\n response.then((result: EditResult) => {\n if (result.success) {\n this.kb.name = updatedKbName;\n }\n this.editValidation(result, this.kbNameEl);\n });\n }\n };\n\n // Environment Name\n private handleEnvNameChange = async () => {\n if (this.renameEnvironmentCallback) {\n const response = this.renameEnvironmentCallback(this.envNameEl.value);\n response.then((result: EditResult) => {\n if (result.success) {\n this.environment.name = this.envNameEl.value;\n }\n this.editValidation(result, this.envNameEl);\n });\n }\n };\n\n private handleDescriptionChange = async () => {\n if (this.editDescriptionCallback) {\n await this.editDescriptionCallback();\n }\n };\n\n // Recent Objects\n\n private openObject = (id: string) => {\n this.openObjectCallback(id);\n };\n\n // Validation\n\n private editValidation = (\n result: EditResult,\n el: HTMLGxgTitleEditableElement\n ) => {\n if (!result.success) {\n el.validationStatus = \"error\";\n el.validationMessage = result.errorMessage;\n } else {\n el.validationStatus = \"indeterminate\";\n el.validationMessage = \"\";\n }\n };\n\n // 10.Render Function\n\n private renderProjectContent = (): Element => {\n return this.projectDescription ? (\n <div class=\"project-description\" innerHTML={this.projectDescription}>\n {this.enableEditDescription ? (\n <gxg-button\n type=\"secondary-text-icon\"\n icon=\"gemini-tools/edit\"\n onClick={this.handleDescriptionChange}\n >\n {this._componentLocale.edit}\n </gxg-button>\n ) : null}\n </div>\n ) : null;\n };\n\n private renderFrontEndTitle() {\n return this.environment.frontEnd.length <= 1\n ? this._componentLocale.environment.frontEndLang\n : this._componentLocale.environment.frontEndLangs;\n }\n\n private renderKbDates() {\n return this.kb.created \|\| this.kb.lastBuild ? (\n <gxg-text class=\"display-inline\" type=\"text-gray\" padding=\"s\">\n {\n / created/\n this.kb.created\n ? `${this._componentLocale.created}: ${formatDate(\n this.kb.created,\n \"date-time-short\"\n )}`\n : null\n }\n {this.kb.created && this.kb.lastBuild ? \" - \" : null}\n {\n / last build date /\n this.kb.lastBuild\n ? `${this._componentLocale.lastBuild}: ${formatDate(\n this.kb.lastBuild,\n \"date-time-short\"\n )}`\n : null\n }\n </gxg-text>\n ) : null;\n }\n\n // 11.RENDER() MAIN FUNCTION //\n\n render() {\n return (\n <Host>\n <div class=\"gx-ide-main-wrapper\">\n <div class=\"grid grid--basic\">\n <div class=\"kb gxi-overflow-auto\">\n <gxg-title-editable\n value={this.kb.name}\n disable-edition={!this.enableEditKBName}\n click-to-edit={true}\n fluid\n onValueChanged={this.handleKbNameChange}\n focusType=\"text\"\n debounce\n ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n ></gxg-title-editable>\n <div class=\"align-center kb-detail\">\n <gxg-pill id=\"pill\" type=\"static\" icon=\"objects/procedure\">\n {this._componentLocale.version}: {this.kb.currentVersion}\n </gxg-pill>\n\n {this.renderKbDates()}\n </div>\n </div>\n\n <div class=\"environment\">\n <gxg-title-editable\n class=\"environment-title\"\n value={this.environment.name}\n disable-edition={!this.enableEditEnvironmentName}\n click-to-edit={true}\n title-type=\"h3\"\n ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n onValueChanged={this.handleEnvNameChange}\n focusType=\"text\"\n debounce\n ></gxg-title-editable>\n <div class=\"environment__environments\">\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this.renderFrontEndTitle()}\n >\n <div class=\"environment-container\">\n {this.environment?.frontEnd?.map(\n (obj: EnvironmentItemData) => (\n <div class=\"environment-item\">\n <gxg-icon\n type={obj.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {obj.name}\n </div>\n )\n )}\n </div>\n </gxg-card>\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this._componentLocale.environment.backEnd}\n >\n <div class=\"environment-container\">\n <div class=\"environment-item\">\n <gxg-icon\n type={this.environment.backEnd.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.backEnd.name}\n </div>\n </div>\n </gxg-card>\n\n <gxg-card\n cardType=\"mini\"\n class=\"environment-card\"\n cardTitle={this._componentLocale.environment.dataStore}\n >\n <div class=\"environment-container\">\n <div class=\"environment-item\">\n <gxg-icon\n type={this.environment.dataStore.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.dataStore.name}\n </div>\n </div>\n </gxg-card>\n </div>\n </div>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.project.title}\n class=\"project\"\n >\n {/ <gxg-tabs height=\"auto\" minWidth=\"100%\">\n <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.description}\n tab=\"description\"\n is-selected\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.lookFeel}\n tab=\"lookFeel\"\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.architecture}\n tab=\"architecture\"\n ></gxg-tab-button>\n </gxg-tab-bar>\n <gxg-tab noPadding tab=\"description\" flexContainer>\n {this.renderProjectContent()}\n </gxg-tab>\n <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n </gxg-tabs> */}\n {this.renderProjectContent()}\n </gxg-card>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.recentObjects.title}\n class=\"recent-objects\"\n cardType=\"section\"\n noPaddingTop\n ref={el =>\n (this.recentObjectsContainerEl = el as HTMLGxgCardElement)\n }\n >\n <div class=\"recent-objects__container\">\n {this.recentObjects?.length === 0 ? (\n <gx-ide-empty-state\n class=\"recent-objects__empty-state\"\n stateIconSrc={this.#folderIcon}\n stateTitle={\n this._componentLocale.recentObjects.emptyState.title\n }\n stateDescription={\n this._componentLocale.recentObjects.emptyState.description\n }\n ></gx-ide-empty-state>\n ) : (\n this.recentObjects?.map((obj: recentObjectData) => {\n const statusLocale = mapStatusToLocale[obj.status];\n const statusDescription =\n this._componentLocale.recentObjects.status[statusLocale];\n return (\n <gxg-card\n background=\"gray-01\"\n padding=\"m\"\n cardType=\"article\"\n class=\"recent-objects__card\"\n actionable\n onClick={() => this.openObject(obj.id)}\n >\n <div class=\"recent-objects__object\">\n <div class=\"col col-left\">\n <gxg-icon\n type={obj.typeIcon}\n color=\"auto\"\n ></gxg-icon>\n <gxg-text type=\"text-regular\" class=\"obj-name\">\n {obj.name}\n </gxg-text>\n </div>\n <div class=\"col col-right\">\n <gxg-text italic>\n {statusDescription}\n {obj.status === \"modified\"\n ? formatDate(obj.modificationDate, \"date\")\n : null}\n </gxg-text>\n {obj.status !== \"unmodified\" &&\n obj.status !== \"not-connected\" ? (\n <gxg-icon\n type={mapStatusToIcons[obj.status]}\n color=\"auto\"\n ></gxg-icon>\n ) : null}\n </div>\n </div>\n </gxg-card>\n );\n })\n )}\n </div>\n </gxg-card>\n </div>\n </div>\n <gxg-ide-loader\n loaderTitle={this._componentLocale.loader.title}\n description={this._componentLocale.loader.description}\n ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n ></gxg-ide-loader>\n </Host>\n );\n }\n}\n\nexport type KBData = {\n name: string;\n currentVersion: string;\n created: Date;\n lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n name: string;\n frontEnd: EnvironmentItemData[];\n backEnd: EnvironmentItemData;\n dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n icon: string;\n name: string;\n};\n\nexport type recentObjectData = {\n id: string;\n typeIcon: string;\n name: string;\n modificationDate: Date;\n status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n \| \"new\"\n \| \"modified\"\n \| \"conflicted\"\n \| \"unmodified\"\n \| \"not-connected\";\n\nexport type StatusIcons =\n // toDo: Add proper icons!!\n \| \"gx-server/new\"\n \| \"patterns-default-associated/modified\"\n \| \"patterns-default-associated/synchronized\"\n \| \"gx-server/delete\";\n\nexport type EditResult = {\n success: boolean;\n errorMessage: string;\n};\n"],"version":3}

package/dist/esm/gx-ide-data-selector.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, g as getElement } from './index-27c691bc.js';
 import { L as Locale } from './locale-3c32f251.js';
 import { c as config } from './config-ed1f26d7.js';
-import { g as getIconPath } from './assets-manager-120996e9.js';
+import { g as getIconPath } from './assets-manager-251883e0.js';
-const dataSelectorCss = ":host{display:grid;grid-template-rows:max-content 1fr max-content;overflow:auto;block-size:100%}.section{display:contents}.header__field-group{display:grid;grid-template-columns:1fr 1fr}.tabular-grid{contain:size}.data ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ch-tabular-grid.empty-result::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}";
+const dataSelectorCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;grid-template-rows:max-content 1fr max-content;overflow:auto;block-size:100%}.section{display:contents}.header__field-group{display:grid;grid-template-columns:1fr 1fr}.tabular-grid{contain:size}.data ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ch-tabular-grid.empty-result::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)

package/dist/esm/gx-ide-data-selector.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-data-selector.entry.js","mappings":"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","names":[],"sources":["src/components/data-selector/data-selector.scss?tag=gx-ide-data-selector&encapsulation=shadow","src/components/data-selector/data-selector.tsx"],"sourcesContent":["@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\"; // for the tabular-grid-cell-layout mixin\n\n:host {\n display: grid;\n grid-template-rows: max-content 1fr max-content;\n overflow: auto;\n block-size: 100%;\n}\n\n.section {\n display: contents;\n}\n\n.header__field-group {\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.tabular-grid {\n contain: size;\n}\n@include tabular-grid-cell-layout(\n $tabular-grid-selector: \".data\",\n $tabular-grid-cell-node-type: \"text\",\n $tabular-grid-cell-apply-ellipsis: true,\n $tabular-grid-affected-columns-nth-list: (\n 2,\n 3,\n 4\n )\n);\n\nch-tabular-grid.empty-result::part(main) {\n // WA to avoid scrollbar flickering when displaying the empty-state message\n overflow: hidden;\n}\nch-tabular-grid-rowset-empty {\n // to make the loader be positioned relative to 'ch-tabular-grid-rowset-empty'\n position: relative;\n}\n","/* eslint-disable @stencil-community/own-props-must-be-private /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Method,\n getAssetPath\n} from \"@stencil/core\";\n\nimport { Locale } from \"../../common/locale\";\n\nimport { config } from \"../../common/config\";\nimport { EntityData } from \"../../common/types\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { TabularGridSelectionChangedEvent } from \"@genexus/chameleon-controls-library\";\n\n// Best performance bundle\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/edit\",\n \"components/tabular-grid\",\n \"components/icon\",\n \"utils/form\",\n \"utils/layout\",\n \"chameleon/scrollbar\"\n];\n\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\n\n@Component({\n tag: \"gx-ide-data-selector\",\n styleUrl: \"data-selector.scss\",\n shadow: { delegatesFocus: true },\n assetsDirs: [\"gx-ide-assets/data-selector\"]\n})\nexport class GxIdeDataSelector {\n #firstGridObjectId: string; // used to select the first item after \"loadItemsCallback\"\n #loadItemsCallbackJustCalled: boolean = false; // used to select the first item after \"loadItemsCallback\"\n\n #componentLocale: any;\n #animateEmptyState: boolean = false;\n #shortcutsSrc = getAssetPath(`./gx-ide-assets/data-selector/shortcuts.json`);\n / References needed to collect data /\n #filterPatternEl!: HTMLChEditElement;\n #filterObjectEl!: HTMLGxIdeEntitySelectorElement;\n #chShortcutsEl: HTMLChShortcutsElement;\n #chTabularGridObjectsEl: HTMLChTabularGridElement;\n\n @Element() el: HTMLGxIdeDataSelectorElement;\n\n /\n True if loadItemsCallback has been called and has not been resolved yet.\n /\n @State() loading: boolean = true;\n\n /\n The objects rendered in the table\n /\n @State() objects: ItemData[] = [];\n\n /\n The selected objects in the table of objects\n /\n @State() selectedObjectsIds: string[] = [];\n\n /\n Callback invoked when the user wishes to cancel the selection of objects.\n /\n @Prop() readonly cancelCallback!: CancelCallback;\n\n /\n Callback invoked when the user presses the 'OK' button\n /\n @Prop() readonly confirmCallback!: ConfirmCallback;\n\n /\n The default value for the module/folder filter\n /\n @Prop() readonly defaultModule: EntityData;\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback invoked when user presses the edit button. Receives the first\n * selected element id as a parameter.\n /\n @Prop() readonly editCallback!: EditCallback;\n\n /\n Callback invoked when the component needs to reload the list of attributes.\n /\n @Prop() readonly loadItemsCallback!: LoadItemsCallback;\n\n /\n If true, it will display a loader when needed.\n /\n @Prop() readonly loader = false;\n\n /\n Callback invoked when the user presses the 'New' button.\n /\n @Prop() readonly newVariableCallback!: NewVariableCallback;\n\n /\n Callback invoked when the action is executed in the Object filter. It returns\n * the information of the selected object (id and name) or 'undefined' if it was\n * canceled.\n /\n @Prop() readonly selectObjectCallback: SelectObjectCallback;\n\n /\n Single if multiple object selection is not allowed. Default is multiple\n /\n @Prop() readonly selectionType: \"single\" \| \"multiple\" = \"multiple\";\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n connectedCallback() {\n this.#refreshUIWithNewConfiguration();\n }\n\n componentDidLoad() {\n this.#filterPatternEl.focus();\n }\n\n componentDidRender() {\n this.#evaluateFirstRowSelection();\n }\n\n /\n Suspends or reactivates the shortcuts\n /\n @Method()\n async suspendShortcuts(suspendShortcuts: boolean) {\n if (suspendShortcuts) {\n this.#chShortcutsEl.suspend = true;\n } else {\n this.#chShortcutsEl.suspend = false;\n }\n }\n\n /\n Validate necessary data input\n /\n @Method()\n async validate(): Promise<boolean> {\n const isValid = true;\n return isValid;\n }\n\n /\n After items have been loaded and rendered, the first row should be selected.\n */\n #evaluateFirstRowSelection = () => {\n if (this.#loadItemsCallbackJustCalled) {\n this.#chTabularGridObjectsEl.selectRow(this.#firstGridObjectId);\n }\n this.#loadItemsCallbackJustCalled = false;\n };\n\n #chGridKeyDownHandler = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.#confirmCallbackHandler(e);\n }\n };\n\n #confirmCallbackHandler = (e: MouseEvent \| KeyboardEvent): void => {\n e.stopPropagation();\n this.confirmCallback(this.selectedObjectsIds);\n };\n\n #editCallbackHandler = async (e: MouseEvent): Promise<void> => {\n e.stopPropagation();\n if (this.selectedObjectsIds[0]) {\n const result = await this.editCallback(this.selectedObjectsIds[0]);\n if (result) {\n this.#refreshUIWithNewConfiguration();\n }\n }\n };\n\n #hostKeyPressHandler = (e: KeyboardEvent) => {\n // TODO : revise why this is necessary\n // just prevent keypress propagation\n if (e.key === \"Enter\") {\n e.stopPropagation();\n }\n };\n\n #objectsSelectionChangedHandler = (\n event: CustomEvent<TabularGridSelectionChangedEvent>\n ) => {\n this.selectedObjectsIds = event.detail.rowsId;\n };\n\n #newVariableCallbackHandler = async () => {\n const response = await this.newVariableCallback();\n if (response) {\n this.#refreshUIWithNewConfiguration();\n }\n };\n #refreshUIWithNewConfiguration = (): void => {\n this.objects = [];\n const filters: FiltersData = {\n pattern: this.#filterPatternEl?.value,\n object: this.#filterObjectEl?.value?.id\n };\n this.loading = true;\n this.loadItemsCallback(filters).then((items: ItemData[]) => {\n if (items.length) {\n this.objects = this.#sortObjectsByName(items);\n this.#firstGridObjectId = this.objects[0].id;\n this.#loadItemsCallbackJustCalled = true;\n }\n this.selectedObjectsIds = [];\n this.loading = false;\n });\n };\n\n #renderFilter = (): Element[] => {\n return [\n <div class=\"header__field-group field-group\">\n <div class=\"field field-block pattern-field\">\n <label class=\"label\" htmlFor=\"filter-pattern\">\n {this.#componentLocale.filter.pattern}\n </label>\n <ch-edit\n autoFocus\n id=\"filter-pattern\"\n name=\"filter-pattern\"\n class=\"form-input pattern-input\"\n part=\"filter-pattern\"\n debounce={config.inputDebounce}\n onInput={this.#refreshUIWithNewConfiguration}\n ref={(el: HTMLChEditElement) =>\n (this.#filterPatternEl = el as HTMLChEditElement)\n }\n ></ch-edit>\n </div>\n <gx-ide-entity-selector\n id=\"object-selector\"\n value={this.defaultModule}\n defaultValue={this.defaultModule}\n selectEntityCallback={this.selectObjectCallback}\n ref={(el: HTMLGxIdeEntitySelectorElement) =>\n (this.#filterObjectEl = el as HTMLGxIdeEntitySelectorElement)\n }\n class=\"entity\"\n onValueChanged={this.#refreshUIWithNewConfiguration}\n ></gx-ide-entity-selector>\n </div>\n ];\n };\n\n #renderObjects = (): Element => {\n const gridIsEmpty = !this.objects.length;\n const displayLoader = this.loader && this.loading;\n if (!gridIsEmpty \|\| displayLoader) {\n this.#animateEmptyState = true; // improve performance if is first render\n }\n return (\n <ch-tabular-grid\n class={{\n \"tabular-grid\": true,\n \"empty-result\": this.objects.length === 0,\n \"data\": true\n }}\n rowSelectionMode={this.selectionType}\n onKeyDown={this.#chGridKeyDownHandler}\n part=\"ch-grid-objects\"\n onSelectionChanged={\n this.objects.length ? this.#objectsSelectionChangedHandler : undefined\n }\n ref={(el: HTMLChTabularGridElement) =>\n (this.#chTabularGridObjectsEl = el as HTMLChTabularGridElement)\n }\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.maxContent}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.name}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.dataType}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.description}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n {!gridIsEmpty ? (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n {this.objects.map((obj: ItemData) => (\n <ch-tabular-grid-row\n rowid={obj.id}\n onDblClick={this.#confirmCallbackHandler}\n class=\"tabular-grid-row\"\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-image\n src={\n obj.type === \"attribute\"\n ? \"objects/attribute\"\n : \"objects-parts/variables\"\n }\n class=\"icon-md\"\n ></ch-image>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.name}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.dataType}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.description}\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n ))}\n </ch-tabular-grid-rowset>\n ) : (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n <ch-tabular-grid-rowset-empty>\n {displayLoader ? (\n <gx-ide-loader\n loaderTitle={this.#componentLocale.loader.title}\n show\n ></gx-ide-loader>\n ) : (\n <gx-ide-empty-state\n isAnimated={this.#animateEmptyState}\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.emptyState.title}\n ></gx-ide-empty-state>\n )}\n </ch-tabular-grid-rowset-empty>\n </ch-tabular-grid-rowset>\n )}\n </ch-tabular-grid>\n );\n };\n\n #sortObjectsByName = (objects: ItemData[]): ItemData[] =>\n // TODO (make this a common helper function\n // and use it in other dialog grids that\n // require filter by name).\n objects.sort((a, b) => {\n const nameA = a.name.toLowerCase(),\n nameB = b.name.toLowerCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n return 0;\n });\n\n render() {\n const newVariableButtonEnabled = !this.loading;\n const editButtonEnabled = !this.loading && this.selectedObjectsIds.length;\n const okButtonEnabled = !this.loading;\n\n return (\n <Host onKeyPress={this.#hostKeyPressHandler} class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <ch-shortcuts\n src={this.#shortcutsSrc}\n ref={(el: HTMLChShortcutsElement) =>\n (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n }\n ></ch-shortcuts>\n\n <section class=\"section\">\n <header class=\"header control-header-with-border spacing-body-block-start spacing-body-inline\">\n {this.#renderFilter()}\n </header>\n {this.#renderObjects()}\n <footer class=\"footer control-footer-with-border control-footer-space-between spacing-body-inline spacing-body-block-end\">\n <div class=\"buttons-spacer\">\n <button\n // New Variable Button\n class=\"button-secondary\"\n disabled={!newVariableButtonEnabled}\n part=\"button button-new\"\n type=\"button\"\n onClick={this.#newVariableCallbackHandler}\n >\n {this.#componentLocale.footer.btnNew}\n </button>\n <button\n // Edit Button\n class=\"button-secondary\"\n disabled={!editButtonEnabled}\n part=\"button button-edit\"\n type=\"button\"\n onClick={editButtonEnabled && this.#editCallbackHandler}\n >\n {this.#componentLocale.footer.btnEdit}\n </button>\n </div>\n\n <div class=\"buttons-spacer\">\n <button\n // Cancel Button\n class=\"button-secondary\"\n part=\"button button-cancel\"\n type=\"button\"\n onClick={this.cancelCallback}\n >\n {this.#componentLocale.footer.btnCancel}\n </button>\n <button\n // Confirm Button\n class=\"button-primary\"\n part=\"button button-ok\"\n disabled={!okButtonEnabled}\n type=\"button\"\n onClick={okButtonEnabled && this.#confirmCallbackHandler}\n >\n {this.#componentLocale.footer.btnConfirm}\n </button>\n </div>\n </footer>\n </section>\n </Host>\n );\n }\n}\n\nexport type NewVariableCallback = () => Promise<boolean>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type SelectObjectCallback = () => Promise<EntityData \| undefined>;\n\nexport type EditCallback = (id: string) => Promise<boolean>;\n\nexport type ConfirmCallback = (ids: string[]) => Promise<void>;\n\nexport type LoadItemsCallback = (filters: FiltersData) => Promise<ItemData[]>;\n\nexport type FiltersData = {\n pattern?: string;\n object?: string;\n};\n\nexport type ItemData = {\n type: ItemType;\n id: string;\n name: string;\n dataType: string;\n description: string;\n};\n\nexport type ItemType = \"variable\" \| \"attribute\";\n"],"version":3}
1	+ {"file":"gx-ide-data-selector.entry.js","mappings":"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","names":[],"sources":["src/components/data-selector/data-selector.scss?tag=gx-ide-data-selector&encapsulation=shadow","src/components/data-selector/data-selector.tsx"],"sourcesContent":["@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\"; // for the tabular-grid-cell-layout mixin\n\n:host {\n display: grid;\n grid-template-rows: max-content 1fr max-content;\n overflow: auto;\n block-size: 100%;\n}\n\n.section {\n display: contents;\n}\n\n.header__field-group {\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.tabular-grid {\n contain: size;\n}\n@include tabular-grid-cell-layout(\n $tabular-grid-selector: \".data\",\n $tabular-grid-cell-node-type: \"text\",\n $tabular-grid-cell-apply-ellipsis: true,\n $tabular-grid-affected-columns-nth-list: (\n 2,\n 3,\n 4\n )\n);\n\nch-tabular-grid.empty-result::part(main) {\n // WA to avoid scrollbar flickering when displaying the empty-state message\n overflow: hidden;\n}\nch-tabular-grid-rowset-empty {\n // to make the loader be positioned relative to 'ch-tabular-grid-rowset-empty'\n position: relative;\n}\n","/* eslint-disable @stencil-community/own-props-must-be-private /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Method,\n getAssetPath\n} from \"@stencil/core\";\n\nimport { Locale } from \"../../common/locale\";\n\nimport { config } from \"../../common/config\";\nimport { EntityData } from \"../../common/types\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { TabularGridSelectionChangedEvent } from \"@genexus/chameleon-controls-library\";\n\n// Best performance bundle\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/edit\",\n \"components/tabular-grid\",\n \"components/icon\",\n \"utils/form\",\n \"utils/layout\",\n \"chameleon/scrollbar\"\n];\n\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\n\n@Component({\n tag: \"gx-ide-data-selector\",\n styleUrl: \"data-selector.scss\",\n shadow: { delegatesFocus: true },\n assetsDirs: [\"gx-ide-assets/data-selector\"]\n})\nexport class GxIdeDataSelector {\n #firstGridObjectId: string; // used to select the first item after \"loadItemsCallback\"\n #loadItemsCallbackJustCalled: boolean = false; // used to select the first item after \"loadItemsCallback\"\n\n #componentLocale: any;\n #animateEmptyState: boolean = false;\n #shortcutsSrc = getAssetPath(`./gx-ide-assets/data-selector/shortcuts.json`);\n / References needed to collect data /\n #filterPatternEl!: HTMLChEditElement;\n #filterObjectEl!: HTMLGxIdeEntitySelectorElement;\n #chShortcutsEl: HTMLChShortcutsElement;\n #chTabularGridObjectsEl: HTMLChTabularGridElement;\n\n @Element() el: HTMLGxIdeDataSelectorElement;\n\n /\n True if loadItemsCallback has been called and has not been resolved yet.\n /\n @State() loading: boolean = true;\n\n /\n The objects rendered in the table\n /\n @State() objects: ItemData[] = [];\n\n /\n The selected objects in the table of objects\n /\n @State() selectedObjectsIds: string[] = [];\n\n /\n Callback invoked when the user wishes to cancel the selection of objects.\n /\n @Prop() readonly cancelCallback!: CancelCallback;\n\n /\n Callback invoked when the user presses the 'OK' button\n /\n @Prop() readonly confirmCallback!: ConfirmCallback;\n\n /\n The default value for the module/folder filter\n /\n @Prop() readonly defaultModule: EntityData;\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback invoked when user presses the edit button. Receives the first\n * selected element id as a parameter.\n /\n @Prop() readonly editCallback!: EditCallback;\n\n /\n Callback invoked when the component needs to reload the list of attributes.\n /\n @Prop() readonly loadItemsCallback!: LoadItemsCallback;\n\n /\n If true, it will display a loader when needed.\n /\n @Prop() readonly loader = false;\n\n /\n Callback invoked when the user presses the 'New' button.\n /\n @Prop() readonly newVariableCallback!: NewVariableCallback;\n\n /\n Callback invoked when the action is executed in the Object filter. It returns\n * the information of the selected object (id and name) or 'undefined' if it was\n * canceled.\n /\n @Prop() readonly selectObjectCallback: SelectObjectCallback;\n\n /\n Single if multiple object selection is not allowed. Default is multiple\n /\n @Prop() readonly selectionType: \"single\" \| \"multiple\" = \"multiple\";\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n connectedCallback() {\n this.#refreshUIWithNewConfiguration();\n }\n\n componentDidLoad() {\n this.#filterPatternEl.focus();\n }\n\n componentDidRender() {\n this.#evaluateFirstRowSelection();\n }\n\n /\n Suspends or reactivates the shortcuts\n /\n @Method()\n async suspendShortcuts(suspendShortcuts: boolean) {\n if (suspendShortcuts) {\n this.#chShortcutsEl.suspend = true;\n } else {\n this.#chShortcutsEl.suspend = false;\n }\n }\n\n /\n Validate necessary data input\n /\n @Method()\n async validate(): Promise<boolean> {\n const isValid = true;\n return isValid;\n }\n\n /\n After items have been loaded and rendered, the first row should be selected.\n */\n #evaluateFirstRowSelection = () => {\n if (this.#loadItemsCallbackJustCalled) {\n this.#chTabularGridObjectsEl.selectRow(this.#firstGridObjectId);\n }\n this.#loadItemsCallbackJustCalled = false;\n };\n\n #chGridKeyDownHandler = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.#confirmCallbackHandler(e);\n }\n };\n\n #confirmCallbackHandler = (e: MouseEvent \| KeyboardEvent): void => {\n e.stopPropagation();\n this.confirmCallback(this.selectedObjectsIds);\n };\n\n #editCallbackHandler = async (e: MouseEvent): Promise<void> => {\n e.stopPropagation();\n if (this.selectedObjectsIds[0]) {\n const result = await this.editCallback(this.selectedObjectsIds[0]);\n if (result) {\n this.#refreshUIWithNewConfiguration();\n }\n }\n };\n\n #hostKeyPressHandler = (e: KeyboardEvent) => {\n // TODO : revise why this is necessary\n // just prevent keypress propagation\n if (e.key === \"Enter\") {\n e.stopPropagation();\n }\n };\n\n #objectsSelectionChangedHandler = (\n event: CustomEvent<TabularGridSelectionChangedEvent>\n ) => {\n this.selectedObjectsIds = event.detail.rowsId;\n };\n\n #newVariableCallbackHandler = async () => {\n const response = await this.newVariableCallback();\n if (response) {\n this.#refreshUIWithNewConfiguration();\n }\n };\n #refreshUIWithNewConfiguration = (): void => {\n this.objects = [];\n const filters: FiltersData = {\n pattern: this.#filterPatternEl?.value,\n object: this.#filterObjectEl?.value?.id\n };\n this.loading = true;\n this.loadItemsCallback(filters).then((items: ItemData[]) => {\n if (items.length) {\n this.objects = this.#sortObjectsByName(items);\n this.#firstGridObjectId = this.objects[0].id;\n this.#loadItemsCallbackJustCalled = true;\n }\n this.selectedObjectsIds = [];\n this.loading = false;\n });\n };\n\n #renderFilter = (): Element[] => {\n return [\n <div class=\"header__field-group field-group\">\n <div class=\"field field-block pattern-field\">\n <label class=\"label\" htmlFor=\"filter-pattern\">\n {this.#componentLocale.filter.pattern}\n </label>\n <ch-edit\n autoFocus\n id=\"filter-pattern\"\n name=\"filter-pattern\"\n class=\"form-input pattern-input\"\n part=\"filter-pattern\"\n debounce={config.inputDebounce}\n onInput={this.#refreshUIWithNewConfiguration}\n ref={(el: HTMLChEditElement) =>\n (this.#filterPatternEl = el as HTMLChEditElement)\n }\n ></ch-edit>\n </div>\n <gx-ide-entity-selector\n id=\"object-selector\"\n value={this.defaultModule}\n defaultValue={this.defaultModule}\n selectEntityCallback={this.selectObjectCallback}\n ref={(el: HTMLGxIdeEntitySelectorElement) =>\n (this.#filterObjectEl = el as HTMLGxIdeEntitySelectorElement)\n }\n class=\"entity\"\n onValueChanged={this.#refreshUIWithNewConfiguration}\n ></gx-ide-entity-selector>\n </div>\n ];\n };\n\n #renderObjects = (): Element => {\n const gridIsEmpty = !this.objects.length;\n const displayLoader = this.loader && this.loading;\n if (!gridIsEmpty \|\| displayLoader) {\n this.#animateEmptyState = true; // improve performance if is first render\n }\n return (\n <ch-tabular-grid\n class={{\n \"tabular-grid\": true,\n \"empty-result\": this.objects.length === 0,\n \"data\": true\n }}\n rowSelectionMode={this.selectionType}\n onKeyDown={this.#chGridKeyDownHandler}\n part=\"ch-grid-objects\"\n onSelectionChanged={\n this.objects.length ? this.#objectsSelectionChangedHandler : undefined\n }\n ref={(el: HTMLChTabularGridElement) =>\n (this.#chTabularGridObjectsEl = el as HTMLChTabularGridElement)\n }\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.maxContent}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.name}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.dataType}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n column-name={this.#componentLocale.tableHead.description}\n column-name-position=\"text\"\n settingable={false}\n size={config.tabularGrid.colSize.common}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n {!gridIsEmpty ? (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n {this.objects.map((obj: ItemData) => (\n <ch-tabular-grid-row\n rowid={obj.id}\n onDblClick={this.#confirmCallbackHandler}\n class=\"tabular-grid-row\"\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-image\n src={\n obj.type === \"attribute\"\n ? \"objects/attribute\"\n : \"objects-parts/variables\"\n }\n class=\"icon-md\"\n ></ch-image>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.name}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.dataType}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.description}\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n ))}\n </ch-tabular-grid-rowset>\n ) : (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n <ch-tabular-grid-rowset-empty>\n {displayLoader ? (\n <gx-ide-loader\n loaderTitle={this.#componentLocale.loader.title}\n show\n ></gx-ide-loader>\n ) : (\n <gx-ide-empty-state\n isAnimated={this.#animateEmptyState}\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.emptyState.title}\n ></gx-ide-empty-state>\n )}\n </ch-tabular-grid-rowset-empty>\n </ch-tabular-grid-rowset>\n )}\n </ch-tabular-grid>\n );\n };\n\n #sortObjectsByName = (objects: ItemData[]): ItemData[] =>\n // TODO (make this a common helper function\n // and use it in other dialog grids that\n // require filter by name).\n objects.sort((a, b) => {\n const nameA = a.name.toLowerCase(),\n nameB = b.name.toLowerCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n return 0;\n });\n\n render() {\n const newVariableButtonEnabled = !this.loading;\n const editButtonEnabled = !this.loading && this.selectedObjectsIds.length;\n const okButtonEnabled = !this.loading;\n\n return (\n <Host onKeyPress={this.#hostKeyPressHandler} class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <ch-shortcuts\n src={this.#shortcutsSrc}\n ref={(el: HTMLChShortcutsElement) =>\n (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n }\n ></ch-shortcuts>\n\n <section class=\"section\">\n <header class=\"header control-header-with-border spacing-body-block-start spacing-body-inline\">\n {this.#renderFilter()}\n </header>\n {this.#renderObjects()}\n <footer class=\"footer control-footer-with-border control-footer-space-between spacing-body-inline spacing-body-block-end\">\n <div class=\"buttons-spacer\">\n <button\n // New Variable Button\n class=\"button-secondary\"\n disabled={!newVariableButtonEnabled}\n part=\"button button-new\"\n type=\"button\"\n onClick={this.#newVariableCallbackHandler}\n >\n {this.#componentLocale.footer.btnNew}\n </button>\n <button\n // Edit Button\n class=\"button-secondary\"\n disabled={!editButtonEnabled}\n part=\"button button-edit\"\n type=\"button\"\n onClick={editButtonEnabled && this.#editCallbackHandler}\n >\n {this.#componentLocale.footer.btnEdit}\n </button>\n </div>\n\n <div class=\"buttons-spacer\">\n <button\n // Cancel Button\n class=\"button-secondary\"\n part=\"button button-cancel\"\n type=\"button\"\n onClick={this.cancelCallback}\n >\n {this.#componentLocale.footer.btnCancel}\n </button>\n <button\n // Confirm Button\n class=\"button-primary\"\n part=\"button button-ok\"\n disabled={!okButtonEnabled}\n type=\"button\"\n onClick={okButtonEnabled && this.#confirmCallbackHandler}\n >\n {this.#componentLocale.footer.btnConfirm}\n </button>\n </div>\n </footer>\n </section>\n </Host>\n );\n }\n}\n\nexport type NewVariableCallback = () => Promise<boolean>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type SelectObjectCallback = () => Promise<EntityData \| undefined>;\n\nexport type EditCallback = (id: string) => Promise<boolean>;\n\nexport type ConfirmCallback = (ids: string[]) => Promise<void>;\n\nexport type LoadItemsCallback = (filters: FiltersData) => Promise<ItemData[]>;\n\nexport type FiltersData = {\n pattern?: string;\n object?: string;\n};\n\nexport type ItemData = {\n type: ItemType;\n id: string;\n name: string;\n dataType: string;\n description: string;\n};\n\nexport type ItemType = \"variable\" \| \"attribute\";\n"],"version":3}