@symphony-talent/component-library 4.227.0 → 4.229.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, EventEmitter, Output, Pipe, Injectable, Inject, ViewChild, HostBinding, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
+import { Component, Input, NgModule, EventEmitter, Output, Pipe, Injectable, Inject, ViewChild, HostBinding, ViewEncapsulation, HostListener, forwardRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { SlicePipe, CommonModule, DOCUMENT, DecimalPipe } from '@angular/common';
 import * as i1$1 from 'ngx-bootstrap/dropdown';
@@ -493,26 +493,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
         }] });
 
 class ParagraphComponent {
-    constructor() { }
 }
 ParagraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ParagraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ParagraphComponent, selector: "symphony-paragraph", inputs: { text: "text", isSecondary: "isSecondary", isFontBold: "isFontBold" }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary, 'sfx-font-bold': isFontBold\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ParagraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ParagraphComponent, selector: "symphony-paragraph", inputs: { text: "text", isSecondary: "isSecondary", isFontBold: "isFontBold", fontSize: "fontSize", fontWeight: "fontWeight" }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary, 'sfx-font-bold': isFontBold\n  }\"\n  [style.font-size]=\"fontSize || null\"\n  [style.font-weight]=\"fontWeight || null\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ParagraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-paragraph', template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary, 'sfx-font-bold': isFontBold\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'symphony-paragraph', template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary, 'sfx-font-bold': isFontBold\n  }\"\n  [style.font-size]=\"fontSize || null\"\n  [style.font-weight]=\"fontWeight || null\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n", styles: [".body-copy-primary,.body-copy-secondary{margin-bottom:0;line-height:20px}.body-copy-secondary{color:#fff}\n"] }]
+        }], propDecorators: { text: [{
                 type: Input
             }], isSecondary: [{
                 type: Input
             }], isFontBold: [{
                 type: Input
+            }], fontSize: [{
+                type: Input
+            }], fontWeight: [{
+                type: Input
             }] } });
 
 class ChatHistoryDateStampComponent {
     constructor() { }
 }
 ChatHistoryDateStampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChatHistoryDateStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatHistoryDateStampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatHistoryDateStampComponent, selector: "symphony-chat-history-date-stamp", inputs: { chatDateStamp: "chatDateStamp", hasBorder: "hasBorder" }, ngImport: i0, template: "<div *ngIf=\"hasBorder\" class=\"chat-border\"></div>\n<symphony-paragraph class=\"dateStamp\"\n  ><span>{{ chatDateStamp }}</span></symphony-paragraph\n>\n", styles: [".dateStamp p{color:#5b6d80;text-align:center}.chat-border{margin-bottom:15px;width:100%;height:1px;background:#e4e7ef}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ChatHistoryDateStampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatHistoryDateStampComponent, selector: "symphony-chat-history-date-stamp", inputs: { chatDateStamp: "chatDateStamp", hasBorder: "hasBorder" }, ngImport: i0, template: "<div *ngIf=\"hasBorder\" class=\"chat-border\"></div>\n<symphony-paragraph class=\"dateStamp\"\n  ><span>{{ chatDateStamp }}</span></symphony-paragraph\n>\n", styles: [".dateStamp p{color:#5b6d80;text-align:center}.chat-border{margin-bottom:15px;width:100%;height:1px;background:#e4e7ef}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], 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: ChatHistoryDateStampComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-chat-history-date-stamp', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"hasBorder\" class=\"chat-border\"></div>\n<symphony-paragraph class=\"dateStamp\"\n  ><span>{{ chatDateStamp }}</span></symphony-paragraph\n>\n", styles: [".dateStamp p{color:#5b6d80;text-align:center}.chat-border{margin-bottom:15px;width:100%;height:1px;background:#e4e7ef}\n"] }]
