@genesislcap/pbc-reconciliation-ui 0.0.46 → 14.339.0

package/dist/esm/components/reconciliations-panel/reconciliations-panel.template.js

@@ -1,256 +1,261 @@
 import { html, ref, repeat, sync, when, whenElse } from '@genesislcap/web-core';
 import { MAX_ROWS_RECONCILIATION_RESULT, ReconciliationStatus, } from '../../reconciliation.types';
-import { InputParameter } from './input-parameter/input-parameter';
 import { buttonTag, gridTag, iconTag, optionTag, selectTag, progressRingTag, tabsTag, tabTag, tabPanelTag, segmentedControlTag, segmentedItemTag, textFieldTag, } from '../../tags';
+import { getFormattedDateTime } from '../../utils';
 import { eventDetail } from '../../utils/eventDetail';
 import { RECONCILIATION_COLUMNS } from './columns';
+import { InputParameter } from './input-parameter/input-parameter';
 import { ReconciliationNoRowsOverlay } from './reconciliation-no-rows-overlay';
-import { getFormattedDateTime } from '../../utils';
-import { ResultDetails } from './result-details/result-details';
 import { ReconciliationsTab } from './reconciliations-panel.utils';
+import { ResultDetails } from './result-details/result-details';
 InputParameter;
 ResultDetails;
