@symphony-talent/component-library 3.48.1 → 3.50.0

package/fesm2020/symphony-talent-component-library.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, Input, NgModule, EventEmitter, Output, Pipe, Injectable, ViewEncapsulation, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
-import { SlicePipe, CommonModule } from '@angular/common';
+import { SlicePipe, CommonModule, DecimalPipe } from '@angular/common';
 import * as i1$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -549,10 +549,10 @@ class GridComponent {
     }
 }
 GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridComponent, selector: "symphony-grid", inputs: { columnDefs: "columnDefs", defaultColDef: "defaultColDef", rowData: "rowData", onGridReadyFunction: "onGridReadyFunction", pageSize: "pageSize", rowModelType: "rowModelType", suppressRowClickSelection: "suppressRowClickSelection", rowSelectionMode: "rowSelectionMode" }, ngImport: i0, template: "<ag-grid-angular\n  class=\"ag-theme-alpine\"\n  style=\"width: 100%\"\n  [style.height.vh]=\"gridHeight\"\n  [gridOptions]=\"gridOptions\"\n  [applyColumnDefOrder]=\"true\"\n  [rowModelType]=\"rowModelType\"\n  [columnDefs]=\"columnDefs\"\n  [defaultColDef]=\"defaultColDef\"\n  [frameworkComponents]=\"frameworkComponents\"\n  [getRowHeight]=\"getRowHeight\"\n  [paginationPageSize]=\"pageSize\"\n  [cacheBlockSize]=\"cacheBlockSize\"\n  [rowData]=\"rowData\"\n  [maxConcurrentDatasourceRequests]=\"1\"\n  [loadingCellRenderer]=\"loadingCellRenderer\"\n  [suppressRowClickSelection]=\"suppressRowClickSelection\"\n  [rowSelection]=\"rowSelectionMode\"\n  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [".ag-center-cols-clipper .ag-row .ag-cell{display:flex;align-items:center}.ag-center-cols-clipper .ag-row .ag-cell .cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px;word-break:break-word;line-height:20px}.ag-theme-alpine .ag-header-cell:first-child,.ag-theme-alpine .ag-header-group-cell:first-child,.ag-theme-alpine .ag-center-cols-container .ag-cell:first-child{padding-left:0}\n"], components: [{ type: i1$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }], encapsulation: i0.ViewEncapsulation.None });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridComponent, selector: "symphony-grid", inputs: { columnDefs: "columnDefs", defaultColDef: "defaultColDef", rowData: "rowData", onGridReadyFunction: "onGridReadyFunction", pageSize: "pageSize", rowModelType: "rowModelType", suppressRowClickSelection: "suppressRowClickSelection", rowSelectionMode: "rowSelectionMode", hasNoPaddingleft: "hasNoPaddingleft" }, ngImport: i0, template: "<ag-grid-angular\n  class=\"ag-theme-alpine\"\n  [ngClass]=\"{'noPaddingLeft': hasNoPaddingleft}\"\n  style=\"width: 100%\"\n  [style.height.vh]=\"gridHeight\"\n  [gridOptions]=\"gridOptions\"\n  [applyColumnDefOrder]=\"true\"\n  [rowModelType]=\"rowModelType\"\n  [columnDefs]=\"columnDefs\"\n  [defaultColDef]=\"defaultColDef\"\n  [frameworkComponents]=\"frameworkComponents\"\n  [getRowHeight]=\"getRowHeight\"\n  [paginationPageSize]=\"pageSize\"\n  [cacheBlockSize]=\"cacheBlockSize\"\n  [rowData]=\"rowData\"\n  [maxConcurrentDatasourceRequests]=\"1\"\n  [loadingCellRenderer]=\"loadingCellRenderer\"\n  [suppressRowClickSelection]=\"suppressRowClickSelection\"\n  [rowSelection]=\"rowSelectionMode\"\n  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [".ag-center-cols-clipper .ag-row .ag-cell{display:flex;align-items:center}.ag-center-cols-clipper .ag-row .ag-cell .cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px;word-break:break-word;line-height:20px}.ag-theme-alpine.noPaddingLeft .ag-header-cell:first-child,.ag-theme-alpine.noPaddingLeft .ag-header-group-cell:first-child,.ag-theme-alpine.noPaddingLeft .ag-center-cols-container .ag-cell:first-child{padding-left:0}\n"], components: [{ type: i1$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid', encapsulation: ViewEncapsulation.None, template: "<ag-grid-angular\n  class=\"ag-theme-alpine\"\n  style=\"width: 100%\"\n  [style.height.vh]=\"gridHeight\"\n  [gridOptions]=\"gridOptions\"\n  [applyColumnDefOrder]=\"true\"\n  [rowModelType]=\"rowModelType\"\n  [columnDefs]=\"columnDefs\"\n  [defaultColDef]=\"defaultColDef\"\n  [frameworkComponents]=\"frameworkComponents\"\n  [getRowHeight]=\"getRowHeight\"\n  [paginationPageSize]=\"pageSize\"\n  [cacheBlockSize]=\"cacheBlockSize\"\n  [rowData]=\"rowData\"\n  [maxConcurrentDatasourceRequests]=\"1\"\n  [loadingCellRenderer]=\"loadingCellRenderer\"\n  [suppressRowClickSelection]=\"suppressRowClickSelection\"\n  [rowSelection]=\"rowSelectionMode\"\n  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [".ag-center-cols-clipper .ag-row .ag-cell{display:flex;align-items:center}.ag-center-cols-clipper .ag-row .ag-cell .cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px;word-break:break-word;line-height:20px}.ag-theme-alpine .ag-header-cell:first-child,.ag-theme-alpine .ag-header-group-cell:first-child,.ag-theme-alpine .ag-center-cols-container .ag-cell:first-child{padding-left:0}\n"] }]