@@ -817,7 +820,7 @@ class GridCellClickableComponent {
     }
 }
 GridCellClickableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellClickableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridCellClickableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridCellClickableComponent, selector: "symphony-grid-cell-clickable", ngImport: i0, template: "<symphony-paragraph\n  class=\"sfx-font-bold sfx-cursor-pointer\"\n  (click)=\"onCellClick($event)\"\n  [text]=\"value\"\n></symphony-paragraph>\n", styles: [".sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif!important}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], encapsulation: i0.ViewEncapsulation.None });
+GridCellClickableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridCellClickableComponent, selector: "symphony-grid-cell-clickable", ngImport: i0, template: "<symphony-paragraph\n  class=\"sfx-font-bold sfx-cursor-pointer\"\n  (click)=\"onCellClick($event)\"\n  [text]=\"value\"\n></symphony-paragraph>\n", styles: [".sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif!important}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellClickableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-grid-cell-clickable', encapsulation: ViewEncapsulation.None, template: "<symphony-paragraph\n  class=\"sfx-font-bold sfx-cursor-pointer\"\n  (click)=\"onCellClick($event)\"\n  [text]=\"value\"\n></symphony-paragraph>\n", styles: [".sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif!important}\n"] }]
@@ -990,6 +993,7 @@ class CustomDetailWithGridComponent {
         this.nestedRowSelection = 'multiple';
         this.nestedSuppressRowClickSelection = true;
         this.nestedSuppressContextMenu = true;
+        this.nestedSuppressAutoSizeColumns = false;
         this.nestedColumnDefs = [];
         this.nestedDefaultColDef = {
             flex: 1,
@@ -1023,6 +1027,8 @@ class CustomDetailWithGridComponent {
             this.detailRendererParams?.nestedSuppressRowClickSelection !== false;
         this.nestedSuppressContextMenu =
             this.detailRendererParams?.nestedSuppressContextMenu !== false;
+        this.nestedSuppressAutoSizeColumns =
+            this.detailRendererParams?.nestedSuppressAutoSizeColumns === true;
         this.nestedFrameworkComponents = this.getNestedFrameworkComponents();
         this.nestedDefaultColDef = {
             flex: 1,
@@ -1043,6 +1049,18 @@ class CustomDetailWithGridComponent {
         this.nestedGridApi = gridReadyEvent.api;
         this.resizeNestedGridColumns();
     }
+    onWindowResize() {
+        if (this.nestedSuppressAutoSizeColumns || !this.nestedGridApi) {
+            return;
+        }
+        if (this.resizeTimeoutId !== null) {
+            clearTimeout(this.resizeTimeoutId);
+        }
+        this.resizeTimeoutId = window.setTimeout(() => {
+            this.nestedGridApi?.sizeColumnsToFit();
+            this.resizeTimeoutId = null;
+        }, 200);
+    }
     onViewAllClick() {
         if (this.showActionButton && this.params?.context?.componentParent?.onDetailActionClick) {
             this.params.context.componentParent.onDetailActionClick(this.params.data);
@@ -1100,7 +1118,7 @@ class CustomDetailWithGridComponent {
         }
     }
     resizeNestedGridColumns() {
-        if (!this.nestedGridApi) {
+        if (this.nestedSuppressAutoSizeColumns || !this.nestedGridApi) {
             return;
         }
         if (this.resizeTimeoutId !== null) {
@@ -1113,11 +1131,14 @@ class CustomDetailWithGridComponent {
     }
 }
 CustomDetailWithGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CustomDetailWithGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomDetailWithGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CustomDetailWithGridComponent, selector: "symphony-custom-detail-with-grid", ngImport: i0, template: "<div class=\"custom-detail-with-grid\">\n  <div class=\"custom-detail-with-grid__header\">\n    <div class=\"custom-detail-with-grid__header-top sfx-mb-10\">\n      <h4 class=\"sfx-m-0\">{{ title }}</h4>\n      <symphony-button-v2\n        *ngIf=\"showActionButton\"\n        [text]=\"actionButtonText\"\n        (clicked)=\"onViewAllClick()\"\n      ></symphony-button-v2>\n    </div>\n\n    <div *ngIf=\"shouldShowNotesSection\" class=\"custom-detail-with-grid__notes sfx-mb-15\">\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-title sfx-d-block sfx-font-bold sfx-mb-5\"\n        [text]=\"notesTitle\"\n      ></symphony-paragraph>\n\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-description sfx-d-block\"\n        [text]=\"displayedNotesDescription\"\n      ></symphony-paragraph>\n\n      <button\n        *ngIf=\"shouldShowNotesToggle\"\n        type=\"button\"\n        class=\"custom-detail-with-grid__notes-toggle\"\n        (click)=\"toggleNotesExpansion()\"\n      >\n        {{ isNotesExpanded ? 'See Less' : 'See More' }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"custom-detail-with-grid__grid\">\n    <ag-grid-angular\n      class=\"ag-theme-alpine sfx-lib-gird-dropdown\"\n      [columnDefs]=\"nestedColumnDefs\"\n      [defaultColDef]=\"nestedDefaultColDef\"\n      [frameworkComponents]=\"nestedFrameworkComponents\"\n      [rowHeight]=\"nestedRowHeight\"\n      [rowData]=\"nestedRowData\"\n      [suppressRowClickSelection]=\"nestedSuppressRowClickSelection\"\n      [suppressContextMenu]=\"nestedSuppressContextMenu\"\n      [rowSelection]=\"nestedRowSelection\"\n      (gridReady)=\"onNestedGridReady($event)\"\n    ></ag-grid-angular>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.custom-detail-with-grid{display:flex;flex-direction:column;height:100%;width:100%;padding:20px}.custom-detail-with-grid__header{display:flex;flex-direction:column}.custom-detail-with-grid__header-top{align-items:center;display:flex;justify-content:space-between}.custom-detail-with-grid__notes{background-color:#f0f4ff;border:1px solid #d1e0ff;border-radius:8px;padding:16px}.custom-detail-with-grid__notes-title{color:#324158}.custom-detail-with-grid__notes-description{white-space:normal}.custom-detail-with-grid__notes-toggle{background:none;border:0;color:#0091fb;cursor:pointer;display:block;line-height:20px;margin-top:8px;padding:0;text-align:left;font-size:13px}.custom-detail-with-grid__grid{display:block;flex:1;min-height:180px;overflow:hidden;width:100%}.custom-detail-with-grid__grid ag-grid-angular{display:block;height:100%;width:100%}\n"], components: [{ type: ButtonV2Component, selector: "symphony-button-v2" }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i1$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CustomDetailWithGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CustomDetailWithGridComponent, selector: "symphony-custom-detail-with-grid", host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"custom-detail-with-grid\">\n  <div class=\"custom-detail-with-grid__header\">\n    <div class=\"custom-detail-with-grid__header-top sfx-mb-10\">\n      <h4 class=\"sfx-m-0\">{{ title }}</h4>\n      <symphony-button-v2\n        *ngIf=\"showActionButton\"\n        [text]=\"actionButtonText\"\n        (clicked)=\"onViewAllClick()\"\n      ></symphony-button-v2>\n    </div>\n\n    <div *ngIf=\"shouldShowNotesSection\" class=\"custom-detail-with-grid__notes sfx-mb-15\">\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-title sfx-d-block sfx-font-bold sfx-mb-5\"\n        [text]=\"notesTitle\"\n      ></symphony-paragraph>\n\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-description sfx-d-block\"\n        [text]=\"displayedNotesDescription\"\n      ></symphony-paragraph>\n\n      <button\n        *ngIf=\"shouldShowNotesToggle\"\n        type=\"button\"\n        class=\"custom-detail-with-grid__notes-toggle\"\n        (click)=\"toggleNotesExpansion()\"\n      >\n        {{ isNotesExpanded ? 'See Less' : 'See More' }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"custom-detail-with-grid__grid\">\n    <ag-grid-angular\n      class=\"ag-theme-alpine sfx-lib-gird-dropdown custom-detail-with-grid__nested-grid\"\n      [columnDefs]=\"nestedColumnDefs\"\n      [defaultColDef]=\"nestedDefaultColDef\"\n      [frameworkComponents]=\"nestedFrameworkComponents\"\n      [rowHeight]=\"nestedRowHeight\"\n      [rowData]=\"nestedRowData\"\n      [suppressRowClickSelection]=\"nestedSuppressRowClickSelection\"\n      [suppressContextMenu]=\"nestedSuppressContextMenu\"\n      [rowSelection]=\"nestedRowSelection\"\n      (gridReady)=\"onNestedGridReady($event)\"\n    ></ag-grid-angular>\n  </div>\n</div>\n", styles: ["symphony-custom-detail-with-grid{display:block;height:100%;width:100%}symphony-custom-detail-with-grid .custom-detail-with-grid{display:flex;flex-direction:column;height:100%;width:100%;padding:20px}symphony-custom-detail-with-grid .custom-detail-with-grid__header{display:flex;flex-direction:column}symphony-custom-detail-with-grid .custom-detail-with-grid__header-top{align-items:center;display:flex;justify-content:space-between}symphony-custom-detail-with-grid .custom-detail-with-grid__notes{background-color:#f0f4ff;border:1px solid #d1e0ff;border-radius:8px;padding:16px}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-title{color:#324158}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-description{white-space:normal}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-toggle{background:none;border:0;color:#0091fb;cursor:pointer;display:block;line-height:20px;margin-top:8px;padding:0;text-align:left;font-size:13px}symphony-custom-detail-with-grid .custom-detail-with-grid__grid{display:block;flex:1;min-height:180px;overflow:hidden;width:100%;border-radius:10px}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid{display:block;height:100%;width:100%;background:#fff}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid.ag-theme-alpine .ag-cell,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid.ag-theme-alpine .ag-header-cell{padding-left:5px!important}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .more-options .btn-group.open button.dropdown-toggle.btn,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .more-options.open .btn-group button.dropdown-toggle.btn:hover{background:#f1f2f5!important;color:#334860}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options .btn-group.open button.dropdown-toggle.btn,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options.open .btn-group button.dropdown-toggle.btn:hover,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options .btn-group button.dropdown-toggle.btn:hover{background:#f1f2f5!important;color:#334860}\n"], components: [{ type: ButtonV2Component, selector: "symphony-button-v2" }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i1$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["alignedGrids", "rowData", "columnDefs", "excelStyles", "pinnedTopRowData", "pinnedBottomRowData", "chartThemes", "components", "frameworkComponents", "rowStyle", "context", "autoGroupColumnDef", "localeText", "icons", "datasource", "serverSideDatasource", "viewportDatasource", "groupRowRendererParams", "aggFuncs", "fullWidthCellRendererParams", "defaultColGroupDef", "defaultColDef", "defaultExportParams", "columnTypes", "rowClassRules", "detailGridOptions", "detailCellRendererParams", "loadingCellRendererParams", "loadingOverlayComponentParams", "noRowsOverlayComponentParams", "popupParent", "colResizeDefault", "reduxStore", "statusBar", "sideBar", "chartThemeOverrides", "customChartThemes", "sortingOrder", "rowClass", "rowSelection", "overlayLoadingTemplate", "overlayNoRowsTemplate", "quickFilterText", "rowModelType", "editType", "domLayout", "clipboardDeliminator", "rowGroupPanelShow", "multiSortKey", "pivotColumnGroupTotals", "pivotRowTotals", "pivotPanelShow", "fillHandleDirection", "rowHeight", "detailRowHeight", "rowBuffer", "colWidth", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "groupDefaultExpanded", "minColWidth", "maxColWidth", "viewportRowModelPageSize", "viewportRowModelBufferSize", "autoSizePadding", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "tooltipShowDelay", "cacheOverflowSize", "paginationPageSize", "cacheBlockSize", "infiniteInitialRowCount", "scrollbarWidth", "batchUpdateWaitMillis", "asyncTransactionWaitMillis", "blockLoadDebounceMillis", "keepDetailRowsCount", "undoRedoCellEditingLimit", "cellFlashDelay", "cellFadeDelay", "localeTextFunc", "groupRowInnerRenderer", "groupRowInnerRendererFramework", "dateComponent", "dateComponentFramework", "groupRowRenderer", "groupRowRendererFramework", "isExternalFilterPresent", "getRowHeight", "doesExternalFilterPass", "getRowClass", "getRowStyle", "getRowClassRules", "traverseNode", "getContextMenuItems", "getMainMenuItems", "processRowPostCreate", "processCellForClipboard", "groupRowAggNodes", "getRowNodeId", "isFullWidthCell", "fullWidthCellRenderer", "fullWidthCellRendererFramework", "processSecondaryColDef", "processSecondaryColGroupDef", "getBusinessKeyForNode", "sendToClipboard", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getDetailRowData", "processCellFromClipboard", "getDocument", "postProcessPopup", "getChildCount", "getDataPath", "loadingCellRenderer", "loadingCellRendererFramework", "loadingOverlayComponent", "loadingOverlayComponentFramework", "noRowsOverlayComponent", "noRowsOverlayComponentFramework", "detailCellRenderer", "detailCellRendererFramework", "defaultGroupSortComparator", "isRowMaster", "isRowSelectable", "postSort", "processHeaderForClipboard", "paginationNumberFormatter", "processDataFromClipboard", "getServerSideGroupKey", "isServerSideGroup", "suppressKeyboardEvent", "createChartContainer", "processChartOptions", "getChartToolbarItems", "fillOperation", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowClickSelection", "suppressCellSelection", "suppressHorizontalScroll", "alwaysShowVerticalScroll", "debug", "enableBrowserTooltips", "enableCellExpressions", "angularCompileRows", "angularCompileFilters", "groupSuppressAutoColumn", "groupSelectsChildren", "groupIncludeFooter", "groupIncludeTotalFooter", "groupUseEntireRow", "groupSuppressBlankHeader", "suppressMenuHide", "suppressRowDeselection", "unSortIcon", "suppressMultiSort", "singleClickEdit", "suppressLoadingOverlay", "suppressNoRowsOverlay", "suppressAutoSize", "skipHeaderOnAutoSize", "suppressParentsInRowNodes", "suppressColumnMoveAnimation", "suppressMovableColumns", "suppressFieldDotNotation", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "suppressClearOnFillReduction", "deltaSort", "suppressTouch", "suppressAsyncEvents", "allowContextMenuWithControlKey", "suppressContextMenu", "rememberGroupStateWhenNewData", "enableCellChangeFlash", "suppressDragLeaveHidesColumns", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "suppressCopyRowsToClipboard", "copyHeadersToClipboard", "pivotMode", "suppressAggFuncInHeader", "suppressColumnVirtualisation", "suppressAggAtRootLevel", "suppressFocusAfterRefresh", "functionsPassive", "functionsReadOnly", "animateRows", "groupSelectsFiltered", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "enableRtl", "suppressClickEdit", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "enableMultiRowDragging", "enableGroupEdit", "embedFullWidthRows", "deprecatedEmbedFullWidthRows", "suppressPaginationPanel", "floatingFilter", "groupHideOpenParents", "groupMultiAutoColumn", "pagination", "stopEditingWhenGridLosesFocus", "paginationAutoPageSize", "suppressScrollOnNewData", "purgeClosedRowNodes", "cacheQuickFilter", "deltaRowDataMode", "ensureDomOrder", "accentedSort", "suppressChangeDetection", "valueCache", "valueCacheNeverExpires", "aggregateOnlyChangedColumns", "suppressAnimationFrame", "suppressExcelExport", "suppressCsvExport", "treeData", "masterDetail", "suppressMultiRangeSelection", "enterMovesDownAfterEdit", "enterMovesDown", "suppressPropertyNamesCheck", "rowMultiSelectWithClick", "suppressEnterpriseResetOnNewColumns", "enableOldSetFilterModel", "suppressRowHoverHighlight", "suppressRowTransform", "suppressClipboardPaste", "suppressLastEmptyLineOnPaste", "serverSideSortingAlwaysResets", "reactNext", "suppressSetColumnStateEvents", "suppressColumnStateEvents", "enableCharts", "deltaColumnMode", "suppressMaintainUnsortedOrder", "enableCellTextSelection", "suppressBrowserResizeObserver", "suppressMaxRenderedRowRestriction", "excludeChildrenWhenTreeDataFiltering", "tooltipMouseTrack", "keepDetailRows", "paginateChildRows", "preventDefaultOnContextMenu", "undoRedoCellEditing", "allowDragFromColumnsToolPanel", "immutableData", "immutableColumns", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "applyColumnDefOrder", "debounceVerticalScrollbar", "detailRowAutoHeight", "gridOptions", "modules"], outputs: ["columnEverythingChanged", "newColumnsLoaded", "columnPivotModeChanged", "columnRowGroupChanged", "expandOrCollapseAll", "columnPivotChanged", "gridColumnsChanged", "columnValueChanged", "columnMoved", "columnVisible", "columnPinned", "columnGroupOpened", "columnResized", "displayedColumnsChanged", "virtualColumnsChanged", "rowGroupOpened", "rowDataChanged", "rowDataUpdated", "pinnedRowDataChanged", "rangeSelectionChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "toolPanelVisibleChanged", "modelUpdated", "pasteStart", "pasteEnd", "fillStart", "fillEnd", "cellClicked", "cellDoubleClicked", "cellMouseDown", "cellContextMenu", "cellValueChanged", "rowValueChanged", "cellFocused", "rowSelected", "selectionChanged", "cellKeyDown", "cellKeyPress", "cellMouseOver", "cellMouseOut", "filterChanged", "filterModified", "filterOpened", "sortChanged", "virtualRowRemoved", "rowClicked", "rowDoubleClicked", "gridReady", "gridSizeChanged", "viewportChanged", "scrollbarWidthChanged", "firstDataRendered", "dragStarted", "dragStopped", "checkboxChanged", "rowEditingStarted", "rowEditingStopped", "cellEditingStarted", "cellEditingStopped", "bodyScroll", "animationQueueEmpty", "heightScaleChanged", "paginationChanged", "componentStateChanged", "bodyHeightChanged", "displayedColumnsWidthChanged", "scrollVisibilityChanged", "columnHoverChanged", "flashCells", "paginationPixelOffsetChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "popupToFront", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest", "keyboardFocus", "mouseFocus"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CustomDetailWithGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-custom-detail-with-grid', template: "<div class=\"custom-detail-with-grid\">\n  <div class=\"custom-detail-with-grid__header\">\n    <div class=\"custom-detail-with-grid__header-top sfx-mb-10\">\n      <h4 class=\"sfx-m-0\">{{ title }}</h4>\n      <symphony-button-v2\n        *ngIf=\"showActionButton\"\n        [text]=\"actionButtonText\"\n        (clicked)=\"onViewAllClick()\"\n      ></symphony-button-v2>\n    </div>\n\n    <div *ngIf=\"shouldShowNotesSection\" class=\"custom-detail-with-grid__notes sfx-mb-15\">\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-title sfx-d-block sfx-font-bold sfx-mb-5\"\n        [text]=\"notesTitle\"\n      ></symphony-paragraph>\n\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-description sfx-d-block\"\n        [text]=\"displayedNotesDescription\"\n      ></symphony-paragraph>\n\n      <button\n        *ngIf=\"shouldShowNotesToggle\"\n        type=\"button\"\n        class=\"custom-detail-with-grid__notes-toggle\"\n        (click)=\"toggleNotesExpansion()\"\n      >\n        {{ isNotesExpanded ? 'See Less' : 'See More' }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"custom-detail-with-grid__grid\">\n    <ag-grid-angular\n      class=\"ag-theme-alpine sfx-lib-gird-dropdown\"\n      [columnDefs]=\"nestedColumnDefs\"\n      [defaultColDef]=\"nestedDefaultColDef\"\n      [frameworkComponents]=\"nestedFrameworkComponents\"\n      [rowHeight]=\"nestedRowHeight\"\n      [rowData]=\"nestedRowData\"\n      [suppressRowClickSelection]=\"nestedSuppressRowClickSelection\"\n      [suppressContextMenu]=\"nestedSuppressContextMenu\"\n      [rowSelection]=\"nestedRowSelection\"\n      (gridReady)=\"onNestedGridReady($event)\"\n    ></ag-grid-angular>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.custom-detail-with-grid{display:flex;flex-direction:column;height:100%;width:100%;padding:20px}.custom-detail-with-grid__header{display:flex;flex-direction:column}.custom-detail-with-grid__header-top{align-items:center;display:flex;justify-content:space-between}.custom-detail-with-grid__notes{background-color:#f0f4ff;border:1px solid #d1e0ff;border-radius:8px;padding:16px}.custom-detail-with-grid__notes-title{color:#324158}.custom-detail-with-grid__notes-description{white-space:normal}.custom-detail-with-grid__notes-toggle{background:none;border:0;color:#0091fb;cursor:pointer;display:block;line-height:20px;margin-top:8px;padding:0;text-align:left;font-size:13px}.custom-detail-with-grid__grid{display:block;flex:1;min-height:180px;overflow:hidden;width:100%}.custom-detail-with-grid__grid ag-grid-angular{display:block;height:100%;width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'symphony-custom-detail-with-grid', encapsulation: ViewEncapsulation.None, template: "<div class=\"custom-detail-with-grid\">\n  <div class=\"custom-detail-with-grid__header\">\n    <div class=\"custom-detail-with-grid__header-top sfx-mb-10\">\n      <h4 class=\"sfx-m-0\">{{ title }}</h4>\n      <symphony-button-v2\n        *ngIf=\"showActionButton\"\n        [text]=\"actionButtonText\"\n        (clicked)=\"onViewAllClick()\"\n      ></symphony-button-v2>\n    </div>\n\n    <div *ngIf=\"shouldShowNotesSection\" class=\"custom-detail-with-grid__notes sfx-mb-15\">\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-title sfx-d-block sfx-font-bold sfx-mb-5\"\n        [text]=\"notesTitle\"\n      ></symphony-paragraph>\n\n      <symphony-paragraph\n        class=\"custom-detail-with-grid__notes-description sfx-d-block\"\n        [text]=\"displayedNotesDescription\"\n      ></symphony-paragraph>\n\n      <button\n        *ngIf=\"shouldShowNotesToggle\"\n        type=\"button\"\n        class=\"custom-detail-with-grid__notes-toggle\"\n        (click)=\"toggleNotesExpansion()\"\n      >\n        {{ isNotesExpanded ? 'See Less' : 'See More' }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"custom-detail-with-grid__grid\">\n    <ag-grid-angular\n      class=\"ag-theme-alpine sfx-lib-gird-dropdown custom-detail-with-grid__nested-grid\"\n      [columnDefs]=\"nestedColumnDefs\"\n      [defaultColDef]=\"nestedDefaultColDef\"\n      [frameworkComponents]=\"nestedFrameworkComponents\"\n      [rowHeight]=\"nestedRowHeight\"\n      [rowData]=\"nestedRowData\"\n      [suppressRowClickSelection]=\"nestedSuppressRowClickSelection\"\n      [suppressContextMenu]=\"nestedSuppressContextMenu\"\n      [rowSelection]=\"nestedRowSelection\"\n      (gridReady)=\"onNestedGridReady($event)\"\n    ></ag-grid-angular>\n  </div>\n</div>\n", styles: ["symphony-custom-detail-with-grid{display:block;height:100%;width:100%}symphony-custom-detail-with-grid .custom-detail-with-grid{display:flex;flex-direction:column;height:100%;width:100%;padding:20px}symphony-custom-detail-with-grid .custom-detail-with-grid__header{display:flex;flex-direction:column}symphony-custom-detail-with-grid .custom-detail-with-grid__header-top{align-items:center;display:flex;justify-content:space-between}symphony-custom-detail-with-grid .custom-detail-with-grid__notes{background-color:#f0f4ff;border:1px solid #d1e0ff;border-radius:8px;padding:16px}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-title{color:#324158}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-description{white-space:normal}symphony-custom-detail-with-grid .custom-detail-with-grid__notes-toggle{background:none;border:0;color:#0091fb;cursor:pointer;display:block;line-height:20px;margin-top:8px;padding:0;text-align:left;font-size:13px}symphony-custom-detail-with-grid .custom-detail-with-grid__grid{display:block;flex:1;min-height:180px;overflow:hidden;width:100%;border-radius:10px}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid{display:block;height:100%;width:100%;background:#fff}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid.ag-theme-alpine .ag-cell,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid.ag-theme-alpine .ag-header-cell{padding-left:5px!important}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .more-options .btn-group.open button.dropdown-toggle.btn,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .more-options.open .btn-group button.dropdown-toggle.btn:hover{background:#f1f2f5!important;color:#334860}symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options .btn-group.open button.dropdown-toggle.btn,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options.open .btn-group button.dropdown-toggle.btn:hover,symphony-custom-detail-with-grid .custom-detail-with-grid__nested-grid .ag-row.ag-row-hover .more-options .btn-group button.dropdown-toggle.btn:hover{background:#f1f2f5!important;color:#334860}\n"] }]
+        }], propDecorators: { onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 class GridComponent {
     constructor() {
@@ -2732,7 +2753,7 @@ class SfxLoaderComponent {
     }
 }
 SfxLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle", message: "message", hasCustomMessage: "hasCustomMessage" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n<div *ngIf=\"hasCustomMessage\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n  <ng-content select=\"[custom-message]\"></ng-content>\n</div>\n\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SfxLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: { leftStyle: "leftStyle", message: "message", hasCustomMessage: "hasCustomMessage" }, ngImport: i0, template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n<div *ngIf=\"hasCustomMessage\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n  <ng-content select=\"[custom-message]\"></ng-content>\n</div>\n\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-sfx-loader', template: "<div class=\"col-md-12 sfx-loader\" [style.left.%]=\"leftStyle\"></div>\n<symphony-paragraph *ngIf=\"message?.length > 0\" class=\"text-center\">\n  {{ message }}\n</symphony-paragraph>\n<div *ngIf=\"hasCustomMessage\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n  <ng-content select=\"[custom-message]\"></ng-content>\n</div>\n\n", styles: [".sfx-loader{z-index:10000;float:none;padding-top:5px;padding-bottom:5px;height:70px;width:50px;position:relative;padding-inline:0;transform:translate(-50%);display:inline-block;vertical-align:top}.sfx-loader:before{content:\" \";border:5px solid #000000;border-radius:50%;border-top:5px solid #ffffff;width:50px;height:50px;animation:sfxspin .5s linear infinite;position:absolute}\n"] }]
@@ -3248,7 +3269,7 @@ class FormattedCounterComponent {
     constructor() { }
 }
 FormattedCounterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FormattedCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormattedCounterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: { model: "model" }, ngImport: i0, template: "<symphony-paragraph [isFontBold]=true>{{model.count}} {{model.counterLabel}}</symphony-paragraph>", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+FormattedCounterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: { model: "model" }, ngImport: i0, template: "<symphony-paragraph [isFontBold]=true>{{model.count}} {{model.counterLabel}}</symphony-paragraph>", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FormattedCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-formatted-counter', template: "<symphony-paragraph [isFontBold]=true>{{model.count}} {{model.counterLabel}}</symphony-paragraph>", styles: [""] }]
@@ -3433,7 +3454,7 @@ class InputFileUploadComponent {
     }
 }
 InputFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputFileUploadComponent, selector: "symphony-input-file-upload", inputs: { inputFileUploadModel: "inputFileUploadModel" }, outputs: { closeButtonClicked: "closeButtonClicked", textChanged: "textChanged", getFileDetails: "getFileDetails" }, viewQueries: [{ propertyName: "toolTip", first: true, predicate: ["pop"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"{{identifier}}\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"{{identifier}}\"\n      name=\"{{identifier}}\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"{{identifier}}\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.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"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+InputFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputFileUploadComponent, selector: "symphony-input-file-upload", inputs: { inputFileUploadModel: "inputFileUploadModel" }, outputs: { closeButtonClicked: "closeButtonClicked", textChanged: "textChanged", getFileDetails: "getFileDetails" }, viewQueries: [{ propertyName: "toolTip", first: true, predicate: ["pop"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"{{identifier}}\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"{{identifier}}\"\n      name=\"{{identifier}}\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"{{identifier}}\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.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"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-file-upload', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"inputFileUploadModel\">\n  <!-- File Upload -->\n  <div class=\"sfx-input-label\">\n    {{ inputFileUploadModel.inputLabel }}\n  </div>\n  <div\n    class=\"sfx-input-file-upload\"\n    tooltip=\"{{ inputFileUploadModel.fileValue }}\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    #pop=\"bs-tooltip\"\n    [ngClass]=\"{ 'has-Close': inputFileUploadModel.hasClose }\"\n  >\n    <label class=\"sfx-cursor-pointer\" for=\"{{identifier}}\"> </label>\n\n    <input\n      type=\"file\"\n      id=\"{{identifier}}\"\n      name=\"{{identifier}}\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      (click)=\"onClick($event)\"\n    />\n    <input\n      type=\"text\"\n      name=\"input-text\"\n      id=\"{{identifier}}\"\n      class=\"input-text\"\n      autocomplete=\"off\"\n      placeholder=\"{{ inputFileUploadModel.placeholder }}\"\n      (keyup)=\"onTextChange($event)\"\n      [(ngModel)]=\"inputFileUploadModel.fileValue\"\n    />\n\n    <symphony-icon\n      class=\"sfx-cursor-pointer\"\n      *ngIf=\"inputFileUploadModel.hasClose\"\n      [icon]=\"'si-close-modal'\"\n      [size]=\"'20px'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      *ngIf=\"inputFileUploadModel.hasError\"\n      class=\"sfx-txt-red-v2 sfx-pl-5 sfx-d-flex\"\n      [text]=\"inputFileUploadModel.errorText\"\n    ></symphony-paragraph>\n  </div>\n  <!-- File Upload -->\n</div>\n", styles: [".sfx-input-file-upload{position:relative}.sfx-input-file-upload symphony-tooltip-wrapper .sfx-d-inline-block{width:100%;display:block}.sfx-input-file-upload label{line-height:40px;width:40px;margin:0;height:40px;position:absolute;text-align:center;right:-5px;top:5px}.sfx-input-file-upload label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:5px}.sfx-input-file-upload label:before{content:\"\\e9b7\";font-family:library-icons!important}.sfx-input-file-upload input[type=file]{visibility:hidden;position:absolute;top:0}.sfx-input-file-upload input[type=text]{width:100%;height:40px;border-radius:4px;box-shadow:none;padding:0 30px 0 20px;border:1px solid #d0d0d0;margin:5px;outline:none}.sfx-input-file-upload.has-Close input[type=text]{width:calc(100% - 35px)}.sfx-input-file-upload.has-Close label{right:30px;top:5px}.sfx-input-file-upload.has-Close symphony-icon{position:absolute;top:15px;right:0px}.sfx-input-label{font-weight:500;margin-left:5px;margin-bottom:5px}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600;word-wrap:break-word}.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"] }]
@@ -3767,7 +3788,7 @@ class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\" id=\"card-item-{{ cardModel.title | trimId}}\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\" title=\"{{ cardModel.description }}\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:170px}.card-item{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.card-item:hover{box-shadow:none;border-color:#82919f}.card-item .card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-title-wrap{margin-bottom:11px;align-items:baseline}.card-icon{padding-right:15px;color:#334860}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], pipes: { "trimId": TrimIdPipe } });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\" id=\"card-item-{{ cardModel.title | trimId}}\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\" title=\"{{ cardModel.description }}\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:170px}.card-item{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.card-item:hover{box-shadow:none;border-color:#82919f}.card-item .card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-title-wrap{margin-bottom:11px;align-items:baseline}.card-icon{padding-right:15px;color:#334860}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], pipes: { "trimId": TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\" id=\"card-item-{{ cardModel.title | trimId}}\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\" title=\"{{ cardModel.description }}\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:170px}.card-item{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.card-item:hover{box-shadow:none;border-color:#82919f}.card-item .card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-title-wrap{margin-bottom:11px;align-items:baseline}.card-icon{padding-right:15px;color:#334860}\n"] }]
@@ -3800,7 +3821,7 @@ class ReportsCardComponent {
     }
 }
 ReportsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe } });
+ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-reports-card', template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"] }]
@@ -3881,7 +3902,7 @@ class FeedbackCardComponent {
     }
 }
 FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4 title=\"{{ model.title }}\">{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\" title=\"{{ bodyText }}\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:1}.card-wrap-text.body{-webkit-line-clamp:2}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;height:260px;flex-direction:column;border:2px solid transparent}.card-item:hover{box-shadow:none;border-color:#82919f}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:14px;font-weight:500;letter-spacing:0}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{color:#712ace;font-weight:700}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:9px;display:inline-block;font-style:italic;font-weight:500}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4 title=\"{{ model.title }}\">{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\" title=\"{{ bodyText }}\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:1}.card-wrap-text.body{-webkit-line-clamp:2}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;height:260px;flex-direction:column;border:2px solid transparent}.card-item:hover{box-shadow:none;border-color:#82919f}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:14px;font-weight:500;letter-spacing:0}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{color:#712ace;font-weight:700}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:9px;display:inline-block;font-style:italic;font-weight:500}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n  <div class=\"card-item sfx-d-flex\">\n    <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n      <div class=\"card-wrap-text title card-title\">\n        <symphony-h4 title=\"{{ model.title }}\">{{ model.title }}</symphony-h4>\n      </div>\n      <div class=\"card-icon\">\n        <symphony-icon\n          *ngIf=\"model.showEditIcon\"\n          class=\"feedback-edit\"\n          [icon]=\"'si-edit'\"\n          [size]=\"'15.5px'\"\n        ></symphony-icon>\n      </div>\n    </div>\n    <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n      <symphony-paragraph class=\"card-wrap-text body\" title=\"{{ bodyText }}\">\n        {{ bodyText }}\n      </symphony-paragraph>\n    </div>\n    <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n      <symphony-color-sample\n        *ngIf=\"model.additionalDetails.showIcon\"\n        [color]=\"model.additionalDetails.iconColor\"\n      ></symphony-color-sample>\n      <span class=\"display-text\">{{\n        model.additionalDetails.displayText\n      }}</span>\n    </div>\n    <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n      <ng-container *ngSwitchCase=\"'Yes'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-green\"\n          [icon]=\"'si-feedback-yes'\"\n        ></symphony-icon>\n        <symphony-paragraph>Yes</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'No'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-red\"\n          [icon]=\"'si-feedback-no'\"\n        ></symphony-icon>\n        <symphony-paragraph>No</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'Not Now'\">\n        <symphony-icon\n          *ngIf=\"model.showFeedbackIcon\"\n          class=\"sfx-mr-10 color-orange\"\n          [icon]=\"'si-feedback-maybe'\"\n        ></symphony-icon>\n        <symphony-paragraph>Not Now</symphony-paragraph>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'None'\">\n        <symphony-paragraph class=\"sfx-bold\"\n          >Provide Feedback</symphony-paragraph\n        >\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-wrap-text{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.card-wrap-text.title{-webkit-line-clamp:1}.card-wrap-text.body{-webkit-line-clamp:2}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;height:260px;flex-direction:column;border:2px solid transparent}.card-item:hover{box-shadow:none;border-color:#82919f}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:14px;font-weight:500;letter-spacing:0}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{color:#712ace;font-weight:700}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:9px;display:inline-block;font-style:italic;font-weight:500}\n"] }]
