@symphony-talent/component-library 3.23.0 → 3.25.0

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

@@ -5,15 +5,16 @@ import { SlicePipe, CommonModule } from '@angular/common';
 import * as i1$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i1$2 from 'ag-grid-angular';
+import * as i1$2 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import * as i1$3 from 'ag-grid-angular';
 import { AgGridModule } from 'ag-grid-angular';
+import { BrowserModule } from '@angular/platform-browser';
 import { LicenseManager } from 'ag-grid-enterprise';
 import * as i4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
-import * as i1$3 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i1$4 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
@@ -397,10 +398,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
             args: [{ selector: 'symphony-grid-cell-loader', template: "<div\n  class=\"ag-custom-loading-cell sfx-loader-center\"\n>\n  <div class=\"sfx-d-inline-block sfx-wid-100\">\n    <span class=\"sfxGridContentLoader\"></span> <span class=\"sfx-pl-10 sfx-d-inline-block sfx-mt-5 pull-left\">Loading...</span></div>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.sfx-loader-center{position:absolute;top:-13px;left:48%}\n"] }]
         }] });
 
+class TooltipWrapperComponent {
+    constructor() { }
+}
+TooltipWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipHtml: "tooltipHtml" }, ngImport: i0, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], directives: [{ type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { placement: [{
+                type: Input
+            }], tooltipHtml: [{
+                type: Input
+            }] } });
+
+class IconComponent {
+    constructor() {
+        this.size = '18px';
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit('clicked');
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size", iconColor: "iconColor" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  [ngStyle]=\"{ color: iconColor }\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-icon', template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  [ngStyle]=\"{ color: iconColor }\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+                type: Input
+            }], isSecondary: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class AdvertisedJobsCostComponent {
+    constructor() { }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.params = params;
+        this.costData = params.value.replace('$', ' ');
+    }
+}
+AdvertisedJobsCostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobsCostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvertisedJobsCostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobsCostComponent, selector: "symphony-advertised-jobs-cost", ngImport: i0, template: "<div class=\"advertised-jobs-cost\">\n  {{ params.value }}\n  <div class=\"tooltip-grey sfx-d-inline-block sfx-ml-5\" *ngIf=\"costData <= 0\">\n    <symphony-tooltip-wrapper\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"'No charge: job already advertised on this job board.'\"\n    >\n      <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n    </symphony-tooltip-wrapper>\n  </div>\n</div>\n", styles: [".tooltip-grey{vertical-align:middle}.tooltip-grey .tooltip{min-width:160px}.tooltip-grey .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.tooltip-grey .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.right{left:5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ag-center-cols-clipper .ag-row{z-index:1}.ag-center-cols-clipper .ag-row .ag-cell.col-hasToolTip{padding-right:25px;overflow:visible}.ag-center-cols-clipper .ag-row .ag-cell.col-hasToolTip button.sfx-grid-btn-icon{position:absolute;right:0;width:20px;height:20px;padding:0;line-height:20px;top:29px}.ag-center-cols-clipper .ag-row.ag-row-hover{z-index:2}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: AdvertisedJobsCostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-advertised-jobs-cost', encapsulation: ViewEncapsulation.None, template: "<div class=\"advertised-jobs-cost\">\n  {{ params.value }}\n  <div class=\"tooltip-grey sfx-d-inline-block sfx-ml-5\" *ngIf=\"costData <= 0\">\n    <symphony-tooltip-wrapper\n      [placement]=\"'top'\"\n      [tooltipHtml]=\"'No charge: job already advertised on this job board.'\"\n    >\n      <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n    </symphony-tooltip-wrapper>\n  </div>\n</div>\n", styles: [".tooltip-grey{vertical-align:middle}.tooltip-grey .tooltip{min-width:160px}.tooltip-grey .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.tooltip-grey .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.right{left:5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ag-center-cols-clipper .ag-row{z-index:1}.ag-center-cols-clipper .ag-row .ag-cell.col-hasToolTip{padding-right:25px;overflow:visible}.ag-center-cols-clipper .ag-row .ag-cell.col-hasToolTip button.sfx-grid-btn-icon{position:absolute;right:0;width:20px;height:20px;padding:0;line-height:20px;top:29px}.ag-center-cols-clipper .ag-row.ag-row-hover{z-index:2}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
 class GridComponent {
     constructor() {
         this.pageSize = 20;
         this.suppressRowClickSelection = false;
+        this.rowSelectionMode = 'single';
         this.rowHeightPage = 80;
         this.gridHeight = 100;
         this.cacheBlockSize = this.pageSize;
@@ -422,6 +481,7 @@ class GridComponent {
             gridToggle: GridToggleCellRendererComponent,
             moreActions: EventSettingsMoreOptionsComponent,
             loadingCellRenderer: GridLoadingCellComponent,
+            advertisedJobsCost: AdvertisedJobsCostComponent
         };
     }
     onGridReady(gridReadyEvent) {
@@ -430,10 +490,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" }, 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  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [""], components: [{ type: i1$2.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"] }] });
+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.cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px}.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid', 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  [enableBrowserTooltips]=\"true\"\n  [suppressContextMenu]=\"true\"\n  (gridReady)=\"onGridReady($event)\"\n>\n</ag-grid-angular>\n", styles: [""] }]
+            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.cell-wrap-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:60px}.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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnDefs: [{
                 type: Input
             }], defaultColDef: [{
@@ -448,6 +508,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], suppressRowClickSelection: [{
                 type: Input
+            }], rowSelectionMode: [{
+                type: Input
             }] } });
 
 class ContactActivityScoreModule {
@@ -532,6 +594,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class IconModule {
+}
+IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
+IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IconComponent],
+                    imports: [CommonModule],
+                    exports: [IconComponent],
+                }]
+        }] });
+
+class TooltipWrapperModule {
+}
+TooltipWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TooltipWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, declarations: [TooltipWrapperComponent], imports: [CommonModule, i1$2.TooltipModule], exports: [TooltipWrapperComponent] });
+TooltipWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, imports: [[CommonModule, TooltipModule.forRoot()]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TooltipWrapperComponent],
+                    imports: [CommonModule, TooltipModule.forRoot()],
+                    exports: [TooltipWrapperComponent],
+                }]
+        }] });
+
+class AdvertisedJobsCostModule {
+}
+AdvertisedJobsCostModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobsCostModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisedJobsCostModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobsCostModule, declarations: [AdvertisedJobsCostComponent], imports: [CommonModule, BrowserModule, IconModule, TooltipWrapperModule], exports: [AdvertisedJobsCostComponent] });
+AdvertisedJobsCostModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobsCostModule, imports: [[CommonModule, BrowserModule, IconModule, TooltipWrapperModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobsCostModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisedJobsCostComponent],
+                    imports: [CommonModule, BrowserModule, IconModule, TooltipWrapperModule],
+                    exports: [AdvertisedJobsCostComponent]
+                }]
+        }] });
+
 class FrameworkModule {
 }
 FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -539,12 +643,14 @@ FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         RelevanceScoreModule,
         GridToggleCellRendererModule,
         GridCellLoaderModule,
-        EventSettingsMoreOptionsModule] });
+        EventSettingsMoreOptionsModule,
+        AdvertisedJobsCostModule] });
 FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, imports: [[], ContactActivityScoreModule,
         RelevanceScoreModule,
         GridToggleCellRendererModule,
         GridCellLoaderModule,
-        EventSettingsMoreOptionsModule] });
+        EventSettingsMoreOptionsModule,
+        AdvertisedJobsCostModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, decorators: [{
             type: NgModule,
             args: [{
@@ -556,7 +662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         GridToggleCellRendererModule,
                         GridCellLoaderModule,
                         EventSettingsMoreOptionsModule,
-                    ],
+                        AdvertisedJobsCostModule
+                    ]
                 }]
         }] });
 