+            args: [{ selector: 'symphony-grid', encapsulation: ViewEncapsulation.None, template: "<ag-grid-angular\n  class=\"ag-theme-alpine\"\n  [ngClass]=\"{'noPaddingLeft': hasNoPaddingleft}\"\n  style=\"width: 100%\"\n  [style.height.vh]=\"gridHeight\"\n  [gridOptions]=\"gridOptions\"\n  [applyColumnDefOrder]=\"true\"\n  [rowModelType]=\"rowModelType\"\n  [columnDefs]=\"columnDefs\"\n  [defaultColDef]=\"defaultColDef\"\n  [frameworkComponents]=\"frameworkComponents\"\n  [getRowHeight]=\"getRowHeight\"\n  [paginationPageSize]=\"pageSize\"\n  [cacheBlockSize]=\"cacheBlockSize\"\n  [rowData]=\"rowData\"\n  [maxConcurrentDatasourceRequests]=\"1\"\n  [loadingCellRenderer]=\"loadingCellRenderer\"\n  [suppressRowClickSelection]=\"suppressRowClickSelection\"\n  [rowSelection]=\"rowSelectionMode\"\n  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [".ag-center-cols-clipper .ag-row .ag-cell{display:flex;align-items:center}.ag-center-cols-clipper .ag-row .ag-cell .cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px;word-break:break-word;line-height:20px}.ag-theme-alpine.noPaddingLeft .ag-header-cell:first-child,.ag-theme-alpine.noPaddingLeft .ag-header-group-cell:first-child,.ag-theme-alpine.noPaddingLeft .ag-center-cols-container .ag-cell:first-child{padding-left:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnDefs: [{
                 type: Input
             }], defaultColDef: [{
@@ -569,6 +569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], rowSelectionMode: [{
                 type: Input
+            }], hasNoPaddingleft: [{
+                type: Input
             }] } });
 
 class ContactActivityScoreModule {
@@ -4768,10 +4770,10 @@ class EventsSettingsPageComponent {
     }
 }
 EventsSettingsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-events-settings-page', template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""] }]