@@ -4014,7 +4035,7 @@ 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-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", "isFontBold"] }, { 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", "isFontBold", "fontSize", "fontWeight"] }, { 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-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"] }]
@@ -4199,7 +4220,7 @@ 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      ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n        *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} {{ documentManagementItemModel.uploadedBy ? '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      *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      (itemClick)=\"onMoreOptionClicked($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.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{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{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", "isFontBold"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], 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 });
+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      ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n        *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} {{ documentManagementItemModel.uploadedBy ? '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      *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      (itemClick)=\"onMoreOptionClicked($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.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{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{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", "isFontBold", "fontSize", "fontWeight"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], 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      ><span class=\"sfx-ellipse\">{{ documentManagementItemModel.fileName }}&nbsp;</span><span\n        *ngIf=\"documentManagementItemModel.fileType\" class=\"sfx-white-space-nowrap\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} {{ documentManagementItemModel.uploadedBy ? '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      *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      (itemClick)=\"onMoreOptionClicked($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px}.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{display:flex}.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-content .sfx-white-space-nowrap{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"] }]
@@ -4244,6 +4265,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class CandidateItemComponent {
+    constructor() {
+        this.isSelected = false;
+        this.selectionChanged = new EventEmitter();
+    }
+    set candidate(candidate) {
+        this.candidateValue = candidate;
+        this.isSelected = !!candidate?.isSelected;
+    }
+    get candidate() {
+        return this.candidateValue;
+    }
+    handleRowClick() {
+        if (!this.candidate) {
+            return;
+        }
+        this.setSelection(!this.isSelected);
+    }
+    handleCheckboxClicked(event) {
+        if (!this.candidate) {
+            return;
+        }
+        this.setSelection(event.isActive);
+    }
+    setSelection(isActive) {
+        if (!this.candidate) {
+            return;
+        }
+        this.isSelected = isActive;
+        this.selectionChanged.emit({
+            isActive,
+            candidate: {
+                ...this.candidate,
+                isSelected: isActive,
+            },
+        });
+    }
+}
+CandidateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CandidateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateItemComponent, selector: "symphony-candidate-item", inputs: { candidate: "candidate" }, outputs: { selectionChanged: "selectionChanged" }, ngImport: i0, template: "<div class=\"sfx-candidate-item\" (click)=\"handleRowClick()\">\n  <div class=\"sfx-candidate-item__checkbox\" (click)=\"$event.stopPropagation()\">\n    <symphony-input-checkbox\n      [isActive]=\"isSelected\"\n      [isRequired]=\"false\"\n      (clicked)=\"handleCheckboxClicked($event)\"\n    ></symphony-input-checkbox>\n  </div>\n\n  <div class=\"sfx-candidate-item__details\">\n    <symphony-paragraph\n      class=\"sfx-candidate-item__name\"\n      [text]=\"candidate?.name\"\n      [fontSize]=\"'14px'\"\n      [fontWeight]=\"500\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-candidate-item__subtext\"\n      [fontSize]=\"'13px'\"\n    >\n      <span class=\"sfx-candidate-item__email\">{{ candidate?.email }}</span>\n      <span\n        class=\"sfx-candidate-item__separator\"\n        *ngIf=\"candidate?.email && candidate?.title\"\n      >&nbsp;&middot;&nbsp;</span>\n      <span class=\"sfx-candidate-item__title\">{{ candidate?.title }}</span>\n    </symphony-paragraph>\n  </div>\n\n  <div class=\"sfx-candidate-item__status\" *ngIf=\"candidate?.status\">\n    <symphony-status-pill [statusPillModel]=\"candidate.status\"></symphony-status-pill>\n  </div>\n</div>\n", styles: [".sfx-candidate-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}.sfx-candidate-item__checkbox{flex-shrink:0;display:flex;align-items:center}.sfx-candidate-item__details{flex:1;min-width:0}.sfx-candidate-item__details .sfx-candidate-item__name,.sfx-candidate-item__details .sfx-candidate-item__subtext{display:block}.sfx-candidate-item__status{flex-shrink:0;margin-left:auto}.sfx-candidate-item:hover{background-color:#f9fafb}\n"], components: [{ type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: StatusPillComponent, selector: "symphony-status-pill", inputs: ["statusPillModel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-candidate-item', template: "<div class=\"sfx-candidate-item\" (click)=\"handleRowClick()\">\n  <div class=\"sfx-candidate-item__checkbox\" (click)=\"$event.stopPropagation()\">\n    <symphony-input-checkbox\n      [isActive]=\"isSelected\"\n      [isRequired]=\"false\"\n      (clicked)=\"handleCheckboxClicked($event)\"\n    ></symphony-input-checkbox>\n  </div>\n\n  <div class=\"sfx-candidate-item__details\">\n    <symphony-paragraph\n      class=\"sfx-candidate-item__name\"\n      [text]=\"candidate?.name\"\n      [fontSize]=\"'14px'\"\n      [fontWeight]=\"500\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-candidate-item__subtext\"\n      [fontSize]=\"'13px'\"\n    >\n      <span class=\"sfx-candidate-item__email\">{{ candidate?.email }}</span>\n      <span\n        class=\"sfx-candidate-item__separator\"\n        *ngIf=\"candidate?.email && candidate?.title\"\n      >&nbsp;&middot;&nbsp;</span>\n      <span class=\"sfx-candidate-item__title\">{{ candidate?.title }}</span>\n    </symphony-paragraph>\n  </div>\n\n  <div class=\"sfx-candidate-item__status\" *ngIf=\"candidate?.status\">\n    <symphony-status-pill [statusPillModel]=\"candidate.status\"></symphony-status-pill>\n  </div>\n</div>\n", styles: [".sfx-candidate-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}.sfx-candidate-item__checkbox{flex-shrink:0;display:flex;align-items:center}.sfx-candidate-item__details{flex:1;min-width:0}.sfx-candidate-item__details .sfx-candidate-item__name,.sfx-candidate-item__details .sfx-candidate-item__subtext{display:block}.sfx-candidate-item__status{flex-shrink:0;margin-left:auto}.sfx-candidate-item:hover{background-color:#f9fafb}\n"] }]
+        }], propDecorators: { candidate: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }] } });
+
+class CandidateItemModule {
+}
+CandidateItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CandidateItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemModule, declarations: [CandidateItemComponent], imports: [CommonModule,
+        InputCheckboxModule,
+        ParagraphModule,
+        StatusPillModule], exports: [CandidateItemComponent] });
+CandidateItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemModule, imports: [[
+            CommonModule,
+            InputCheckboxModule,
+            ParagraphModule,
+            StatusPillModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CandidateItemComponent],
+                    imports: [
+                        CommonModule,
+                        InputCheckboxModule,
+                        ParagraphModule,
+                        StatusPillModule,
+                    ],
+                    exports: [CandidateItemComponent],
+                }]
+        }] });
+
+class CandidateListComponent {
+    constructor() {
+        this.candidatesValue = [];
+        this.maxHeight = '380px';
+        this.label = '';
+        this.searchPlaceholder = 'Search by Name, Email or Title';
+        this.noMatchText = 'No matches found';
+        this.errorText = 'Something went wrong. Please try again.';
+        this.isLoading = false;
+        this.hasError = false;
+        this.showSearch = true;
+        this.selectionChanged = new EventEmitter();
+        this.searchChanged = new EventEmitter();
+        this.searchTerm = '';
+        this.filteredCandidates = [];
+    }
+    set candidates(candidates) {
+        this.candidatesValue = Array.isArray(candidates) ? candidates : [];
+        this.applyFilter();
+    }
+    get candidates() {
+        return this.candidatesValue;
+    }
+    trackByCandidate(index, candidate) {
+        return candidate?.id ?? index;
+    }
+    handleSelectionChanged(event) {
+        this.selectionChanged.emit(event);
+    }
+    handleSearchChange(value) {
+        this.searchTerm = value ?? '';
+        this.applyFilter();
+        this.searchChanged.emit(this.searchTerm);
+    }
+    applyFilter() {
+        const term = this.searchTerm.trim().toLowerCase();
+        if (!term) {
+            this.filteredCandidates = [...this.candidatesValue];
+            return;
+        }
+        this.filteredCandidates = this.candidatesValue.filter((candidate) => {
+            const name = candidate?.name?.toLowerCase() ?? '';
+            const email = candidate?.email?.toLowerCase() ?? '';
+            const title = candidate?.title?.toLowerCase() ?? '';
+            return name.includes(term) || email.includes(term) || title.includes(term);
+        });
+    }
+}
+CandidateListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CandidateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateListComponent, selector: "symphony-candidate-list", inputs: { candidates: "candidates", maxHeight: "maxHeight", label: "label", searchPlaceholder: "searchPlaceholder", noMatchText: "noMatchText", errorText: "errorText", isLoading: "isLoading", hasError: "hasError", showSearch: "showSearch" }, outputs: { selectionChanged: "selectionChanged", searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"sfx-candidate-list\">\n  <div class=\"sfx-candidate-list__search\" *ngIf=\"showSearch\">\n    <symphony-input-text\n      [placeholder]=\"searchPlaceholder\"\n      icon=\"si-search-new\"\n      [label]=\"label\"\n      [isInverse]=\"false\"\n      [value]=\"searchTerm\"\n      [isDisabled]=\"false\"\n      [isLabelView]=\"false\"\n      (textChange)=\"handleSearchChange($event)\"\n    ></symphony-input-text>\n  </div>\n\n  <div class=\"sfx-candidate-list__wrapper\" [style.maxHeight]=\"maxHeight\">\n    <ng-container *ngIf=\"isLoading; else loadedState\">\n      <div class=\"sfx-candidate-list__state sfx-candidate-list__state--loading\">\n        <symphony-sfx-loader></symphony-sfx-loader>\n      </div>\n    </ng-container>\n\n    <ng-template #loadedState>\n      <ng-container *ngIf=\"hasError; else readyState\">\n        <div class=\"sfx-candidate-list__state sfx-candidate-list__state--error\">\n          <symphony-paragraph\n            class=\"sfx-candidate-list__state-message\"\n            [fontSize]=\"'14px'\"\n          >\n            {{ errorText }}\n          </symphony-paragraph>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #readyState>\n      <ng-container *ngIf=\"filteredCandidates?.length; else emptyState\">\n        <ul class=\"sfx-candidate-list__items list-unstyled\">\n          <li\n            class=\"sfx-candidate-list__item\"\n            *ngFor=\"let candidate of filteredCandidates; trackBy: trackByCandidate\"\n          >\n            <symphony-candidate-item\n              [candidate]=\"candidate\"\n              (selectionChanged)=\"handleSelectionChanged($event)\"\n            ></symphony-candidate-item>\n          </li>\n        </ul>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #emptyState>\n      <div class=\"sfx-candidate-list__state sfx-candidate-list__state--empty\">\n        <symphony-paragraph\n          class=\"sfx-candidate-list__state-message\"\n          [fontSize]=\"'14px'\"\n        >\n          {{ noMatchText }}\n        </symphony-paragraph>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".sfx-candidate-list{display:flex;flex-direction:column;gap:12px}.sfx-candidate-list__search{width:100%}.sfx-candidate-list__wrapper{border:1px solid #e5e7eb;border-radius:10px;overflow-y:auto}.sfx-candidate-list__items{margin:0;padding:0}.sfx-candidate-list__item{border-bottom:1px solid #e5e7eb}.sfx-candidate-list__item:last-child{border-bottom:none}.sfx-candidate-list__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;min-height:160px}.sfx-candidate-list__state-message{color:#4b5563}\n"], components: [{ type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: CandidateItemComponent, selector: "symphony-candidate-item", inputs: ["candidate"], outputs: ["selectionChanged"] }], 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: CandidateListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-candidate-list', template: "<div class=\"sfx-candidate-list\">\n  <div class=\"sfx-candidate-list__search\" *ngIf=\"showSearch\">\n    <symphony-input-text\n      [placeholder]=\"searchPlaceholder\"\n      icon=\"si-search-new\"\n      [label]=\"label\"\n      [isInverse]=\"false\"\n      [value]=\"searchTerm\"\n      [isDisabled]=\"false\"\n      [isLabelView]=\"false\"\n      (textChange)=\"handleSearchChange($event)\"\n    ></symphony-input-text>\n  </div>\n\n  <div class=\"sfx-candidate-list__wrapper\" [style.maxHeight]=\"maxHeight\">\n    <ng-container *ngIf=\"isLoading; else loadedState\">\n      <div class=\"sfx-candidate-list__state sfx-candidate-list__state--loading\">\n        <symphony-sfx-loader></symphony-sfx-loader>\n      </div>\n    </ng-container>\n\n    <ng-template #loadedState>\n      <ng-container *ngIf=\"hasError; else readyState\">\n        <div class=\"sfx-candidate-list__state sfx-candidate-list__state--error\">\n          <symphony-paragraph\n            class=\"sfx-candidate-list__state-message\"\n            [fontSize]=\"'14px'\"\n          >\n            {{ errorText }}\n          </symphony-paragraph>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #readyState>\n      <ng-container *ngIf=\"filteredCandidates?.length; else emptyState\">\n        <ul class=\"sfx-candidate-list__items list-unstyled\">\n          <li\n            class=\"sfx-candidate-list__item\"\n            *ngFor=\"let candidate of filteredCandidates; trackBy: trackByCandidate\"\n          >\n            <symphony-candidate-item\n              [candidate]=\"candidate\"\n              (selectionChanged)=\"handleSelectionChanged($event)\"\n            ></symphony-candidate-item>\n          </li>\n        </ul>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #emptyState>\n      <div class=\"sfx-candidate-list__state sfx-candidate-list__state--empty\">\n        <symphony-paragraph\n          class=\"sfx-candidate-list__state-message\"\n          [fontSize]=\"'14px'\"\n        >\n          {{ noMatchText }}\n        </symphony-paragraph>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".sfx-candidate-list{display:flex;flex-direction:column;gap:12px}.sfx-candidate-list__search{width:100%}.sfx-candidate-list__wrapper{border:1px solid #e5e7eb;border-radius:10px;overflow-y:auto}.sfx-candidate-list__items{margin:0;padding:0}.sfx-candidate-list__item{border-bottom:1px solid #e5e7eb}.sfx-candidate-list__item:last-child{border-bottom:none}.sfx-candidate-list__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;min-height:160px}.sfx-candidate-list__state-message{color:#4b5563}\n"] }]
+        }], propDecorators: { candidates: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], noMatchText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }], searchChanged: [{
+                type: Output
+            }] } });
+
+class CandidateListModule {
+}
+CandidateListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CandidateListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateListModule, declarations: [CandidateListComponent], imports: [CommonModule,
+        CandidateItemModule,
+        InputTextModule,
+        SfxLoaderModule,
+        ParagraphModule], exports: [CandidateListComponent] });
+CandidateListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateListModule, imports: [[
+            CommonModule,
+            CandidateItemModule,
+            InputTextModule,
+            SfxLoaderModule,
+            ParagraphModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CandidateListComponent],
+                    imports: [
+                        CommonModule,
+                        CandidateItemModule,
+                        InputTextModule,
+                        SfxLoaderModule,
+                        ParagraphModule,
+                    ],
+                    exports: [CandidateListComponent],
+                }]
+        }] });
+
 class PhaserCardComponent {
     constructor() {
         this.cardClicked = new EventEmitter();
@@ -4343,7 +4547,7 @@ class SettingsDetailNavigationItemComponent {
     }
 }
 SettingsDetailNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingsDetailNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingsDetailNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingsDetailNavigationItemComponent, selector: "symphony-settings-detail-navigation-item", inputs: { settingDetailNavigationModel: "settingDetailNavigationModel" }, outputs: { settingNavigationClicked: "settingNavigationClicked" }, ngImport: i0, template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { 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"] }], pipes: { "trimId": TrimIdPipe } });
+SettingsDetailNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingsDetailNavigationItemComponent, selector: "symphony-settings-detail-navigation-item", inputs: { settingDetailNavigationModel: "settingDetailNavigationModel" }, outputs: { settingNavigationClicked: "settingNavigationClicked" }, ngImport: i0, template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { 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"] }], pipes: { "trimId": TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingsDetailNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-settings-detail-navigation-item', template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"] }]
@@ -4376,7 +4580,7 @@ class EditableSettingItemComponent {
     }
 }
 EditableSettingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingItemComponent, selector: "symphony-editable-setting-item", inputs: { editableSettingItemModel: "editableSettingItemModel" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "trimId": TrimIdPipe } });
+EditableSettingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingItemComponent, selector: "symphony-editable-setting-item", inputs: { editableSettingItemModel: "editableSettingItemModel" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "trimId": TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-editable-setting-item', template: "<section class=\"editable-setting-wrap sfx-mb-20\">\n  <div class=\"sfx-pt-10\">\n    <symphony-paragraph class=\"sfx-font-bold\" id=\"editable-input-label-{{ editableSettingItemModel.settingLabel | trimId}}\">\n      {{ editableSettingItemModel.settingLabel }}</symphony-paragraph\n    >\n  </div>\n  <div class=\"editable-input\">\n    <input\n      id=\"editable-input-item-{{ editableSettingItemModel.settingLabel | trimId}}\"\n      type=\"{{ editableSettingItemModel.settingInputType }}\"\n      [(ngModel)]=\"editableSettingItemModel.settingInputValue\"\n      (ngModelChange)=\"onValueChange(editableSettingItemModel)\"\n      placeholder=\"{{ editableSettingItemModel.settingInputPlaceholderText }}\"\n    />\n  </div>\n</section>\n", styles: [".editable-setting-wrap{display:flex;justify-content:space-between}.editable-setting-wrap .editable-input input::-webkit-outer-spin-button,.editable-setting-wrap .editable-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editable-setting-wrap .editable-input input{width:135px;height:40px;padding-inline:10px;border-radius:4px;border:1px solid #82919f;outline:none}\n"] }]
@@ -4700,7 +4904,7 @@ class TaskStatusComponent {
     }
 }
 TaskStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskStatusComponent, selector: "symphony-task-status", inputs: { taskStatusModel: "taskStatusModel" }, outputs: { cancelTask: "cancelTask", retryTask: "retryTask" }, ngImport: i0, template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TaskStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskStatusComponent, selector: "symphony-task-status", inputs: { taskStatusModel: "taskStatusModel" }, outputs: { cancelTask: "cancelTask", retryTask: "retryTask" }, ngImport: i0, template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], 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: TaskStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-task-status', template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"] }]
@@ -4767,7 +4971,7 @@ class ColorSwatchComponent {
     }
 }
 ColorSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSwatchComponent, selector: "symphony-ui-color-explorer", inputs: { colorSwatchModel: "colorSwatchModel" }, ngImport: i0, template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""], components: [{ type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+ColorSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSwatchComponent, selector: "symphony-ui-color-explorer", inputs: { colorSwatchModel: "colorSwatchModel" }, ngImport: i0, template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""], components: [{ type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color", "isSmall"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-ui-color-explorer', template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n", styles: [""] }]
@@ -4811,7 +5015,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: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], 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", "isFontBold"] }], 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: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], 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", "isFontBold", "fontSize", "fontWeight"] }], 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"] }]
@@ -4860,7 +5064,7 @@ class InvoiceLineItemComponent {
     }
 }
 InvoiceLineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InvoiceLineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InvoiceLineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-invoice-line-item', template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"] }]
@@ -4994,6 +5198,7 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ButtonWithIconModule,
         IconWithTooltipModule,
         DocumentManagementItemModule,
+        CandidateItemModule,
         ActionBarSelectionCounterModule,
         InputTextareaModule,
         CharacterCounterModule,
@@ -5012,6 +5217,7 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FeedbackCardModule,
         FilterTabsV2Module,
         DocumentManagementItemModule,
+        CandidateItemModule,
         PhaserCardModule,
         SettingsDetailNavigationItemModule,
         TaskStatusModule] });
@@ -5032,6 +5238,7 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             ButtonWithIconModule,
             IconWithTooltipModule,
             DocumentManagementItemModule,
+            CandidateItemModule,
             ActionBarSelectionCounterModule,
             InputTextareaModule,
             CharacterCounterModule,
@@ -5051,6 +5258,7 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         FeedbackCardModule,
         FilterTabsV2Module,
         DocumentManagementItemModule,
+        CandidateItemModule,
         PhaserCardModule,
         SettingsDetailNavigationItemModule,
         TaskStatusModule] });
@@ -5064,6 +5272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FeedbackCardModule,
                         FilterTabsV2Module,
                         DocumentManagementItemModule,
+                        CandidateItemModule,
                         PhaserCardModule,
                         SettingsDetailNavigationItemModule,
                         TaskStatusModule,
@@ -5085,6 +5294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ButtonWithIconModule,
                         IconWithTooltipModule,
                         DocumentManagementItemModule,
+                        CandidateItemModule,
                         ActionBarSelectionCounterModule,
                         InputTextareaModule,
                         CharacterCounterModule,
@@ -5151,7 +5361,7 @@ class CandidateCardComponent {
     }
 }
 CandidateCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CandidateCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CandidateCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], 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: CandidateCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-candidate-card', template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"] }]
@@ -5254,7 +5464,7 @@ class FeedbackLoginModalComponent {
     }
 }
 FeedbackLoginModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], 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: FeedbackLoginModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\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>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"] }]
@@ -5393,7 +5603,7 @@ 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", getFileDetails: "getFileDetails" }, 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\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\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          (getFileDetails)=\"onFileUpload($event)\"\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", "isFontBold"] }, { 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", "hasCustomMessage"] }, { 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", getFileDetails: "getFileDetails" }, 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\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\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          (getFileDetails)=\"onFileUpload($event)\"\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", "isFontBold", "fontSize", "fontWeight"] }, { 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", "hasCustomMessage"] }, { 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\" *ngIf=\"uploadResumeModel.showResumeParseCheckbox\">\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          (getFileDetails)=\"onFileUpload($event)\"\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"] }]
@@ -5630,7 +5840,7 @@ class MergeContactsModalComponent {
     }
 }
 MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", stepCopy: "stepCopy", confirmStepCopy: "confirmStepCopy", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep", matchLabelForSuggestions: "matchLabelForSuggestions", matchLabelForAtsGroups: "matchLabelForAtsGroups", matchLabelForConfirmSuggestion: "matchLabelForConfirmSuggestion", atsGroupNotificationText: "atsGroupNotificationText" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"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          <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n            <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n          </ng-container>          \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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div\n          class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n          [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n          *ngIf=\"getStepDescription(currentStep)\"\n        >\n          <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n            <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n          </ng-container>            \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n    <ng-container>\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0) && (!model?.atsGroups || model.atsGroups.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && (model?.suggestions?.length || model?.atsGroups?.length)\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>        \n        <div class=\"card-wrapper sfx-mt-20\">\n          <div class=\"suggestion-card selected-contact-card\">\n            <div class=\"card-header\">\n              <div class=\"card-title sfx-font-bold\">\n                {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ model.selectedContact.email }}</span>\n              </div>\n              <div\n                class=\"info-row\"\n                *ngFor=\"let criterion of model.selectedContact.criteria\"\n              >\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ model.selectedContact.atsId }}</span>\n              </div>\n            </div>\n          </div>\n        </div>        \n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n      <div *ngIf=\"model.suggestions?.length\" class=\"sfx-mb-20\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForSuggestions }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n        <div class=\"ats-group-wrapper\" *ngIf=\"model.atsGroups?.length\">\n          <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n          <div class=\"sfx-mt-10\">\n            <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n          </div>       \n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n            class=\"suggestion-card\"\n          >\n          <div class=\"card-overlay\"></div>\n            <div class=\"card-header\">            \n              <div class=\"card-title sfx-font-bold\">\n                {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(atsGroup.suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(atsGroup.suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ atsGroup.suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ atsGroup.suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of atsGroup.suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card selected-contact-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ model.selectedContact.email }}</span>\n                </div>\n                <div\n                  class=\"info-row\"\n                  *ngFor=\"let criterion of model.selectedContact.criteria\"\n                >\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ model.selectedContact.atsId }}</span>\n                </div>\n              </div>\n            </div>\n          </div>          \n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card confirm-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ confirmSuggestion.email }}</span>\n                </div>\n                <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ confirmSuggestion.atsId }}</span>\n                </div>\n              </div>\n              <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n                \n                <div class=\"criteria-list\">\n                  <div class=\"match-label\">{{ matchLabelForConfirmSuggestion }}</div>\n                  <symphony-paragraph\n                    *ngFor=\"let status of confirmSuggestion.statuses\"\n                    [text]=\"status\"\n                  ></symphony-paragraph>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-container>\n  </section>\n  <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n    <ng-content></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n      <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n      <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n    </ng-container>\n    <ng-template #confirmActions>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Back\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </ng-template>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:0 10px 20px 0;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", stepCopy: "stepCopy", confirmStepCopy: "confirmStepCopy", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep", matchLabelForSuggestions: "matchLabelForSuggestions", matchLabelForAtsGroups: "matchLabelForAtsGroups", matchLabelForConfirmSuggestion: "matchLabelForConfirmSuggestion", atsGroupNotificationText: "atsGroupNotificationText" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"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          <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n            <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n          </ng-container>          \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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div\n          class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n          [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n          *ngIf=\"getStepDescription(currentStep)\"\n        >\n          <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n            <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n          </ng-container>            \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n    <ng-container>\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0) && (!model?.atsGroups || model.atsGroups.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && (model?.suggestions?.length || model?.atsGroups?.length)\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>        \n        <div class=\"card-wrapper sfx-mt-20\">\n          <div class=\"suggestion-card selected-contact-card\">\n            <div class=\"card-header\">\n              <div class=\"card-title sfx-font-bold\">\n                {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ model.selectedContact.email }}</span>\n              </div>\n              <div\n                class=\"info-row\"\n                *ngFor=\"let criterion of model.selectedContact.criteria\"\n              >\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ model.selectedContact.atsId }}</span>\n              </div>\n            </div>\n          </div>\n        </div>        \n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n      <div *ngIf=\"model.suggestions?.length\" class=\"sfx-mb-20\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForSuggestions }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n        <div class=\"ats-group-wrapper\" *ngIf=\"model.atsGroups?.length\">\n          <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n          <div class=\"sfx-mt-10\">\n            <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n          </div>       \n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n            class=\"suggestion-card\"\n          >\n          <div class=\"card-overlay\"></div>\n            <div class=\"card-header\">            \n              <div class=\"card-title sfx-font-bold\">\n                {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(atsGroup.suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(atsGroup.suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ atsGroup.suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ atsGroup.suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of atsGroup.suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card selected-contact-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ model.selectedContact.email }}</span>\n                </div>\n                <div\n                  class=\"info-row\"\n                  *ngFor=\"let criterion of model.selectedContact.criteria\"\n                >\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ model.selectedContact.atsId }}</span>\n                </div>\n              </div>\n            </div>\n          </div>          \n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card confirm-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ confirmSuggestion.email }}</span>\n                </div>\n                <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ confirmSuggestion.atsId }}</span>\n                </div>\n              </div>\n              <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n                \n                <div class=\"criteria-list\">\n                  <div class=\"match-label\">{{ matchLabelForConfirmSuggestion }}</div>\n                  <symphony-paragraph\n                    *ngFor=\"let status of confirmSuggestion.statuses\"\n                    [text]=\"status\"\n                  ></symphony-paragraph>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-container>\n  </section>\n  <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n    <ng-content></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n      <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n      <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n    </ng-container>\n    <ng-template #confirmActions>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Back\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </ng-template>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:0 10px 20px 0;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-merge-contacts-modal', template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"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          <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n            <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n          </ng-container>          \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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div\n          class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n          [ngClass]=\"{'white-space-pre-line': currentStep === 2}\"\n          *ngIf=\"getStepDescription(currentStep)\"\n        >\n          <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n            <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n          </ng-container>            \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n    <ng-container>\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0) && (!model?.atsGroups || model.atsGroups.length === 0)\" class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later.\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && (model?.suggestions?.length || model?.atsGroups?.length)\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>        \n        <div class=\"card-wrapper sfx-mt-20\">\n          <div class=\"suggestion-card selected-contact-card\">\n            <div class=\"card-header\">\n              <div class=\"card-title sfx-font-bold\">\n                {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ model.selectedContact.email }}</span>\n              </div>\n              <div\n                class=\"info-row\"\n                *ngFor=\"let criterion of model.selectedContact.criteria\"\n              >\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ model.selectedContact.atsId }}</span>\n              </div>\n            </div>\n          </div>\n        </div>        \n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n      <div *ngIf=\"model.suggestions?.length\" class=\"sfx-mb-20\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForSuggestions }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n        <div class=\"ats-group-wrapper\" *ngIf=\"model.atsGroups?.length\">\n          <symphony-h5 [text]=\"'ATS Group (' + (model?.atsGroups?.length || 0) + ')'\"></symphony-h5>\n          <div class=\"sfx-mt-10\">\n            <symphony-paragraph [text]=\"atsGroupNotificationText\"></symphony-paragraph>\n          </div>       \n        <div class=\"scrollable-container card-wrapper sfx-mt-20\">\n          <div\n            *ngFor=\"let atsGroup of model.atsGroups; let i = index\"\n            class=\"suggestion-card\"\n          >\n          <div class=\"card-overlay\"></div>\n            <div class=\"card-header\">            \n              <div class=\"card-title sfx-font-bold\">\n                {{ atsGroup.suggestion.name }} [{{ atsGroup.suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(atsGroup.suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(atsGroup.suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ atsGroup.suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of atsGroup.suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"atsGroup.suggestion.atsId\">\n                <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ atsGroup.suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"atsGroup.suggestion.statuses?.length\">          \n              <div class=\"criteria-list\">\n                <div class=\"match-label\">{{ matchLabelForAtsGroups }}</div>\n                <symphony-paragraph\n                  *ngFor=\"let status of atsGroup.suggestion.statuses\"\n                  [text]=\"status\"\n                ></symphony-paragraph>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card selected-contact-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ model.selectedContact.name }} [{{ model.selectedContact.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ model.selectedContact.email }}</span>\n                </div>\n                <div\n                  class=\"info-row\"\n                  *ngFor=\"let criterion of model.selectedContact.criteria\"\n                >\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"model.selectedContact.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ model.selectedContact.atsId }}</span>\n                </div>\n              </div>\n            </div>\n          </div>          \n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card confirm-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ confirmSuggestion.email }}</span>\n                </div>\n                <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n                  <span class=\"sfx-txt-black sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ confirmSuggestion.atsId }}</span>\n                </div>\n              </div>\n              <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n                \n                <div class=\"criteria-list\">\n                  <div class=\"match-label\">{{ matchLabelForConfirmSuggestion }}</div>\n                  <symphony-paragraph\n                    *ngFor=\"let status of confirmSuggestion.statuses\"\n                    [text]=\"status\"\n                  ></symphony-paragraph>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-container>\n  </section>\n  <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n    <ng-content></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\n      <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n      <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n    </ng-container>\n    <ng-template #confirmActions>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Back\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </ng-template>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:0 10px 20px 0;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:.875rem;font-weight:500}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:5px}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}.sfx-modal.modal-container .modal-title .white-space-pre-line{white-space:pre-line}.ats-group-wrapper .suggestion-card{position:relative}.ats-group-wrapper .suggestion-card .card-overlay:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.6);border-radius:10px;z-index:1}.ats-group-wrapper .suggestion-card .card-header .card-actions{z-index:2}\n"] }]