@@ -564,11 +671,12 @@ LicenseManager.setLicenseKey('CompanyName=Symphony Talent, LLC,LicensedApplicati
 class GridModule {
 }
 GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, declarations: [GridComponent], imports: [CommonModule, i1$2.AgGridModule, FrameworkModule], exports: [GridComponent] });
+GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, declarations: [GridComponent], imports: [CommonModule, i1$3.AgGridModule, FrameworkModule, i1$2.TooltipModule], exports: [GridComponent] });
 GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, imports: [[
             CommonModule,
             AgGridModule.withComponents([]),
-            FrameworkModule
+            FrameworkModule,
+            TooltipModule.forRoot()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -577,7 +685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                     imports: [
                         CommonModule,
                         AgGridModule.withComponents([]),
-                        FrameworkModule
+                        FrameworkModule,
+                        TooltipModule.forRoot()
                     ],
                     exports: [GridComponent]
                 }]
@@ -757,46 +866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class IconComponent {
-    constructor() {
-        this.size = '18px';
-        this.clicked = new EventEmitter();
-    }
-    onClick() {
-        this.clicked.emit('clicked');
-    }
-}
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size", iconColor: "iconColor" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  [ngStyle]=\"{ color: iconColor }\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-icon', template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n  [style.fontSize]=\"size\"\n  [ngStyle]=\"{ color: iconColor }\"\n  (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{cursor:pointer;font-size:18px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
-                type: Input
-            }], isSecondary: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-class IconModule {
-}
-IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
-IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [IconComponent],
-                    imports: [CommonModule],
-                    exports: [IconComponent],
-                }]
-        }] });
-
 var Icons;
 (function (Icons) {
     Icons["ACCESS"] = "si-access";
@@ -900,12 +969,14 @@ class IconWrapperComponent {
     }
 }
 IconWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse", hasHoverWithoutBorder: "hasHoverWithoutBorder" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}\n"] }]
+            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isInverse: [{
                 type: Input
+            }], hasHoverWithoutBorder: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -1140,7 +1211,7 @@ class PillComponent {
     }
 }
 PillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-pill', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"] }]
@@ -1159,7 +1230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class PillModule {
 }
 PillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, declarations: [PillComponent], imports: [CommonModule, i1$3.TooltipModule], exports: [PillComponent] });
+PillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, declarations: [PillComponent], imports: [CommonModule, i1$2.TooltipModule], exports: [PillComponent] });
 PillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillModule, imports: [[
             CommonModule, TooltipModule.forRoot()
         ]] });
@@ -1357,31 +1428,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class TooltipWrapperComponent {
-    constructor() { }
+class NavigationLinkComponent {
+    constructor() {
+        this.linkClick = new EventEmitter();
+    }
+    onClick() {
+        this.linkClick.emit(this.navigationLinkModel);
+    }
 }
-TooltipWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipHtml: "tooltipHtml" }, ngImport: i0, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], directives: [{ type: i1$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+NavigationLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NavigationLinkComponent, selector: "symphony-navigation-link", inputs: { navigationLinkModel: "navigationLinkModel", isMenuOpen: "isMenuOpen" }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<symphony-tooltip-wrapper\n  *ngIf=\"!isMenuOpen\"\n  [placement]=\"'right'\"\n  [tooltipHtml]=\"navigationLinkModel.linkText\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <div class=\"nav-link\">\n    <a\n      [href]=\"navigationLinkModel.href\"\n      [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n      (click)=\"onClick()\"\n      ><symphony-icon\n        [icon]=\"navigationLinkModel.iconClass\"\n        [size]=\"'24px'\"\n      ></symphony-icon>\n      <span>{{ navigationLinkModel.linkText }}</span>\n    </a>\n  </div>\n</symphony-tooltip-wrapper>\n\n<div\n  class=\"nav-link\"\n  *ngIf=\"isMenuOpen\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <a\n    [href]=\"navigationLinkModel.href\"\n    [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n    (click)=\"onClick()\"\n    ><symphony-icon\n      [icon]=\"navigationLinkModel.iconClass\"\n      [size]=\"'24px'\"\n    ></symphony-icon>\n    <span>{{ navigationLinkModel.linkText }}</span>\n  </a>\n</div>\n", styles: [".nav-link a{color:#000;display:block;text-align:left;text-decoration:none;padding:16px 10px 16px 40px;border-left:5px solid white;transition:all .3s linear 0s}.nav-link a i{display:inline-block;vertical-align:middle}.nav-link a span{margin-left:30px;font-size:12px;line-height:1;text-transform:uppercase;vertical-align:middle;font-weight:600;display:none;opacity:0;transition:opacity 1s;font-family:neuzeit_groteskbold,sans-serif}.nav-link a.sfx-menu-active{color:#eb0d8b;border-left:5px solid #eb0d8b}symphony-icon{display:inline-block;line-height:.6;vertical-align:middle}.sfx-menu-open.nav-link{width:280px}.sfx-menu-open a span{display:inline-block;animation:fade-in .5s forwards}.sfx-menu-open a:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}.sfx-menu-open a.sfx-menu-active{background:#eb0d8b;color:#fff}@keyframes fade-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<ng-template #popTemplate\n  ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n  class=\"sfx-d-inline-block\"\n  [tooltip]=\"popTemplate\"\n  placement=\"{{ placement }}\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  [adaptivePosition]=\"false\"\n>\n  <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px #0003;font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { placement: [{
+            args: [{ selector: 'symphony-navigation-link', template: "<symphony-tooltip-wrapper\n  *ngIf=\"!isMenuOpen\"\n  [placement]=\"'right'\"\n  [tooltipHtml]=\"navigationLinkModel.linkText\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <div class=\"nav-link\">\n    <a\n      [href]=\"navigationLinkModel.href\"\n      [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n      (click)=\"onClick()\"\n      ><symphony-icon\n        [icon]=\"navigationLinkModel.iconClass\"\n        [size]=\"'24px'\"\n      ></symphony-icon>\n      <span>{{ navigationLinkModel.linkText }}</span>\n    </a>\n  </div>\n</symphony-tooltip-wrapper>\n\n<div\n  class=\"nav-link\"\n  *ngIf=\"isMenuOpen\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <a\n    [href]=\"navigationLinkModel.href\"\n    [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n    (click)=\"onClick()\"\n    ><symphony-icon\n      [icon]=\"navigationLinkModel.iconClass\"\n      [size]=\"'24px'\"\n    ></symphony-icon>\n    <span>{{ navigationLinkModel.linkText }}</span>\n  </a>\n</div>\n", styles: [".nav-link a{color:#000;display:block;text-align:left;text-decoration:none;padding:16px 10px 16px 40px;border-left:5px solid white;transition:all .3s linear 0s}.nav-link a i{display:inline-block;vertical-align:middle}.nav-link a span{margin-left:30px;font-size:12px;line-height:1;text-transform:uppercase;vertical-align:middle;font-weight:600;display:none;opacity:0;transition:opacity 1s;font-family:neuzeit_groteskbold,sans-serif}.nav-link a.sfx-menu-active{color:#eb0d8b;border-left:5px solid #eb0d8b}symphony-icon{display:inline-block;line-height:.6;vertical-align:middle}.sfx-menu-open.nav-link{width:280px}.sfx-menu-open a span{display:inline-block;animation:fade-in .5s forwards}.sfx-menu-open a:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}.sfx-menu-open a.sfx-menu-active{background:#eb0d8b;color:#fff}@keyframes fade-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { navigationLinkModel: [{
                 type: Input
-            }], tooltipHtml: [{
+            }], isMenuOpen: [{
                 type: Input
+            }], linkClick: [{
+                type: Output
             }] } });
 
-class TooltipWrapperModule {
+class NavigationLinkModule {
 }
-TooltipWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TooltipWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, declarations: [TooltipWrapperComponent], imports: [CommonModule, i1$3.TooltipModule], exports: [TooltipWrapperComponent] });
-TooltipWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, imports: [[CommonModule, TooltipModule.forRoot()]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperModule, decorators: [{
+NavigationLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, declarations: [NavigationLinkComponent], imports: [CommonModule, TooltipWrapperModule, IconModule], exports: [NavigationLinkComponent] });
+NavigationLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, imports: [[CommonModule, TooltipWrapperModule, IconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TooltipWrapperComponent],
-                    imports: [CommonModule, TooltipModule.forRoot()],
-                    exports: [TooltipWrapperComponent],
+                    declarations: [NavigationLinkComponent],
+                    imports: [CommonModule, TooltipWrapperModule, IconModule],
+                    exports: [NavigationLinkComponent],
                 }]
         }] });
 