+            args: [{ selector: 'symphony-events-settings-page', template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], keywordSearchChange: [{
@@ -5052,45 +5054,87 @@ class InputEditableTextComponent {
     constructor() {
         this.type = 'number';
         this.confirm = new EventEmitter();
+        this.validate = new EventEmitter();
+        this.editMode = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.model.minValue) {
+            this.maxMinPlaceholder = `${this.model.minValue}`;
+        }
+        if (this.model.minValue && this.model.maxValue) {
+            this.maxMinPlaceholder = `${this.model.inputMask}${this.model.minValue} - ${this.model.inputMask}${this.model.maxValue}`;
+        }
     }
     onEditClick() {
         this.model.isInEditMode = true;
         this.previousValue = this.model.value;
+        this.editMode.emit(this.model);
     }
     onConfirmClick() {
-        this.model.isInEditMode = false;
-        this.confirm.emit(this.model);
+        if (!this.model.isInvalid) {
+            this.model.isInEditMode = false;
+            this.confirm.emit(this.model);
+        }
     }
     onCloseClick() {
         this.model.value = this.previousValue;
         this.model.isInEditMode = false;
     }
+    onValidate(event) {
+        if (Number(this.model.value) < this.model.minValue) {
+            this.model.isInvalid = true;
+        }
+        else if (this.model.maxValue &&
+            Number(this.model.value) > this.model.maxValue) {
+            this.model.isInvalid = true;
+        }
+        else {
+            this.model.isInvalid = false;
+        }
+        this.validate.emit(this.model);
+    }
 }
 InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask }}{{ model.value }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"model.isInEditMode\" class=\"editMode\">\n    <span class=\"sfx-pr-10\"\n      >{{ model.inputMask }}<input type=\"{{ type }}\" [(ngModel)]=\"model.value\"\n    /></span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-confirmation'\"\n        [size]=\"'14px'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-5 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        [size]=\"'14px'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;text-align:right;width:21px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:10px;border-radius:4px}.editMode .edit-i-postion{position:relative;top:1px}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-editable-text', template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask }}{{ model.value }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"model.isInEditMode\" class=\"editMode\">\n    <span class=\"sfx-pr-10\"\n      >{{ model.inputMask }}<input type=\"{{ type }}\" [(ngModel)]=\"model.value\"\n    /></span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-confirmation'\"\n        [size]=\"'14px'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-5 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        [size]=\"'14px'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: ["input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;text-align:right;width:21px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:10px;border-radius:4px}.editMode .edit-i-postion{position:relative;top:1px}\n"] }]
+            args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], type: [{
                 type: Input
             }], confirm: [{
                 type: Output
+            }], validate: [{
+                type: Output
+            }], editMode: [{
+                type: Output
             }] } });
 
 class AdvertisePostingboardSelectionItemComponent {
     constructor() {
         this.priceChange = new EventEmitter();
+        this.validationChange = new EventEmitter();
+        this.editModeChange = new EventEmitter();
         this.postingBoardSelect = new EventEmitter();
     }
     ngOnInit() {
         this.mapModel();
     }
     onBoardPriceChange(priceChangeEvent) {
+        this.model.isInEditMode = priceChangeEvent.isInEditMode;
         this.model.boardPrice = +priceChangeEvent.value;
         this.priceChange.emit(this.model);
     }
+    onBoardValidateChange(validateChange) {
+        this.model.isInEditMode = validateChange.isInEditMode;
+        this.model.isInvalid = validateChange.isInvalid;
+        this.validationChange.emit(this.model);
+    }
+    onBoardEditMode(editModeChange) {
+        this.model.isInEditMode = editModeChange.isInEditMode;
+        this.editModeChange.emit(this.model);
+    }
     onPostingBoardSelect(postingBoardSelectEvent) {
         this.model.isSelected = postingBoardSelectEvent.isActive;
         this.postingBoardSelect.emit(this.model);
@@ -5103,19 +5147,25 @@ class AdvertisePostingboardSelectionItemComponent {
                 isEditable: this.model.isEditable,
                 isInEditMode: this.model.isInEditMode,
                 id: this.model.id,
+                minValue: this.model.minValue,
+                maxValue: this.model.maxValue
             };
         }
     }
 }
 AdvertisePostingboardSelectionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisePostingboardSelectionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: { model: "model" }, outputs: { priceChange: "priceChange", postingBoardSelect: "postingBoardSelect" }, ngImport: i0, template: "<div *ngIf=\"model && model.isVisible\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block editText\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".posting-board-selection-item{position:relative;padding-right:100px}.posting-board-selection-item .editText{position:absolute;right:0}.inline-block{display:inline-block}\n"], components: [{ type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: ["model", "type"], outputs: ["confirm"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdvertisePostingboardSelectionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: { model: "model" }, outputs: { priceChange: "priceChange", validationChange: "validationChange", editModeChange: "editModeChange", postingBoardSelect: "postingBoardSelect" }, ngImport: i0, template: "<div *ngIf=\"model && model.isVisible\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block editText\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n      (validate)=\"onBoardValidateChange($event)\"\n      (editMode)=\"onBoardEditMode($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".posting-board-selection-item{position:relative;padding-right:100px}.posting-board-selection-item .editText{position:absolute;right:0}.inline-block{display:inline-block}\n"], components: [{ type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: ["model", "type"], outputs: ["confirm", "validate", "editMode"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-advertise-postingboard-selection-item', template: "<div *ngIf=\"model && model.isVisible\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block editText\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".posting-board-selection-item{position:relative;padding-right:100px}.posting-board-selection-item .editText{position:absolute;right:0}.inline-block{display:inline-block}\n"] }]