@@ -5738,7 +5948,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", hasActionToggle: "hasActionToggle", hasSelectionCounter: "hasSelectionCounter", hasSeparator: "hasSeparator", model: "model" }, 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()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\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-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ActionBarSelectionCounterComponent, selector: "symphony-action-bar-selection-counter", inputs: ["model", "hasSeparator"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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", hasActionToggle: "hasActionToggle", hasSelectionCounter: "hasSelectionCounter", hasSeparator: "hasSeparator", model: "model" }, 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()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\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-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ActionBarSelectionCounterComponent, selector: "symphony-action-bar-selection-counter", inputs: ["model", "hasSeparator"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: 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()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\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-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"] }]
@@ -5976,7 +6186,7 @@ class GridActionBarV2Component {
     }
 }
 GridActionBarV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionBarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionBarV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-grid-action-bar-v2', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"] }]
@@ -6107,7 +6317,7 @@ class ConfirmationModalComponent {
     }
 }
 ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>  \n                <div *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\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\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>  \n                <div *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { 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: ConfirmationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-confirmation-modal', template: "<div class=\"sfx sfx-modal\">\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\"\n                    ></symphony-h4\n                  >\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)=\"onCloseButtonClick()\"\n                  ></symphony-icon>\n                </div>  \n                <div *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""] }]
@@ -6443,7 +6653,7 @@ class AdditionalInformationCardComponent {
     }
 }
 AdditionalInformationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionalInformationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdditionalInformationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionalInformationCardComponent, selector: "symphony-additional-information-card", inputs: { additionalInformationModel: "additionalInformationModel" }, outputs: { cancelInterviewLinkClicked: "cancelInterviewLinkClicked" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "contentHeight", first: true, predicate: ["contentHeight"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"additionalInformationModel\"\n  class=\"additional-information-card-item-wrapper\"\n>\n  <div class=\"additional-information-card-icon\">\n    <symphony-icon-wrapper\n      [isInverse]=\"true\"\n      [hasHoverWithoutBorder]=\"true\"\n      [backgroundColor]=\"additionalInformationModel.iconWrapperColor\"\n    >\n      <symphony-icon\n        [icon]=\"additionalInformationModel.icon\"\n        [iconColor]=\"additionalInformationModel.iconInnerColor\"\n      ></symphony-icon>\n    </symphony-icon-wrapper>\n  </div>\n\n  <div>\n    <div\n      class=\"sfx-pb-10 sfx-font-bold\"\n      *ngIf=\"\n        additionalInformationModel.header &&\n        additionalInformationModel.headerText\"\n    >\n      <symphony-paragraph\n        >{{ additionalInformationModel.header }}:\n        {{ additionalInformationModel.headerText }}</symphony-paragraph\n      >\n    </div>\n    <div\n      *ngFor=\"\n        let information of additionalInformationModel.additionalInformation\n      \"\n      class=\"additional-information-card-description\"\n    >\n      <symphony-paragraph *ngIf=\"!information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span>{{ information.text }}</span>\n      </symphony-paragraph>\n      <symphony-paragraph *ngIf=\"information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span #contentHeight class=\"sfx-d-block\"\n          >{{ information.text }}\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"hasMore\"\n            class=\"sfx-btn-link\"\n            (click)=\"onMoreClick()\"\n            >more</a\n          >\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"!hasMore\"\n            class=\"sfx-btn-link hasLess\"\n            (click)=\"onLessClick()\"\n            >less</a\n          >\n        </span>\n      </symphony-paragraph>\n    </div>\n    <a \n      href=\"javascript:;\" \n      *ngIf=\"additionalInformationModel.cancelInterviewLink\" \n      (click)=\"onCancelInterviewLinkClicked()\"\n      >{{additionalInformationModel.cancelInterviewLink}}\n    </a>\n  </div>\n</div>\n", styles: [".additional-information-card-item-wrapper{position:relative;width:100%;display:flex;padding-block:20px}.additional-information-card-item-wrapper div:last-child{flex:1}.additional-information-card-icon{display:inline-block;float:left;padding-right:15px}.additional-information-card-icon .si-feedback-maybe{position:relative;left:-1px;top:-1px}.additional-information-card-icon .si-feedback-yes{position:relative;top:-3px}.card-wrap-text{font-size:16px;word-break:break-word;position:relative}.card-wrap-text .body-copy-primary{word-break:break-word}.card-wrap-text .body-copy-primary.truncate-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.card-wrap-text .body-copy-primary.truncate-text .sfx-btn-link{display:inline}.card-wrap-text .body-copy-primary .sfx-btn-link{font-weight:500;color:#82919f;position:absolute;bottom:0;right:0;background:#fff;display:none}.card-wrap-text .body-copy-primary .sfx-btn-link:before{content:\"...\"}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess{display:inline;position:relative}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess:before{content:\"\"}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+AdditionalInformationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionalInformationCardComponent, selector: "symphony-additional-information-card", inputs: { additionalInformationModel: "additionalInformationModel" }, outputs: { cancelInterviewLinkClicked: "cancelInterviewLinkClicked" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "contentHeight", first: true, predicate: ["contentHeight"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"additionalInformationModel\"\n  class=\"additional-information-card-item-wrapper\"\n>\n  <div class=\"additional-information-card-icon\">\n    <symphony-icon-wrapper\n      [isInverse]=\"true\"\n      [hasHoverWithoutBorder]=\"true\"\n      [backgroundColor]=\"additionalInformationModel.iconWrapperColor\"\n    >\n      <symphony-icon\n        [icon]=\"additionalInformationModel.icon\"\n        [iconColor]=\"additionalInformationModel.iconInnerColor\"\n      ></symphony-icon>\n    </symphony-icon-wrapper>\n  </div>\n\n  <div>\n    <div\n      class=\"sfx-pb-10 sfx-font-bold\"\n      *ngIf=\"\n        additionalInformationModel.header &&\n        additionalInformationModel.headerText\"\n    >\n      <symphony-paragraph\n        >{{ additionalInformationModel.header }}:\n        {{ additionalInformationModel.headerText }}</symphony-paragraph\n      >\n    </div>\n    <div\n      *ngFor=\"\n        let information of additionalInformationModel.additionalInformation\n      \"\n      class=\"additional-information-card-description\"\n    >\n      <symphony-paragraph *ngIf=\"!information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span>{{ information.text }}</span>\n      </symphony-paragraph>\n      <symphony-paragraph *ngIf=\"information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span #contentHeight class=\"sfx-d-block\"\n          >{{ information.text }}\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"hasMore\"\n            class=\"sfx-btn-link\"\n            (click)=\"onMoreClick()\"\n            >more</a\n          >\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"!hasMore\"\n            class=\"sfx-btn-link hasLess\"\n            (click)=\"onLessClick()\"\n            >less</a\n          >\n        </span>\n      </symphony-paragraph>\n    </div>\n    <a \n      href=\"javascript:;\" \n      *ngIf=\"additionalInformationModel.cancelInterviewLink\" \n      (click)=\"onCancelInterviewLinkClicked()\"\n      >{{additionalInformationModel.cancelInterviewLink}}\n    </a>\n  </div>\n</div>\n", styles: [".additional-information-card-item-wrapper{position:relative;width:100%;display:flex;padding-block:20px}.additional-information-card-item-wrapper div:last-child{flex:1}.additional-information-card-icon{display:inline-block;float:left;padding-right:15px}.additional-information-card-icon .si-feedback-maybe{position:relative;left:-1px;top:-1px}.additional-information-card-icon .si-feedback-yes{position:relative;top:-3px}.card-wrap-text{font-size:16px;word-break:break-word;position:relative}.card-wrap-text .body-copy-primary{word-break:break-word}.card-wrap-text .body-copy-primary.truncate-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.card-wrap-text .body-copy-primary.truncate-text .sfx-btn-link{display:inline}.card-wrap-text .body-copy-primary .sfx-btn-link{font-weight:500;color:#82919f;position:absolute;bottom:0;right:0;background:#fff;display:none}.card-wrap-text .body-copy-primary .sfx-btn-link:before{content:\"...\"}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess{display:inline;position:relative}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess:before{content:\"\"}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: AdditionalInformationCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-additional-information-card', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"additionalInformationModel\"\n  class=\"additional-information-card-item-wrapper\"\n>\n  <div class=\"additional-information-card-icon\">\n    <symphony-icon-wrapper\n      [isInverse]=\"true\"\n      [hasHoverWithoutBorder]=\"true\"\n      [backgroundColor]=\"additionalInformationModel.iconWrapperColor\"\n    >\n      <symphony-icon\n        [icon]=\"additionalInformationModel.icon\"\n        [iconColor]=\"additionalInformationModel.iconInnerColor\"\n      ></symphony-icon>\n    </symphony-icon-wrapper>\n  </div>\n\n  <div>\n    <div\n      class=\"sfx-pb-10 sfx-font-bold\"\n      *ngIf=\"\n        additionalInformationModel.header &&\n        additionalInformationModel.headerText\"\n    >\n      <symphony-paragraph\n        >{{ additionalInformationModel.header }}:\n        {{ additionalInformationModel.headerText }}</symphony-paragraph\n      >\n    </div>\n    <div\n      *ngFor=\"\n        let information of additionalInformationModel.additionalInformation\n      \"\n      class=\"additional-information-card-description\"\n    >\n      <symphony-paragraph *ngIf=\"!information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span>{{ information.text }}</span>\n      </symphony-paragraph>\n      <symphony-paragraph *ngIf=\"information.showMore\" class=\"card-wrap-text\">\n        <span class=\"sfx-pr-5 sfx-font-bold pull-left sfx-d-inline-block\"\n          >{{ information.label }}:</span\n        >\n        <span #contentHeight class=\"sfx-d-block\"\n          >{{ information.text }}\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"hasMore\"\n            class=\"sfx-btn-link\"\n            (click)=\"onMoreClick()\"\n            >more</a\n          >\n          <a\n            href=\"javascript:;\"\n            *ngIf=\"!hasMore\"\n            class=\"sfx-btn-link hasLess\"\n            (click)=\"onLessClick()\"\n            >less</a\n          >\n        </span>\n      </symphony-paragraph>\n    </div>\n    <a \n      href=\"javascript:;\" \n      *ngIf=\"additionalInformationModel.cancelInterviewLink\" \n      (click)=\"onCancelInterviewLinkClicked()\"\n      >{{additionalInformationModel.cancelInterviewLink}}\n    </a>\n  </div>\n</div>\n", styles: [".additional-information-card-item-wrapper{position:relative;width:100%;display:flex;padding-block:20px}.additional-information-card-item-wrapper div:last-child{flex:1}.additional-information-card-icon{display:inline-block;float:left;padding-right:15px}.additional-information-card-icon .si-feedback-maybe{position:relative;left:-1px;top:-1px}.additional-information-card-icon .si-feedback-yes{position:relative;top:-3px}.card-wrap-text{font-size:16px;word-break:break-word;position:relative}.card-wrap-text .body-copy-primary{word-break:break-word}.card-wrap-text .body-copy-primary.truncate-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.card-wrap-text .body-copy-primary.truncate-text .sfx-btn-link{display:inline}.card-wrap-text .body-copy-primary .sfx-btn-link{font-weight:500;color:#82919f;position:absolute;bottom:0;right:0;background:#fff;display:none}.card-wrap-text .body-copy-primary .sfx-btn-link:before{content:\"...\"}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess{display:inline;position:relative}.card-wrap-text .body-copy-primary .sfx-btn-link.hasLess:before{content:\"\"}\n"] }]
@@ -6557,7 +6767,7 @@ class AdditionModalComponent {
     }
 }
 AdditionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\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>\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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n", components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\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>\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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n", components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { 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: AdditionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-addition-modal', template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\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>\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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n" }]
@@ -6618,7 +6828,7 @@ class NoteComponent {
     }
 }
 NoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-note', template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"] }]
@@ -6704,7 +6914,7 @@ class TaskComponent {
     }
 }
 TaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"], components: [{ type: TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"], components: [{ type: TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-task', template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"] }]
@@ -6795,7 +7005,7 @@ class TypographyComponent {
     }
 }
 TypographyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TypographyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TypographyComponent, selector: "symphony-typography", inputs: { title: "title", typographyModel: "typographyModel" }, ngImport: i0, template: "<div class=\"sfx-typography\">\n  <ul class=\"typography-list list-unstyled\">\n    <li class=\"typography-list-item\">\n      <symphony-h1\n        [text]=\"typographyModel.h1Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h1>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h2\n        [text]=\"typographyModel.h2Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h2>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h3\n        [text]=\"typographyModel.h3Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h3>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h4\n        [text]=\"typographyModel.h4Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h4>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h5\n        [text]=\"typographyModel.h5Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h5>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-paragraph\n        [text]=\"typographyModel.paragraphText\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</div>\n", styles: [".typography-list-item{padding:10px 0;border-bottom:1px solid #bababa}\n"], components: [{ type: H1Component, selector: "symphony-h1", inputs: ["text", "isSecondary"] }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+TypographyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TypographyComponent, selector: "symphony-typography", inputs: { title: "title", typographyModel: "typographyModel" }, ngImport: i0, template: "<div class=\"sfx-typography\">\n  <ul class=\"typography-list list-unstyled\">\n    <li class=\"typography-list-item\">\n      <symphony-h1\n        [text]=\"typographyModel.h1Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h1>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h2\n        [text]=\"typographyModel.h2Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h2>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h3\n        [text]=\"typographyModel.h3Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h3>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h4\n        [text]=\"typographyModel.h4Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h4>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h5\n        [text]=\"typographyModel.h5Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h5>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-paragraph\n        [text]=\"typographyModel.paragraphText\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</div>\n", styles: [".typography-list-item{padding:10px 0;border-bottom:1px solid #bababa}\n"], components: [{ type: H1Component, selector: "symphony-h1", inputs: ["text", "isSecondary"] }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TypographyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-typography', template: "<div class=\"sfx-typography\">\n  <ul class=\"typography-list list-unstyled\">\n    <li class=\"typography-list-item\">\n      <symphony-h1\n        [text]=\"typographyModel.h1Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h1>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h2\n        [text]=\"typographyModel.h2Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h2>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h3\n        [text]=\"typographyModel.h3Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h3>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h4\n        [text]=\"typographyModel.h4Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h4>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-h5\n        [text]=\"typographyModel.h5Text\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-h5>\n    </li>\n    <li class=\"typography-list-item\">\n      <symphony-paragraph\n        [text]=\"typographyModel.paragraphText\"\n        [isSecondary]=\"typographyModel.isSecondary\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</div>\n", styles: [".typography-list-item{padding:10px 0;border-bottom:1px solid #bababa}\n"] }]
@@ -7653,7 +7863,7 @@ class FeedbackCandidateWorkHistoryComponent {
     constructor() { }
 }
 FeedbackCandidateWorkHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateWorkHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: { workHistories: "workHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackCandidateWorkHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: { workHistories: "workHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], 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: FeedbackCandidateWorkHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-candidate-workhistory', encapsulation: ViewEncapsulation.None, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let history of workHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"history.jobTitle\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"history.companyName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ history.startDate }} - {{ history.endDate }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
@@ -7665,7 +7875,7 @@ class FeedbackCandidateEducationComponent {
     constructor() { }
 }
 FeedbackCandidateEducationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateEducationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: { educationHistories: "educationHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FeedbackCandidateEducationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: { educationHistories: "educationHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-candidate-education', template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let education of educationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"education.collegeName\"\n      ></symphony-h3>\n      <symphony-paragraph\n        class=\"sfx-font-bold sfx-d-block sfx-mb-5\"\n        [text]=\"education.courseName\"\n      ></symphony-paragraph>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ education.startYear }} - {{ education.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"education.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"education.status\"></symphony-paragraph>\n    </li>\n  </ul>\n</section>\n", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
@@ -7677,7 +7887,7 @@ class FeedbackCandidateCertificationsComponent {
     constructor() { }
 }
 FeedbackCandidateCertificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackCandidateCertificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: { certificationHistories: "certificationHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FeedbackCandidateCertificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: { certificationHistories: "certificationHistories" }, ngImport: i0, template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-candidate-certifications', template: "<section>\n  <ul class=\"list-unstyled sfx-mt-30 sfx-mb-0\">\n    <li *ngFor=\"let certifications of certificationHistories\" class=\"sfx-mb-40\">\n      <symphony-h3\n        class=\"sfx-d-block sfx-mb-10\"\n        [text]=\"certifications.name\"\n      ></symphony-h3>\n      <symphony-paragraph class=\"sfx-d-block sfx-mb-5\"\n        >{{ certifications.startYear }} -\n        {{ certifications.endYear }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        class=\"sfx-d-block sfx-mb-15\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></symphony-paragraph>\n    </li>\n  </ul>\n</section>", styles: [".sfx .sfx-font-bold p{font-family:neuzeit_groteskbold,sans-serif}.border-bottom{border-bottom:1px solid #d9d9d9}@media (max-width: 767px){.list-unstyled.sfx-mt-40{margin-top:35px}}\n"] }]
@@ -7689,7 +7899,7 @@ class FeedbackDetailCandidateInfoComponent {
     constructor() { }
 }
 FeedbackDetailCandidateInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-candidate-info', encapsulation: ViewEncapsulation.None, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]
@@ -7866,7 +8076,7 @@ class AssignedToWidgetComponent {
     }
 }
 AssignedToWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignedToWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssignedToWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignedToWidgetComponent, selector: "symphony-assigned-to-widget", inputs: { assignWidgetModel: "assignWidgetModel" }, outputs: { addClick: "addClick" }, ngImport: i0, template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"], components: [{ type: WidgetListContainerTemplateComponent, selector: "symphony-widget-list-container-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: WidgetListTemplateComponent, selector: "symphony-widget-list-template" }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AssignedToWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignedToWidgetComponent, selector: "symphony-assigned-to-widget", inputs: { assignWidgetModel: "assignWidgetModel" }, outputs: { addClick: "addClick" }, ngImport: i0, template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"], components: [{ type: WidgetListContainerTemplateComponent, selector: "symphony-widget-list-container-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: WidgetListTemplateComponent, selector: "symphony-widget-list-template" }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignedToWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-assigned-to-widget', template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"] }]