@@ -1690,10 +1768,10 @@ class FileUploadStatusComponent {
     }
 }
 FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
+            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { fileUploadStatusModel: [{
                 type: Input
             }], uploadStatus: [{
@@ -1791,6 +1869,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class IconWithTooltipComponent {
+    constructor() { }
+}
+IconWithTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWithTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconWithTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWithTooltipComponent, selector: "symphony-icon-with-tooltip", inputs: { model: "model" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block tooltip-grey\">\n  <symphony-tooltip-wrapper\n    [placement]=\"model.placement\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n  >\n    <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n  </symphony-tooltip-wrapper>\n</div>\n", styles: [".tooltip-grey .tooltip{min-width:160px}.tooltip-grey .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.tooltip-grey .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.right{left:5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: IconWithTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-icon-with-tooltip', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block tooltip-grey\">\n  <symphony-tooltip-wrapper\n    [placement]=\"model.placement\"\n    [tooltipHtml]=\"model.tooltipHtml\"\n  >\n    <symphony-icon [icon]=\"model.icon\"></symphony-icon>\n  </symphony-tooltip-wrapper>\n</div>\n", styles: [".tooltip-grey .tooltip{min-width:160px}.tooltip-grey .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.tooltip-grey .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.right{left:5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.tooltip-grey .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.tooltip-grey .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class IconWithTooltipModule {
+}
+IconWithTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWithTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IconWithTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWithTooltipModule, declarations: [IconWithTooltipComponent], imports: [CommonModule, IconModule, TooltipWrapperModule], exports: [IconWithTooltipComponent] });
+IconWithTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWithTooltipModule, imports: [[CommonModule, IconModule, TooltipWrapperModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWithTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IconWithTooltipComponent],
+                    imports: [CommonModule, IconModule, TooltipWrapperModule],
+                    exports: [IconWithTooltipComponent]
+                }]
+        }] });
+
+class FileUploadV2Component extends FileUploadComponent {
+    constructor() {
+        super();
+    }
+}
+FileUploadV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadV2Component, selector: "symphony-file-upload-v2", usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input\n      type=\"file\"\n      id=\"Upload\"\n      name=\"Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      class=\"hide\"\n    />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Uploading...'\"\n    class=\"hidefiledetail\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n\n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'File succesfully uploaded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n  <!-- File Upload Error -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. File exceeds 2MB'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n\n  <!-- File Upload Incomplete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadIncomplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. Please try again'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Incomplete -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:496px;max-width:496px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.hidefiledetail .sfx-position-relative{display:none}.hidefiledetail .sfx-file-uploaded{margin-top:15px}.hidefiledetail .progress{height:10px}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], 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: FileUploadV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload-v2', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input\n      type=\"file\"\n      id=\"Upload\"\n      name=\"Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      class=\"hide\"\n    />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Uploading...'\"\n    class=\"hidefiledetail\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n\n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'File succesfully uploaded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n  <!-- File Upload Error -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. File exceeds 2MB'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n\n  <!-- File Upload Incomplete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadIncomplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. Please try again'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Incomplete -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:496px;max-width:496px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.hidefiledetail .sfx-position-relative{display:none}.hidefiledetail .sfx-file-uploaded{margin-top:15px}.hidefiledetail .progress{height:10px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class FileUploadV2Module {
+}
+FileUploadV2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadV2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, declarations: [FileUploadV2Component], imports: [CommonModule,
+        H3Module,
+        IconModule,
+        ParagraphModule,
+        FileUploadStatusModule], exports: [FileUploadV2Component] });
+FileUploadV2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, imports: [[
+            CommonModule,
+            H3Module,
+            IconModule,
+            ParagraphModule,
+            FileUploadStatusModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadV2Component],
+                    imports: [
+                        CommonModule,
+                        H3Module,
+                        IconModule,
+                        ParagraphModule,
+                        FileUploadStatusModule,
+                    ],
+                    exports: [FileUploadV2Component],
+                }]
+        }] });
+
 class DocumentManagementItemComponent {
     constructor() {
         this.previewClicked = new EventEmitter();
@@ -1804,10 +1950,10 @@ class DocumentManagementItemComponent {
     }
 }
 DocumentManagementItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          class=\"sfx-txt-gray\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon\n      class=\"sfx-d-inline-block pull-left sfx-ml-10 sfx-mt-12\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      [icon]=\"'si-preview'\"\n      (clicked)=\"onPreviewClicked()\"\n    ></symphony-icon>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item .dm-action .sfx-mt-12{margin-top:12px}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n    (click)=\"onPreviewClicked()\"\n    *ngIf=\"documentManagementItemModel.hasPreview\"\n    class=\"sfx-d-inline-block pull-left\"\n    [hasHoverWithoutBorder]=\"true\"\n  >\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n  </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], 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: DocumentManagementItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          class=\"sfx-txt-gray\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon\n      class=\"sfx-d-inline-block pull-left sfx-ml-10 sfx-mt-12\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      [icon]=\"'si-preview'\"\n      (clicked)=\"onPreviewClicked()\"\n    ></symphony-icon>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item .dm-action .sfx-mt-12{margin-top:12px}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
+            args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n    (click)=\"onPreviewClicked()\"\n    *ngIf=\"documentManagementItemModel.hasPreview\"\n    class=\"sfx-d-inline-block pull-left\"\n    [hasHoverWithoutBorder]=\"true\"\n  >\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n  </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { documentManagementItemModel: [{
                 type: Input
             }], previewClicked: [{
@@ -1823,13 +1969,15 @@ DocumentManagementItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         ContextualMenuModule,
         H5Module,
         IconModule,
-        ParagraphModule], exports: [DocumentManagementItemComponent] });
+        ParagraphModule,
+        IconWrapperModule], exports: [DocumentManagementItemComponent] });
 DocumentManagementItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, imports: [[
             CommonModule,
             ContextualMenuModule,
             H5Module,
             IconModule,
             ParagraphModule,
+            IconWrapperModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, decorators: [{
             type: NgModule,
@@ -1841,6 +1989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         H5Module,
                         IconModule,
                         ParagraphModule,
+                        IconWrapperModule
                     ],
                     exports: [DocumentManagementItemComponent],
                 }]
@@ -1935,7 +2084,7 @@ class IconSwatchComponent {
     }
 }
 IconSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-icon-swatch', template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"] }]
@@ -2041,7 +2190,7 @@ class ButtonWithIconComponent {
     }
 }
 ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton", showPopover: "showPopover" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: ButtonWithIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"] }]
@@ -2051,6 +2200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], showActionButton: [{
                 type: Input
+            }], showPopover: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -2087,7 +2238,11 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FileUploadStatusModule,
         FeedbackCardModule,
         ButtonWithIconModule,