-const reconciliationsSide = html `
-  <div class="reconciliations-side">
-    <div class="reconciliations-side-new">
-      <div
-        class="reconciliation-side-list-header"
-        style="border-bottom: 1px solid var(--neutral-stroke-divider-rest);"
-        @click=${(x) => x.newReconciliation()}
-      >
-        <${iconTag} class="add-icon" name="circle-plus" size="lg"></${iconTag}>
-        New Reconciliation
-      </div>
-    </div>
-
-    <div class="reconciliations-side-list">
-      <!-- In Progress -->
-      <div class="reconciliations-in-progress">
-        <div class="reconciliations-in-progress-label">Reconciliations In Progress</div>
-        <div class="reconciliations-in-progress-list">
-          ${repeat((x) => x.reconciliationsInProgress, html `
-              <div
-                class="recon-in-progress recon-in-progress${(x, c) => isReconciliationSelected(x, c)}"
-                @click=${(x, c) => c.parent.selectReconciliation(x)}
-              >
-                <span>${(x) => x.RECONCILIATION_NAME}</span>
-                <div class="flex-row">
-                  <span class="stop-recon-btn" @click=${(x, c) => c.parent.stopReconciliation(c.event, x.RECONCILIATION_ID)}>
-                    <${iconTag} name="circle-stop" variant="regular" size="xl"></${iconTag}>
-                  </span>
-                  <${progressRingTag}></${progressRingTag}>
-                </div>
-              </div>
-            `)}
-        </div>
-      </div>
-
-      <!-- Historical -->
-      <div class="historical-reconciliations">
-        <div class="historical-reconciliations-label">Historical Reconciliations</div>
-        <div class="filters">
-          <label class="filter-label">Filter By:</label>
-          <${segmentedControlTag}
-            class="data-source-types"
-            :value=${sync((x) => x.filterType)}
-          >
-            <${segmentedItemTag}
-              :value=${(_) => 'Name'}
-              @click=${(x) => x.clearFilters()}
-            >
-              Name
-            </${segmentedItemTag}>
-            <${segmentedItemTag}
-              :value=${(_) => 'Date'}
-              @click=${(x) => x.clearFilters()}
-            >
-              Date
-            </${segmentedItemTag}>
-          </${segmentedControlTag}>
-          
-          ${whenElse((x) => x.filterType === 'Name', html `
-              <${textFieldTag}
-                @input=${(x, c) => x.filterByName(c.event)}
-                :value=${sync((x) => x.textFilter)}
-                placeholder="Reconciliation Name"
-              >
-              </${textFieldTag}>
-            `, html `
-              <${textFieldTag}
-                type="date"
-                @change=${(x, c) => x.filterByDate(c.event)}
-                format="MM/DD/YYYY"
-                :value=${sync((x) => x.dateFilter)}
-              >
-              </${textFieldTag}>
-            `)}
-        </div>
-        
-        <div class="historical-reconciliations-list">
-          <!-- Today -->
-          <div
-            class="reconciliation-side-list-header"
-            @click=${(x) => (x.toggleTodaysReconciliations = !x.toggleTodaysReconciliations)}
-          >
-            <span class="toggle-recon">
-              <${iconTag}
-                class="chevron"
-                name=${(x) => (x.toggleTodaysReconciliations ? 'chevron-down' : 'chevron-up')}
-                size="2xs"
-              >
-              </${iconTag}>
-            </span>
-            Today 
-          </div>
-
-          <div class="historical-today-list">
-            ${repeat((x) => x.toggleTodaysReconciliations && x.historicalReconciliationsTodayFiltered, html `
-                <div
-                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
-                  @click=${(x, c) => c.parent.selectReconciliation(x)}
-                >
-                  <div class="recon-list-item">
-                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}"><${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}></div>
-                    <span>${(x) => x.RECONCILIATION_NAME}</span>
-                  </div>
-                  <span class="historic-recon-date">
-                    ${(x) => getFormattedDateTime(x.DATETIME)}
-                  </span>
-                </div>
-              `)}
-          </div>
-
-          <!-- Previous -->
-          <div
-            class="reconciliation-side-list-header" 
-            @click=${(x) => (x.togglePreviousReconciliations = !x.togglePreviousReconciliations)}
-          >
-            <span class="toggle-recon">
-              <${iconTag}
-                class="chevron"
-                name=${(x) => (x.togglePreviousReconciliations ? 'chevron-down' : 'chevron-up')}
-                size="2xs"
-              >
-              </${iconTag}>
-            </span>
-            Previous 
-          </div>
-          
-          <div class="historical-previous-list">
-            ${repeat((x) => x.togglePreviousReconciliations && x.historicalReconciliationsPreviousFiltered, html `
-                <div
-                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
-                  @click=${(x, c) => c.parent.selectReconciliation(x)}
-                >
-                  <div class="recon-list-item">
-                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}">
-                      <${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}>
-                    </div>
-                    <span>${(x) => x.RECONCILIATION_NAME}</span>
-                  </div>
-                  <span class="historic-recon-date">${(x) => getFormattedDateTime(x.DATETIME)}</span>
-                </div>
-              `)}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+const reconciliationsSide = html `
+  <div class="reconciliations-side">
+    <div class="reconciliations-side-new">
+      <div
+        class="reconciliation-side-list-header"
+        style="border-bottom: 1px solid var(--neutral-stroke-divider-rest);"
+        @click=${(x) => x.newReconciliation()}
+      >
+        <${iconTag} class="add-icon" name="circle-plus" size="lg"></${iconTag}>
+        New Reconciliation
+      </div>
+    </div>
+
+    <div class="reconciliations-side-list">
+      <!-- In Progress -->
+      <div class="reconciliations-in-progress">
+        <div class="reconciliations-in-progress-label">Reconciliations In Progress</div>
+        <div class="reconciliations-in-progress-list">
+          ${repeat((x) => x.reconciliationsInProgress, html `
+              <div
+                class="recon-in-progress recon-in-progress${(x, c) => isReconciliationSelected(x, c)}"
+                @click=${(x, c) => c.parent.selectReconciliation(x)}
+              >
+                <span>${(x) => x.RECONCILIATION_NAME}</span>
+                <div class="flex-row">
+                  <span class="stop-recon-btn" @click=${(x, c) => c.parent.stopReconciliation(c.event, x.RECONCILIATION_ID)}>
+                    <${iconTag} name="circle-stop" variant="regular" size="xl"></${iconTag}>
+                  </span>
+                  <${progressRingTag}></${progressRingTag}>
+                </div>
+              </div>
+            `)}
+        </div>
+      </div>
+
+      <!-- Historical -->
+      <div class="historical-reconciliations">
+        <div class="historical-reconciliations-label">Historical Reconciliations</div>
+        <div class="filters">
+          <label class="filter-label">Filter By:</label>
+          <${segmentedControlTag}
+            class="data-source-types"
+            :value=${sync((x) => x.filterType)}
+          >
+            <${segmentedItemTag}
+              :value=${(_) => 'Name'}
+              @click=${(x) => x.clearFilters()}
+            >
+              Name
+            </${segmentedItemTag}>
+            <${segmentedItemTag}
+              :value=${(_) => 'Date'}
+              @click=${(x) => x.clearFilters()}
+            >
+              Date
+            </${segmentedItemTag}>
+          </${segmentedControlTag}>
+          
+          ${whenElse((x) => x.filterType === 'Name', html `
+              <${textFieldTag}
+                @input=${(x, c) => x.filterByName(c.event)}
+                :value=${sync((x) => x.textFilter)}
+                placeholder="Reconciliation Name"
+              >
+              </${textFieldTag}>
+            `, html `
+              <${textFieldTag}
+                type="date"
+                @change=${(x, c) => x.filterByDate(c.event)}
+                format="MM/DD/YYYY"
+                :value=${sync((x) => x.dateFilter)}
+              >
+              </${textFieldTag}>
+            `)}
+        </div>
+        
+        <div class="historical-reconciliations-list">
+          <!-- Today -->
+          <div
+            class="reconciliation-side-list-header"
+            @click=${(x) => (x.toggleTodaysReconciliations = !x.toggleTodaysReconciliations)}
+          >
+            <span class="toggle-recon">
+              <${iconTag}
+                class="chevron"
+                name=${(x) => (x.toggleTodaysReconciliations ? 'chevron-down' : 'chevron-up')}
+                size="2xs"
+              >
+              </${iconTag}>
+            </span>
+            Today 
+          </div>
+
+          <div class="historical-today-list">
+            ${repeat((x) => x.toggleTodaysReconciliations && x.historicalReconciliationsTodayFiltered, html `
+                <div
+                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
+                  @click=${(x, c) => c.parent.selectReconciliation(x)}
+                >
+                  <div class="recon-list-item">
+                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}"><${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}></div>
+                    <span>${(x) => x.RECONCILIATION_NAME}</span>
+                  </div>
+                  <span class="historic-recon-date">
+                    ${(x) => getFormattedDateTime(x.DATETIME)}
+                  </span>
+                </div>
+              `)}
+          </div>
+
+          <!-- Previous -->
+          <div
+            class="reconciliation-side-list-header" 
+            @click=${(x) => (x.togglePreviousReconciliations = !x.togglePreviousReconciliations)}
+          >
+            <span class="toggle-recon">
+              <${iconTag}
+                class="chevron"
+                name=${(x) => (x.togglePreviousReconciliations ? 'chevron-down' : 'chevron-up')}
+                size="2xs"
+              >
+              </${iconTag}>
+            </span>
+            Previous 
+          </div>
+          
+          <div class="historical-previous-list">
+            ${repeat((x) => x.togglePreviousReconciliations && x.historicalReconciliationsPreviousFiltered, html `
+                <div
+                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
+                  @click=${(x, c) => c.parent.selectReconciliation(x)}
+                >
+                  <div class="recon-list-item">
+                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}">
+                      <${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}>
+                    </div>
+                    <span>${(x) => x.RECONCILIATION_NAME}</span>
+                  </div>
+                  <span class="historic-recon-date">${(x) => getFormattedDateTime(x.DATETIME)}</span>
+                </div>
+              `)}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 `;
 function isReconciliationSelected(x, c) {
     return c.parent.reconciliation && x.RECONCILIATION_ID == c.parent.reconciliation.RECONCILIATION_ID
         ? '-selected'
         : '';
 }
-const reconciliationsResult = html `
-  <div class="reconciliation-result">
-    <div class="reconciliation-result-header">
-      <label class="reconciliation-result-label">Reconciliation Result</label>
-      
+const reconciliationsResult = html `
+  <div class="reconciliation-result">
+    <div class="reconciliation-result-header">
+      <label class="reconciliation-result-label">Reconciliation Result</label>
+      
       ${when((x) => x.reconciliation.RECONCILIATION_ID &&
-    (x.reconciliation.STATUS === ReconciliationStatus.FAILED || x.reconciliation.STATUS === ReconciliationStatus.CANCELLED), html `
-          <div class="error-message">
+    (x.reconciliation.STATUS === ReconciliationStatus.FAILED ||
+        x.reconciliation.STATUS === ReconciliationStatus.CANCELLED), html `
+          <div class="error-message">
             ${(x) => x.reconciliation.STATUS === ReconciliationStatus.FAILED
     ? x.reconciliation.MESSAGE
-    : `${x.reconciliation.CANCELED_BY} CANCELLED this Reconciliation Run on ${getFormattedDateTime(x.reconciliation.END_TIMESTAMP)}`}
-          </div>
-        `)}
-
+    : `${x.reconciliation.CANCELED_BY} CANCELLED this Reconciliation Run on ${getFormattedDateTime(x.reconciliation.END_TIMESTAMP)}`}
+          </div>
+        `)}
+
       ${when((x) => x.reconciliation.RECONCILIATION_ID &&
-    x.reconciliation.STATUS === ReconciliationStatus.COMPLETED, html `
-          <${buttonTag}
-            class="reconciliation-report"
-            @click=${(x) => x.downloadReconciliationReport()}
-            disabled
-          >
-            <${iconTag} name="download" size="lg"></${iconTag}>
-            &nbsp;Reconciliation Report
-          </${buttonTag}>
-        `)}
-    </div>
-    
-    ${when((x) => { var _a; return !((_a = x.reconciliation) === null || _a === void 0 ? void 0 : _a.RECONCILIATION_ID) || x.reconciliation.STATUS === ReconciliationStatus.CANCELLED; }, html `
-        <${buttonTag}
-          class="run-reconciliation"
-          @click=${(x) => x.runReconciliation()}
-          ?disabled=${(x) => x.runReconciliationButtonDisable}
-        >
-          <${iconTag} name="play" size="lg"></${iconTag}>
-          &nbsp;Run Reconciliation
-        </${buttonTag}>
-      `)}
-    
-    <${tabsTag}
-      ${ref('tabs')}
-      appearance="secondary"
-      class="tabs"
-    >
-      <${tabTag}
-        appearance="secondary"
-        slot="all-breaks-tab"
-        id=${() => ReconciliationsTab.ALL_BREAKS}
-        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_BREAKS)}
-      >
-        All Breaks
-      </${tabTag}>
-      
-      <${tabTag}
-        appearance="secondary"
-        slot="all-matched-tab"
-        id=${() => ReconciliationsTab.ALL_MATCHED}
-        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_MATCHED)}
-      >
-        All Matched
-      </${tabTag}>
-
-      <${tabPanelTag}
-        slot="all-breaks-tab"
-        id="all-breaks-tab-panel"
-        style="${(x) => x.selectedTab === ReconciliationsTab.ALL_BREAKS ? '' : 'display: none'}"
-      >
-        ${when((x) => x.datasourcePairs.size > 1, html `
-            <div class="view-datasource-pair">
-              <${selectTag}
-                :value=${sync((x) => x.viewDatasourcePairValue)}
-                @change=${(x) => x.changeViewSelect()}
-              >
-                ${(x) => x.datasourcePairsItemsOptions}
-              </${selectTag}>
-            </div>
-          `)}
-        
-        <${gridTag}
-          only-template-col-defs
-        >
-          <grid-pro-genesis-datasource
-            ${ref('allBreaksDatasource')}
-            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
-            criteria=${(x) => x.breaksTabCriteria}
-            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
-            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
-            order-by="TIMESTAMP"
-            reverse="true"
-            moving-view="true"
+    x.reconciliation.STATUS === ReconciliationStatus.COMPLETED, html `
+          <${buttonTag}
+            class="reconciliation-report"
+            @click=${(x) => x.downloadReconciliationReport()}
+            disabled
+          >
+            <${iconTag} name="download" size="lg"></${iconTag}>
+            &nbsp;Reconciliation Report
+          </${buttonTag}>
+        `)}
+    </div>
+    
+    ${when((x) => {
+    var _a;
+    return !((_a = x.reconciliation) === null || _a === void 0 ? void 0 : _a.RECONCILIATION_ID) ||
+        x.reconciliation.STATUS === ReconciliationStatus.CANCELLED;
+}, html `
+        <${buttonTag}
+          class="run-reconciliation"
+          @click=${(x) => x.runReconciliation()}
+          ?disabled=${(x) => x.runReconciliationButtonDisable}
+        >
+          <${iconTag} name="play" size="lg"></${iconTag}>
+          &nbsp;Run Reconciliation
+        </${buttonTag}>
+      `)}
+    
+    <${tabsTag}
+      ${ref('tabs')}
+      appearance="secondary"
+      class="tabs"
+    >
+      <${tabTag}
+        appearance="secondary"
+        slot="all-breaks-tab"
+        id=${() => ReconciliationsTab.ALL_BREAKS}
+        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_BREAKS)}
+      >
+        All Breaks
+      </${tabTag}>
+      
+      <${tabTag}
+        appearance="secondary"
+        slot="all-matched-tab"
+        id=${() => ReconciliationsTab.ALL_MATCHED}
+        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_MATCHED)}
+      >
+        All Matched
+      </${tabTag}>
+
+      <${tabPanelTag}
+        slot="all-breaks-tab"
+        id="all-breaks-tab-panel"
+        style="${(x) => (x.selectedTab === ReconciliationsTab.ALL_BREAKS ? '' : 'display: none')}"
+      >
+        ${when((x) => x.datasourcePairs.size > 1, html `
+            <div class="view-datasource-pair">
+              <${selectTag}
+                :value=${sync((x) => x.viewDatasourcePairValue)}
+                @change=${(x) => x.changeViewSelect()}
+              >
+                ${(x) => x.datasourcePairsItemsOptions}
+              </${selectTag}>
+            </div>
+          `)}
+        
+        <${gridTag}
+          only-template-col-defs
+        >
+          <grid-pro-genesis-datasource
+            ${ref('allBreaksDatasource')}
+            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
+            criteria=${(x) => x.breaksTabCriteria}
+            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            order-by="TIMESTAMP"
+            reverse="true"
+            moving-view="true"
             :deferredGridOptions=${(x) => {
     var _a;
     return ({
@@ -260,40 +265,40 @@ const reconciliationsResult = html `
         onCellDoubleClicked: (params) => x.openResultDetails(params),
         columnDefs: RECONCILIATION_COLUMNS({}),
     });
