npm - @genexus/genexus-ide-ui - Versions diffs - 1.1.4 → 1.1.6 - Mend

@genexus/genexus-ide-ui 1.1.4 → 1.1.6

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

package/dist/genexus-ide-ui/{p-a1d73ca3.entry.js.map → p-01d96378.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["bpmAppDeclarationCss","CSS_BUNDLES","ADD_ICON","getIconPath","category","name","colorType","FILTER_ICON","MORE_ICON","SUGGEST_OPTIONS","alreadyProcessed","autoExpand","hideMatchesAndShowNonMatches","highlightMatchedItems","matchCase","regularExpression","strict","renderActiveItemIconOnExpand","GxIdeBpmAppDeclaration","_GxIdeBpmAppDeclaration_componentLocale","set","this","_GxIdeBpmAppDeclaration_animateEmptyState","_GxIdeBpmAppDeclaration_shortcutsSrc","getAssetPath","_GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP","in","undefined","out","inout","_GxIdeBpmAppDeclaration_setAccessCaptions","__classPrivateFieldGet","dataMappings","access","_GxIdeBpmAppDeclaration_applicationInputChangedHandler","async","event","selectedApplicationName","detail","application","mappings","getDataMappingCallback","_GxIdeBpmAppDeclaration_cancelCallbackHandler","cancelCallback","_GxIdeBpmAppDeclaration_clearApplicationHandler","typeIcon","_GxIdeBpmAppDeclaration_confirmCallbackHandler","confirmCallback","_GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel","relevantDataOptions","map","optionName","caption","value","_GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel","suggestedApplicationsNames","applicationName","_GxIdeBpmAppDeclaration_relevantDataInputHandler","mappingIndex","inputValue","relevantData","_GxIdeBpmAppDeclaration_selectApplicationCallbackHandler","applicationDeclarationData","selectApplicationCallback","_GxIdeBpmAppDeclaration_setApplicationData","call","_GxIdeBpmAppDeclaration_selectMappingCallbackHandler","parameter","returnedRelevantData","selectMappingCallback","currentRelevantDataOptions","indexOfReturnedRelevantData","indexOf","push","_GxIdeBpmAppDeclaration_updateApplicationData","applicationData","applicationComboBoxModel","startImgSrc","_GxIdeBpmAppDeclaration_suggestInputHandler","suggestedApplicationNames","suggestApplicationsCallback","Object","assign","_GxIdeBpmAppDeclaration_renderDataMappingsGrid","applicationDataToDisplay","length","__classPrivateFieldSet","h","class","title","scrollable","part","columnName","_a","firstColName","firstColNameParameter","settingable","size","config","tabularGrid","colSize","common","secondColName","sortable","auto","obj","index","rowId","key","model","onInput","onClick","buttons","selectMapping","src","isAnimated","stateIconSrc","stateTitle","emptyState","stateDescription","description","componentWillLoad","Locale","getComponentStrings","el","render","Host","slot","suggestDebounce","inputDebounce","suggest","suggestOptions","onChange","selectApplication","cancelButton","confirmButton"],"sources":["src/components/bpm/application-declaration/bpm-app-declaration.scss?tag=gx-ide-bpm-app-declaration&encapsulation=shadow","src/components/bpm/application-declaration/bpm-app-declaration.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n:host {\n display: grid;\n block-size: 100%;\n grid-template-rows: max-content 1fr max-content;\n overflow: auto;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n display: grid;\n grid-template-columns: 1fr max-content;\n}\n\n.data-mapping-grid-container,\n.data-mapping-grid-container .field {\n overflow: auto;\n block-size: 100%;\n}\n\n.tabular-grid-application-declaration {\n overflow: auto;\n}\nch-tabular-grid.empty-result::part(main) {\n // WA to avoid scrollbar flickering when displaying the empty-state message\n overflow: hidden;\n}\n\n.pill-tag {\n // base styles for this class defined on \"gx-ide-common.scss\"\n min-inline-size: 40px;\n margin-inline-end: 10px;\n}\n\n@include tabular-grid-cell-layout(\n $tabular-grid-selector: \".tabular-grid-application-declaration\",\n $tabular-grid-cell-node-type: \"element\",\n $tabular-grid-affected-columns-nth-list: (\n 2\n )\n);\n\n// WA\n.tabular-grid-cell:nth-child(2) {\n padding: 0 !important;\n display: grid;\n align-items: stretch;\n justify-content: stretch;\n --ds-focus-border-width: none;\n}\n.tabular-grid-cell:nth-child(3) {\n padding: 0 !important;\n align-items: center !important;\n justify-content: center !important;\n}\n.tabular-grid {\n overflow: auto;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n getAssetPath\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/combo-box\",\n \"components/icon\",\n \"components/tabular-grid\",\n \"utils/elevation\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\"\n];\n\nconst ADD_ICON = getIconPath({\n category: \"system\",\n name: \"add\",\n colorType: \"neutral\"\n});\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\nconst MORE_ICON = getIconPath({\n category: \"system\",\n name: \"more-horizontal\",\n colorType: \"primary\"\n});\n\nconst SUGGEST_OPTIONS = {\n alreadyProcessed: true,\n autoExpand: false,\n hideMatchesAndShowNonMatches: false,\n highlightMatchedItems: false,\n matchCase: false,\n regularExpression: false,\n strict: false,\n renderActiveItemIconOnExpand: true\n};\n\n@Component({\n tag: \"gx-ide-bpm-app-declaration\",\n styleUrl: \"bpm-app-declaration.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/bpm-app-declaration\"]\n})\nexport class GxIdeBpmAppDeclaration {\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n #animateEmptyState = true;\n #shortcutsSrc = getAssetPath(\n `./gx-ide-assets/bpm-app-declaration/shortcuts.json`\n );\n\n #ACCESS_CAPTION_MAP: Record<DataMappingAccess, string> = {\n // To be defined on componentWillLoad\n in: undefined,\n out: undefined,\n inout: undefined\n };\n\n @Element() el: HTMLGxIdeBpmAppDeclarationElement;\n\n /\n The application ComoBoxModel. When the component renders for the first time, it is required\n * to display the application typeIcon. Later, it is required to display the suggested application\n * options with the combo suggest.\n /\n @State() applicationComboBoxModel: ComboBoxModel = [];\n\n /\n Current value of the application declaration. Keep in mind that this property will be used by\n * the host to initialize the component, meaning it will assign the current declaration value.\n /\n @Prop({ mutable: true }) application: ApplicationDeclarationData;\n\n /\n Callback invoked when user cancels application declaration\n /\n @Prop() readonly cancelCallback: CancelCallback;\n\n /\n Callback invoked when user confirms application declaration\n /\n @Prop() readonly confirmCallback: ConfirmCallback;\n\n /\n Callback invoked when user select one of the options provided by the suggest\n /\n @Prop() readonly getDataMappingCallback: GetDataMappingCallback;\n\n /\n Callback invoked to get access to selection application dialog\n /\n @Prop() readonly selectApplicationCallback: SelectApplicationCallback;\n\n /\n Callback invoked when user press mapping auto-def button\n /\n @Prop() readonly selectMappingCallback: SelectMappingCallback;\n\n /\n Callback invoked to get options for application input suggest\n /\n @Prop() readonly suggestApplicationsCallback: SuggestApplicationsCallback;\n\n /\n @description Gets fired when the component has rendered for the first time.\n */\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.#setApplicationData(this.application.application);\n if (this.application.mappings.length === 0) {\n this.#animateEmptyState = false;\n }\n this.#setAccessCaptions();\n }\n\n #setAccessCaptions = () => {\n this.#ACCESS_CAPTION_MAP.in = this.#componentLocale.dataMappings.access.in;\n this.#ACCESS_CAPTION_MAP.out =\n this.#componentLocale.dataMappings.access.out;\n this.#ACCESS_CAPTION_MAP.inout =\n this.#componentLocale.dataMappings.access.inout;\n };\n\n #applicationInputChangedHandler = async (\n event: CustomEvent<string> \| InputEvent\n ) => {\n const selectedApplicationName = event.detail as string;\n this.application.mappings = await this.getDataMappingCallback(\n selectedApplicationName\n );\n };\n\n #cancelCallbackHandler = () => {\n this.cancelCallback();\n };\n\n #clearApplicationHandler = () => {\n this.application = {\n application: {\n name: \"\",\n typeIcon: \"\"\n },\n mappings: []\n };\n };\n\n #confirmCallbackHandler = () => {\n this.confirmCallback(this.application);\n };\n\n #mapRelevantDataOptionsToComboBoxModel = (\n relevantDataOptions: string[]\n ): ComboBoxModel => {\n return relevantDataOptions.map(optionName => {\n return {\n caption: optionName,\n value: optionName\n };\n });\n };\n\n #mapSuggestedApplicationsToComboBoxModel = (\n suggestedApplicationsNames: string[]\n ): ComboBoxModel => {\n return suggestedApplicationsNames.map(applicationName => {\n return {\n caption: applicationName,\n value: applicationName\n };\n });\n };\n\n #relevantDataInputHandler =\n (mappingIndex: number) =>\n async (event: CustomEvent<string> \| InputEvent) => {\n const inputValue = event.detail as string;\n this.application.mappings[mappingIndex].relevantData = inputValue;\n };\n\n #selectApplicationCallbackHandler = async () => {\n const applicationDeclarationData = await this.selectApplicationCallback();\n if (applicationDeclarationData) {\n this.#setApplicationData(applicationDeclarationData.application);\n this.application.mappings = applicationDeclarationData.mappings;\n }\n };\n\n #selectMappingCallbackHandler =\n (parameter: string, mappingIndex: number) => async () => {\n const returnedRelevantData = await this.selectMappingCallback(parameter);\n if (returnedRelevantData) {\n const currentRelevantDataOptions =\n this.application.mappings[mappingIndex].relevantDataOptions;\n\n const indexOfReturnedRelevantData =\n currentRelevantDataOptions.indexOf(returnedRelevantData);\n\n if (indexOfReturnedRelevantData === -1) {\n // returnedRelevantData is a new option. Add to combo-box.\n currentRelevantDataOptions.push(returnedRelevantData);\n }\n // Set as selected\n this.application.mappings[mappingIndex].relevantData =\n returnedRelevantData;\n\n this.#updateApplicationData();\n }\n };\n\n #setApplicationData = (applicationData: ApplicationData) => {\n if (applicationData) {\n const applicationName = applicationData.name;\n this.application.application.name = applicationName;\n this.applicationComboBoxModel = [\n {\n caption: applicationName,\n value: applicationName,\n startImgSrc: applicationData.typeIcon\n }\n ];\n }\n };\n\n #suggestInputHandler = async (event: CustomEvent<string> \| InputEvent) => {\n const inputValue = event.detail as string;\n this.application.application.name = inputValue;\n const suggestedApplicationNames: string[] =\n await this.suggestApplicationsCallback(inputValue);\n\n this.applicationComboBoxModel =\n this.#mapSuggestedApplicationsToComboBoxModel(suggestedApplicationNames);\n };\n\n #updateApplicationData = () => {\n this.application = { ...this.application };\n };\n\n // Renders\n\n #renderDataMappingsGrid = (): Element => {\n const applicationDataToDisplay = this.application.mappings.length;\n if (applicationDataToDisplay) {\n // Set as animated for the next time.\n this.#animateEmptyState = true;\n }\n return (\n <div class=\"field-group data-mapping-grid-container\">\n <div class=\"field field-block\">\n <label class=\"spacing-body-inline-start label\">\n {this.#componentLocale.dataMappings.title}\n </label>\n <ch-tabular-grid\n class={{\n \"tabular-grid\": true,\n \"tabular-grid-application-declaration\": true,\n \"scrollable\": true,\n \"empty-result\": !applicationDataToDisplay\n }}\n part=\"ch-grid-data-mappings\"\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n columnName={\n this.application.application?.typeIcon ===\n \"objects/transaction\"\n ? this.#componentLocale.dataMappings.firstColName\n : this.#componentLocale.dataMappings.firstColNameParameter\n }\n settingable={false}\n size={config.tabularGrid.colSize.common}\n ></ch-tabular-grid-column>\n\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n columnName={this.#componentLocale.dataMappings.secondColName}\n settingable={false}\n sortable={false}\n size={config.tabularGrid.colSize.common}\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n settingable={false}\n sortable={false}\n size={config.tabularGrid.colSize.auto}\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n {this.application.mappings.length ? (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n {this.application.mappings.map(\n (obj: DataMappingData, index) => (\n <ch-tabular-grid-row\n class=\"tabular-grid-row\"\n rowId={`${index}-${obj.parameter}`}\n key={`${index}-${obj.parameter}-grid-row`}\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <span class=\"pill-tag elevation-3\">\n {\n this.#ACCESS_CAPTION_MAP[\n obj.access as DataMappingAccess\n ]\n }\n </span>\n {obj.parameter}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-combo-box-render\n class=\"combo-box\"\n model={this.#mapRelevantDataOptionsToComboBoxModel(\n obj.relevantDataOptions\n )}\n value={obj.relevantData}\n key={`${index}-${obj.parameter}-combo-box`}\n onInput={this.#relevantDataInputHandler(index)}\n ></ch-combo-box-render>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <button\n data-index={index}\n onClick={this.#selectMappingCallbackHandler(\n obj.parameter,\n index\n )}\n class=\"button-tertiary button-icon-only\"\n aria-label={\n this.#componentLocale.buttons.selectMapping\n }\n title={this.#componentLocale.buttons.selectMapping}\n >\n <ch-image class=\"icon-md\" src={ADD_ICON}></ch-image>\n </button>\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n )\n )}\n </ch-tabular-grid-rowset>\n ) : (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n <ch-tabular-grid-rowset-empty>\n <gx-ide-empty-state\n isAnimated={this.#animateEmptyState}\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.emptyState.title}\n stateDescription={\n this.#componentLocale.emptyState.description\n }\n ></gx-ide-empty-state>\n </ch-tabular-grid-rowset-empty>\n </ch-tabular-grid-rowset>\n )}\n </ch-tabular-grid>\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header slot=\"header\" class=\"header spacing-body\">\n <ch-combo-box-render\n class=\"combo-box\"\n value={this.application.application.name}\n model={this.applicationComboBoxModel}\n suggestDebounce={config.inputDebounce}\n suggest\n suggestOptions={SUGGEST_OPTIONS}\n onInput={this.#suggestInputHandler}\n onChange={this.#applicationInputChangedHandler}\n ></ch-combo-box-render>\n\n <div class=\"buttons-spacer\">\n <button\n onClick={this.#selectApplicationCallbackHandler}\n class=\"button-tertiary button-icon-only\"\n aria-label={this.#componentLocale.buttons.selectApplication}\n title={this.#componentLocale.buttons.selectApplication}\n >\n <ch-image class=\"icon-md\" src={MORE_ICON}></ch-image>\n </button>\n <button\n onClick={this.#clearApplicationHandler}\n class=\"button-secondary\"\n >\n Clear\n </button>\n </div>\n </header>\n\n {this.#renderDataMappingsGrid()}\n\n <footer class=\"control-footer spacing-body-block-end spacing-body-inline\">\n <div class=\"buttons-spacer\">\n <button\n class=\"button-secondary\"\n onClick={this.#cancelCallbackHandler}\n >\n {this.#componentLocale.buttons.cancelButton}\n </button>\n <button\n class=\"button-primary\"\n onClick={this.#confirmCallbackHandler}\n >\n {this.#componentLocale.buttons.confirmButton}\n </button>\n </div>\n </footer>\n </section>\n <ch-shortcuts src={this.#shortcutsSrc}></ch-shortcuts>\n </Host>\n );\n }\n}\n\nexport type ApplicationDeclarationData = {\n application?: ApplicationData;\n mappings: DataMappingData[];\n};\nexport type ApplicationData = {\n name: string;\n typeIcon: string;\n};\n\ntype DataMappingAccess = \"in\" \| \"out\" \| \"inout\";\n\nexport type DataMappingData = {\n parameter: string;\n access: DataMappingAccess;\n relevantDataOptions: string[];\n relevantData?: string;\n};\n\nexport type SuggestApplicationsCallback = (\n prefix: string\n) => Promise<string[] \| undefined>;\n\nexport type SelectApplicationCallback = () => Promise<\n ApplicationDeclarationData \| undefined\n>;\n\nexport type SelectMappingCallback = (parameter: string) => Promise<string>;\n\nexport type ConfirmCallback = (\n data: ApplicationDeclarationData\n) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataMappingCallback = (\n applicationName: string\n) => Promise<DataMappingData[]>;\n"],"mappings":"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"}
1	+ {"version":3,"names":["bpmAppDeclarationCss","CSS_BUNDLES","ADD_ICON","getIconPath","category","name","colorType","FILTER_ICON","MORE_ICON","SUGGEST_OPTIONS","alreadyProcessed","autoExpand","hideMatchesAndShowNonMatches","highlightMatchedItems","matchCase","regularExpression","strict","renderActiveItemIconOnExpand","GxIdeBpmAppDeclaration","_GxIdeBpmAppDeclaration_componentLocale","set","this","_GxIdeBpmAppDeclaration_animateEmptyState","_GxIdeBpmAppDeclaration_shortcutsSrc","getAssetPath","_GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP","in","undefined","out","inout","_GxIdeBpmAppDeclaration_setAccessCaptions","__classPrivateFieldGet","dataMappings","access","_GxIdeBpmAppDeclaration_applicationInputChangedHandler","async","event","selectedApplicationName","detail","application","mappings","getDataMappingCallback","_GxIdeBpmAppDeclaration_cancelCallbackHandler","cancelCallback","_GxIdeBpmAppDeclaration_clearApplicationHandler","typeIcon","_GxIdeBpmAppDeclaration_confirmCallbackHandler","confirmCallback","_GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel","relevantDataOptions","map","optionName","caption","value","_GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel","suggestedApplicationsNames","applicationName","_GxIdeBpmAppDeclaration_relevantDataInputHandler","mappingIndex","inputValue","relevantData","_GxIdeBpmAppDeclaration_selectApplicationCallbackHandler","applicationDeclarationData","selectApplicationCallback","_GxIdeBpmAppDeclaration_setApplicationData","call","_GxIdeBpmAppDeclaration_selectMappingCallbackHandler","parameter","returnedRelevantData","selectMappingCallback","currentRelevantDataOptions","indexOfReturnedRelevantData","indexOf","push","_GxIdeBpmAppDeclaration_updateApplicationData","applicationData","applicationComboBoxModel","startImgSrc","_GxIdeBpmAppDeclaration_suggestInputHandler","suggestedApplicationNames","suggestApplicationsCallback","Object","assign","_GxIdeBpmAppDeclaration_renderDataMappingsGrid","applicationDataToDisplay","length","__classPrivateFieldSet","h","class","title","scrollable","part","columnName","_a","firstColName","firstColNameParameter","settingable","size","config","tabularGrid","colSize","common","secondColName","sortable","auto","obj","index","rowId","key","model","onInput","onClick","buttons","selectMapping","src","isAnimated","stateIconSrc","stateTitle","emptyState","stateDescription","description","componentWillLoad","Locale","getComponentStrings","el","render","Host","slot","suggestDebounce","inputDebounce","suggest","suggestOptions","onChange","selectApplication","cancelButton","confirmButton"],"sources":["src/components/bpm/application-declaration/bpm-app-declaration.scss?tag=gx-ide-bpm-app-declaration&encapsulation=shadow","src/components/bpm/application-declaration/bpm-app-declaration.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n:host {\n display: grid;\n block-size: 100%;\n grid-template-rows: max-content 1fr max-content;\n overflow: auto;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n display: grid;\n grid-template-columns: 1fr max-content;\n}\n\n.data-mapping-grid-container,\n.data-mapping-grid-container .field {\n overflow: auto;\n block-size: 100%;\n}\n\n.tabular-grid-application-declaration {\n overflow: auto;\n}\nch-tabular-grid.empty-result::part(main) {\n // WA to avoid scrollbar flickering when displaying the empty-state message\n overflow: hidden;\n}\n\n.pill-tag {\n // base styles for this class defined on \"gx-ide-common.scss\"\n min-inline-size: 40px;\n margin-inline-end: 10px;\n}\n\n@include tabular-grid-cell-layout(\n $tabular-grid-selector: \".tabular-grid-application-declaration\",\n $tabular-grid-cell-node-type: \"element\",\n $tabular-grid-affected-columns-nth-list: (\n 2\n )\n);\n\n// WA\n.tabular-grid-cell:nth-child(2) {\n padding: 0 !important;\n display: grid;\n align-items: stretch;\n justify-content: stretch;\n --ds-focus-border-width: none;\n}\n.tabular-grid-cell:nth-child(3) {\n padding: 0 !important;\n align-items: center !important;\n justify-content: center !important;\n}\n.tabular-grid {\n overflow: auto;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n getAssetPath\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/combo-box\",\n \"components/icon\",\n \"components/tabular-grid\",\n \"utils/elevation\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\"\n];\n\nconst ADD_ICON = getIconPath({\n category: \"system\",\n name: \"add\",\n colorType: \"neutral\"\n});\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\nconst MORE_ICON = getIconPath({\n category: \"system\",\n name: \"more-horizontal\",\n colorType: \"primary\"\n});\n\nconst SUGGEST_OPTIONS = {\n alreadyProcessed: true,\n autoExpand: false,\n hideMatchesAndShowNonMatches: false,\n highlightMatchedItems: false,\n matchCase: false,\n regularExpression: false,\n strict: false,\n renderActiveItemIconOnExpand: true\n};\n\n@Component({\n tag: \"gx-ide-bpm-app-declaration\",\n styleUrl: \"bpm-app-declaration.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/bpm-app-declaration\"]\n})\nexport class GxIdeBpmAppDeclaration {\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n #animateEmptyState = true;\n #shortcutsSrc = getAssetPath(\n `./gx-ide-assets/bpm-app-declaration/shortcuts.json`\n );\n\n #ACCESS_CAPTION_MAP: Record<DataMappingAccess, string> = {\n // To be defined on componentWillLoad\n in: undefined,\n out: undefined,\n inout: undefined\n };\n\n @Element() el: HTMLGxIdeBpmAppDeclarationElement;\n\n /\n The application ComoBoxModel. When the component renders for the first time, it is required\n * to display the application typeIcon. Later, it is required to display the suggested application\n * options with the combo suggest.\n /\n @State() applicationComboBoxModel: ComboBoxModel = [];\n\n /\n Current value of the application declaration. Keep in mind that this property will be used by\n * the host to initialize the component, meaning it will assign the current declaration value.\n /\n @Prop({ mutable: true }) application: ApplicationDeclarationData;\n\n /\n Callback invoked when user cancels application declaration\n /\n @Prop() readonly cancelCallback: CancelCallback;\n\n /\n Callback invoked when user confirms application declaration\n /\n @Prop() readonly confirmCallback: ConfirmCallback;\n\n /\n Callback invoked when user select one of the options provided by the suggest\n /\n @Prop() readonly getDataMappingCallback: GetDataMappingCallback;\n\n /\n Callback invoked to get access to selection application dialog\n /\n @Prop() readonly selectApplicationCallback: SelectApplicationCallback;\n\n /\n Callback invoked when user press mapping auto-def button\n /\n @Prop() readonly selectMappingCallback: SelectMappingCallback;\n\n /\n Callback invoked to get options for application input suggest\n /\n @Prop() readonly suggestApplicationsCallback: SuggestApplicationsCallback;\n\n /\n @description Gets fired when the component has rendered for the first time.\n */\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.#setApplicationData(this.application.application);\n if (this.application.mappings.length === 0) {\n this.#animateEmptyState = false;\n }\n this.#setAccessCaptions();\n }\n\n #setAccessCaptions = () => {\n this.#ACCESS_CAPTION_MAP.in = this.#componentLocale.dataMappings.access.in;\n this.#ACCESS_CAPTION_MAP.out =\n this.#componentLocale.dataMappings.access.out;\n this.#ACCESS_CAPTION_MAP.inout =\n this.#componentLocale.dataMappings.access.inout;\n };\n\n #applicationInputChangedHandler = async (\n event: CustomEvent<string> \| InputEvent\n ) => {\n const selectedApplicationName = event.detail as string;\n this.application.mappings = await this.getDataMappingCallback(\n selectedApplicationName\n );\n };\n\n #cancelCallbackHandler = () => {\n this.cancelCallback();\n };\n\n #clearApplicationHandler = () => {\n this.application = {\n application: {\n name: \"\",\n typeIcon: \"\"\n },\n mappings: []\n };\n };\n\n #confirmCallbackHandler = () => {\n this.confirmCallback(this.application);\n };\n\n #mapRelevantDataOptionsToComboBoxModel = (\n relevantDataOptions: string[]\n ): ComboBoxModel => {\n return relevantDataOptions.map(optionName => {\n return {\n caption: optionName,\n value: optionName\n };\n });\n };\n\n #mapSuggestedApplicationsToComboBoxModel = (\n suggestedApplicationsNames: string[]\n ): ComboBoxModel => {\n return suggestedApplicationsNames.map(applicationName => {\n return {\n caption: applicationName,\n value: applicationName\n };\n });\n };\n\n #relevantDataInputHandler =\n (mappingIndex: number) =>\n async (event: CustomEvent<string> \| InputEvent) => {\n const inputValue = event.detail as string;\n this.application.mappings[mappingIndex].relevantData = inputValue;\n };\n\n #selectApplicationCallbackHandler = async () => {\n const applicationDeclarationData = await this.selectApplicationCallback();\n if (applicationDeclarationData) {\n this.#setApplicationData(applicationDeclarationData.application);\n this.application.mappings = applicationDeclarationData.mappings;\n }\n };\n\n #selectMappingCallbackHandler =\n (parameter: string, mappingIndex: number) => async () => {\n const returnedRelevantData = await this.selectMappingCallback(parameter);\n if (returnedRelevantData) {\n const currentRelevantDataOptions =\n this.application.mappings[mappingIndex].relevantDataOptions;\n\n const indexOfReturnedRelevantData =\n currentRelevantDataOptions.indexOf(returnedRelevantData);\n\n if (indexOfReturnedRelevantData === -1) {\n // returnedRelevantData is a new option. Add to combo-box.\n currentRelevantDataOptions.push(returnedRelevantData);\n }\n // Set as selected\n this.application.mappings[mappingIndex].relevantData =\n returnedRelevantData;\n\n this.#updateApplicationData();\n }\n };\n\n #setApplicationData = (applicationData: ApplicationData) => {\n if (applicationData) {\n const applicationName = applicationData.name;\n this.application.application.name = applicationName;\n this.applicationComboBoxModel = [\n {\n caption: applicationName,\n value: applicationName,\n startImgSrc: applicationData.typeIcon\n }\n ];\n }\n };\n\n #suggestInputHandler = async (event: CustomEvent<string> \| InputEvent) => {\n const inputValue = event.detail as string;\n this.application.application.name = inputValue;\n const suggestedApplicationNames: string[] =\n await this.suggestApplicationsCallback(inputValue);\n\n this.applicationComboBoxModel =\n this.#mapSuggestedApplicationsToComboBoxModel(suggestedApplicationNames);\n };\n\n #updateApplicationData = () => {\n this.application = { ...this.application };\n };\n\n // Renders\n\n #renderDataMappingsGrid = (): Element => {\n const applicationDataToDisplay = this.application.mappings.length;\n if (applicationDataToDisplay) {\n // Set as animated for the next time.\n this.#animateEmptyState = true;\n }\n return (\n <div class=\"field-group data-mapping-grid-container\">\n <div class=\"field field-block\">\n <label class=\"spacing-body-inline-start label\">\n {this.#componentLocale.dataMappings.title}\n </label>\n <ch-tabular-grid\n class={{\n \"tabular-grid\": true,\n \"tabular-grid-application-declaration\": true,\n \"scrollable\": true,\n \"empty-result\": !applicationDataToDisplay\n }}\n part=\"ch-grid-data-mappings\"\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n columnName={\n this.application.application?.typeIcon ===\n \"objects/transaction\"\n ? this.#componentLocale.dataMappings.firstColName\n : this.#componentLocale.dataMappings.firstColNameParameter\n }\n settingable={false}\n size={config.tabularGrid.colSize.common}\n ></ch-tabular-grid-column>\n\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n columnName={this.#componentLocale.dataMappings.secondColName}\n settingable={false}\n sortable={false}\n size={config.tabularGrid.colSize.common}\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n class=\"tabular-grid-column\"\n settingable={false}\n sortable={false}\n size={config.tabularGrid.colSize.auto}\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n\n {this.application.mappings.length ? (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n {this.application.mappings.map(\n (obj: DataMappingData, index) => (\n <ch-tabular-grid-row\n class=\"tabular-grid-row\"\n rowId={`${index}-${obj.parameter}`}\n key={`${index}-${obj.parameter}-grid-row`}\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <span class=\"pill-tag elevation-3\">\n {\n this.#ACCESS_CAPTION_MAP[\n obj.access as DataMappingAccess\n ]\n }\n </span>\n {obj.parameter}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-combo-box-render\n class=\"combo-box\"\n model={this.#mapRelevantDataOptionsToComboBoxModel(\n obj.relevantDataOptions\n )}\n value={obj.relevantData}\n key={`${index}-${obj.parameter}-combo-box`}\n onInput={this.#relevantDataInputHandler(index)}\n ></ch-combo-box-render>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <button\n data-index={index}\n onClick={this.#selectMappingCallbackHandler(\n obj.parameter,\n index\n )}\n class=\"button-tertiary button-icon-only\"\n aria-label={\n this.#componentLocale.buttons.selectMapping\n }\n title={this.#componentLocale.buttons.selectMapping}\n >\n <ch-image class=\"icon-md\" src={ADD_ICON}></ch-image>\n </button>\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n )\n )}\n </ch-tabular-grid-rowset>\n ) : (\n <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n <ch-tabular-grid-rowset-empty>\n <gx-ide-empty-state\n isAnimated={this.#animateEmptyState}\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.emptyState.title}\n stateDescription={\n this.#componentLocale.emptyState.description\n }\n ></gx-ide-empty-state>\n </ch-tabular-grid-rowset-empty>\n </ch-tabular-grid-rowset>\n )}\n </ch-tabular-grid>\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header slot=\"header\" class=\"header spacing-body\">\n <ch-combo-box-render\n class=\"combo-box\"\n value={this.application.application.name}\n model={this.applicationComboBoxModel}\n suggestDebounce={config.inputDebounce}\n suggest\n suggestOptions={SUGGEST_OPTIONS}\n onInput={this.#suggestInputHandler}\n onChange={this.#applicationInputChangedHandler}\n ></ch-combo-box-render>\n\n <div class=\"buttons-spacer\">\n <button\n onClick={this.#selectApplicationCallbackHandler}\n class=\"button-tertiary button-icon-only\"\n aria-label={this.#componentLocale.buttons.selectApplication}\n title={this.#componentLocale.buttons.selectApplication}\n >\n <ch-image class=\"icon-md\" src={MORE_ICON}></ch-image>\n </button>\n <button\n onClick={this.#clearApplicationHandler}\n class=\"button-secondary\"\n >\n Clear\n </button>\n </div>\n </header>\n\n {this.#renderDataMappingsGrid()}\n\n <footer class=\"control-footer spacing-body-block-end spacing-body-inline\">\n <div class=\"buttons-spacer\">\n <button\n class=\"button-secondary\"\n onClick={this.#cancelCallbackHandler}\n >\n {this.#componentLocale.buttons.cancelButton}\n </button>\n <button\n class=\"button-primary\"\n onClick={this.#confirmCallbackHandler}\n >\n {this.#componentLocale.buttons.confirmButton}\n </button>\n </div>\n </footer>\n </section>\n <ch-shortcuts src={this.#shortcutsSrc}></ch-shortcuts>\n </Host>\n );\n }\n}\n\nexport type ApplicationDeclarationData = {\n application?: ApplicationData;\n mappings: DataMappingData[];\n};\nexport type ApplicationData = {\n name: string;\n typeIcon: string;\n};\n\ntype DataMappingAccess = \"in\" \| \"out\" \| \"inout\";\n\nexport type DataMappingData = {\n parameter: string;\n access: DataMappingAccess;\n relevantDataOptions: string[];\n relevantData?: string;\n};\n\nexport type SuggestApplicationsCallback = (\n prefix: string\n) => Promise<string[] \| undefined>;\n\nexport type SelectApplicationCallback = () => Promise<\n ApplicationDeclarationData \| undefined\n>;\n\nexport type SelectMappingCallback = (parameter: string) => Promise<string>;\n\nexport type ConfirmCallback = (\n data: ApplicationDeclarationData\n) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataMappingCallback = (\n applicationName: string\n) => Promise<DataMappingData[]>;\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAuB;;;;;;;;;;;;;;;;;ACkB7B,MAAMC,IAA8B,EAClC,qBACA,qBACA,wBACA,mBACA,2BACA,mBACA,cACA,gBACA;;AAGF,MAAMC,IAAWC,EAAY;EAC3BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAEb,MAAMC,IAAcJ,EAAY;EAC9BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAEb,MAAME,IAAYL,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMG,IAAkB;EACtBC,kBAAkB;EAClBC,YAAY;EACZC,8BAA8B;EAC9BC,uBAAuB;EACvBC,WAAW;EACXC,mBAAmB;EACnBC,QAAQ;EACRC,8BAA8B;;;MASnBC,IAAsB;;;;;;;;QAKjCC,EAAAC,IAAAC,WAAA;IACAC,EAAAF,IAAAC,MAAqB;IACrBE,EAAAH,IAAAC,MAAgBG,EACd;IAGFC,EAAAL,IAAAC,MAAyD;;MAEvDK,IAAIC;MACJC,KAAKD;MACLE,OAAOF;;IA8DTG,EAAAV,IAAAC,OAAqB;MACnBU,EAAAV,MAAII,GAAA,KAAqBC,KAAKK,EAAAV,MAAIF,GAAA,KAAkBa,aAAaC,OAAOP;MACxEK,EAAAV,MAAII,GAAA,KAAqBG,MACvBG,EAAAV,MAAIF,GAAA,KAAkBa,aAAaC,OAAOL;MAC5CG,EAAAV,MAAII,GAAA,KAAqBI,QACvBE,EAAAV,MAAIF,GAAA,KAAkBa,aAAaC,OAAOJ;AAAK;IAGnDK,EAAAd,IAAAC,OAAkCc,MAChCC;MAEA,MAAMC,IAA0BD,EAAME;MACtCjB,KAAKkB,YAAYC,iBAAiBnB,KAAKoB,uBACrCJ;AACD;IAGHK,EAAAtB,IAAAC,OAAyB;MACvBA,KAAKsB;AAAgB;IAGvBC,EAAAxB,IAAAC,OAA2B;MACzBA,KAAKkB,cAAc;QACjBA,aAAa;UACXlC,MAAM;UACNwC,UAAU;;QAEZL,UAAU;;AACX;IAGHM,EAAA1B,IAAAC,OAA0B;MACxBA,KAAK0B,gBAAgB1B,KAAKkB;AAAY;IAGxCS,EAAA5B,IAAAC,OACE4B,KAEOA,EAAoBC,KAAIC,MACtB;MACLC,SAASD;MACTE,OAAOF;;IAKbG,EAAAlC,IAAAC,OACEkC,KAEOA,EAA2BL,KAAIM,MAC7B;MACLJ,SAASI;MACTH,OAAOG;;IAKbC,EAAArC,IAAAC,OACGqC,KACDvB,MAAOC;MACL,MAAMuB,IAAavB,EAAME;MACzBjB,KAAKkB,YAAYC,SAASkB,GAAcE,eAAeD;AAAU;IAGrEE,EAAAzC,IAAAC,OAAoCc;MAClC,MAAM2B,UAAmCzC,KAAK0C;MAC9C,IAAID,GAA4B;QAC9B/B,EAAAV,MAAI2C,GAAA,KAAoBC,KAAxB5C,MAAyByC,EAA2BvB;QACpDlB,KAAKkB,YAAYC,WAAWsB,EAA2BtB;;;IAI3D0B,EAAA9C,IAAAC,OACE,CAAC8C,GAAmBT,MAAyBvB;MAC3C,MAAMiC,UAA6B/C,KAAKgD,sBAAsBF;MAC9D,IAAIC,GAAsB;QACxB,MAAME,IACJjD,KAAKkB,YAAYC,SAASkB,GAAcT;QAE1C,MAAMsB,IACJD,EAA2BE,QAAQJ;QAErC,IAAIG,OAAiC,GAAG;;UAEtCD,EAA2BG,KAAKL;;;gBAGlC/C,KAAKkB,YAAYC,SAASkB,GAAcE,eACtCQ;QAEFrC,EAAAV,MAAIqD,GAAA,KAAuBT,KAA3B5C;;;IAIN2C,EAAA5C,IAAAC,OAAuBsD;MACrB,IAAIA,GAAiB;QACnB,MAAMnB,IAAkBmB,EAAgBtE;QACxCgB,KAAKkB,YAAYA,YAAYlC,OAAOmD;QACpCnC,KAAKuD,2BAA2B,EAC9B;UACExB,SAASI;UACTH,OAAOG;UACPqB,aAAaF,EAAgB9B;;;;IAMrCiC,EAAA1D,IAAAC,OAAuBc,MAAOC;MAC5B,MAAMuB,IAAavB,EAAME;MACzBjB,KAAKkB,YAAYA,YAAYlC,OAAOsD;MACpC,MAAMoB,UACE1D,KAAK2D,4BAA4BrB;MAEzCtC,KAAKuD,2BACH7C,EAAAV,MAAIiC,GAAA,KAAyCW,KAA7C5C,MAA8C0D;AAA0B;IAG5EL,EAAAtD,IAAAC,OAAyB;MACvBA,KAAKkB,cAAW0C,OAAAC,OAAA,IAAQ7D,KAAKkB;AAAa;;QAK5C4C,EAAA/D,IAAAC,OAA0B;;MACxB,MAAM+D,IAA2B/D,KAAKkB,YAAYC,SAAS6C;MAC3D,IAAID,GAA0B;;QAE5BE,EAAAjE,MAAIC,GAAsB,MAAI;;MAEhC,OACEiE,EAAA;QAAKC,OAAM;SACTD,EAAA;QAAKC,OAAM;SACTD,EAAA;QAAOC,OAAM;SACVzD,EAAAV,MAAIF,GAAA,KAAkBa,aAAayD,QAEtCF,EAAA;QACEC,OAAO;UACL,gBAAgB;UAChB,wCAAwC;UACxCE,YAAc;UACd,iBAAiBN;;QAEnBO,MAAK;SAELJ,EAAA;QAA2BC,OAAM;SAC/BD,EAAA;QACEC,OAAM;QACNI,cACEC,IAAAxE,KAAKkB,YAAYA,iBAAW,QAAAsD,WAAA,aAAAA,EAAEhD,cAC9B,wBACId,EAAAV,MAAIF,GAAA,KAAkBa,aAAa8D,eACnC/D,EAAAV,MAAIF,GAAA,KAAkBa,aAAa+D;QAEzCC,aAAa;QACbC,MAAMC,EAAOC,YAAYC,QAAQC;UAGnCd,EAAA;QACEC,OAAM;QACNI,YAAY7D,EAAAV,MAAIF,GAAA,KAAkBa,aAAasE;QAC/CN,aAAa;QACbO,UAAU;QACVN,MAAMC,EAAOC,YAAYC,QAAQC;UAEnCd,EAAA;QACEC,OAAM;QACNQ,aAAa;QACbO,UAAU;QACVN,MAAMC,EAAOC,YAAYC,QAAQI;WAIpCnF,KAAKkB,YAAYC,SAAS6C,SACzBE,EAAA;QAAwBC,OAAM;SAC3BnE,KAAKkB,YAAYC,SAASU,KACzB,CAACuD,GAAsBC,MACrBnB,EAAA;QACEC,OAAM;QACNmB,OAAO,GAAGD,KAASD,EAAItC;QACvByC,KAAK,GAAGF,KAASD,EAAItC;SAErBoB,EAAA;QAAsBC,OAAM;SAC1BD,EAAA;QAAMC,OAAM;SAERzD,EAAAV,MAAII,GAAA,KACFgF,EAAIxE,UAITwE,EAAItC,YAEPoB,EAAA;QAAsBC,OAAM;SAC1BD,EAAA;QACEC,OAAM;QACNqB,OAAO9E,EAAAV,MAAI2B,GAAA,KAAuCiB,KAA3C5C,MACLoF,EAAIxD;QAENI,OAAOoD,EAAI7C;QACXgD,KAAK,GAAGF,KAASD,EAAItC;QACrB2C,SAAS/E,EAAAV,MAAIoC,GAAA,KAA0BQ,KAA9B5C,MAA+BqF;WAG5CnB,EAAA;QAAsBC,OAAM;SAC1BD,EAAA;QAAA,cACcmB;QACZK,SAAShF,EAAAV,MAAI6C,GAAA,KAA8BD,KAAlC5C,MACPoF,EAAItC,WACJuC;QAEFlB,OAAM;QAAkC,cAEtCzD,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQC;QAEhCxB,OAAO1D,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQC;SAErC1B,EAAA;QAAUC,OAAM;QAAU0B,KAAKhH;iBAQ3CqF,EAAA;QAAwBC,OAAM;SAC5BD,EAAA,sCACEA,EAAA;QACE4B,YAAYpF,EAAAV,MAAIC,GAAA;QAChB8F,cAAc7G;QACd8G,YAAYtF,EAAAV,MAAIF,GAAA,KAAkBmG,WAAW7B;QAC7C8B,kBACExF,EAAAV,MAAIF,GAAA,KAAkBmG,WAAWE;;AAQ3C;oCAnSyC;;;;;;;;;EA2CnD,uBAAMC;IACJnC,EAAAjE,MAAIF,SAA0BuG,EAAOC,oBAAoBtG,KAAKuG,KAAG;IACjE7F,EAAAV,MAAI2C,GAAA,KAAoBC,KAAxB5C,MAAyBA,KAAKkB,YAAYA;IAC1C,IAAIlB,KAAKkB,YAAYC,SAAS6C,WAAW,GAAG;MAC1CC,EAAAjE,MAAIC,GAAsB,OAAK;;IAEjCS,EAAAV,MAAIS,GAAA,KAAmBmC,KAAvB5C;;EAsPF,MAAAwG;IACE,OACEtC,EAACuC,GAAI;MAACtC,OAAM;OACVD,EAAA;MAAUsB,OAAO5G;QACjBsF,EAAA;MAASC,OAAM;OACbD,EAAA;MAAQwC,MAAK;MAASvC,OAAM;OAC1BD,EAAA;MACEC,OAAM;MACNnC,OAAOhC,KAAKkB,YAAYA,YAAYlC;MACpCwG,OAAOxF,KAAKuD;MACZoD,iBAAiB9B,EAAO+B;MACxBC,SAAO;MACPC,gBAAgB1H;MAChBqG,SAAS/E,EAAAV,MAAIyD,GAAA;MACbsD,UAAUrG,EAAAV,MAAIa,GAAA;QAGhBqD,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEwB,SAAShF,EAAAV,MAAIwC,GAAA;MACb2B,OAAM;MAAkC,cAC5BzD,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQqB;MAC1C5C,OAAO1D,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQqB;OAErC9C,EAAA;MAAUC,OAAM;MAAU0B,KAAK1G;SAEjC+E,EAAA;MACEwB,SAAShF,EAAAV,MAAIuB,GAAA;MACb4C,OAAM;OAAkB,YAO7BzD,EAAAV,MAAI8D,GAAA,KAAwBlB,KAA5B5C,OAEDkE,EAAA;MAAQC,OAAM;OACZD,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAM;MACNuB,SAAShF,EAAAV,MAAIqB,GAAA;OAEZX,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQsB,eAEjC/C,EAAA;MACEC,OAAM;MACNuB,SAAShF,EAAAV,MAAIyB,GAAA;OAEZf,EAAAV,MAAIF,GAAA,KAAkB6F,QAAQuB,mBAKvChD,EAAA;MAAc2B,KAAKnF,EAAAV,MAAIE,GAAA"}

package/dist/genexus-ide-ui/{p-f51adb3d.entry.js → p-036d005d.entry.js} RENAMED Viewed

@@ -8,7 +8,7 @@ import { r as l } from "./p-f549f6e1.js";
 import { f as n } from "./p-9ddea83b.js";
-const c = ":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}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.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}.options-wrapper{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:0;grid-row-gap:0;border-bottom:1px solid var(--gx-ide-container-border-color)}.options-wrapper .genexus-server{cursor:pointer}.options-wrapper .genexus-server:hover{background-color:var(--ds-item-background-color--hover)}.options-wrapper .scope{font-family:inherit;display:flex;flex-direction:column;gap:var(--mer-spacing--2xs)}.options-wrapper .scope .row{display:flex;flex-direction:row;align-items:center;gap:var(--mer-spacing--xs)}.options-wrapper .scope .row .value{font-style:italic}.filter-row{padding:0 var(--gx-ide-container__padding) 0 var(--gx-ide-container__padding);display:flex;flex-direction:row;gap:var(--gx-ide-grid-row-gap)}.filter-row .combo{flex:1}.data-grid{grid-template-columns:repeat(3, 1fr)}.data-grid>:nth-child(1){grid-area:1/1/2/2}.data-grid>:nth-child(2){grid-area:1/2/2/4}.data-panel-grid{grid-template-columns:repeat(2, 1fr)}.data-preview img{max-width:100%}.data-max-height{max-height:300px;overflow-y:auto}.actions{justify-content:flex-end}.no-border{border:0}.bold{font-weight:bold}ch-grid-rowset-empty{padding:var(--mer-spacing--2xs) var(--mer-spacing--xs)}gxg-tab::part(container){line-height:unset}.tabular-grid{block-size:100%}gx-ide-container::part(content){overflow:hidden}.tabular-grid-pending-update ch-tabular-grid-cell:is(:nth-child(6)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tabular-grid-results ch-tabular-grid-cell:is(:nth-child(6)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const c = ":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}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.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}.options-wrapper{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:0;grid-row-gap:0;border-bottom:1px solid var(--gx-ide-container-border-color)}.options-wrapper .genexus-server{cursor:pointer}.options-wrapper .genexus-server:hover{background-color:var(--ds-item-background-color--hover)}.options-wrapper .scope{font-family:inherit;display:flex;flex-direction:column;gap:var(--mer-spacing--2xs)}.options-wrapper .scope .row{display:flex;flex-direction:row;align-items:center;gap:var(--mer-spacing--xs)}.options-wrapper .scope .row .value{font-style:italic}.filter-row{padding:0 var(--gx-ide-container__padding) 0 var(--gx-ide-container__padding);display:flex;flex-direction:row;gap:var(--gx-ide-grid-row-gap)}.filter-row .combo{flex:1}.data-grid{grid-template-columns:repeat(3, 1fr)}.data-grid>:nth-child(1){grid-area:1/1/2/2}.data-grid>:nth-child(2){grid-area:1/2/2/4}.data-panel-grid{grid-template-columns:repeat(2, 1fr)}.data-preview img{max-width:100%}.data-max-height{max-height:300px;overflow-y:auto}.actions{justify-content:flex-end}.no-border{border:0}.bold{font-weight:bold}ch-grid-rowset-empty{padding:var(--mer-spacing--2xs) var(--mer-spacing--xs)}gxg-tab::part(container){line-height:unset}.tabular-grid{block-size:100%}gx-ide-container::part(content){overflow:hidden}.tabular-grid-pending-update ch-tabular-grid-cell:is(:nth-child(6)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}.tabular-grid-results ch-tabular-grid-cell:is(:nth-child(6)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
 const g = [ "resets/box-sizing",
 // "utils/form",
@@ -634,4 +634,4 @@ const d = class {
 d.style = c;
 export { d as gx_ide_team_dev_update };
-//# sourceMappingURL=p-f51adb3d.entry.js.map
+//# sourceMappingURL=p-036d005d.entry.js.map

package/dist/genexus-ide-ui/{p-f3f35e5c.entry.js → p-04205aa4.entry.js} RENAMED Viewed

@@ -1,8 +1,6 @@
 import { g as e, r as i, h as t, H as s, a } from "./p-25a9f1d7.js";
-import { g as r } from "./p-6e4208d8.js";
-import "./p-5ac47c69.js";
+import { g as r } from "./p-ede7bd20.js";
 import { L as o } from "./p-311eedf3.js";
@@ -308,4 +306,4 @@ M = new WeakMap, W = new WeakMap;
 I.style = n;
 export { I as gx_ide_welcome_page };
-//# sourceMappingURL=p-f3f35e5c.entry.js.map
+//# sourceMappingURL=p-04205aa4.entry.js.map

package/dist/genexus-ide-ui/{p-f3f35e5c.entry.js.map → p-04205aa4.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["welcomePageCss","ACTIVE_SLIDE_SELECTOR","ARROW_LEFT_KEY","ARROW_RIGHT_KEY","ESCAPE_KEY","SLIDE_FADE_DURATION","SLIDE_WORD_SELECTOR","SLIDE_WORD_SELECTOR_TIMEOUT","SLIDE_WORD_SELECTOR_VISIBLE","ICON_NEXT","getAssetPath","CLOSE_ICON","getIconPath","category","name","colorType","CSS_BUNDLES","GxIdeWelcomePage","_GxIdeWelcomePage_componentLocale","set","this","_GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed","Map","_GxIdeWelcomePage_slidesElements","_GxIdeWelcomePage_slidesElementsRef","_GxIdeWelcomePage_slideTimeOutId","_GxIdeWelcomePage_closeSlider","sliderVisible","setTimeout","el","remove","closeCallback","document","removeEventListener","__classPrivateFieldGet","_GxIdeWelcomePage_keyboardEventHandler","_GxIdeWelcomePage_initiateSlidesTransition","_GxIdeWelcomePage_slideTimeOut","call","addEventListener","_GxIdeWelcomePage_displayWords","wordsNodeList","forEach","word","index","classList","add","_GxIdeWelcomePage_dotClickedHandler","event","userHasChangedSlide","itemClicked","currentTarget","parseInt","getAttribute","_GxIdeWelcomePage_updateActiveSlide","goToPrevSlide","key","slideTransitioning","lastSlideReached","activeSlideIndex","goToNextSlide","closeSlider","_GxIdeWelcomePage_nextSlideHandler","_GxIdeWelcomePage_prevSlideHandler","newIndex","clearTimeout","autoChangeSlide","transitionType","itemsWordsCount","slides","listItems","itemsWords","map","item","title","description","length","mergedItemsWords","join","split","mergedDescription","words","timeBeforeNextSlide","_GxIdeWelcomePage_secondsToRead","__classPrivateFieldSet","wordsCount","wordsPerMinute","minutes","milliseconds","_GxIdeWelcomePage_renderSlides","slide","isLastSlide","h","class","ref","role","copyright","illustrationAriaLabel","src","illustration","url","alt","_a","paragraph","descriptionAsChunks","_GxIdeWelcomePage_splitWords","_b","onClick","startButtonCaption","newSlideIndex","activeSlide","nextSlideReference","displayDescriptionAsChunks","descriptionAsChunksDisplayedAlready","get","slideTimeOut","querySelectorAll","componentWillLoad","Locale","getComponentStrings","componentDidLoad","render","Host","model","main","style","slide__footer","_","slide__dot"],"sources":["src/components/welcome-page/welcome-page.scss?tag=gx-ide-welcome-page&encapsulation=shadow","src/components/welcome-page/welcome-page.tsx"],"sourcesContent":[":host {\n --slide-header-block-padding: 34px;\n --slide-footer-block: var(--mer-spacing--md) var(--mer-spacing--4xl);\n --slide-footer-block-last-slide: var(--mer-spacing--md) 42px;\n --slide-footer-navigation-hide-transition: var(--mer-timing--fast);\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n overflow: auto;\n padding: var(--mer-spacing--lg);\n box-sizing: border-box;\n padding: var(--mer-spacing--xl);\n}\n\n.main {\n display: grid;\n place-self: center;\n inline-size: 100%;\n max-inline-size: 1100px;\n background-color: var(--mer-surface__elevation--01);\n border-radius: 17px;\n overflow: hidden;\n border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);\n inset-block-start: 0;\n transition: opacity var(--slide-fade-duration);\n opacity: 0;\n pointer-events: none;\n\n &--border-glow {\n animation: borderColorCycle 2s infinite;\n }\n &--visible {\n pointer-events: visible;\n opacity: 1;\n }\n}\n\n// - - - - - - - - - - - - -\n// Slide\n// - - - - - - - - - - - - -\n\n.slide {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"slide-wrapper slide-wrapper\"\n \"footer footer\";\n grid-template-rows: max-content 1fr max-content;\n\n // - - - - - Header\n\n &__header {\n padding-inline: 18px;\n padding-block: 24px 27px;\n display: flex;\n flex-direction: row-reverse;\n grid-area: header;\n }\n\n // - - - - - Container\n\n &__container {\n display: contents;\n }\n\n &__wrapper {\n display: grid;\n column-gap: var(--mer-spacing--3xl);\n grid-template-areas:\n \"header header\"\n \"illustration copy\"\n \"footer footer\";\n grid-template-rows: max-content 1fr max-content;\n // grid-template-columns: 411px 1fr;\n grid-template-columns: 1fr 1fr;\n grid-area: slide-wrapper;\n transition: var(--slide-fade-duration) opacity;\n transition: opacity 200ms;\n padding-inline: 48px;\n opacity: 1;\n z-index: 1;\n }\n &__wrapper:not(.active) {\n opacity: 0;\n z-index: 0;\n pointer-events: none;\n }\n\n &__illustration {\n position: relative;\n overflow: hidden;\n display: grid;\n grid-area: illustration;\n place-items: center;\n inline-size: 100%;\n\n &-img {\n object-fit: contain;\n block-size: 100%;\n inline-size: 100%;\n }\n }\n\n &__copy {\n grid-area: copy;\n place-self: center;\n justify-self: flex-start;\n }\n\n &__copy-container {\n display: grid;\n gap: var(--mer-spacing--md);\n max-inline-size: 524px;\n }\n\n &__copy-header {\n display: grid;\n gap: var(--mer-spacing--md);\n }\n\n &__copy-title {\n font-size: var(--mer-font__size--xl);\n color: var(--mer-text__on-surface);\n letter-spacing: 0.02em;\n font-weight: var(--mer-font__weight--semi-bold);\n }\n\n &__copy-description {\n display: grid;\n gap: var(--mer-spacing--md);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n }\n\n &__list {\n display: grid;\n gap: var(--mer-spacing--md);\n list-style: none;\n padding: 0;\n margin: 0;\n\n &-item {\n &-title {\n font-weight: var(--mer-font__weight--medium);\n }\n }\n }\n\n // words (if 'showTextInChunks' is true)\n &__word {\n transition: var(--mer-timing--regular) opacity;\n opacity: 0;\n\n &--visible {\n opacity: 1;\n }\n }\n\n // - - - - - Footer\n\n &__footer {\n $hideDotsDuration: calc(var(--mer-timing--fast) + 200ms);\n grid-area: footer;\n display: grid;\n padding-block: var(--slide-footer-block);\n opacity: 1;\n\n &-last-slide {\n opacity: 0;\n transition: $hideDotsDuration opacity;\n pointer-events: none;\n animation: footerPaddingBlockLastSlide var(--mer-timing--regular) ease-out\n forwards $hideDotsDuration;\n }\n }\n\n &__footer-wrapper {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n gap: var(--mer-spacing--md);\n align-items: center;\n justify-content: center;\n transition: var(--mer-timing--regular) opacity;\n opacity: 1;\n\n &-hidden {\n opacity: 0;\n }\n }\n &__dots {\n display: grid;\n gap: var(--mer-spacing--2xs);\n list-style: none;\n padding: 0;\n margin: 0;\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n justify-content: center;\n\n &-inactive {\n pointer-events: none;\n }\n }\n &__dot {\n display: grid;\n padding: var(--mer-spacing--xs);\n cursor: pointer;\n\n &::before {\n content: \"\";\n place-self: center;\n inline-size: var(--mer-spacing--sm);\n block-size: var(--mer-spacing--sm);\n border-radius: calc(var(--mer-spacing--sm) / 2);\n background-color: var(--mer-color__neutral-gray--500);\n }\n &:hover::before {\n background-color: var(--mer-icon__on-primary--hover);\n }\n\n &.active {\n cursor: auto;\n &::before {\n background-color: var(--mer-accent__primary);\n cursor: auto;\n }\n }\n\n &-inactive {\n pointer-events: none;\n }\n }\n}\n\n.close-icon {\n transition: all var(--mer-timing--fast);\n &:hover {\n filter: brightness(1.5);\n }\n}\n\n.start-button {\n justify-self: start;\n margin-block-start: 25px;\n}\n\n// - - - - - - - - - - - - - -\n// Animations\n// - - - - - - - - - - - - - -\n\n@keyframes ellipseFadeInOut {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 0.7;\n }\n}\n@keyframes ellipseRotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes polygonRotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes borderColorCycle {\n 0% {\n border-color: var(--mer-surface__elevation--01);\n }\n 50% {\n border-color: var(--mer-color__primary--400);\n }\n 100% {\n border-color: var(--mer-surface__elevation--01);\n }\n}\n\n@keyframes footerPaddingBlockLastSlide {\n 0% {\n padding-block: var(--slide-footer-block);\n }\n 100% {\n padding-block: var(--slide-footer-block-last-slide);\n }\n}\n\n.fade-out {\n animation: fadeOut 0.5s forwards 0.3s;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\n\nconst ACTIVE_SLIDE_SELECTOR = \"active\";\nconst ARROW_LEFT_KEY = \"ArrowLeft\";\nconst ARROW_RIGHT_KEY = \"ArrowRight\";\nconst ESCAPE_KEY = \"Escape\";\nconst SLIDE_FADE_DURATION = 300;\nconst SLIDE_WORD_SELECTOR = \".slide__word\";\nconst SLIDE_WORD_SELECTOR_TIMEOUT = 70;\nconst SLIDE_WORD_SELECTOR_VISIBLE = \"slide__word--visible\";\n\n// icons\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CLOSE_ICON = getIconPath({\n category: \"system\",\n name: \"close\",\n colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/icon\",\n \"components/button\"\n];\n\n@Component({\n tag: \"gx-ide-welcome-page\",\n styleUrl: \"welcome-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/welcome-page\"]\n})\nexport class GxIdeWelcomePage {\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n #slidesDescriptionAsChunksAlreadyDisplayed: Map<number, boolean> = new Map();\n #slidesElements: HTMLElement[] = [];\n #slidesElementsRef: HTMLElement[] = [];\n // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide\n // that is set to be displayed as chunks, has already been displayed. Used to not display\n // as chunks after the first time.\n #slideTimeOutId: NodeJS.Timeout;\n\n @Element() el: HTMLGxIdeWelcomePageElement;\n\n /\n The current active slide index from 'slides' Prop. It does not considers the very first slide \"Copyright\".\n /\n @State() activeSlideIndex: number = 0;\n\n /\n When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n /\n @State() displaySlider: boolean = false;\n\n /\n True if the very first slide is visible (The copyright slide)\n /\n @State() copyrightsVisible: boolean = true;\n\n /\n True if the user has reached the last slide. Used to hide/disable the navigation.\n /\n @State() lastSlideReached: boolean = false;\n\n /\n When true the slider will be visible. Used to display and hide the slider with a smooth transition.\n /\n @State() sliderVisible: boolean = false;\n\n /\n True if a slide is transitioning, false otherwise. Used to disable the navigation arrows while transitioning.\n /\n @State() slideTransitioning: boolean = false;\n\n /\n True if the user has changed slides by clicking on the navigation dots, or by using the keyboard arrows. This is used to know evaluate the slide transition setTimeOut. If the user has navigated, automatic slide transition should be turned off.\n /\n @State() userHasChangedSlide: boolean = false;\n\n /\n The transition type between the slides. \"static\" requires the user to navigate by clicking the navigation dots. \"auto\" will transition automatically after a calculated amount of time.\n /\n @Prop() readonly transitionType: TransitionType = \"auto\";\n\n /\n The estimated amount of words per minute that the user requires to read a slide. This value is used to return the time each slide is freezed before transitioning to the next one. Only evaluated when transitionType is set to \"auto\".\n /\n @Prop() readonly wordsPerMinute: number = 250;\n\n /\n Callback invoked when the user closes the slider by pressing the close button.\n /\n @Prop() readonly closeCallback!: CloseCallback;\n\n /\n An array of slides, with the information that each slide requires. This slides appear after the first slide (Copyrights) that is defined inside the component.\n /\n @Prop() readonly slides: SlideInfo[] = [];\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.#renderSlides();\n }\n\n componentDidLoad() {\n this.#slidesElementsRef[this.activeSlideIndex].classList.add(\n ACTIVE_SLIDE_SELECTOR\n );\n this.sliderVisible = true;\n this.#initiateSlidesTransition();\n }\n\n #closeSlider = () => {\n this.sliderVisible = false;\n setTimeout(() => {\n // wait until the slide disappears, then remove.\n this.el.remove();\n this.closeCallback();\n document.removeEventListener(\"keydown\", this.#keyboardEventHandler);\n }, SLIDE_FADE_DURATION);\n };\n\n #initiateSlidesTransition = () => {\n this.#slideTimeOut();\n // listen to keydown events to navigate the slides with the arrows\n document.addEventListener(\"keydown\", this.#keyboardEventHandler);\n };\n\n #displayWords = (wordsNodeList: NodeListOf<HTMLElement>) => {\n wordsNodeList.forEach((word, index) => {\n setTimeout(() => {\n word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);\n }, index SLIDE_WORD_SELECTOR_TIMEOUT);\n });\n };\n\n #dotClickedHandler = (event: MouseEvent) => {\n this.userHasChangedSlide = true;\n const itemClicked = event.currentTarget as HTMLElement;\n const index = parseInt(itemClicked.getAttribute(\"data-index\"), 10);\n this.#updateActiveSlide(index);\n };\n\n #keyboardEventHandler = (event: KeyboardEvent) => {\n this.userHasChangedSlide = true;\n const goToPrevSlide =\n event.key === ARROW_LEFT_KEY &&\n !this.slideTransitioning &&\n !this.lastSlideReached &&\n this.activeSlideIndex !== 0;\n\n const goToNextSlide =\n event.key === ARROW_RIGHT_KEY &&\n !this.slideTransitioning &&\n !this.lastSlideReached;\n\n const closeSlider =\n event.key === ESCAPE_KEY \|\|\n (event.key === ARROW_RIGHT_KEY &&\n !this.slideTransitioning &&\n this.lastSlideReached);\n\n if (goToNextSlide) {\n this.#nextSlideHandler();\n } else if (goToPrevSlide) {\n this.#prevSlideHandler();\n } else if (closeSlider) {\n this.#closeSlider();\n }\n };\n\n #nextSlideHandler = () => {\n const newIndex = this.activeSlideIndex + 1;\n this.#updateActiveSlide(newIndex);\n };\n\n #prevSlideHandler = () => {\n const newIndex = this.activeSlideIndex - 1;\n this.#updateActiveSlide(newIndex);\n };\n\n #slideTimeOut = () => {\n // Clear any existing timeout\n if (this.#slideTimeOutId) {\n clearTimeout(this.#slideTimeOutId);\n }\n\n const autoChangeSlide =\n this.transitionType === \"auto\" &&\n !this.lastSlideReached &&\n !this.userHasChangedSlide;\n\n if (!autoChangeSlide) {\n return;\n }\n\n let itemsWordsCount = 0;\n if (this.slides[this.activeSlideIndex].listItems) {\n const itemsWords = this.slides[this.activeSlideIndex].listItems.map(\n item => {\n return item.title + item.description;\n }\n );\n if (itemsWords.length) {\n const mergedItemsWords = itemsWords.join(\"\");\n itemsWordsCount = mergedItemsWords.split(\" \").length;\n }\n }\n\n const mergedDescription =\n this.slides[this.activeSlideIndex].description.join(\"\");\n const words = mergedDescription.split(\" \").length;\n const timeBeforeNextSlide: number = this.#secondsToRead(\n words + itemsWordsCount\n );\n\n // Set a fresh timeout\n if (timeBeforeNextSlide) {\n this.#slideTimeOutId = setTimeout(() => {\n this.#nextSlideHandler();\n }, timeBeforeNextSlide);\n }\n };\n\n #secondsToRead = (\n wordsCount: number,\n wordsPerMinute = this.wordsPerMinute\n ): number => {\n const minutes = wordsCount / wordsPerMinute;\n const milliseconds = minutes * 60000; // Convert minutes to milliseconds\n return milliseconds;\n };\n\n #renderSlides = () => {\n this.#slidesElements = this.slides.map((slide, index) => {\n const isLastSlide = index === this.slides.length - 1;\n return (\n <section\n class=\"slide__wrapper\"\n ref={(el: HTMLElement) =>\n (this.#slidesElementsRef[index] = el as HTMLElement)\n }\n >\n <div\n class=\"slide__illustration\"\n role=\"img\"\n aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n >\n <img\n class=\"slide__illustration-img\"\n src={slide.illustration.url}\n alt={slide.illustration.alt}\n />\n </div>\n <section class=\"slide__copy\">\n <div class=\"slide__copy-container\">\n <header class=\"slide__copy-header\">\n <img src={ICON_NEXT} alt=\"GeneXus Next isologotype\" />\n <h2 class=\"slide__copy-title\">{slide.title}</h2>\n </header>\n <div class=\"slide__copy-description\">\n {slide.description?.map(paragraph => {\n return (\n <p>\n {slide.descriptionAsChunks\n ? this.#splitWords(paragraph)\n : paragraph}\n </p>\n );\n })}\n {slide.listItems?.length && (\n <ul class=\"slide__list\">\n {slide.listItems.map(item => {\n return (\n <li class=\"slide__list-item\">\n <strong class=\"slide__list-item-title\">\n {item.title}\n </strong>{\" \"}\n {item.description}\n </li>\n );\n })}\n </ul>\n )}\n </div>\n {isLastSlide && (\n <button\n class=\"button-primary start-button\"\n onClick={this.#closeSlider}\n >\n {this.#componentLocale.startButtonCaption}\n </button>\n )}\n </div>\n </section>\n </section>\n );\n });\n };\n\n #splitWords = (paragraph: string): HTMLSpanElement[] => {\n return paragraph.split(\" \").map(word => {\n // keep the space after {word} !\n return <span class=\"slide__word\">{word} </span>;\n });\n };\n\n #updateActiveSlide = (newSlideIndex: number) => {\n this.slideTransitioning = true;\n\n // unset current active slide\n const activeSlide = this.#slidesElementsRef[this.activeSlideIndex];\n activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);\n\n const nextSlideReference = this.#slidesElementsRef[newSlideIndex];\n const displayDescriptionAsChunks =\n this.slides[newSlideIndex].descriptionAsChunks;\n const descriptionAsChunksDisplayedAlready =\n this.#slidesDescriptionAsChunksAlreadyDisplayed.get(newSlideIndex);\n let wordsCount;\n let wordsNodeList: NodeListOf<HTMLElement>;\n let slideTimeOut = 0;\n if (displayDescriptionAsChunks) {\n wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);\n wordsCount = wordsNodeList.length;\n slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;\n }\n\n this.lastSlideReached = newSlideIndex === this.slides.length - 1;\n\n // set new slide as active after fade out\n setTimeout(() => {\n nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);\n\n if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {\n this.#slidesDescriptionAsChunksAlreadyDisplayed.set(\n newSlideIndex,\n true\n );\n this.#displayWords(wordsNodeList);\n setTimeout(() => {\n this.slideTransitioning = false;\n }, slideTimeOut);\n } else {\n this.slideTransitioning = false;\n }\n }, SLIDE_FADE_DURATION);\n\n // update active slide index\n this.activeSlideIndex = newSlideIndex;\n this.#slideTimeOut(); // this has to be after this.#updateActiveSlide.\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div\n class={{\n \"main\": true,\n \"main--visible\": this.sliderVisible,\n \"main--border-glow\": this.lastSlideReached\n }}\n style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n >\n <section class=\"slide\">\n <header class=\"slide__header\">\n <button\n class=\"button-tertiary button-icon-only close-icon\"\n aria-label=\"close presentation\"\n onClick={this.#closeSlider}\n >\n <ch-image class=\"icon-md\" src={CLOSE_ICON}></ch-image>\n </button>\n </header>\n <div class=\"slide__container\">{this.#slidesElements}</div>\n <footer\n // slide common footer\n class={{\n slide__footer: true\n }}\n >\n <div\n class={{\n \"slide__footer-wrapper\": true\n }}\n >\n <ul class=\"slide__dots\" aria-label=\"Slide indicators\">\n {this.slides.map((_, index) => {\n return (\n <li\n class={{\n \"slide__dot\": true,\n \"slide__dot-inactive\": this.slideTransitioning,\n [ACTIVE_SLIDE_SELECTOR]:\n index === this.activeSlideIndex\n }}\n data-index={index}\n onClick={\n !this.slideTransitioning && this.#dotClickedHandler\n }\n ></li>\n );\n })}\n </ul>\n </div>\n </footer>\n </section>\n </div>\n </Host>\n );\n }\n}\n\nexport type SlideInfo = {\n illustration: {\n url: string;\n alt: string;\n };\n title: string;\n description?: string[];\n descriptionAsChunks?: boolean;\n listItems?: Array<{\n title: string;\n description: string;\n }>;\n};\n\nexport type CloseCallback = () => Promise<void>;\nexport type TransitionType = \"static\" \| \"auto\";\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAiB;;;;;;;;;;;;;;;;;ACgBvB,MAAMC,IAAwB;;AAC9B,MAAMC,IAAiB;;AACvB,MAAMC,IAAkB;;AACxB,MAAMC,IAAa;;AACnB,MAAMC,IAAsB;;AAC5B,MAAMC,IAAsB;;AAC5B,MAAMC,IAA8B;;AACpC,MAAMC,IAA8B;;QAGpC;MAAMC,IAAYC,EAChB;;AAEF,MAAMC,IAAaC,EAAY;EAC7BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMC,IAA8B,EAClC,qBACA,oBACA,mBACA;;MASWC,IAAgB;;;;;;;QAK3BC,EAAAC,IAAAC,WAAA;IAEAC,EAAAF,IAAAC,MAAmE,IAAIE;IACvEC,EAAAJ,IAAAC,MAAiC;IACjCI,EAAAL,IAAAC,MAAoC;;;;QAIpCK,EAAAN,IAAAC,WAAA;IAwEAM,EAAAP,IAAAC,OAAe;MACbA,KAAKO,gBAAgB;MACrBC,YAAW;;QAETR,KAAKS,GAAGC;QACRV,KAAKW;QACLC,SAASC,oBAAoB,WAAWC,EAAAd,MAAIe,GAAA;AAAuB,UAClE9B;AAAoB;IAGzB+B,EAAAjB,IAAAC,OAA4B;MAC1Bc,EAAAd,MAAIiB,GAAA,KAAcC,KAAlBlB;;YAEAY,SAASO,iBAAiB,WAAWL,EAAAd,MAAIe,GAAA;AAAuB;IAGlEK,EAAArB,IAAAC,OAAiBqB;MACfA,EAAcC,SAAQ,CAACC,GAAMC;QAC3BhB,YAAW;UACTe,EAAKE,UAAUC,IAAItC;AAA4B,YAC9CoC,IAAQrC;AAA4B;AACvC;IAGJwC,EAAA5B,IAAAC,OAAsB4B;MACpB5B,KAAK6B,sBAAsB;MAC3B,MAAMC,IAAcF,EAAMG;MAC1B,MAAMP,IAAQQ,SAASF,EAAYG,aAAa,eAAe;MAC/DnB,EAAAd,MAAIkC,GAAA,KAAmBhB,KAAvBlB,MAAwBwB;AAAM;IAGhCT,EAAAhB,IAAAC,OAAyB4B;MACvB5B,KAAK6B,sBAAsB;MAC3B,MAAMM,IACJP,EAAMQ,QAAQtD,MACbkB,KAAKqC,uBACLrC,KAAKsC,oBACNtC,KAAKuC,qBAAqB;MAE5B,MAAMC,IACJZ,EAAMQ,QAAQrD,MACbiB,KAAKqC,uBACLrC,KAAKsC;MAER,MAAMG,IACJb,EAAMQ,QAAQpD,KACb4C,EAAMQ,QAAQrD,MACZiB,KAAKqC,sBACNrC,KAAKsC;MAET,IAAIE,GAAe;QACjB1B,EAAAd,MAAI0C,GAAA,KAAkBxB,KAAtBlB;aACK,IAAImC,GAAe;QACxBrB,EAAAd,MAAI2C,GAAA,KAAkBzB,KAAtBlB;aACK,IAAIyC,GAAa;QACtB3B,EAAAd,MAAIM,GAAA,KAAaY,KAAjBlB;;;IAIJ0C,EAAA3C,IAAAC,OAAoB;MAClB,MAAM4C,IAAW5C,KAAKuC,mBAAmB;MACzCzB,EAAAd,MAAIkC,GAAA,KAAmBhB,KAAvBlB,MAAwB4C;AAAS;IAGnCD,EAAA5C,IAAAC,OAAoB;MAClB,MAAM4C,IAAW5C,KAAKuC,mBAAmB;MACzCzB,EAAAd,MAAIkC,GAAA,KAAmBhB,KAAvBlB,MAAwB4C;AAAS;IAGnC3B,EAAAlB,IAAAC,OAAgB;;MAEd,IAAIc,EAAAd,MAAIK,GAAA,MAAkB;QACxBwC,aAAa/B,EAAAd,MAAIK,GAAA;;MAGnB,MAAMyC,IACJ9C,KAAK+C,mBAAmB,WACvB/C,KAAKsC,qBACLtC,KAAK6B;MAER,KAAKiB,GAAiB;QACpB;;MAGF,IAAIE,IAAkB;MACtB,IAAIhD,KAAKiD,OAAOjD,KAAKuC,kBAAkBW,WAAW;QAChD,MAAMC,IAAanD,KAAKiD,OAAOjD,KAAKuC,kBAAkBW,UAAUE,KAC9DC,KACSA,EAAKC,QAAQD,EAAKE;QAG7B,IAAIJ,EAAWK,QAAQ;UACrB,MAAMC,IAAmBN,EAAWO,KAAK;UACzCV,IAAkBS,EAAiBE,MAAM,KAAKH;;;MAIlD,MAAMI,IACJ5D,KAAKiD,OAAOjD,KAAKuC,kBAAkBgB,YAAYG,KAAK;MACtD,MAAMG,IAAQD,EAAkBD,MAAM,KAAKH;MAC3C,MAAMM,IAA8BhD,EAAAd,MAAI+D,GAAA,KAAe7C,KAAnBlB,MAClC6D,IAAQb;;YAIV,IAAIc,GAAqB;QACvBE,EAAAhE,MAAIK,GAAmBG,YAAW;UAChCM,EAAAd,MAAI0C,GAAA,KAAkBxB,KAAtBlB;AAAwB,YACvB8D,IAAoB;;;IAI3BC,EAAAhE,IAAAC,OAAiB,CACfiE,GACAC,IAAiBlE,KAAKkE;MAEtB,MAAMC,IAAUF,IAAaC;MAC7B,MAAME,IAAeD,IAAU;;YAC/B,OAAOC;AAAY;IAGrBC,EAAAtE,IAAAC,OAAgB;MACdgE,EAAAhE,MAAIG,GAAmBH,KAAKiD,OAAOG,KAAI,CAACkB,GAAO9C;;QAC7C,MAAM+C,IAAc/C,MAAUxB,KAAKiD,OAAOO,SAAS;QACnD,OACEgB,EAAA;UACEC,OAAM;UACNC,KAAMjE,KACHK,EAAAd,MAAII,GAAA,KAAoBoB,KAASf;WAGpC+D,EAAA;UACEC,OAAM;UACNE,MAAK;UAAK,cACE7D,EAAAd,MAAIF,GAAA,KAAkB8E,UAAUC;WAE5CL,EAAA;UACEC,OAAM;UACNK,KAAKR,EAAMS,aAAaC;UACxBC,KAAKX,EAAMS,aAAaE;aAG5BT,EAAA;UAASC,OAAM;WACbD,EAAA;UAAKC,OAAM;WACTD,EAAA;UAAQC,OAAM;WACZD,EAAA;UAAKM,KAAKzF;UAAW4F,KAAI;YACzBT,EAAA;UAAIC,OAAM;WAAqBH,EAAMhB,SAEvCkB,EAAA;UAAKC,OAAM;YACRS,IAAAZ,EAAMf,iBAAW,QAAA2B,WAAA,a,EAAE9B,KAAI+B,KAEpBX,EAAA,WACGF,EAAMc,sBACHtE,EAAAd,MAAIqF,GAAA,KAAYnE,KAAhBlB,MAAiBmF,KACjBA,QAITG,IAAAhB,EAAMpB,eAAS,QAAAoC,WAAA,aAAAA,EAAE9B,WAChBgB,EAAA;UAAIC,OAAM;WACPH,EAAMpB,UAAUE,KAAIC,KAEjBmB,EAAA;UAAIC,OAAM;WACRD,EAAA;UAAQC,OAAM;WACXpB,EAAKC,QACE,KACTD,EAAKE,kBAOjBgB,KACCC,EAAA;UACEC,OAAM;UACNc,SAASzE,EAAAd,MAAIM,GAAA;WAEZQ,EAAAd,MAAIF,GAAA,KAAkB0F;AAKvB,WAEZ;AAAA;IAGJH,EAAAtF,IAAAC,OAAemF,KACNA,EAAUxB,MAAM,KAAKP,KAAI7B,KAEvBiD,EAAA;MAAMC,OAAM;OAAelD,GAAI;IAI1CW,EAAAnC,IAAAC,OAAsByF;MACpBzF,KAAKqC,qBAAqB;;YAG1B,MAAMqD,IAAc5E,EAAAd,MAAII,GAAA,KAAoBJ,KAAKuC;MACjDmD,EAAYjE,UAAUf,OAAO7B;MAE7B,MAAM8G,IAAqB7E,EAAAd,MAAII,GAAA,KAAoBqF;MACnD,MAAMG,IACJ5F,KAAKiD,OAAOwC,GAAeL;MAC7B,MAAMS,IACJ/E,EAAAd,MAAIC,GAAA,KAA4C6F,IAAIL;MACtD,IAAIxB;MACJ,IAAI5C;MACJ,IAAI0E,IAAe;MACnB,IAAIH,GAA4B;QAC9BvE,IAAgBsE,EAAmBK,iBAAiB9G;QACpD+E,IAAa5C,EAAcmC;QAC3BuC,IAAe9B,IAAa9E;;MAG9Ba,KAAKsC,mBAAmBmD,MAAkBzF,KAAKiD,OAAOO,SAAS;;YAG/DhD,YAAW;QACTmF,EAAmBlE,UAAUC,IAAI7C;QAEjC,IAAI+G,MAA+BC,GAAqC;UACtE/E,EAAAd,MAAIC,GAAA,KAA4CF,IAC9C0F,GACA;UAEF3E,EAAAd,MAAIoB,GAAA,KAAcF,KAAlBlB,MAAmBqB;UACnBb,YAAW;YACTR,KAAKqC,qBAAqB;AAAK,cAC9B0D;eACE;UACL/F,KAAKqC,qBAAqB;;UAE3BpD;;YAGHe,KAAKuC,mBAAmBkD;MACxB3E,EAAAd,MAAIiB,GAAA,KAAcC,KAAlBlB;kFAAoB;;4BA/Sc;yBAKF;6BAKI;4BAKD;yBAKH;8BAKK;+BAKC;0BAKU;0BAKR;;kBAUH;;EAEvC,uBAAMiG;IACJjC,EAAAhE,MAAIF,SAA0BoG,EAAOC,oBAAoBnG,KAAKS,KAAG;IACjEK,EAAAd,MAAIqE,GAAA,KAAcnD,KAAlBlB;;EAGF,gBAAAoG;IACEtF,EAAAd,MAAII,GAAA,KAAoBJ,KAAKuC,kBAAkBd,UAAUC,IACvD7C;IAEFmB,KAAKO,gBAAgB;IACrBO,EAAAd,MAAIgB,GAAA,KAA0BE,KAA9BlB;;EAoPF,MAAAqG;IACE,OACE7B,EAAC8B,GAAI,MACH9B,EAAA;MAAU+B,OAAO3G;QACjB4E,EAAA;MACEC,OAAO;QACL+B,MAAQ;QACR,iBAAiBxG,KAAKO;QACtB,qBAAqBP,KAAKsC;;MAE5BmE,OAAO;QAAE,yBAAyB,GAAGxH;;OAErCuF,EAAA;MAASC,OAAM;OACbD,EAAA;MAAQC,OAAM;OACZD,EAAA;MACEC,OAAM;MAA6C,cACxC;MACXc,SAASzE,EAAAd,MAAIM,GAAA;OAEbkE,EAAA;MAAUC,OAAM;MAAUK,KAAKvF;UAGnCiF,EAAA;MAAKC,OAAM;OAAoB3D,EAAAd,MAAIG,GAAA,OACnCqE,EAAA;;MAEEC,OAAO;QACLiC,eAAe;;OAGjBlC,EAAA;MACEC,OAAO;QACL,yBAAyB;;OAG3BD,EAAA;MAAIC,OAAM;MAAa,cAAY;OAChCzE,KAAKiD,OAAOG,KAAI,CAACuD,GAAGnF,MAEjBgD,EAAA;MACEC,OAAO;QACLmC,YAAc;QACd,uBAAuB5G,KAAKqC;QAC5BxD,CAACA,IACC2C,MAAUxB,KAAKuC;;MAClB,cACWf;MACZ+D,UACGvF,KAAKqC,sBAAsBvB,EAAAd,MAAI2B,GAAA"}
1	+ {"version":3,"names":["welcomePageCss","ACTIVE_SLIDE_SELECTOR","ARROW_LEFT_KEY","ARROW_RIGHT_KEY","ESCAPE_KEY","SLIDE_FADE_DURATION","SLIDE_WORD_SELECTOR","SLIDE_WORD_SELECTOR_TIMEOUT","SLIDE_WORD_SELECTOR_VISIBLE","ICON_NEXT","getAssetPath","CLOSE_ICON","getIconPath","category","name","colorType","CSS_BUNDLES","GxIdeWelcomePage","_GxIdeWelcomePage_componentLocale","set","this","_GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed","Map","_GxIdeWelcomePage_slidesElements","_GxIdeWelcomePage_slidesElementsRef","_GxIdeWelcomePage_slideTimeOutId","_GxIdeWelcomePage_closeSlider","sliderVisible","setTimeout","el","remove","closeCallback","document","removeEventListener","__classPrivateFieldGet","_GxIdeWelcomePage_keyboardEventHandler","_GxIdeWelcomePage_initiateSlidesTransition","_GxIdeWelcomePage_slideTimeOut","call","addEventListener","_GxIdeWelcomePage_displayWords","wordsNodeList","forEach","word","index","classList","add","_GxIdeWelcomePage_dotClickedHandler","event","userHasChangedSlide","itemClicked","currentTarget","parseInt","getAttribute","_GxIdeWelcomePage_updateActiveSlide","goToPrevSlide","key","slideTransitioning","lastSlideReached","activeSlideIndex","goToNextSlide","closeSlider","_GxIdeWelcomePage_nextSlideHandler","_GxIdeWelcomePage_prevSlideHandler","newIndex","clearTimeout","autoChangeSlide","transitionType","itemsWordsCount","slides","listItems","itemsWords","map","item","title","description","length","mergedItemsWords","join","split","mergedDescription","words","timeBeforeNextSlide","_GxIdeWelcomePage_secondsToRead","__classPrivateFieldSet","wordsCount","wordsPerMinute","minutes","milliseconds","_GxIdeWelcomePage_renderSlides","slide","isLastSlide","h","class","ref","role","copyright","illustrationAriaLabel","src","illustration","url","alt","_a","paragraph","descriptionAsChunks","_GxIdeWelcomePage_splitWords","_b","onClick","startButtonCaption","newSlideIndex","activeSlide","nextSlideReference","displayDescriptionAsChunks","descriptionAsChunksDisplayedAlready","get","slideTimeOut","querySelectorAll","componentWillLoad","Locale","getComponentStrings","componentDidLoad","render","Host","model","main","style","slide__footer","_","slide__dot"],"sources":["src/components/welcome-page/welcome-page.scss?tag=gx-ide-welcome-page&encapsulation=shadow","src/components/welcome-page/welcome-page.tsx"],"sourcesContent":[":host {\n --slide-header-block-padding: 34px;\n --slide-footer-block: var(--mer-spacing--md) var(--mer-spacing--4xl);\n --slide-footer-block-last-slide: var(--mer-spacing--md) 42px;\n --slide-footer-navigation-hide-transition: var(--mer-timing--fast);\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n overflow: auto;\n padding: var(--mer-spacing--lg);\n box-sizing: border-box;\n padding: var(--mer-spacing--xl);\n}\n\n.main {\n display: grid;\n place-self: center;\n inline-size: 100%;\n max-inline-size: 1100px;\n background-color: var(--mer-surface__elevation--01);\n border-radius: 17px;\n overflow: hidden;\n border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);\n inset-block-start: 0;\n transition: opacity var(--slide-fade-duration);\n opacity: 0;\n pointer-events: none;\n\n &--border-glow {\n animation: borderColorCycle 2s infinite;\n }\n &--visible {\n pointer-events: visible;\n opacity: 1;\n }\n}\n\n// - - - - - - - - - - - - -\n// Slide\n// - - - - - - - - - - - - -\n\n.slide {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"slide-wrapper slide-wrapper\"\n \"footer footer\";\n grid-template-rows: max-content 1fr max-content;\n\n // - - - - - Header\n\n &__header {\n padding-inline: 18px;\n padding-block: 24px 27px;\n display: flex;\n flex-direction: row-reverse;\n grid-area: header;\n }\n\n // - - - - - Container\n\n &__container {\n display: contents;\n }\n\n &__wrapper {\n display: grid;\n column-gap: var(--mer-spacing--3xl);\n grid-template-areas:\n \"header header\"\n \"illustration copy\"\n \"footer footer\";\n grid-template-rows: max-content 1fr max-content;\n // grid-template-columns: 411px 1fr;\n grid-template-columns: 1fr 1fr;\n grid-area: slide-wrapper;\n transition: var(--slide-fade-duration) opacity;\n transition: opacity 200ms;\n padding-inline: 48px;\n opacity: 1;\n z-index: 1;\n }\n &__wrapper:not(.active) {\n opacity: 0;\n z-index: 0;\n pointer-events: none;\n }\n\n &__illustration {\n position: relative;\n overflow: hidden;\n display: grid;\n grid-area: illustration;\n place-items: center;\n inline-size: 100%;\n\n &-img {\n object-fit: contain;\n block-size: 100%;\n inline-size: 100%;\n }\n }\n\n &__copy {\n grid-area: copy;\n place-self: center;\n justify-self: flex-start;\n }\n\n &__copy-container {\n display: grid;\n gap: var(--mer-spacing--md);\n max-inline-size: 524px;\n }\n\n &__copy-header {\n display: grid;\n gap: var(--mer-spacing--md);\n }\n\n &__copy-title {\n font-size: var(--mer-font__size--xl);\n color: var(--mer-text__on-surface);\n letter-spacing: 0.02em;\n font-weight: var(--mer-font__weight--semi-bold);\n }\n\n &__copy-description {\n display: grid;\n gap: var(--mer-spacing--md);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n }\n\n &__list {\n display: grid;\n gap: var(--mer-spacing--md);\n list-style: none;\n padding: 0;\n margin: 0;\n\n &-item {\n &-title {\n font-weight: var(--mer-font__weight--medium);\n }\n }\n }\n\n // words (if 'showTextInChunks' is true)\n &__word {\n transition: var(--mer-timing--regular) opacity;\n opacity: 0;\n\n &--visible {\n opacity: 1;\n }\n }\n\n // - - - - - Footer\n\n &__footer {\n $hideDotsDuration: calc(var(--mer-timing--fast) + 200ms);\n grid-area: footer;\n display: grid;\n padding-block: var(--slide-footer-block);\n opacity: 1;\n\n &-last-slide {\n opacity: 0;\n transition: $hideDotsDuration opacity;\n pointer-events: none;\n animation: footerPaddingBlockLastSlide var(--mer-timing--regular) ease-out\n forwards $hideDotsDuration;\n }\n }\n\n &__footer-wrapper {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n gap: var(--mer-spacing--md);\n align-items: center;\n justify-content: center;\n transition: var(--mer-timing--regular) opacity;\n opacity: 1;\n\n &-hidden {\n opacity: 0;\n }\n }\n &__dots {\n display: grid;\n gap: var(--mer-spacing--2xs);\n list-style: none;\n padding: 0;\n margin: 0;\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n justify-content: center;\n\n &-inactive {\n pointer-events: none;\n }\n }\n &__dot {\n display: grid;\n padding: var(--mer-spacing--xs);\n cursor: pointer;\n\n &::before {\n content: \"\";\n place-self: center;\n inline-size: var(--mer-spacing--sm);\n block-size: var(--mer-spacing--sm);\n border-radius: calc(var(--mer-spacing--sm) / 2);\n background-color: var(--mer-color__neutral-gray--500);\n }\n &:hover::before {\n background-color: var(--mer-icon__on-primary--hover);\n }\n\n &.active {\n cursor: auto;\n &::before {\n background-color: var(--mer-accent__primary);\n cursor: auto;\n }\n }\n\n &-inactive {\n pointer-events: none;\n }\n }\n}\n\n.close-icon {\n transition: all var(--mer-timing--fast);\n &:hover {\n filter: brightness(1.5);\n }\n}\n\n.start-button {\n justify-self: start;\n margin-block-start: 25px;\n}\n\n// - - - - - - - - - - - - - -\n// Animations\n// - - - - - - - - - - - - - -\n\n@keyframes ellipseFadeInOut {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 0.7;\n }\n}\n@keyframes ellipseRotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes polygonRotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes borderColorCycle {\n 0% {\n border-color: var(--mer-surface__elevation--01);\n }\n 50% {\n border-color: var(--mer-color__primary--400);\n }\n 100% {\n border-color: var(--mer-surface__elevation--01);\n }\n}\n\n@keyframes footerPaddingBlockLastSlide {\n 0% {\n padding-block: var(--slide-footer-block);\n }\n 100% {\n padding-block: var(--slide-footer-block-last-slide);\n }\n}\n\n.fade-out {\n animation: fadeOut 0.5s forwards 0.3s;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\n\nconst ACTIVE_SLIDE_SELECTOR = \"active\";\nconst ARROW_LEFT_KEY = \"ArrowLeft\";\nconst ARROW_RIGHT_KEY = \"ArrowRight\";\nconst ESCAPE_KEY = \"Escape\";\nconst SLIDE_FADE_DURATION = 300;\nconst SLIDE_WORD_SELECTOR = \".slide__word\";\nconst SLIDE_WORD_SELECTOR_TIMEOUT = 70;\nconst SLIDE_WORD_SELECTOR_VISIBLE = \"slide__word--visible\";\n\n// icons\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CLOSE_ICON = getIconPath({\n category: \"system\",\n name: \"close\",\n colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/icon\",\n \"components/button\"\n];\n\n@Component({\n tag: \"gx-ide-welcome-page\",\n styleUrl: \"welcome-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/welcome-page\"]\n})\nexport class GxIdeWelcomePage {\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n #slidesDescriptionAsChunksAlreadyDisplayed: Map<number, boolean> = new Map();\n #slidesElements: HTMLElement[] = [];\n #slidesElementsRef: HTMLElement[] = [];\n // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide\n // that is set to be displayed as chunks, has already been displayed. Used to not display\n // as chunks after the first time.\n #slideTimeOutId: NodeJS.Timeout;\n\n @Element() el: HTMLGxIdeWelcomePageElement;\n\n /\n The current active slide index from 'slides' Prop. It does not considers the very first slide \"Copyright\".\n /\n @State() activeSlideIndex: number = 0;\n\n /\n When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n /\n @State() displaySlider: boolean = false;\n\n /\n True if the very first slide is visible (The copyright slide)\n /\n @State() copyrightsVisible: boolean = true;\n\n /\n True if the user has reached the last slide. Used to hide/disable the navigation.\n /\n @State() lastSlideReached: boolean = false;\n\n /\n When true the slider will be visible. Used to display and hide the slider with a smooth transition.\n /\n @State() sliderVisible: boolean = false;\n\n /\n True if a slide is transitioning, false otherwise. Used to disable the navigation arrows while transitioning.\n /\n @State() slideTransitioning: boolean = false;\n\n /\n True if the user has changed slides by clicking on the navigation dots, or by using the keyboard arrows. This is used to know evaluate the slide transition setTimeOut. If the user has navigated, automatic slide transition should be turned off.\n /\n @State() userHasChangedSlide: boolean = false;\n\n /\n The transition type between the slides. \"static\" requires the user to navigate by clicking the navigation dots. \"auto\" will transition automatically after a calculated amount of time.\n /\n @Prop() readonly transitionType: TransitionType = \"auto\";\n\n /\n The estimated amount of words per minute that the user requires to read a slide. This value is used to return the time each slide is freezed before transitioning to the next one. Only evaluated when transitionType is set to \"auto\".\n /\n @Prop() readonly wordsPerMinute: number = 250;\n\n /\n Callback invoked when the user closes the slider by pressing the close button.\n /\n @Prop() readonly closeCallback!: CloseCallback;\n\n /\n An array of slides, with the information that each slide requires. This slides appear after the first slide (Copyrights) that is defined inside the component.\n /\n @Prop() readonly slides: SlideInfo[] = [];\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.#renderSlides();\n }\n\n componentDidLoad() {\n this.#slidesElementsRef[this.activeSlideIndex].classList.add(\n ACTIVE_SLIDE_SELECTOR\n );\n this.sliderVisible = true;\n this.#initiateSlidesTransition();\n }\n\n #closeSlider = () => {\n this.sliderVisible = false;\n setTimeout(() => {\n // wait until the slide disappears, then remove.\n this.el.remove();\n this.closeCallback();\n document.removeEventListener(\"keydown\", this.#keyboardEventHandler);\n }, SLIDE_FADE_DURATION);\n };\n\n #initiateSlidesTransition = () => {\n this.#slideTimeOut();\n // listen to keydown events to navigate the slides with the arrows\n document.addEventListener(\"keydown\", this.#keyboardEventHandler);\n };\n\n #displayWords = (wordsNodeList: NodeListOf<HTMLElement>) => {\n wordsNodeList.forEach((word, index) => {\n setTimeout(() => {\n word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);\n }, index SLIDE_WORD_SELECTOR_TIMEOUT);\n });\n };\n\n #dotClickedHandler = (event: MouseEvent) => {\n this.userHasChangedSlide = true;\n const itemClicked = event.currentTarget as HTMLElement;\n const index = parseInt(itemClicked.getAttribute(\"data-index\"), 10);\n this.#updateActiveSlide(index);\n };\n\n #keyboardEventHandler = (event: KeyboardEvent) => {\n this.userHasChangedSlide = true;\n const goToPrevSlide =\n event.key === ARROW_LEFT_KEY &&\n !this.slideTransitioning &&\n !this.lastSlideReached &&\n this.activeSlideIndex !== 0;\n\n const goToNextSlide =\n event.key === ARROW_RIGHT_KEY &&\n !this.slideTransitioning &&\n !this.lastSlideReached;\n\n const closeSlider =\n event.key === ESCAPE_KEY \|\|\n (event.key === ARROW_RIGHT_KEY &&\n !this.slideTransitioning &&\n this.lastSlideReached);\n\n if (goToNextSlide) {\n this.#nextSlideHandler();\n } else if (goToPrevSlide) {\n this.#prevSlideHandler();\n } else if (closeSlider) {\n this.#closeSlider();\n }\n };\n\n #nextSlideHandler = () => {\n const newIndex = this.activeSlideIndex + 1;\n this.#updateActiveSlide(newIndex);\n };\n\n #prevSlideHandler = () => {\n const newIndex = this.activeSlideIndex - 1;\n this.#updateActiveSlide(newIndex);\n };\n\n #slideTimeOut = () => {\n // Clear any existing timeout\n if (this.#slideTimeOutId) {\n clearTimeout(this.#slideTimeOutId);\n }\n\n const autoChangeSlide =\n this.transitionType === \"auto\" &&\n !this.lastSlideReached &&\n !this.userHasChangedSlide;\n\n if (!autoChangeSlide) {\n return;\n }\n\n let itemsWordsCount = 0;\n if (this.slides[this.activeSlideIndex].listItems) {\n const itemsWords = this.slides[this.activeSlideIndex].listItems.map(\n item => {\n return item.title + item.description;\n }\n );\n if (itemsWords.length) {\n const mergedItemsWords = itemsWords.join(\"\");\n itemsWordsCount = mergedItemsWords.split(\" \").length;\n }\n }\n\n const mergedDescription =\n this.slides[this.activeSlideIndex].description.join(\"\");\n const words = mergedDescription.split(\" \").length;\n const timeBeforeNextSlide: number = this.#secondsToRead(\n words + itemsWordsCount\n );\n\n // Set a fresh timeout\n if (timeBeforeNextSlide) {\n this.#slideTimeOutId = setTimeout(() => {\n this.#nextSlideHandler();\n }, timeBeforeNextSlide);\n }\n };\n\n #secondsToRead = (\n wordsCount: number,\n wordsPerMinute = this.wordsPerMinute\n ): number => {\n const minutes = wordsCount / wordsPerMinute;\n const milliseconds = minutes * 60000; // Convert minutes to milliseconds\n return milliseconds;\n };\n\n #renderSlides = () => {\n this.#slidesElements = this.slides.map((slide, index) => {\n const isLastSlide = index === this.slides.length - 1;\n return (\n <section\n class=\"slide__wrapper\"\n ref={(el: HTMLElement) =>\n (this.#slidesElementsRef[index] = el as HTMLElement)\n }\n >\n <div\n class=\"slide__illustration\"\n role=\"img\"\n aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n >\n <img\n class=\"slide__illustration-img\"\n src={slide.illustration.url}\n alt={slide.illustration.alt}\n />\n </div>\n <section class=\"slide__copy\">\n <div class=\"slide__copy-container\">\n <header class=\"slide__copy-header\">\n <img src={ICON_NEXT} alt=\"GeneXus Next isologotype\" />\n <h2 class=\"slide__copy-title\">{slide.title}</h2>\n </header>\n <div class=\"slide__copy-description\">\n {slide.description?.map(paragraph => {\n return (\n <p>\n {slide.descriptionAsChunks\n ? this.#splitWords(paragraph)\n : paragraph}\n </p>\n );\n })}\n {slide.listItems?.length && (\n <ul class=\"slide__list\">\n {slide.listItems.map(item => {\n return (\n <li class=\"slide__list-item\">\n <strong class=\"slide__list-item-title\">\n {item.title}\n </strong>{\" \"}\n {item.description}\n </li>\n );\n })}\n </ul>\n )}\n </div>\n {isLastSlide && (\n <button\n class=\"button-primary start-button\"\n onClick={this.#closeSlider}\n >\n {this.#componentLocale.startButtonCaption}\n </button>\n )}\n </div>\n </section>\n </section>\n );\n });\n };\n\n #splitWords = (paragraph: string): HTMLSpanElement[] => {\n return paragraph.split(\" \").map(word => {\n // keep the space after {word} !\n return <span class=\"slide__word\">{word} </span>;\n });\n };\n\n #updateActiveSlide = (newSlideIndex: number) => {\n this.slideTransitioning = true;\n\n // unset current active slide\n const activeSlide = this.#slidesElementsRef[this.activeSlideIndex];\n activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);\n\n const nextSlideReference = this.#slidesElementsRef[newSlideIndex];\n const displayDescriptionAsChunks =\n this.slides[newSlideIndex].descriptionAsChunks;\n const descriptionAsChunksDisplayedAlready =\n this.#slidesDescriptionAsChunksAlreadyDisplayed.get(newSlideIndex);\n let wordsCount;\n let wordsNodeList: NodeListOf<HTMLElement>;\n let slideTimeOut = 0;\n if (displayDescriptionAsChunks) {\n wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);\n wordsCount = wordsNodeList.length;\n slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;\n }\n\n this.lastSlideReached = newSlideIndex === this.slides.length - 1;\n\n // set new slide as active after fade out\n setTimeout(() => {\n nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);\n\n if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {\n this.#slidesDescriptionAsChunksAlreadyDisplayed.set(\n newSlideIndex,\n true\n );\n this.#displayWords(wordsNodeList);\n setTimeout(() => {\n this.slideTransitioning = false;\n }, slideTimeOut);\n } else {\n this.slideTransitioning = false;\n }\n }, SLIDE_FADE_DURATION);\n\n // update active slide index\n this.activeSlideIndex = newSlideIndex;\n this.#slideTimeOut(); // this has to be after this.#updateActiveSlide.\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div\n class={{\n \"main\": true,\n \"main--visible\": this.sliderVisible,\n \"main--border-glow\": this.lastSlideReached\n }}\n style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n >\n <section class=\"slide\">\n <header class=\"slide__header\">\n <button\n class=\"button-tertiary button-icon-only close-icon\"\n aria-label=\"close presentation\"\n onClick={this.#closeSlider}\n >\n <ch-image class=\"icon-md\" src={CLOSE_ICON}></ch-image>\n </button>\n </header>\n <div class=\"slide__container\">{this.#slidesElements}</div>\n <footer\n // slide common footer\n class={{\n slide__footer: true\n }}\n >\n <div\n class={{\n \"slide__footer-wrapper\": true\n }}\n >\n <ul class=\"slide__dots\" aria-label=\"Slide indicators\">\n {this.slides.map((_, index) => {\n return (\n <li\n class={{\n \"slide__dot\": true,\n \"slide__dot-inactive\": this.slideTransitioning,\n [ACTIVE_SLIDE_SELECTOR]:\n index === this.activeSlideIndex\n }}\n data-index={index}\n onClick={\n !this.slideTransitioning && this.#dotClickedHandler\n }\n ></li>\n );\n })}\n </ul>\n </div>\n </footer>\n </section>\n </div>\n </Host>\n );\n }\n}\n\nexport type SlideInfo = {\n illustration: {\n url: string;\n alt: string;\n };\n title: string;\n description?: string[];\n descriptionAsChunks?: boolean;\n listItems?: Array<{\n title: string;\n description: string;\n }>;\n};\n\nexport type CloseCallback = () => Promise<void>;\nexport type TransitionType = \"static\" \| \"auto\";\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-961bb2cc.entry.js → p-0bdf34f2.entry.js} RENAMED Viewed

@@ -1,10 +1,8 @@
 import { r as e, c as t, h as r, H as i, a } from "./p-25a9f1d7.js";
-import { g as o } from "./p-6e4208d8.js";
+import { g as o } from "./p-ede7bd20.js";
-import "./p-5ac47c69.js";
-import { r as s } from "./p-9a609b51.js";
+import { r as s } from "./p-48f5911b.js";
 import { L as l } from "./p-311eedf3.js";
@@ -489,4 +487,4 @@ c = new WeakMap, g = new WeakMap;
 f.style = n;
 export { f as gx_ide_manage_module_references };
-//# sourceMappingURL=p-961bb2cc.entry.js.map
+//# sourceMappingURL=p-0bdf34f2.entry.js.map