-        DocumentManagementItemModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule] });
+        IconWithTooltipModule,
+        DocumentManagementItemModule], exports: [PillsModule,
+        BreadcrumbModule,
+        FeedbackCardModule,
+        DocumentManagementItemModule] });
 MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, imports: [[
             CommonModule,
             AvatarModule,
@@ -2104,8 +2259,12 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             FileUploadStatusModule,
             FeedbackCardModule,
             ButtonWithIconModule,
+            IconWithTooltipModule,
             DocumentManagementItemModule
-        ], PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule] });
+        ], PillsModule,
+        BreadcrumbModule,
+        FeedbackCardModule,
+        DocumentManagementItemModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2126,9 +2285,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FileUploadStatusModule,
                         FeedbackCardModule,
                         ButtonWithIconModule,
+                        IconWithTooltipModule,
                         DocumentManagementItemModule
                     ],
-                    exports: [PillsModule, BreadcrumbModule, FeedbackCardModule, DocumentManagementItemModule]
+                    exports: [
+                        PillsModule,
+                        BreadcrumbModule,
+                        FeedbackCardModule,
+                        DocumentManagementItemModule
+                    ]
                 }]
         }] });
 
@@ -2277,10 +2442,10 @@ class UploadResumeModalComponent {
     }
     ngOnInit() {
         this.model = {
-            title: 'Upload File',
+            title: 'Add document',
             subTitle: 'Attach a .rtf, .docx, .txt or .pdf file upto 2MB',
             btnPrimary: 'Save',
-            btnSecondary: 'Cancel',
+            btnSecondary: 'Back',
             documentTypeDropdown: {
                 selectedName: 'Cover letter',
                 dropdownList: [
@@ -2337,10 +2502,10 @@ class UploadResumeModalComponent {
     }
 }
 UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeClick", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
+            args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { uploadResumeModel: [{
                 type: Input
             }], isLoading: [{
@@ -2362,13 +2527,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class UploadResumeModalModule {
 }
 UploadResumeModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule], exports: [UploadResumeModalComponent] });
-UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule]] });
+UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule,
+        H4Module,
+        ParagraphModule,
+        IconModule,
+        ButtonModule,
+        InputDropdownModule,
+        FileUploadV2Module,
+        SfxLoaderModule,
+        InputCheckboxModule], exports: [UploadResumeModalComponent] });
+UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[
+            CommonModule,
+            H4Module,
+            ParagraphModule,
+            IconModule,
+            ButtonModule,
+            InputDropdownModule,
+            FileUploadV2Module,
+            SfxLoaderModule,
+            InputCheckboxModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UploadResumeModalComponent],
-                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule],
+                    imports: [
+                        CommonModule,
+                        H4Module,
+                        ParagraphModule,
+                        IconModule,
+                        ButtonModule,
+                        InputDropdownModule,
+                        FileUploadV2Module,
+                        SfxLoaderModule,
+                        InputCheckboxModule,
+                    ],
                     exports: [UploadResumeModalComponent],
                 }]
         }] });
@@ -2383,7 +2576,7 @@ class ActionBarComponent {
     }
 }
 ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"] }]
@@ -2393,13 +2586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Output
             }] } });
 
-class GridControlsJobListComponent {
+class GridControlsComponent {
     constructor() {
         this.Clicked = new EventEmitter();
         this.menuClicked = new EventEmitter();
         this.gridMoreActions = {
-            hasBorder: false,
-            items: [],
+            hasBorder: true,
+            items: []
         };
     }
     onClick() {
@@ -2412,11 +2605,11 @@ class GridControlsJobListComponent {
         this.gridMoreActions.items = this.model.gridActions;
     }
 }
-GridControlsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridControlsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: { model: "model" }, outputs: { Clicked: "Clicked", menuClicked: "menuClicked" }, ngImport: i0, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], 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: GridControlsJobListComponent, decorators: [{
+GridControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridControlsComponent, selector: "symphony-grid-controls", inputs: { model: "model" }, outputs: { Clicked: "Clicked", menuClicked: "menuClicked" }, ngImport: i0, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], 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: GridControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid-controls-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
+            args: [{ selector: 'symphony-grid-controls', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], Clicked: [{
@@ -2425,7 +2618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Output
             }] } });
 
-class GridActionsJobListComponent {
+class GridActionsComponent {
     constructor() {
         this.buttonClicked = new EventEmitter();
     }
@@ -2433,11 +2626,11 @@ class GridActionsJobListComponent {
         this.buttonClicked.emit(text);
     }
 }
-GridActionsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, decorators: [{
+GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsComponent, selector: "symphony-grid-actions", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover"], outputs: ["clicked"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: GridActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid-actions-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'symphony-grid-actions', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{
@@ -2451,21 +2644,21 @@ class ActionBarJobListComponent {
         this.gridControlClick = new EventEmitter();
         this.gridActionClick = new EventEmitter();
     }
-    onGridControlClick(gridControlsJobListModel) {
-        this.gridControlClick.emit(gridControlsJobListModel);
+    onGridControlClick(gridControlsModel) {
+        this.gridControlClick.emit(gridControlsModel);
     }
-    onGridActionClick(gridActionJobListModel) {
-        this.gridActionClick.emit(gridActionJobListModel);
+    onGridActionClick(gridActionModel) {
+        this.gridActionClick.emit(gridActionModel);
     }
 }
 ActionBarJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionBarJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarJobListComponent, selector: "symphony-action-bar-job-list", inputs: { gridActionJobListModel: "gridActionJobListModel", gridControlsJobListModel: "gridControlsJobListModel" }, outputs: { gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, ngImport: i0, template: "<symphony-action-bar>\n  <symphony-grid-controls-job-list (Clicked)=\"onGridControlClick($event)\" (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsJobListModel\" \n    grid-controls\n  ></symphony-grid-controls-job-list>\n  <symphony-grid-actions-job-list\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionJobListModel\"\n    grid-actions\n  ></symphony-grid-actions-job-list>\n</symphony-action-bar>\n", styles: [""], components: [{ type: ActionBarComponent, selector: "symphony-action-bar", inputs: ["isToggled"], outputs: ["toggleClick"] }, { type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: ["model"], outputs: ["Clicked", "menuClicked"] }, { type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: ["model", "isInverse"], outputs: ["buttonClicked"] }] });
+ActionBarJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarJobListComponent, selector: "symphony-action-bar-job-list", inputs: { gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, ngImport: i0, template: "<symphony-action-bar>\n  <symphony-grid-controls\n    (Clicked)=\"onGridControlClick($event)\"\n    (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsModel\"\n    grid-controls\n  ></symphony-grid-controls>\n  <symphony-grid-actions\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionModel\"\n    grid-actions\n  ></symphony-grid-actions>\n</symphony-action-bar>\n", styles: [""], components: [{ type: ActionBarComponent, selector: "symphony-action-bar", inputs: ["isToggled"], outputs: ["toggleClick"] }, { type: GridControlsComponent, selector: "symphony-grid-controls", inputs: ["model"], outputs: ["Clicked", "menuClicked"] }, { type: GridActionsComponent, selector: "symphony-grid-actions", inputs: ["model", "isInverse"], outputs: ["buttonClicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-action-bar-job-list', template: "<symphony-action-bar>\n  <symphony-grid-controls-job-list (Clicked)=\"onGridControlClick($event)\" (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsJobListModel\" \n    grid-controls\n  ></symphony-grid-controls-job-list>\n  <symphony-grid-actions-job-list\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionJobListModel\"\n    grid-actions\n  ></symphony-grid-actions-job-list>\n</symphony-action-bar>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { gridActionJobListModel: [{
+            args: [{ selector: 'symphony-action-bar-job-list', template: "<symphony-action-bar>\n  <symphony-grid-controls\n    (Clicked)=\"onGridControlClick($event)\"\n    (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsModel\"\n    grid-controls\n  ></symphony-grid-controls>\n  <symphony-grid-actions\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionModel\"\n    grid-actions\n  ></symphony-grid-actions>\n</symphony-action-bar>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { gridActionModel: [{
                 type: Input
-            }], gridControlsJobListModel: [{
+            }], gridControlsModel: [{
                 type: Input
             }], gridControlClick: [{
                 type: Output
@@ -2473,17 +2666,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Output
             }] } });
 
-class GridActionsJobListModule {
+class GridActionsModule {
 }
-GridActionsJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridActionsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, declarations: [GridActionsJobListComponent], imports: [CommonModule, ButtonWithIconModule], exports: [GridActionsJobListComponent] });
-GridActionsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, imports: [[CommonModule, ButtonWithIconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, decorators: [{
+GridActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsModule, declarations: [GridActionsComponent], imports: [CommonModule, ButtonWithIconModule, TooltipWrapperModule], exports: [GridActionsComponent] });
+GridActionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsModule, imports: [[CommonModule, ButtonWithIconModule, TooltipWrapperModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GridActionsJobListComponent],
-                    imports: [CommonModule, ButtonWithIconModule],
-                    exports: [GridActionsJobListComponent],
+                    declarations: [GridActionsComponent],
+                    imports: [CommonModule, ButtonWithIconModule, TooltipWrapperModule],
+                    exports: [GridActionsComponent]
                 }]
         }] });
 