+            args: [{ selector: 'symphony-advertise-postingboard-selection-item', template: "<div *ngIf=\"model && model.isVisible\" class=\"posting-board-selection-item\">\n  <div class=\"inline-block\">\n    <symphony-input-checkbox\n      [label]=\"model.boardName\"\n      [isActive]=\"model.isSelected\"\n      (clicked)=\"onPostingBoardSelect($event)\"\n    ></symphony-input-checkbox>\n  </div>\n  <div class=\"inline-block editText\">\n    <symphony-input-editable-text\n      [model]=\"editableTextModel\"\n      (confirm)=\"onBoardPriceChange($event)\"\n      (validate)=\"onBoardValidateChange($event)\"\n      (editMode)=\"onBoardEditMode($event)\"\n    ></symphony-input-editable-text>\n  </div>\n</div>\n", styles: [".posting-board-selection-item{position:relative;padding-right:100px}.posting-board-selection-item .editText{position:absolute;right:0}.inline-block{display:inline-block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], priceChange: [{
                 type: Output
+            }], validationChange: [{
+                type: Output
+            }], editModeChange: [{
+                type: Output
             }], postingBoardSelect: [{
                 type: Output
             }] } });
@@ -5125,19 +5175,23 @@ class AdvertisePostingboardSelectionListComponent {
         this.postingBoardChange = new EventEmitter();
     }
     onPostingBoardSelect(selectedBoard) {
-        console.log('onPostingBoardSelect');
         this.postingBoardChange.emit(selectedBoard);
     }
     onPriceChange(priceChangeBoard) {
-        console.log('onPriceChange');
         this.postingBoardChange.emit(priceChangeBoard);
     }