@@ -8193,7 +8403,7 @@ class AISearchAssistantDrawerComponent {
     }
 }
 AISearchAssistantDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "showUndoRedoButtons", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "redoButtonId", "redoDisabled", "redoButtonIcon"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe }, encapsulation: i0.ViewEncapsulation.None });
+AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "showUndoRedoButtons", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "redoButtonId", "redoDisabled", "redoButtonIcon"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-ai-search-assistant-drawer', encapsulation: ViewEncapsulation.None, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"] }]
@@ -8309,7 +8519,7 @@ class SaveSearchModalComponent {
     }
 }
 SaveSearchModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SaveSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SaveSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SaveSearchModalComponent, selector: "symphony-save-search-modal", inputs: { model: "model" }, outputs: { saveClicked: "saveClicked", closeClicked: "closeClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SaveSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SaveSearchModalComponent, selector: "symphony-save-search-modal", inputs: { model: "model" }, outputs: { saveClicked: "saveClicked", closeClicked: "closeClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SaveSearchModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-save-search-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{ model?.title }}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onClose()\"></symphony-icon>\n\n  <!-- Loading State -->\n  <section *ngIf=\"model?.isLoading\" class=\"sfx-pt-40 sfx-pb-40\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n\n  <!-- Default State -->\n  <section *ngIf=\"!model?.isLoading\" class=\"sfx-p-30\" sfx-modal-body-area>\n    <symphony-paragraph>{{ model?.bodyText }}</symphony-paragraph>\n    <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n     <div class=\"sfx-d-flex gap-10\" *ngIf=\"model?.errorText\">\n        <symphony-icon [size]=\"'18px'\" [iconColor]=\"'#AC4463'\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n        <symphony-paragraph>{{ model?.errorText }}</symphony-paragraph>\n     </div>    \n  </section>\n\n  <symphony-button-v2\n    sfx-button-secondary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.cancelButtonText || 'Close'\"\n    [isSecondary]=\"true\"\n    (clicked)=\"onClose()\"\n  ></symphony-button-v2>\n  <symphony-button-v2\n    sfx-button-primary\n    class=\"pull-right sfx-d-flex\"\n    [text]=\"model?.confirmButtonText || 'Save'\"\n    [disabled]=\"model?.isSaveDisabled\"\n    (clicked)=\"onSave()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".gap-10{gap:10px}\n"] }]
@@ -8920,7 +9130,7 @@ class SettingListPageComponent {
     }
 }
 SettingListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], 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: SettingListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-setting-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]
@@ -9037,7 +9247,7 @@ class InputEditableTextComponent {
     }
 }
 InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
+InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n  <div *ngIf=\"!model.isInEditMode\">\n    <div class=\"flex sfx-pt-10\">\n      <div>\n        <symphony-paragraph\n          >{{ model.inputMask\n          }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n        >\n      </div>\n      <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n        <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n      </div>\n      <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"model.isInEditMode\"\n    class=\"editMode\"\n    [ngClass]=\"{\n      invalid: model.isInvalid\n    }\"\n  >\n    <span class=\"sfx-pr-10\"\n      ><input\n        type=\"{{ type }}\"\n        *ngIf=\"maxMinPlaceholder\"\n        [placeholder]=\"maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n      <input\n        type=\"{{ type }}\"\n        *ngIf=\"!maxMinPlaceholder\"\n        [(ngModel)]=\"model.value\"\n        [ngClass]=\"{\n          'min-max-placeholder': model.minValue && model.maxValue\n        }\"\n        (keyup)=\"onValidate($event)\"\n      />\n    </span>\n    <span class=\"edit-i-postion\"\n      ><symphony-icon\n        [ngClass]=\"{\n          'invalid-confirm': model.isInvalid\n        }\"\n        [icon]=\"'si-confirmation'\"\n        (click)=\"onConfirmClick()\"\n      ></symphony-icon\n    ></span>\n    <span class=\"sfx-ml-10 edit-i-postion\"\n      ><symphony-icon\n        [icon]=\"'si-close-modal'\"\n        (click)=\"onCloseClick()\"\n      ></symphony-icon\n    ></span>\n  </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.color-sample-small{float:left;border-radius:50%;height:15px;width:15px;margin:12% 5px 5px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
@@ -9368,7 +9578,7 @@ class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]
@@ -9444,7 +9654,7 @@ class AdvertiseOrderReviewComponent {
     constructor() { }
 }
 AdvertiseOrderReviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseOrderReviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review", ngImport: i0, template: "<section class=\"advertise-review-wrap\">\n  <div class=\"sfx-mb-20\">\n    <symphony-h4>Please review your order for accuracy</symphony-h4>\n  </div>\n  <symphony-paragraph>Once you click <span class=\"sfx-font-bold\">Buy</span>, SmashFlyX will process the postings to the selected boards.</symphony-paragraph>\n</section>\n", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+AdvertiseOrderReviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review", ngImport: i0, template: "<section class=\"advertise-review-wrap\">\n  <div class=\"sfx-mb-20\">\n    <symphony-h4>Please review your order for accuracy</symphony-h4>\n  </div>\n  <symphony-paragraph>Once you click <span class=\"sfx-font-bold\">Buy</span>, SmashFlyX will process the postings to the selected boards.</symphony-paragraph>\n</section>\n", styles: [""], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseOrderReviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-order-review', template: "<section class=\"advertise-review-wrap\">\n  <div class=\"sfx-mb-20\">\n    <symphony-h4>Please review your order for accuracy</symphony-h4>\n  </div>\n  <symphony-paragraph>Once you click <span class=\"sfx-font-bold\">Buy</span>, SmashFlyX will process the postings to the selected boards.</symphony-paragraph>\n</section>\n", styles: [""] }]
@@ -9580,7 +9790,7 @@ class LibrariesPageComponent {
     }
 }
 LibrariesPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LibrariesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+LibrariesPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LibrariesPageComponent, selector: "symphony-libraries-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], 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: LibrariesPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-libraries-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]
@@ -9642,7 +9852,7 @@ class FeedbackListPageComponent {
     }
 }
 FeedbackListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackListPageComponent, selector: "symphony-feedback-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"], components: [{ type: FeedbackListTemplateComponent, selector: "symphony-feedback-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: FeedbackCardListComponent, selector: "symphony-feedback-card-list", inputs: ["feedbackCardList"], outputs: ["cardClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-feedback-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>Feedback Request</symphony-h3>\n\n  <symphony-feedback-card-list\n    *ngIf=\"!model.isLoading\"\n    feedback-card-list\n    [feedbackCardList]=\"model.feedbackCardList\"\n    (cardClick)=\"onCardClick($event)\"\n  ></symphony-feedback-card-list>\n\n  <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-sfx-loader [message]=\"model.message\"></symphony-sfx-loader>\n  </div>\n  <div *ngIf=\"model.errorMessage\" class=\"sfx-mt-80 sfx-mb-40\" feedback-card-list>\n    <symphony-paragraph class=\"text-center\">{{model.errorMessage}}</symphony-paragraph>\n  </div>\n</symphony-feedback-list-template>\n", styles: [".card-list{padding:5px}.sfx .sfx-page-title .h3-primary{margin-top:30px}@media (max-width: 767px){.pull-right{float:none!important}.pull-right .btn{margin-top:20px}}\n"] }]
@@ -9764,7 +9974,7 @@ class FeedbackDetailInterestFormComponent {
     }
 }
 FeedbackDetailInterestFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save", commentsTextChange: "commentsTextChange", formUpdated: "formUpdated" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputLimitedTextComponent, selector: "symphony-input-limited-text", inputs: ["textAreamodel", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textChange"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save", commentsTextChange: "commentsTextChange", formUpdated: "formUpdated" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputLimitedTextComponent, selector: "symphony-input-limited-text", inputs: ["textAreamodel", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textChange"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-interest-form', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"] }]
@@ -10194,7 +10404,7 @@ class LinkedinPremiumJobPostingsModalComponent {
     }
 }
 LinkedinPremiumJobPostingsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading", title: "title", subtitle: "subtitle", subtitleLink: "subtitleLink" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading", title: "title", subtitle: "subtitle", subtitleLink: "subtitleLink" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-linkedin-premium-job-postings-modal', template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"] }]
@@ -10263,7 +10473,7 @@ class AdvanceSearchModalComponent {
     }
 }
 AdvanceSearchModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
+AdvanceSearchModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvanceSearchModalComponent, selector: "symphony-advance-search-modal", inputs: { checkboxList: "checkboxList" }, outputs: { keywordSearchChange: "keywordSearchChange", closeButtonClicked: "closeButtonClicked", checkboxClicked: "checkboxClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputCheckboxListComponent, selector: "symphony-input-checkbox-list", inputs: ["checkboxList"], outputs: ["checkboxClicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvanceSearchModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advance-search-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>Select your filters</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n\n  <symphony-two-column-body-template [showHeader]=\"true\" sfx-modal-body-area>\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Data Sets'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n\n    <symphony-paragraph\n      class=\"sfx-d-flex sfx-mt-15\"\n      sfx-right-col-header\n      [isSecondary]=\"false\"\n      [isFontBold]=\"true\"\n    >Active Filters</symphony-paragraph>\n\n    <div class=\"select-list\" sfx-left-column [style.height.px]=\"getElementHeight.offsetHeight\">\n      <symphony-input-checkbox-list\n        [checkboxList]=\"checkboxList\"\n        (checkboxClicked)=\"onCheckboxClicked($event)\"\n      ></symphony-input-checkbox-list>\n    </div>\n    \n    <div sfx-right-column class=\"sfx-pr-10\" #getElementHeight>\n      <div>\n        <ng-content ngProjectAs=\"[filter1]\" select=\"[filter1]\"></ng-content>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'See Results'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"false\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n", styles: [".select-list{min-height:450px;overflow-y:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
@@ -10331,7 +10541,7 @@ class ChatbotHistoryModalComponent {
     }
 }
 ChatbotHistoryModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChatbotHistoryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatbotHistoryModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatbotHistoryModalComponent, selector: "symphony-chatbot-history-modal", inputs: { chatbotHistoryModel: "chatbotHistoryModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ChatHistoryMessageListComponent, selector: "symphony-chat-history-message-list", inputs: ["messageItemsList"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ChatbotHistoryModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatbotHistoryModalComponent, selector: "symphony-chatbot-history-modal", inputs: { chatbotHistoryModel: "chatbotHistoryModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ChatHistoryMessageListComponent, selector: "symphony-chat-history-message-list", inputs: ["messageItemsList"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChatbotHistoryModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-chatbot-history-modal', template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"] }]
@@ -10386,7 +10596,7 @@ class CalendarAvailabilityModalComponent {
     }
 }
 CalendarAvailabilityModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-calendar-availability-modal', template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""] }]
@@ -10452,7 +10662,7 @@ class NotificationModalComponent {
     }
 }
 NotificationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationModalComponent, selector: "symphony-notification-modal", inputs: { model: "model" }, outputs: { closeButtonClicked: "closeButtonClicked", primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: ["model"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+NotificationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationModalComponent, selector: "symphony-notification-modal", inputs: { model: "model" }, outputs: { closeButtonClicked: "closeButtonClicked", primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: ["model"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: NotificationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-notification-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"] }]
@@ -10798,7 +11008,7 @@ class EditableSettingPartialPageComponent {
     }
 }
 EditableSettingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""] }]
@@ -10939,7 +11149,7 @@ class ToggleListPartialPageComponent {
     }
 }
 ToggleListPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ToggleListPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleListPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ToggleListPartialPageComponent, selector: "symphony-toggle-list-partial-page", inputs: { model: "model" }, outputs: { updateSettingToggle: "updateSettingToggle", addButtonClick: "addButtonClick" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"], components: [{ type: LabelledToggleListComponent, selector: "symphony-labelled-toggle-list", inputs: ["modelList"], outputs: ["toggleListItemValue"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover", "isDisabled"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ToggleListPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ToggleListPartialPageComponent, selector: "symphony-toggle-list-partial-page", inputs: { model: "model" }, outputs: { updateSettingToggle: "updateSettingToggle", addButtonClick: "addButtonClick" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"], components: [{ type: LabelledToggleListComponent, selector: "symphony-labelled-toggle-list", inputs: ["modelList"], outputs: ["toggleListItemValue"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover", "isDisabled"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ToggleListPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-toggle-list-partial-page', template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"] }]
@@ -10963,7 +11173,7 @@ class DomainWhitelistingPartialPageComponent {
     }
 }
 DomainWhitelistingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DomainWhitelistingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DomainWhitelistingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DomainWhitelistingPartialPageComponent, selector: "symphony-domain-whitelisting-partial-page", inputs: { model: "model" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextareaComponent, selector: "symphony-input-textarea", inputs: ["model", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textAreaChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DomainWhitelistingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DomainWhitelistingPartialPageComponent, selector: "symphony-domain-whitelisting-partial-page", inputs: { model: "model" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InputTextareaComponent, selector: "symphony-input-textarea", inputs: ["model", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textAreaChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DomainWhitelistingPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-domain-whitelisting-partial-page', template: "<div *ngIf=\"model\">\n    <h3 sfx-header>{{ model.pageTitle }}</h3>\n    <div class=\"sfx-pt-20 sfx-border-top-gray-1 sfx-pb-5 sfx-font-bold\">\n        <symphony-paragraph>\n            {{model.title}}\n        </symphony-paragraph>\n    </div>\n    <div>\n        <symphony-paragraph>\n            {{model.description}}\n        </symphony-paragraph>\n    </div>\n    <div class=\"sfx-pt-20 sfx-pl-30\">\n        <div class=\"sfx-pb-20\">\n            <symphony-paragraph class=\"sfx-font-bold\">\n                {{model.heading}}\n            </symphony-paragraph>\n            <symphony-paragraph>\n                {{model.text}}\n            </symphony-paragraph>\n        </div>\n        <div *ngIf=\"!model.isLoading && model.whitelistedDomains\" class=\"whitelist-domains\">\n            <symphony-input-textarea class=\"text-box\" [model]=\"model.whitelistedDomains\"\n                (textAreaChanged)=\"onTextChanged($event)\">\n            </symphony-input-textarea>\n            <symphony-button-v2 class=\"button sfx-pt-10\" (click)=\"onClick()\" [text]=\"model.buttonText\"> </symphony-button-v2>\n        </div>\n        <div *ngIf=\"!model.isLoading && !model.whitelistedDomains\" class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\">\n            {{model.message}}\n        </div>\n        <div *ngIf=\"model.isLoading\" class=\"sfx-mt-80 sfx-mb-40\">\n            <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n    </div>\n</div>", styles: [".text-box{width:100%;display:block}.whitelist-domains{min-width:250px;padding-right:45%}.button{float:right}\n"] }]
@@ -11143,7 +11353,7 @@ class AssignToUserModalComponent {
     }
 }
 AssignToUserModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-assign-to-user-modal', template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""] }]
@@ -11219,7 +11429,7 @@ class SymphonyModalComponent {
     }
 }
 SymphonyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SymphonyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SymphonyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SymphonyModalComponent, selector: "symphony-modal", inputs: { model: "model" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SymphonyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SymphonyModalComponent, selector: "symphony-modal", inputs: { model: "model" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SymphonyModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"] }]
@@ -11334,7 +11544,7 @@ class ReportLicenseDetailsPageComponent {
     }
 }
 ReportLicenseDetailsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportLicenseDetailsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"], components: [{ type: StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu", "hasSorting", "masterDetail", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "isRowMaster", "context"], outputs: ["sortChanged", "cellClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"], components: [{ type: StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu", "hasSorting", "masterDetail", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "isRowMaster", "context"], outputs: ["sortChanged", "cellClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], 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: ReportLicenseDetailsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-report-license-details-page', template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"] }]
@@ -11465,7 +11675,7 @@ class SmsUsageReportPageComponent {
     }
 }
 SmsUsageReportPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SmsUsageReportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmsUsageReportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SmsUsageReportPageComponent, selector: "symphony-sms-usage-report-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+SmsUsageReportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SmsUsageReportPageComponent, selector: "symphony-sms-usage-report-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }], 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: SmsUsageReportPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-sms-usage-report-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"] }]
@@ -11670,5 +11880,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AISearchAssistantDrawerComponent, AISearchAssistantDrawerModule, ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdditionModalComponent, AdditionModalModule, AdditionalInformationCardListComponent, AdditionalInformationCardListModule, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AssignToUserModalComponent, AssignToUserModalModule, AssignedToWidgetComponent, AssignedToWidgetModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, BulkImportAdminListPageComponent, BulkImportAdminListPageModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, ButtonV2Component, ButtonV2Module, ButtonWithIconComponent, ButtonWithIconModule, CalendarAvailabilityModalComponent, CalendarAvailabilityModalModule, CandidateCardComponent, CandidateCardModule, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ChatHistoryDateStampComponent, ChatHistoryDateStampModule, ChatHistoryMessageAvatarComponent, ChatHistoryMessageAvatarModule, ChatHistoryMessageBubbleComponent, ChatHistoryMessageBubbleModule, ChatHistoryMessageItemComponent, ChatHistoryMessageItemModule, ChatHistoryMessageListComponent, ChatHistoryMessageListModule, ChatbotHistoryModalComponent, ChatbotHistoryModalModule, ColorNames, ColoredTextIndicatorComponent, ColoredTextIndicatorModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, CreateSessionPageTemplateComponent, CreateSessionPageTemplateModule, CustomDetailWithGridComponent, CustomDetailWithGridModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, DomainWhitelistingPartialPageComponent, DomainWhitelistingPartialPageModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FeedbackSettingDetailsPageComponent, FeedbackSettingDetailsPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FilterDetailComponent, FilterDetailModule, FilterDetailTreeComponent, FilterDetailTreeModule, FilterTabsComponent, FilterTabsModule, FilterTabsV2Component, FilterTabsV2Module, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GenerateLicenseModalComponent, GenerateLicenseModalModule, GridActionBarV2Component, GridActionBarV2Module, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellClickedOpenNewTabComponent, GridCellClickedOpenNewTabModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InformationModalComponent, InformationModalModule, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputFileUploadComponent, InputFileUploadModule, InputLimitedTextComponent, InputLimitedTextModule, InputNumberComponent, InputNumberModule, InputRadioComponent, InputRadioModule, InputRadioToggleComponent, InputRadioToggleModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputTextareaWithSendComponent, InputTextareaWithSendModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MergeContactClickedOpenModalComponent, MergeContactClickedOpenModalModule, MergeContactsModalComponent, MergeContactsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationModalComponent, NotificationModalModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PartialPages, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, ReportLicenseDetailsPageComponent, ReportLicenseDetailsPageModule, ReportsCardComponent, ReportsCardListComponent, ReportsCardListModule, ReportsCardModule, ReportsPageComponent, ReportsPageModule, SaveSearchModalComponent, SaveSearchModalModule, ScheduleInterviewModalComponent, ScheduleInterviewModalModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SettingsLicenseManagementComponent, SettingsLicenseManagementModule, SettingsReportManagementComponent, SettingsReportManagementModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, SmsUsageReportPageComponent, SmsUsageReportPageModule, StatusCardComponent, StatusCardModule, StatusIndicatorComponent, StatusIndicatorModule, StatusPillComponent, StatusPillModule, SymphonyModalComponent, SymphonyModalModule, TabsComponent, TabsModules, TaskStatusComponent, TaskStatusModule, TemplatesModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
+export { AISearchAssistantDrawerComponent, AISearchAssistantDrawerModule, ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdditionModalComponent, AdditionModalModule, AdditionalInformationCardListComponent, AdditionalInformationCardListModule, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AssignToUserModalComponent, AssignToUserModalModule, AssignedToWidgetComponent, AssignedToWidgetModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, BulkImportAdminListPageComponent, BulkImportAdminListPageModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, ButtonV2Component, ButtonV2Module, ButtonWithIconComponent, ButtonWithIconModule, CalendarAvailabilityModalComponent, CalendarAvailabilityModalModule, CandidateCardComponent, CandidateCardModule, CandidateItemComponent, CandidateItemModule, CandidateListComponent, CandidateListModule, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ChatHistoryDateStampComponent, ChatHistoryDateStampModule, ChatHistoryMessageAvatarComponent, ChatHistoryMessageAvatarModule, ChatHistoryMessageBubbleComponent, ChatHistoryMessageBubbleModule, ChatHistoryMessageItemComponent, ChatHistoryMessageItemModule, ChatHistoryMessageListComponent, ChatHistoryMessageListModule, ChatbotHistoryModalComponent, ChatbotHistoryModalModule, ColorNames, ColoredTextIndicatorComponent, ColoredTextIndicatorModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, CreateSessionPageTemplateComponent, CreateSessionPageTemplateModule, CustomDetailWithGridComponent, CustomDetailWithGridModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, DomainWhitelistingPartialPageComponent, DomainWhitelistingPartialPageModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FeedbackSettingDetailsPageComponent, FeedbackSettingDetailsPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FilterDetailComponent, FilterDetailModule, FilterDetailTreeComponent, FilterDetailTreeModule, FilterTabsComponent, FilterTabsModule, FilterTabsV2Component, FilterTabsV2Module, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GenerateLicenseModalComponent, GenerateLicenseModalModule, GridActionBarV2Component, GridActionBarV2Module, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellClickedOpenNewTabComponent, GridCellClickedOpenNewTabModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InformationModalComponent, InformationModalModule, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputFileUploadComponent, InputFileUploadModule, InputLimitedTextComponent, InputLimitedTextModule, InputNumberComponent, InputNumberModule, InputRadioComponent, InputRadioModule, InputRadioToggleComponent, InputRadioToggleModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputTextareaWithSendComponent, InputTextareaWithSendModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MergeContactClickedOpenModalComponent, MergeContactClickedOpenModalModule, MergeContactsModalComponent, MergeContactsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationModalComponent, NotificationModalModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PartialPages, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, ReportLicenseDetailsPageComponent, ReportLicenseDetailsPageModule, ReportsCardComponent, ReportsCardListComponent, ReportsCardListModule, ReportsCardModule, ReportsPageComponent, ReportsPageModule, SaveSearchModalComponent, SaveSearchModalModule, ScheduleInterviewModalComponent, ScheduleInterviewModalModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SettingsLicenseManagementComponent, SettingsLicenseManagementModule, SettingsReportManagementComponent, SettingsReportManagementModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, SmsUsageReportPageComponent, SmsUsageReportPageModule, StatusCardComponent, StatusCardModule, StatusIndicatorComponent, StatusIndicatorModule, StatusPillComponent, StatusPillModule, SymphonyModalComponent, SymphonyModalModule, TabsComponent, TabsModules, TaskStatusComponent, TaskStatusModule, TemplatesModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library.mjs.map