@@ -2501,33 +2694,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class GridControlsJobListModule {
+class GridControlsModule {
 }
-GridControlsJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridControlsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, declarations: [GridControlsJobListComponent], imports: [CommonModule,
+GridControlsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridControlsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsModule, declarations: [GridControlsComponent], imports: [CommonModule,
         IconModule,
         IconWrapperModule,
         ContextualMenuModule,
-        TooltipWrapperModule], exports: [GridControlsJobListComponent] });
-GridControlsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, imports: [[
+        TooltipWrapperModule], exports: [GridControlsComponent] });
+GridControlsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsModule, imports: [[
             CommonModule,
             IconModule,
             IconWrapperModule,
             ContextualMenuModule,
-            TooltipWrapperModule,
+            TooltipWrapperModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GridControlsJobListComponent],
+                    declarations: [GridControlsComponent],
                     imports: [
                         CommonModule,
                         IconModule,
                         IconWrapperModule,
                         ContextualMenuModule,
-                        TooltipWrapperModule,
+                        TooltipWrapperModule
                     ],
-                    exports: [GridControlsJobListComponent],
+                    exports: [GridControlsComponent]
                 }]
         }] });
 
@@ -2535,14 +2728,14 @@ class ActionBarJobListModule {
 }
 ActionBarJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ActionBarJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, declarations: [ActionBarJobListComponent], imports: [CommonModule,
-        GridActionsJobListModule,
+        GridActionsModule,
         ActionBarModule,
-        GridControlsJobListModule], exports: [ActionBarJobListComponent] });
+        GridControlsModule], exports: [ActionBarJobListComponent] });
 ActionBarJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, imports: [[
             CommonModule,
-            GridActionsJobListModule,
+            GridActionsModule,
             ActionBarModule,
-            GridControlsJobListModule,
+            GridControlsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarJobListModule, decorators: [{
             type: NgModule,
@@ -2550,11 +2743,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                     declarations: [ActionBarJobListComponent],
                     imports: [
                         CommonModule,
-                        GridActionsJobListModule,
+                        GridActionsModule,
                         ActionBarModule,
-                        GridControlsJobListModule,
+                        GridControlsModule
+                    ],
+                    exports: [ActionBarJobListComponent]
+                }]
+        }] });
+
+class GridDownloadComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onDownloadClick() {
+        this.clicked.emit();
+    }
+}
+GridDownloadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridDownloadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridDownloadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridDownloadComponent, selector: "symphony-grid-download", inputs: { model: "model" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30\">\n  <div class=\"sfx-actions pull-right\">\n    <div\n      class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n      *ngIf=\"model.gridRowCount\"\n    >\n      <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n    </div>\n\n    <div class=\"sfx-d-inline-block pull-left\">\n      <symphony-tooltip-wrapper\n        [placement]=\"'bottom'\"\n        [tooltipHtml]=\"'Download Advertise Jobs'\"\n      >\n        <symphony-icon-wrapper (clicked)=\"onDownloadClick()\">\n          <symphony-icon [icon]=\"'si-download'\"></symphony-icon\n        ></symphony-icon-wrapper>\n      </symphony-tooltip-wrapper>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: GridDownloadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-grid-download', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-pb-30\">\n  <div class=\"sfx-actions pull-right\">\n    <div\n      class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n      *ngIf=\"model.gridRowCount\"\n    >\n      <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n    </div>\n\n    <div class=\"sfx-d-inline-block pull-left\">\n      <symphony-tooltip-wrapper\n        [placement]=\"'bottom'\"\n        [tooltipHtml]=\"'Download Advertise Jobs'\"\n      >\n        <symphony-icon-wrapper (clicked)=\"onDownloadClick()\">\n          <symphony-icon [icon]=\"'si-download'\"></symphony-icon\n        ></symphony-icon-wrapper>\n      </symphony-tooltip-wrapper>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class GridDownloadModule {
+}
+GridDownloadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridDownloadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridDownloadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridDownloadModule, declarations: [GridDownloadComponent], imports: [CommonModule,
+        IconModule,
+        IconWrapperModule,
+        ContextualMenuModule,
+        TooltipWrapperModule], exports: [GridDownloadComponent] });
+GridDownloadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridDownloadModule, imports: [[
+            CommonModule,
+            IconModule,
+            IconWrapperModule,
+            ContextualMenuModule,
+            TooltipWrapperModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridDownloadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridDownloadComponent],
+                    imports: [
+                        CommonModule,
+                        IconModule,
+                        IconWrapperModule,
+                        ContextualMenuModule,
+                        TooltipWrapperModule
                     ],
-                    exports: [ActionBarJobListComponent],
+                    exports: [GridDownloadComponent]
                 }]
         }] });
 