+    onValidationChange(validationChangeBoard) {
+        this.postingBoardChange.emit(validationChangeBoard);
+    }
+    onEditModeChange(editModeChangeBoard) {
+        this.postingBoardChange.emit(editModeChangeBoard);
+    }
 }
 AdvertisePostingboardSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisePostingboardSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: { model: "model" }, outputs: { postingBoardChange: "postingBoardChange" }, ngImport: i0, template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""], components: [{ type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: ["model"], outputs: ["priceChange", "postingBoardSelect"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+AdvertisePostingboardSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: { model: "model" }, outputs: { postingBoardChange: "postingBoardChange" }, ngImport: i0, template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n  (validationChange)=\"onValidationChange($event)\"\n  (editModeChange)=\"onEditModeChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""], components: [{ type: AdvertisePostingboardSelectionItemComponent, selector: "symphony-advertise-postingboard-selection-item", inputs: ["model"], outputs: ["priceChange", "validationChange", "editModeChange", "postingBoardSelect"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisePostingboardSelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-advertise-postingboard-selection-list', template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""] }]
+            args: [{ selector: 'symphony-advertise-postingboard-selection-list', template: "<symphony-advertise-postingboard-selection-item\n  *ngFor=\"let item of model\"\n  [model]=\"item\"\n  (postingBoardSelect)=\"onPostingBoardSelect($event)\"\n  (priceChange)=\"onPriceChange($event)\"\n  (validationChange)=\"onValidationChange($event)\"\n  (editModeChange)=\"onEditModeChange($event)\"\n></symphony-advertise-postingboard-selection-item>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], postingBoardChange: [{
@@ -5179,7 +5233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
             }] } });
 
 class AdvertiseModalComponent {
-    constructor() {
+    constructor(decimalPipe) {
+        this.decimalPipe = decimalPipe;
         this.buttonClicked = new EventEmitter();
         this.closeButtonClicked = new EventEmitter();
         this.postingBoardChange = new EventEmitter();
@@ -5268,26 +5323,37 @@ class AdvertiseModalComponent {
         this.closeButtonClicked.emit();
     }
     onPostingBoardChange(selectedBoard) {
-        const selectedJobBoards = this.model.jobBoards.filter(jb => jb.isSelected)
-            .length;
-        if (selectedJobBoards > 0) {
+        const selectedJobBoards = this.model.jobBoards.filter(jb => jb.isSelected);
+        if (selectedJobBoards.length > 0) {
             this.updateOrderSummary();
         }
+        const invalidJobBoards = selectedJobBoards.filter(jb => jb.isInvalid)
+            .length;
+        if (invalidJobBoards > 0) {
+            this.isJobBoardNextButtonDisabled = true;
+        }
+        const editModeJobBoards = selectedJobBoards.filter(jb => jb.isInEditMode)
+            .length;
+        if (editModeJobBoards > 0) {
+            this.isJobBoardNextButtonDisabled = true;
+        }
     }
     addLineItem(invoiceAreaIndex, selectedBoard) {
+        let formattedBoardPrice = this.decimalPipe.transform(selectedBoard.boardPrice, '1.0', 'en-US');
         this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.push({
             textLeft: selectedBoard.boardName,
-            textRight: `$${selectedBoard.boardPrice}`
+            textRight: `$${formattedBoardPrice}`
         });
     }
     calculateInvoiceAreaTotal(invoiceAreaIndex) {
         let invoiceAreaTotal = 0;
         this.orderSummary.invoiceAreas[invoiceAreaIndex].lineItems.forEach(li => {
-            invoiceAreaTotal = invoiceAreaTotal + +li.textRight.replace('$', '');
+            invoiceAreaTotal =
+                invoiceAreaTotal + +li.textRight.replace('$', '').replace(',', '');
         });
-        this.orderSummary.invoiceAreas[invoiceAreaIndex].subTotal.textRight = `$${invoiceAreaTotal *
-            this.model.jobsToAdvertise.length}`;
-        this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `$${invoiceAreaTotal}`;
+        let subTotal = invoiceAreaTotal * this.model.jobsToAdvertise.length;
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].subTotal.textRight = `$${this.decimalPipe.transform(subTotal, '1.0', 'en-US')}`;
+        this.orderSummary.invoiceAreas[invoiceAreaIndex].total.textRight = `$${this.decimalPipe.transform(invoiceAreaTotal.toString().replace(',', ''), '1.0', 'en-US')}`;
         return invoiceAreaTotal * this.model.jobsToAdvertise.length;
     }
     calculateOrderTotal(payPerClickAreaTotal, jobBoardAreaTotal) {
@@ -5295,10 +5361,11 @@ class AdvertiseModalComponent {
             .length;
         const jobToAdvertiseCount = this.model.jobsToAdvertise.length;
         const orderSummaryText = `(${selectedJobBoards}) Boards x ${this.model.jobsToAdvertise.length} Jobs = (${selectedJobBoards * jobToAdvertiseCount}) Ads`;
+        let currentTotal = payPerClickAreaTotal + jobBoardAreaTotal;
         this.orderSummary.total = {
             label: 'Current Total',
             textLeft: '',
-            textRight: `$${payPerClickAreaTotal + jobBoardAreaTotal}`
+            textRight: `$${this.decimalPipe.transform(currentTotal.toString().replace(',', ''), '1.0', 'en-US')}`
         };
     }
     updateOrderSummary() {
@@ -5358,12 +5425,12 @@ class AdvertiseModalComponent {
         this.postingBoardChange.emit(this.model);
     }
 }
-AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
 AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: i1.DecimalPipe }]; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{
                 type: Output
@@ -5519,7 +5586,7 @@ ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         OrderSummaryModule,
         ConfirmationModalModule,
         PhaserCardModule], exports: [AdvertiseModalComponent] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, imports: [[
+ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ModalModule, providers: [DecimalPipe], imports: [[
             CommonModule,
             TwoColumnModalModule,
             TwoColumnBodyTemplateModule,
@@ -5565,6 +5632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ConfirmationModalModule,
                         PhaserCardModule
                     ],
+                    providers: [DecimalPipe],
                     exports: [AdvertiseModalComponent]
                 }]
         }] });
@@ -5646,10 +5714,10 @@ class FeedbackListPageComponent {
     }
 }
 FeedbackListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-feedback-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]
