npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.2 → 1.0.3 - Mend

@genexus/genexus-ide-ui 1.0.2 → 1.0.3

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

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

	@@ -1 +1 @@
1	- {"file":"gx-ide-create-kb-from-server.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"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/helpers\";\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.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"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/helpers\";\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/components/gx-ide-dashboard-home.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { L as Locale } from './locale.js';
 import { a as formatDate } from './helpers.js';
 import { d as defineCustomElement$2 } from './gx-ide-empty-state2.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.button-primary-destructive {\n  --control__border-color: var(--button-primary__border-color--destructive);\n  background-color: var(--button-primary__bg-color--destructive);\n  color: var(--button-primary__color--destructive);\n}\n.button-primary-destructive:hover {\n  --control__border-color: var(\n    --button-primary__bg-color--destructive-hover\n  );\n  background-color: var(--button-primary__bg-color--destructive-hover);\n  color: var(--button-primary__color--destructive);\n}\n.button-primary-destructive:active {\n  --control__border-color: var(\n    --button-primary__bg-color--destructive-active\n  );\n  background-color: var(--button-primary__bg-color--destructive-active);\n  color: var(--button-primary__color--destructive);\n}\n\n.button-secondary-destructive {\n  --control__border-color: var(--button-secondary__border-color--destructive);\n  background-color: var(--button-secondary__bg-color--destructive);\n  color: var(--button-secondary__color--destructive);\n}\n.button-secondary-destructive:hover {\n  --control__border-color: var(\n    --button-secondary__bg-color--destructive-hover\n  );\n  background-color: var(--button-secondary__bg-color--destructive-hover);\n  color: var(--button-secondary__color--destructive);\n}\n.button-secondary-destructive:active {\n  --control__border-color: var(\n    --button-secondary__bg-color--destructive-active\n  );\n  background-color: var(--button-secondary__bg-color--destructive-active);\n  color: var(--button-secondary__color--destructive);\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/* 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/* - - - - - - - - - - - - - - - - -\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/* 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/components/gx-ide-dashboard-home.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-dashboard-home.js","mappings":"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","names":["GxIdeDashboardHome"],"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.js","mappings":"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","names":["GxIdeDashboardHome"],"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/components/gx-ide-data-selector.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './container.js';
 import { d as defineCustomElement$3 } from './entity-selector.js';
 import { d as defineCustomElement$2 } from './title.js';
-const dataSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.button-primary-destructive{--control__border-color:var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color:var(\n    --button-primary__bg-color--destructive-hover\n  );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color:var(\n    --button-primary__bg-color--destructive-active\n  );background-color:var(--button-primary__bg-color--destructive-active);color:var(--button-primary__color--destructive)}.button-secondary-destructive{--control__border-color:var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color:var(\n    --button-secondary__bg-color--destructive-hover\n  );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color:var(\n    --button-secondary__bg-color--destructive-active\n  );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.filter-grid{display:grid;padding:var(--spacing-comp-03);row-gap:var(--gx-ide-grid-row-gap);column-gap:var(--gx-ide-grid-column-gap);border-block-start:1px solid var(--gx-ide-container-border-color);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-areas:\"pattern-label pattern-input pattern-input pattern-input\" \"object-label object-input object-input object-input\"}.filter-grid .pattern-label{grid-area:pattern-label}.filter-grid .pattern-input{grid-area:pattern-input}.filter-grid .object-label{grid-area:object-label}.filter-grid .object-input{grid-area:object-input}.filter-grid--no-title{border-top:0}.grid-container{height:100%}ch-grid-cell{--spacing-comp-02:var(--spacing-comp-03)}.objects-count{display:flex;justify-content:space-around}.objects-count>*{flex:1;padding:var(--spacing-comp-01)}.objects-count>:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-container.loading::part(content){display:grid}";
+const dataSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.filter-grid{display:grid;padding:var(--spacing-comp-03);row-gap:var(--gx-ide-grid-row-gap);column-gap:var(--gx-ide-grid-column-gap);border-block-start:1px solid var(--gx-ide-container-border-color);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-areas:\"pattern-label pattern-input pattern-input pattern-input\" \"object-label object-input object-input object-input\"}.filter-grid .pattern-label{grid-area:pattern-label}.filter-grid .pattern-input{grid-area:pattern-input}.filter-grid .object-label{grid-area:object-label}.filter-grid .object-input{grid-area:object-input}.filter-grid--no-title{border-top:0}.grid-container{height:100%}ch-grid-cell{--spacing-comp-02:var(--spacing-comp-03)}.objects-count{display:flex;justify-content:space-around}.objects-count>*{flex:1;padding:var(--spacing-comp-01)}.objects-count>:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-container.loading::part(content){display:grid}";
 // Best performance bundle
 const CSS_BUNDLES = [