@@ -2608,22 +2850,24 @@ class DocumentManagementListComponent {
     ngOnInit() {
         this.isLoading = false;
     }
-    onMoreClick(documentManagementItemModel) {
-        this.moreOptionClick.emit(documentManagementItemModel);
+    onMoreClick(optionClickEvent, documentManagementItemModel) {
+        this.moreOptionClick.emit({ optionClicked: optionClickEvent, item: documentManagementItemModel });
     }
-    onPreviewClick(documentManagementItemModel) {
-        this.previewClick.emit(documentManagementItemModel);
+    onPreviewClick(optionClickEvent, documentManagementItemModel) {
+        this.previewClick.emit({ optionClicked: optionClickEvent, item: documentManagementItemModel });
     }
     onUploadClick() {
         this.uploadClick.emit();
     }
 }
 DocumentManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { isLoading: "isLoading", documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { documentManagementList: [{
+            args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isLoading: [{
+                type: Input
+            }], documentManagementList: [{
                 type: Input
             }], moreOptionClick: [{
                 type: Output
@@ -2647,6 +2891,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class SidebarNavigationComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.linkClick = new EventEmitter();
+        this.isMenuOpen = false;
+    }
+    onLinkClick(activeLink) {
+        this.linkClick.emit(activeLink.linkText);
+    }
+    onMenuClick() {
+        if (!this.isMenuOpen) {
+            this.isMenuOpen = true;
+        }
+        else {
+            this.isMenuOpen = false;
+        }
+    }
+}
+SidebarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SidebarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SidebarNavigationComponent, selector: "symphony-sidebar-navigation", inputs: { navLinks: "navLinks", isMenuOpen: "isMenuOpen" }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<nav\n  class=\"sfx-sidebar-parent sfx-bg-white\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n  role=\"navigation\"\n>\n  <div class=\"menu-collapse\" (click)=\"onMenuClick()\">\n    <div class=\"menu-btn\" *ngIf=\"!isMenuOpen\">\n      <symphony-tooltip-wrapper [placement]=\"'right'\" [tooltipHtml]=\"'Menu'\">\n        <symphony-icon [icon]=\"'si-menu-all'\" [size]=\"'22px'\"></symphony-icon>\n      </symphony-tooltip-wrapper>\n    </div>\n\n    <div class=\"back-btn\" *ngIf=\"isMenuOpen\">\n      <symphony-icon\n        *ngIf=\"isMenuOpen\"\n        [icon]=\"'si-menu-return'\"\n        [size]=\"'22px'\"\n      ></symphony-icon>\n      <span class=\"back-button-text\">Back</span>\n    </div>\n  </div>\n  <div class=\"nav-link-list\">\n    <symphony-navigation-link\n      *ngFor=\"let navLink of navLinks; index as i\"\n      [navigationLinkModel]=\"navLink\"\n      [isMenuOpen]=\"isMenuOpen\"\n      (linkClick)=\"onLinkClick($event)\"\n    ></symphony-navigation-link>\n  </div>\n</nav>\n", styles: [".sfx-sidebar-parent{z-index:99999999;top:0;left:0;width:110px;height:100%;position:fixed;transition:width .5s;z-index:9;padding-top:.625rem}.sfx-sidebar-parent .menu-collapse{cursor:pointer}.sfx-sidebar-parent .back-btn{display:flex}.sfx-sidebar-parent .back-button-text{padding-top:20px;margin-left:20px;font-size:12px;text-transform:uppercase;vertical-align:middle;font-weight:600;font-family:neuzeit_groteskbold,sans-serif;animation:fade-in .5s forwards}.sfx-sidebar-parent .nav-link-list{overflow:hidden}.sfx-sidebar-parent .nav-link-list symphony-navigation-link{display:block}.sfx-sidebar-parent symphony-icon{display:inline-block;line-height:.6;vertical-align:middle;padding:17px 10px 17px 46px}.sfx-sidebar-parent.sfx-menu-open{width:280px}.sfx-sidebar-parent.sfx-menu-open .menu-collapse:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: NavigationLinkComponent, selector: "symphony-navigation-link", inputs: ["navigationLinkModel", "isMenuOpen"], outputs: ["linkClick"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-sidebar-navigation', template: "<nav\n  class=\"sfx-sidebar-parent sfx-bg-white\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n  role=\"navigation\"\n>\n  <div class=\"menu-collapse\" (click)=\"onMenuClick()\">\n    <div class=\"menu-btn\" *ngIf=\"!isMenuOpen\">\n      <symphony-tooltip-wrapper [placement]=\"'right'\" [tooltipHtml]=\"'Menu'\">\n        <symphony-icon [icon]=\"'si-menu-all'\" [size]=\"'22px'\"></symphony-icon>\n      </symphony-tooltip-wrapper>\n    </div>\n\n    <div class=\"back-btn\" *ngIf=\"isMenuOpen\">\n      <symphony-icon\n        *ngIf=\"isMenuOpen\"\n        [icon]=\"'si-menu-return'\"\n        [size]=\"'22px'\"\n      ></symphony-icon>\n      <span class=\"back-button-text\">Back</span>\n    </div>\n  </div>\n  <div class=\"nav-link-list\">\n    <symphony-navigation-link\n      *ngFor=\"let navLink of navLinks; index as i\"\n      [navigationLinkModel]=\"navLink\"\n      [isMenuOpen]=\"isMenuOpen\"\n      (linkClick)=\"onLinkClick($event)\"\n    ></symphony-navigation-link>\n  </div>\n</nav>\n", styles: [".sfx-sidebar-parent{z-index:99999999;top:0;left:0;width:110px;height:100%;position:fixed;transition:width .5s;z-index:9;padding-top:.625rem}.sfx-sidebar-parent .menu-collapse{cursor:pointer}.sfx-sidebar-parent .back-btn{display:flex}.sfx-sidebar-parent .back-button-text{padding-top:20px;margin-left:20px;font-size:12px;text-transform:uppercase;vertical-align:middle;font-weight:600;font-family:neuzeit_groteskbold,sans-serif;animation:fade-in .5s forwards}.sfx-sidebar-parent .nav-link-list{overflow:hidden}.sfx-sidebar-parent .nav-link-list symphony-navigation-link{display:block}.sfx-sidebar-parent symphony-icon{display:inline-block;line-height:.6;vertical-align:middle;padding:17px 10px 17px 46px}.sfx-sidebar-parent.sfx-menu-open{width:280px}.sfx-sidebar-parent.sfx-menu-open .menu-collapse:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { navLinks: [{
+                type: Input
+            }], linkClick: [{
+                type: Output
+            }], isMenuOpen: [{
+                type: Input
+            }] } });
+
+class SidebarNavigationModule {
+}
+SidebarNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SidebarNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, declarations: [SidebarNavigationComponent], imports: [CommonModule,
+        NavigationLinkModule,
+        IconModule,
+        TooltipWrapperModule], exports: [SidebarNavigationComponent] });
+SidebarNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, imports: [[
+            CommonModule,
+            NavigationLinkModule,
+            IconModule,
+            TooltipWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SidebarNavigationComponent],
+                    imports: [
+                        CommonModule,
+                        NavigationLinkModule,
+                        IconModule,
+                        TooltipWrapperModule,
+                    ],
+                    exports: [SidebarNavigationComponent],
+                }]
+        }] });
+
 class NoteComponent {
     constructor() {
         this.noteModel = {
@@ -3561,7 +3863,7 @@ class FeedbackDetailHeaderComponent {
     }
 }
 FeedbackDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], 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: FeedbackDetailHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-header', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"] }]
@@ -3750,8 +4052,9 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FeedbackDetailHeaderModule,
         FeedbackDetailCandidateInfoModule,
         FeedbackLoginModalModule,
-        GridActionsJobListModule,
-        GridControlsJobListModule,
+        GridActionsModule,
+        GridControlsModule,
+        GridDownloadModule,
         ActionBarModule,
         ActionBarJobListModule,
         DocumentManagementListModule] });
@@ -3768,8 +4071,9 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             FeedbackDetailHeaderModule,
             FeedbackDetailCandidateInfoModule,
             FeedbackLoginModalModule,
-            GridActionsJobListModule,
-            GridControlsJobListModule,
+            GridActionsModule,
+            GridControlsModule,
+            GridDownloadModule,
             ActionBarModule,
             ActionBarJobListModule,
             DocumentManagementListModule
@@ -3791,8 +4095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FeedbackDetailHeaderModule,
                         FeedbackDetailCandidateInfoModule,
                         FeedbackLoginModalModule,
-                        GridActionsJobListModule,
-                        GridControlsJobListModule,
+                        GridActionsModule,
+                        GridControlsModule,
+                        GridDownloadModule,
                         ActionBarModule,
                         ActionBarJobListModule,
                         DocumentManagementListModule
@@ -3843,7 +4148,7 @@ 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"], 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"] }], 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  ></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"] }] });
 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: [""] }]