+            args: [{ selector: 'symphony-feedback-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], cardClicked: [{
@@ -5925,7 +5993,7 @@ class AdvertisedJobPostingsListPageComponent {
     }
 }
 AdvertisedJobPostingsListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisedJobPostingsListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsListPageComponent, selector: "symphony-advertised-job-postings-list-page", inputs: { model: "model", gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""], components: [{ type: AdvertisedJobPostingsListTemplateComponent, selector: "symphony-advertised-job-postings-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: ActionBarAdvertiseJobListComponent, selector: "symphony-action-bar-advertise-job-list", inputs: ["gridActionModel", "gridControlsModel"], outputs: ["gridControlClick", "gridActionClick"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdvertisedJobPostingsListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsListPageComponent, selector: "symphony-advertised-job-postings-list-page", inputs: { model: "model", gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""], components: [{ type: AdvertisedJobPostingsListTemplateComponent, selector: "symphony-advertised-job-postings-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: ActionBarAdvertiseJobListComponent, selector: "symphony-action-bar-advertise-job-list", inputs: ["gridActionModel", "gridControlsModel"], outputs: ["gridControlClick", "gridActionClick"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertised-job-postings-list-page', template: "<symphony-advertised-job-postings-list-template *ngIf=\"model\">\n  <symphony-h3 sfx-header>Your Job Postings</symphony-h3>\n\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-text\n      filter-one\n      [label]=\"'Search by Job Site'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n  </symphony-two-column-filter-area>\n  <symphony-action-bar-advertise-job-list\n    sfx-grid-action\n    [gridActionModel]=\"model.gridActions\"\n    [gridControlsModel]=\"model.gridControls\"\n    (gridControlClick)=\"onGridControlClick($event)\"\n    (gridActionClick)=\"onGridActionClick($event)\"\n  ></symphony-action-bar-advertise-job-list>\n\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-advertised-job-postings-list-template>\n", styles: [""] }]
@@ -6073,10 +6141,10 @@ class AdvertisedJobPostingsModalComponent {
     }
 }
 AdvertisedJobPostingsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertisedJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsModalComponent, selector: "symphony-advertised-job-postings-modal", inputs: { model: "model", gridDownloadModel: "gridDownloadModel" }, outputs: { keywordSearchChange: "keywordSearchChange", downloadClicked: "downloadClicked", closeButtonClicked: "closeButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"], components: [{ type: OneColumnWithFilterModalTemplateComponent, selector: "symphony-one-column-with-filter-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: GridDownloadComponent, selector: "symphony-grid-download", inputs: ["model"], outputs: ["clicked"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertisedJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsModalComponent, selector: "symphony-advertised-job-postings-modal", inputs: { model: "model", gridDownloadModel: "gridDownloadModel" }, outputs: { keywordSearchChange: "keywordSearchChange", downloadClicked: "downloadClicked", closeButtonClicked: "closeButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"], components: [{ type: OneColumnWithFilterModalTemplateComponent, selector: "symphony-one-column-with-filter-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: GridDownloadComponent, selector: "symphony-grid-download", inputs: ["model"], outputs: ["clicked"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-advertised-job-postings-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"] }]
+            args: [{ selector: 'symphony-advertised-job-postings-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-one-column-with-filter-modal-template *ngIf=\"model\">\n  <symphony-h4 sfx-modal-title>Advertised Jobs</symphony-h4>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-input-text\n    sfx-filter-area\n    [placeholder]=\"'Keyword'\"\n    [icon]=\"'si-search-new'\"\n    [isInverse]=\"false\"\n    (textChange)=\"onKeywordSearch($event)\"\n  >\n  </symphony-input-text>\n\n  <symphony-grid-download\n    sfx-grid-download\n    [model]=\"model.gridDownloadModel\"\n    (clicked)=\"onDownloadClick()\"\n  >\n  </symphony-grid-download>\n\n  <symphony-grid\n    #sfxgrid\n    sfx-modal-body-area\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n    [rowSelectionMode]=\"'multiple'\"\n    [hasNoPaddingleft]=\"true\"\n  ></symphony-grid>\n</symphony-one-column-with-filter-modal-template>\n", styles: [".sfx-modal .ag-theme-alpine{max-height:500px!important}.sfx-modal .ag-theme-alpine .ag-center-cols-clipper .ag-cell{line-height:20px;display:block}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], gridDownloadModel: [{