-}}
-          >
-          </grid-pro-genesis-datasource>
-        </${gridTag}>
-      </${tabPanelTag}>
-      
-      <${tabPanelTag}
-        slot="all-matched-tab"
-        id="all-matched-tab-panel"
-        style="${(x) => x.selectedTab === ReconciliationsTab.ALL_MATCHED ? '' : 'display: none'}"
-      >
-        ${when((x) => x.datasourcePairs.size > 1, html `
-            <div class="view-datasource-pair">
-              <${selectTag}
-                :value=${sync((x) => x.viewDatasourcePairValue)}
-                @change=${(x) => x.changeViewSelect()}
-              >
-                ${(x) => x.datasourcePairsItemsOptions}
-              </${selectTag}>
-            </div>
-          `)}
-
-        <${gridTag}
-          only-template-col-defs
-        >
-          <grid-pro-genesis-datasource
-            ${ref('allMatchedDatasource')}
-            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
-            criteria=${(x) => x.matchedTabCriteria}
-            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
-            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
-            order-by="TIMESTAMP"
-            reverse="true"
-            moving-view="true"
+}}
+          >
+          </grid-pro-genesis-datasource>
+        </${gridTag}>
+      </${tabPanelTag}>
+      
+      <${tabPanelTag}
+        slot="all-matched-tab"
+        id="all-matched-tab-panel"
+        style="${(x) => (x.selectedTab === ReconciliationsTab.ALL_MATCHED ? '' : 'display: none')}"
+      >
+        ${when((x) => x.datasourcePairs.size > 1, html `
+            <div class="view-datasource-pair">
+              <${selectTag}
+                :value=${sync((x) => x.viewDatasourcePairValue)}
+                @change=${(x) => x.changeViewSelect()}
+              >
+                ${(x) => x.datasourcePairsItemsOptions}
+              </${selectTag}>
+            </div>
+          `)}
+
+        <${gridTag}
+          only-template-col-defs
+        >
+          <grid-pro-genesis-datasource
+            ${ref('allMatchedDatasource')}
+            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
+            criteria=${(x) => x.matchedTabCriteria}
+            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            order-by="TIMESTAMP"
+            reverse="true"
+            moving-view="true"
             :deferredGridOptions=${(x) => {
     var _a;
     return ({
@@ -303,70 +308,69 @@ const reconciliationsResult = html `
         onCellDoubleClicked: (params) => x.openResultDetails(params),
         columnDefs: RECONCILIATION_COLUMNS({}),
     });
-}}
-          >
-          </grid-pro-genesis-datasource>
-        </${gridTag}>
-      </${tabPanelTag}>
-    </${tabsTag}>
-  </div>
+}}
+          >
+          </grid-pro-genesis-datasource>
+        </${gridTag}>
+      </${tabPanelTag}>
+    </${tabsTag}>
+  </div>
 `;
-const reconciliationConfigurationAndResult = html `
-  ${when((x) => x.reconciliation, html `
-      <div class="configuration-and-reconciliation-result">
-        <div class="configuration">
-          <div class="configuration-fields">
-            <div class="configuration-select-configuration">
-              <label class="configuration-label">Reconciliation Name</label>
-              
-              <${textFieldTag}
-                :value=${sync((x) => x.reconciliationName)}
-                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
-              > 
-              </${textFieldTag}>
-            </div>
-            
-            <div class="configuration-select-configuration">
-              <label class="configuration-label">Select Configuration</label>
-              
-              <${selectTag}
-                :value=${sync((x) => x.reconciliationConfiguration)}
-                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
-              >
-                ${repeat((x) => x.reconciliationConfigurations, html `
-                    <${optionTag} :value=${(x) => x.RECONCILIATION_CONFIG_ID}>
-                      ${(x) => x.NAME}
-                    </${optionTag}>
-                  `)}
-              </${selectTag}>
-            </div>
-          </div>
-
-          <div class="configuration-input-parameters">
-            <label class="input-parameters-label">Input Parameters</label>
-            <div class="input-parameters-fields">
-              ${repeat((x) => x.datasourceConfigurations, html `
-                  <input-parameter
-                    :datasourceConfiguration=${(x) => x}
-                    :locked=${(_, c) => c.parent.lockInputParameters}
-                    @uploaded=${(_, c) => c.parent.fileUploaded(eventDetail(c))}
-                  >
-                  </input-parameter>
-                `)}
-            </div>
-          </div>
-        </div>
-
-        ${reconciliationsResult}
-      </div>
-    `)}
+const reconciliationConfigurationAndResult = html `
+  ${when((x) => x.reconciliation, html `
+      <div class="configuration-and-reconciliation-result">
+        <div class="configuration">
+          <div class="configuration-fields">
+            <div class="configuration-select-configuration">
+              <label class="configuration-label">Reconciliation Name</label>
+              
+              <${textFieldTag}
+                :value=${sync((x) => x.reconciliationName)}
+                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
+              > 
+              </${textFieldTag}>
+            </div>
+            
+            <div class="configuration-select-configuration">
+              <label class="configuration-label">Select Configuration</label>
+              
+              <${selectTag}
+                :value=${sync((x) => x.reconciliationConfiguration)}
+                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
+              >
+                ${repeat((x) => x.reconciliationConfigurations, html `
+                    <${optionTag} :value=${(x) => x.RECONCILIATION_CONFIG_ID}>
+                      ${(x) => x.NAME}
+                    </${optionTag}>
+                  `)}
+              </${selectTag}>
+            </div>
+          </div>
+
+          <div class="configuration-input-parameters">
+            <label class="input-parameters-label">Input Parameters</label>
+            <div class="input-parameters-fields">
+              ${repeat((x) => x.datasourceConfigurations, html `
+                  <input-parameter
+                    :datasourceConfiguration=${(x) => x}
+                    :locked=${(_, c) => c.parent.lockInputParameters}
+                    @uploaded=${(_, c) => c.parent.fileUploaded(eventDetail(c))}
+                  ></input-parameter>
+                `)}
+            </div>
+          </div>
+        </div>
+
+        ${reconciliationsResult}
+      </div>
+    `)}
 `;
-export const ReconciliationsPanelTemplate = html `
-  <div class="reconciliations-panel">
-    ${reconciliationsSide}
-    ${reconciliationConfigurationAndResult}
-  </div>
-
-  <result-details ${ref('resultDetails')}></result-details>
+export const ReconciliationsPanelTemplate = html `
+  <div class="reconciliations-panel">
+    ${reconciliationsSide}
+    ${reconciliationConfigurationAndResult}
+  </div>
+
+  <result-details ${ref('resultDetails')}></result-details>
 `;
 //# sourceMappingURL=reconciliations-panel.template.js.map