@@ -3880,7 +4185,7 @@ class PlaceholderComponent {
     constructor() { }
 }
 PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PlaceholderComponent, selector: "symphony-placeholder", inputs: { type: "type", label: "label", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", height: "height", width: "width" }, ngImport: i0, template: "<div\n  *ngIf=\"type !== 'circle'\"\n  class=\"placeholder-dashed\"\n  [ngStyle]=\"{ height: height }\"\n>\n  {{ label }}\n</div>\n\n<div\n  *ngIf=\"type === 'circle'\"\n  [tooltip]=\"tooltip\"\n  [placement]=\"tooltipPlacement\"\n  class=\"placeholder-dashed-circle\"\n  [ngStyle]=\"{ height: height, width: width }\"\n>\n  {{ label }}\n</div>\n", styles: [".placeholder-dashed{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }] });
+PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PlaceholderComponent, selector: "symphony-placeholder", inputs: { type: "type", label: "label", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", height: "height", width: "width" }, ngImport: i0, template: "<div\n  *ngIf=\"type !== 'circle'\"\n  class=\"placeholder-dashed\"\n  [ngStyle]=\"{ height: height }\"\n>\n  {{ label }}\n</div>\n\n<div\n  *ngIf=\"type === 'circle'\"\n  [tooltip]=\"tooltip\"\n  [placement]=\"tooltipPlacement\"\n  class=\"placeholder-dashed-circle\"\n  [ngStyle]=\"{ height: height, width: width }\"\n>\n  {{ label }}\n</div>\n", styles: [".placeholder-dashed{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-placeholder', template: "<div\n  *ngIf=\"type !== 'circle'\"\n  class=\"placeholder-dashed\"\n  [ngStyle]=\"{ height: height }\"\n>\n  {{ label }}\n</div>\n\n<div\n  *ngIf=\"type === 'circle'\"\n  [tooltip]=\"tooltip\"\n  [placement]=\"tooltipPlacement\"\n  class=\"placeholder-dashed-circle\"\n  [ngStyle]=\"{ height: height, width: width }\"\n>\n  {{ label }}\n</div>\n", styles: [".placeholder-dashed{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:10px}.placeholder-dashed-circle{color:#464646;background:repeating-linear-gradient(-55deg,#d0d0d0,#d0d0d0 10px,#d9d9d9 10px,#d9d9d9 20px);border:3px dashed #464646;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;border-radius:50%}.wrapper div{height:100%}\n"] }]
@@ -3901,7 +4206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class PlaceholderModule {
 }
 PlaceholderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule, i1$3.TooltipModule], exports: [PlaceholderComponent] });
+PlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule, i1$2.TooltipModule], exports: [PlaceholderComponent] });
 PlaceholderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, imports: [[CommonModule, TooltipModule.forRoot()]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PlaceholderModule, decorators: [{
             type: NgModule,
@@ -4858,6 +5163,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class AdvertisedJobPostingsListTemplateComponent {
+    constructor() { }
+}
+AdvertisedJobPostingsListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvertisedJobPostingsListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertisedJobPostingsListTemplateComponent, selector: "symphony-advertised-job-postings-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-9\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-header]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-5 sfx-mb-5\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-advertised-job-postings-list-template', template: "<div class=\"sfx\">\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-9\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-header]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-5 sfx-mb-5\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class ActionBarAdvertiseJobListComponent {
+    constructor() {
+        this.gridControlClick = new EventEmitter();
+        this.gridActionClick = new EventEmitter();
+    }
+    onGridControlClick(gridControlsModel) {
+        this.gridControlClick.emit(gridControlsModel);
+    }
+    onGridActionClick(gridActionModel) {
+        this.gridActionClick.emit(gridActionModel);
+    }
+}
+ActionBarAdvertiseJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionBarAdvertiseJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarAdvertiseJobListComponent, selector: "symphony-action-bar-advertise-job-list", inputs: { gridActionModel: "gridActionModel", gridControlsModel: "gridControlsModel" }, outputs: { gridControlClick: "gridControlClick", gridActionClick: "gridActionClick" }, ngImport: i0, template: "<symphony-action-bar>\n  <symphony-grid-controls\n    (Clicked)=\"onGridControlClick($event)\"\n    (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsModel\"\n    grid-controls\n  ></symphony-grid-controls>\n  <symphony-grid-actions\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionModel\"\n    grid-actions\n  ></symphony-grid-actions>\n</symphony-action-bar>\n", styles: [""], components: [{ type: ActionBarComponent, selector: "symphony-action-bar", inputs: ["isToggled"], outputs: ["toggleClick"] }, { type: GridControlsComponent, selector: "symphony-grid-controls", inputs: ["model"], outputs: ["Clicked", "menuClicked"] }, { type: GridActionsComponent, selector: "symphony-grid-actions", inputs: ["model", "isInverse"], outputs: ["buttonClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-action-bar-advertise-job-list', template: "<symphony-action-bar>\n  <symphony-grid-controls\n    (Clicked)=\"onGridControlClick($event)\"\n    (menuClicked)=\"onGridControlClick($event)\"\n    [model]=\"gridControlsModel\"\n    grid-controls\n  ></symphony-grid-controls>\n  <symphony-grid-actions\n    (buttonClicked)=\"onGridActionClick($event)\"\n    [model]=\"gridActionModel\"\n    grid-actions\n  ></symphony-grid-actions>\n</symphony-action-bar>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { gridActionModel: [{
+                type: Input
+            }], gridControlsModel: [{
+                type: Input
+            }], gridControlClick: [{
+                type: Output
+            }], gridActionClick: [{
+                type: Output
+            }] } });
+
+class AdvertisedJobPostingsListPageComponent {
+    constructor() {
+        this.keywordSearchChange = new EventEmitter();
+        this.filterChange = new EventEmitter();
+        this.gridControlClick = new EventEmitter();
+        this.gridActionClick = new EventEmitter();
+    }
+    onKeywordSearch(keyword) {
+        this.keywordSearchChange.emit(keyword);
+    }
+    onGridControlClick(gridControlsModel) {
+        this.gridControlClick.emit(gridControlsModel);
+    }
+    onGridActionClick(gridActionModel) {
+        this.gridActionClick.emit(gridActionModel);
+    }
+    onFilterChange(selectedModel) {
+        this.filterChange.emit(selectedModel.value);
+    }
+    refreshGrid() {
+        this.grid.updateGridFilter();
+    }
+}
+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"] }] });
+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: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], gridActionModel: [{
+                type: Input
+            }], gridControlsModel: [{
+                type: Input
+            }], keywordSearchChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], gridControlClick: [{
+                type: Output
+            }], gridActionClick: [{
+                type: Output
+            }], grid: [{
+                type: ViewChild,
+                args: ['sfxgrid']
+            }] } });
+
+class AdvertisedJobPostingsListModule {
+}
+AdvertisedJobPostingsListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisedJobPostingsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListModule, declarations: [AdvertisedJobPostingsListTemplateComponent], imports: [CommonModule], exports: [AdvertisedJobPostingsListTemplateComponent] });
+AdvertisedJobPostingsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisedJobPostingsListTemplateComponent],
+                    imports: [CommonModule],
+                    exports: [AdvertisedJobPostingsListTemplateComponent]
+                }]
+        }] });
+
+class ActionBarAdvertiseJobListModule {
+}
+ActionBarAdvertiseJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ActionBarAdvertiseJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListModule, declarations: [ActionBarAdvertiseJobListComponent], imports: [CommonModule,
+        GridActionsModule,
+        ActionBarModule,
+        GridControlsModule], exports: [ActionBarAdvertiseJobListComponent] });
+ActionBarAdvertiseJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListModule, imports: [[
+            CommonModule,
+            GridActionsModule,
+            ActionBarModule,
+            GridControlsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarAdvertiseJobListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ActionBarAdvertiseJobListComponent],
+                    imports: [
+                        CommonModule,
+                        GridActionsModule,
+                        ActionBarModule,
+                        GridControlsModule
+                    ],
+                    exports: [ActionBarAdvertiseJobListComponent]
+                }]
+        }] });
+
+class AdvertisedJobPostingsListPageModule {
+}
+AdvertisedJobPostingsListPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisedJobPostingsListPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageModule, declarations: [AdvertisedJobPostingsListPageComponent], imports: [CommonModule,
+        AdvertisedJobPostingsListModule,
+        H3Module,
+        H4Module,
+        PlaceholderModule,
+        TwoColumnFilterAreaModule,
+        IconModule,
+        ContextualMenuModule,
+        InputDropdownModule,
+        GridModule,
+        IconWrapperModule,
+        ActionBarAdvertiseJobListModule,
+        InputTextModule], exports: [AdvertisedJobPostingsListPageComponent] });
+AdvertisedJobPostingsListPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageModule, imports: [[
+            CommonModule,
+            AdvertisedJobPostingsListModule,
+            H3Module,
+            H4Module,
+            PlaceholderModule,
+            TwoColumnFilterAreaModule,
+            IconModule,
+            ContextualMenuModule,
+            InputDropdownModule,
+            GridModule,
+            IconWrapperModule,
+            ActionBarAdvertiseJobListModule,
+            InputTextModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsListPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisedJobPostingsListPageComponent],
+                    imports: [
+                        CommonModule,
+                        AdvertisedJobPostingsListModule,
+                        H3Module,
+                        H4Module,
+                        PlaceholderModule,
+                        TwoColumnFilterAreaModule,
+                        IconModule,
+                        ContextualMenuModule,
+                        InputDropdownModule,
+                        GridModule,
+                        IconWrapperModule,
+                        ActionBarAdvertiseJobListModule,
+                        InputTextModule
+                    ],
+                    exports: [AdvertisedJobPostingsListPageComponent]
+                }]
+        }] });
+
+class OneColumnWithFilterModalTemplateComponent {
+    constructor() { }
+}
+OneColumnWithFilterModalTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OneColumnWithFilterModalTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: OneColumnWithFilterModalTemplateComponent, selector: "symphony-one-column-with-filter-modal-template", ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30 sfx-pl-0\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap sfx-pl-30 sfx-pr-30 sfx-pt-30\">\n    <div class=\"row sfx-border-bottom-black-5 sfx-pb-25\">\n      <div class=\"col-xs-6 col-sm-6 col-md-6 col-lg-6 sfx-pl-0\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n      <div class=\"col-xs-6 col-sm-6 col-md-6 col-lg-6 sfx-pr-0 pull-right\">\n        <ng-content select=\"[sfx-grid-download]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0 sfx-pl-30 sfx-pb-30 sfx-pr-30\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n</div>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-one-column-with-filter-modal-template', template: "<div class=\"sfx sfx-modal\">\n  <!-- main title -->\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 sfx-pr-30 sfx-pl-0\">\n          <ng-content select=\"[sfx-modal-title]\"></ng-content>\n        </div>\n        <span class=\"pull-right\" style=\"padding-top: 1px\">\n          <ng-content select=\"[sfx-close-button]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap sfx-pl-30 sfx-pr-30 sfx-pt-30\">\n    <div class=\"row sfx-border-bottom-black-5 sfx-pb-25\">\n      <div class=\"col-xs-6 col-sm-6 col-md-6 col-lg-6 sfx-pl-0\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n      <div class=\"col-xs-6 col-sm-6 col-md-6 col-lg-6 sfx-pr-0 pull-right\">\n        <ng-content select=\"[sfx-grid-download]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body-area sfx-pt-0 sfx-pl-30 sfx-pb-30 sfx-pr-30\">\n    <ng-content select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class AdvertisedJobPostingsModalComponent {
+    constructor() {
+        this.keywordSearchChange = new EventEmitter();
+        this.filterChange = new EventEmitter();
+        this.downloadClicked = new EventEmitter();
+        this.closeButtonClicked = new EventEmitter();
+    }
+    onKeywordSearch(keyword) {
+        this.keywordSearchChange.emit(keyword);
+    }
+    onFilterChange(selectedModel) {
+        this.filterChange.emit(selectedModel.value);
+    }
+    onDownloadClick() {
+        this.downloadClicked.emit();
+    }
+    onCloseButtonClick() {
+        this.closeButtonClicked.emit();
+    }
+    refreshGrid() {
+        this.grid.updateGridFilter();
+    }
+}
+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", filterChange: "filterChange", 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-cell{line-height:20px}.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 });
+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-cell{line-height:20px}.sfx-modal .input-text-wrap .input-text{margin-left:0!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], gridDownloadModel: [{
+                type: Input
+            }], keywordSearchChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], downloadClicked: [{
+                type: Output
+            }], closeButtonClicked: [{
+                type: Output
+            }], grid: [{
+                type: ViewChild,
+                args: ['sfxgrid']
+            }] } });
+
+class OneColumnWithFilterModalModule {
+}
+OneColumnWithFilterModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OneColumnWithFilterModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalModule, declarations: [OneColumnWithFilterModalTemplateComponent], imports: [CommonModule], exports: [OneColumnWithFilterModalTemplateComponent] });
+OneColumnWithFilterModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OneColumnWithFilterModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OneColumnWithFilterModalTemplateComponent],
+                    imports: [CommonModule],
+                    exports: [OneColumnWithFilterModalTemplateComponent]
+                }]
+        }] });
+
+class AdvertisedJobPostingsModalModule {
+}
+AdvertisedJobPostingsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdvertisedJobPostingsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalModule, declarations: [AdvertisedJobPostingsModalComponent], imports: [CommonModule,
+        TwoColumnModalModule,
+        TwoColumnBodyTemplateModule,
+        OneColumnWithFilterModalModule,
+        H4Module,
+        ParagraphModule,
+        IconModule,
+        InputTextModule,
+        ButtonModule,
+        PlaceholderModule,
+        H5WithIconModule,
+        SfxLoaderModule,
+        GridModule,
+        TwoColumnFilterAreaModule,
+        GridDownloadModule], exports: [AdvertisedJobPostingsModalComponent] });
+AdvertisedJobPostingsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalModule, imports: [[
+            CommonModule,
+            TwoColumnModalModule,
+            TwoColumnBodyTemplateModule,
+            OneColumnWithFilterModalModule,
+            H4Module,
+            ParagraphModule,
+            IconModule,
+            InputTextModule,
+            ButtonModule,
+            PlaceholderModule,
+            H5WithIconModule,
+            SfxLoaderModule,
+            GridModule,
+            TwoColumnFilterAreaModule,
+            GridDownloadModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertisedJobPostingsModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AdvertisedJobPostingsModalComponent],
+                    imports: [
+                        CommonModule,
+                        TwoColumnModalModule,
+                        TwoColumnBodyTemplateModule,
+                        OneColumnWithFilterModalModule,
+                        H4Module,
+                        ParagraphModule,
+                        IconModule,
+                        InputTextModule,
+                        ButtonModule,
+                        PlaceholderModule,
+                        H5WithIconModule,
+                        SfxLoaderModule,
+                        GridModule,
+                        TwoColumnFilterAreaModule,
+                        GridDownloadModule
+                    ],
+                    exports: [AdvertisedJobPostingsModalComponent]
+                }]
+        }] });
+
 /*
  * ATOMS
  */
@@ -4866,5 +5479,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridActionsJobListComponent, GridActionsJobListModule, GridCellLoaderModule, GridComponent, GridControlsJobListComponent, GridControlsJobListModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActivityScoreLevel, AdvertiseModalComponent, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, NavigationLinkComponent, NavigationLinkModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library.mjs.map