@symphony-talent/component-library 3.15.0 → 3.16.0

package/fesm2015/symphony-talent-component-library-projects-component-library.mjs

@@ -14,6 +14,8 @@ import { Subject, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
 import * as i1$3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import * as i1$4 from 'ngx-bootstrap/accordion';
+import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 class AvatarComponent {
     constructor() { }
@@ -380,6 +382,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
             args: [{ selector: 'symphony-relevance-score', template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>", styles: [".relevance-score-bg{height:38px;width:38px;background-color:#fff;border-radius:50%;display:inline-block;color:#000;text-align:center}.relevance-score-value{border:1px solid black;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; } });
 
+class GridLoadingCellComponent {
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.params = params;
+    }
+}
+GridLoadingCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridLoadingCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GridLoadingCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridLoadingCellComponent, selector: "symphony-grid-cell-loader", ngImport: i0, template: "<div\n  class=\"ag-custom-loading-cell sfx-loader-center\"\n>\n  <div class=\"sfx-d-inline-block sfx-wid-100\">\n    <span class=\"sfxGridContentLoader\"></span> <span class=\"sfx-pl-10 sfx-d-inline-block sfx-mt-5 pull-left\">Loading...</span></div>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.sfx-loader-center{position:absolute;top:-13px;left:48%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridLoadingCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-grid-cell-loader', template: "<div\n  class=\"ag-custom-loading-cell sfx-loader-center\"\n>\n  <div class=\"sfx-d-inline-block sfx-wid-100\">\n    <span class=\"sfxGridContentLoader\"></span> <span class=\"sfx-pl-10 sfx-d-inline-block sfx-mt-5 pull-left\">Loading...</span></div>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.sfx-loader-center{position:absolute;top:-13px;left:48%}\n"] }]
+        }] });
+
 class GridComponent {
     constructor() {
         this.pageSize = 20;
@@ -401,6 +418,7 @@ class GridComponent {
             fitScore: RelevanceScoreComponent,
             gridToggle: GridToggleCellRendererComponent,
             moreActions: EventSettingsMoreOptionsComponent,
+            loadingCellRenderer: GridLoadingCellComponent,
         };
     }
     onGridReady(gridReadyEvent) {
@@ -497,16 +515,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class GridCellLoaderModule {
+}
+GridCellLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridCellLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellLoaderModule, declarations: [GridLoadingCellComponent], imports: [CommonModule], exports: [GridLoadingCellComponent] });
+GridCellLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellLoaderModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridCellLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GridLoadingCellComponent],
+                    imports: [CommonModule],
+                    exports: [GridLoadingCellComponent]
+                }]
+        }] });
+
 class FrameworkModule {
 }
 FrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 FrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, exports: [ContactActivityScoreModule,
         RelevanceScoreModule,
         GridToggleCellRendererModule,
+        GridCellLoaderModule,
         EventSettingsMoreOptionsModule] });
 FrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, imports: [[], ContactActivityScoreModule,
         RelevanceScoreModule,
         GridToggleCellRendererModule,
+        GridCellLoaderModule,
         EventSettingsMoreOptionsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FrameworkModule, decorators: [{
             type: NgModule,
@@ -517,6 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ContactActivityScoreModule,
                         RelevanceScoreModule,
                         GridToggleCellRendererModule,
+                        GridCellLoaderModule,
                         EventSettingsMoreOptionsModule,
                     ],
                 }]
@@ -944,10 +979,10 @@ class InputDropdownComponent {
     }
 }
 InputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-filter-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-filter-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-filter-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-filter-dropdown{min-width:100%}.sfx-filter-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-filter-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-filter-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-filter-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-filter-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-filter-dropdown ::-webkit-scrollbar{width:10px}.sfx-filter-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-filter-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-filter-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-filter-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-filter-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-filter-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-filter-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-filter-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-filter-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-filter-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-filter-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-filter-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-filter-dropdown{min-width:100%}.sfx-filter-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-filter-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-filter-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-filter-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-filter-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-filter-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-filter-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-filter-dropdown ::-webkit-scrollbar{width:10px}.sfx-filter-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-filter-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-filter-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-filter-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-filter-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-filter-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-filter-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-filter-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-filter-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"] }]
+            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n  </button>\n  <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:12px;top:17px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px #0003;background:#fff;width:100%;border:none;max-height:280px;overflow-y:scroll;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px #0003}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:red!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
                 type: Input
             }], disableBtn: [{
@@ -1059,10 +1094,10 @@ class InputTextComponent {
     }
 }
 InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", noMargin: "noMargin" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse,\n    'no-margin': noMargin\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:11px}.input-text-wrap.no-margin .input-text-label{margin-left:0rem}.input-text-wrap.no-margin .input-text{margin:0;width:100%}.input-text-wrap.no-margin symphony-icon{right:15px;bottom:6px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", noMargin: "noMargin" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse,\n    'no-margin': noMargin\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:11px}.input-text-wrap.no-margin .input-text-label{margin-left:0rem}.input-text-wrap.no-margin .input-text{margin:0;width:100%}.input-text-wrap.no-margin symphony-icon{right:15px;bottom:6px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse,\n    'no-margin': noMargin\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{font-family:neuzeit-grotesk,sans-serif!important;width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:11px}.input-text-wrap.no-margin .input-text-label{margin-left:0rem}.input-text-wrap.no-margin .input-text{margin:0;width:100%}.input-text-wrap.no-margin symphony-icon{right:15px;bottom:6px}\n"] }]
+            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse,\n    'no-margin': noMargin\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:calc(100% - .6rem);height:40px;border:1px solid #d0d0d0;border-radius:4px;padding:7px 15px;line-height:25px;margin:.3rem}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:11px}.input-text-wrap.no-margin .input-text-label{margin-left:0rem}.input-text-wrap.no-margin .input-text{margin:0;width:100%}.input-text-wrap.no-margin symphony-icon{right:15px;bottom:6px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], icon: [{
@@ -1640,6 +1675,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class FileUploadStatusComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+    }
+    oncloseUploadComplete() {
+        this.closeUploadComplete.emit();
+    }
+}
+FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadStatusModel: [{
+                type: Input
+            }], uploadStatus: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+        this.getFileDetails = new EventEmitter();
+    }
+    ngOnInit() {
+        this.filetypeAccepted = this.fileUploadModel.fileFormatAccepted.join(', ');
+    }
+    oncloseUploadComplete() {
+        this.closeUploadComplete.emit();
+    }
+    onFileSelect(event) {
+        this.file = event.target.files[0];
+        this.getFileDetails.emit(this.file);
+    }
+}
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadComponent, selector: "symphony-file-upload", inputs: { fileUploadModel: "fileUploadModel" }, outputs: { closeUploadComplete: "closeUploadComplete", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload', template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadModel: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }], getFileDetails: [{
+                type: Output
+            }] } });
+
+class FileUploadStatusModule {
+}
+FileUploadStatusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadStatusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, declarations: [FileUploadStatusComponent], imports: [CommonModule,
+        IconModule,
+        H3Module,
+        ParagraphModule,
+        SfxProgressBarModule], exports: [FileUploadStatusComponent] });
+FileUploadStatusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, imports: [[
+            CommonModule,
+            IconModule,
+            H3Module,
+            ParagraphModule,
+            SfxProgressBarModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadStatusComponent],
+                    imports: [
+                        CommonModule,
+                        IconModule,
+                        H3Module,
+                        ParagraphModule,
+                        SfxProgressBarModule,
+                    ],
+                    exports: [FileUploadStatusComponent],
+                }]
+        }] });
+
+class FileUploadModule {
+}
+FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+        H3Module,
+        IconModule,
+        ParagraphModule,
+        FileUploadStatusModule], exports: [FileUploadComponent] });
+FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, imports: [[
+            CommonModule,
+            H3Module,
+            IconModule,
+            ParagraphModule,
+            FileUploadStatusModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadComponent],
+                    imports: [
+                        CommonModule,
+                        H3Module,
+                        IconModule,
+                        ParagraphModule,
+                        FileUploadStatusModule,
+                    ],
+                    exports: [FileUploadComponent],
+                }]
+        }] });
+
 class ColorSampleComponent {
     constructor() { }
     ngOnInit() {
@@ -1800,113 +1945,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class FileUploadStatusComponent {
-    constructor() {
-        this.closeUploadComplete = new EventEmitter();
-    }
-    oncloseUploadComplete() {
-        this.closeUploadComplete.emit();
-    }
-}
-FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadStatusModel: [{
-                type: Input
-            }], uploadStatus: [{
-                type: Input
-            }], closeUploadComplete: [{
-                type: Output
-            }] } });
-
-class FileUploadComponent {
-    constructor() {
-        this.closeUploadComplete = new EventEmitter();
-        this.getFileDetails = new EventEmitter();
-    }
-    ngOnInit() {
-        this.filetypeAccepted = this.fileUploadModel.fileFormatAccepted.join(', ');
-    }
-    oncloseUploadComplete() {
-        this.closeUploadComplete.emit();
-    }
-    onFileSelect(event) {
-        this.file = event.target.files[0];
-        this.getFileDetails.emit(this.file);
-    }
+class SfxAccordionHeaderComponent {
+    constructor() { }
 }
-FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadComponent, selector: "symphony-file-upload", inputs: { fileUploadModel: "fileUploadModel" }, outputs: { closeUploadComplete: "closeUploadComplete", getFileDetails: "getFileDetails" }, ngImport: i0, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadComponent, decorators: [{
+SfxAccordionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SfxAccordionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: { heading: "heading" }, ngImport: i0, template: "<button class=\"btn-block clearfix sfx-accordion-header sfx-mb-50\">\n  <symphony-h4 class=\"pull-left float-left\" [text]=\"heading\"></symphony-h4>\n\n  <symphony-icon\n    class=\"float-right pull-right\"\n    [icon]=\"'si-arrow-hide-reveal'\"\n  ></symphony-icon>\n</button>\n", styles: [".sfx-accordion-header{padding:0;color:#000;border:none;background:none}.sfx-accordion-header:focus{outline:none}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-file-upload', template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input type=\"file\" id=\"Upload\" name=\"Upload\" accept=\"{{filetypeAccepted}}\" (change)=\"onFileSelect($event)\" class=\"hide\" />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload In Progress'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n  \n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload Completed'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n    <!-- File Upload Error -->\n    <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Max file size exceeded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fileUploadModel: [{
+            args: [{ selector: 'symphony-sfx-accordion-header', encapsulation: ViewEncapsulation.None, template: "<button class=\"btn-block clearfix sfx-accordion-header sfx-mb-50\">\n  <symphony-h4 class=\"pull-left float-left\" [text]=\"heading\"></symphony-h4>\n\n  <symphony-icon\n    class=\"float-right pull-right\"\n    [icon]=\"'si-arrow-hide-reveal'\"\n  ></symphony-icon>\n</button>\n", styles: [".sfx-accordion-header{padding:0;color:#000;border:none;background:none}.sfx-accordion-header:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { heading: [{
                 type: Input
-            }], closeUploadComplete: [{
-                type: Output
-            }], getFileDetails: [{
-                type: Output
             }] } });
 
-class FileUploadStatusModule {
-}
-FileUploadStatusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadStatusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, declarations: [FileUploadStatusComponent], imports: [CommonModule,
-        IconModule,
-        H3Module,
-        ParagraphModule,
-        SfxProgressBarModule], exports: [FileUploadStatusComponent] });
-FileUploadStatusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, imports: [[
-            CommonModule,
-            IconModule,
-            H3Module,
-            ParagraphModule,
-            SfxProgressBarModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FileUploadStatusComponent],
-                    imports: [
-                        CommonModule,
-                        IconModule,
-                        H3Module,
-                        ParagraphModule,
-                        SfxProgressBarModule,
-                    ],
-                    exports: [FileUploadStatusComponent],
-                }]
-        }] });
-
-class FileUploadModule {
+class SfxAccordionHeaderModule {
 }
-FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
-        H3Module,
-        IconModule,
-        ParagraphModule,
-        FileUploadStatusModule], exports: [FileUploadComponent] });
-FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, imports: [[
-            CommonModule,
-            H3Module,
-            IconModule,
-            ParagraphModule,
-            FileUploadStatusModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadModule, decorators: [{
+SfxAccordionHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SfxAccordionHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderModule, declarations: [SfxAccordionHeaderComponent], imports: [CommonModule, IconModule, H4Module], exports: [SfxAccordionHeaderComponent] });
+SfxAccordionHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderModule, imports: [[CommonModule, IconModule, H4Module]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SfxAccordionHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FileUploadComponent],
-                    imports: [
-                        CommonModule,
-                        H3Module,
-                        IconModule,
-                        ParagraphModule,
-                        FileUploadStatusModule,
-                    ],
-                    exports: [FileUploadComponent],
+                    declarations: [SfxAccordionHeaderComponent],
+                    imports: [CommonModule, IconModule, H4Module],
+                    exports: [SfxAccordionHeaderComponent]
                 }]
         }] });
 
@@ -1922,6 +1983,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         BreadcrumbModule,
         H5WithIconModule,
         InvoiceLineItemModule,
+        FeedbackCardModule,
+        SfxAccordionHeaderModule,
         FileUploadModule,
         FileUploadStatusModule,
         FeedbackCardModule], exports: [PillsModule, BreadcrumbModule, FeedbackCardModule] });
@@ -1935,6 +1998,8 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             BreadcrumbModule,
             H5WithIconModule,
             InvoiceLineItemModule,
+            FeedbackCardModule,
+            SfxAccordionHeaderModule,
             FileUploadModule,
             FileUploadStatusModule,
             FeedbackCardModule
@@ -1953,6 +2018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         BreadcrumbModule,
                         H5WithIconModule,
                         InvoiceLineItemModule,
+                        FeedbackCardModule,
+                        SfxAccordionHeaderModule,
                         FileUploadModule,
                         FileUploadStatusModule,
                         FeedbackCardModule
@@ -2027,37 +2094,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class NoteComponent {
+class FeedbackLoginModalComponent {
     constructor() {
-        this.noteModel = {
-            firstName: '',
-            lastName: '',
-            listTitle: '',
-            timeStamp: '',
-            description: '',
-            moreActions: {
-                items: [],
-                hasBorder: false,
-            },
-        };
+        this.verifyClicked = new EventEmitter();
+        this.resendClick = new EventEmitter();
+    }
+    onVerifyClick(text) {
+        this.verifyClicked.emit(this.authCode);
+    }
+    onAuthCodeChange(authCode) {
+        this.authCode = authCode;
+    }
+    onResendClick() {
+        this.resendClick.emit();
     }
 }
-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"] }, { 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: [{
+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" }, 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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".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}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, 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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { noteModel: [{
+            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>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</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      >\n      </symphony-input-text>\n      <symphony-h5\n        class=\"sfx-d-inline-block sfx-cursor-pointer\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red\">\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\n      class=\"sfx-ml-20\"\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
+            }], verifyClicked: [{
+                type: Output
+            }], resendClick: [{
+                type: Output
             }] } });
 
-class NoteListComponent {
-    constructor() { }
+class FeedbackLoginModalModule {
 }
-NoteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NoteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteListComponent, selector: "symphony-note-list", inputs: { noteList: "noteList" }, ngImport: i0, template: "<ul class=\"list-unstyled\">\n    <li *ngFor=\"let note of noteList\">\n        <symphony-note [noteModel]='note'></symphony-note>\n    </li>\n</ul>\n", styles: ["li{border-bottom:1px solid #d9d9d9}li:last-child{border-bottom-color:transparent}\n"], components: [{ type: NoteComponent, selector: "symphony-note", inputs: ["noteModel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteListComponent, decorators: [{
-            type: Component,
+FeedbackLoginModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackLoginModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalModule, declarations: [FeedbackLoginModalComponent], imports: [CommonModule,
+        H4Module,
+        H5Module,
+        ParagraphModule,
+        IconModule,
+        ButtonModule,
+        InputTextModule,
+        SfxLoaderModule], exports: [FeedbackLoginModalComponent] });
+FeedbackLoginModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalModule, imports: [[
+            CommonModule,
+            H4Module,
+            H5Module,
+            ParagraphModule,
+            IconModule,
+            ButtonModule,
+            InputTextModule,
+            SfxLoaderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackLoginModalComponent],
+                    imports: [
+                        CommonModule,
+                        H4Module,
+                        H5Module,
+                        ParagraphModule,
+                        IconModule,
+                        ButtonModule,
+                        InputTextModule,
+                        SfxLoaderModule
+                    ],
+                    exports: [FeedbackLoginModalComponent],
+                }]
+        }] });
+
+class UploadResumeModalComponent {
+    constructor() {
+        this.closeUploadComplete = new EventEmitter();
+        this.buttonClicked = new EventEmitter();
+        this.closeButtonClicked = new EventEmitter();
+        this.docTypeDropdowChange = new EventEmitter();
+        this.updateResumeChecked = new EventEmitter();
+        this.isResumeSelected = false;
+    }
+    ngOnInit() {
+        var _a;
+        this.model = {
+            title: 'Upload File',
+            subTitle: 'Attach a .rtf, .docx, .txt or .pdf file upto 2MB',
+            btnPrimary: 'Save',
+            btnSecondary: 'Cancel',
+            documentTypeDropdown: {
+                selectedName: 'Cover letter',
+                dropdownList: [
+                    {
+                        id: 1,
+                        name: 'Cover letter',
+                        value: 'Cover letter',
+                    },
+                    {
+                        id: 2,
+                        name: 'Resume',
+                        value: 'Resume',
+                    },
+                    {
+                        id: 3,
+                        name: 'Other',
+                        value: 'Other',
+                    },
+                ],
+                componentHeading: 'Document Type',
+            },
+            fileUploadModel: this.uploadResumeModel,
+        };
+        this.uploadResumeModel.fileUploadModel.fileFormatAccepted = ['.rtf', '.docx', '.txt', '.pdf'];
+        if ((_a = this.uploadResumeModel) === null || _a === void 0 ? void 0 : _a.isResume) {
+            this.model.documentTypeDropdown.selectedName = 'Resume';
+        }
+    }
+    onButtonClick(text) {
+        this.buttonClicked.emit(text);
+    }
+    onCloseButtonClick() {
+        this.closeButtonClicked.emit();
+    }
+    onDocTypeSelect(selectedModel) {
+        if (selectedModel.value == 'Resume') {
+            this.uploadResumeModel.isResume = true;
+        }
+        else {
+            this.uploadResumeModel.isResume = false;
+        }
+        this.docTypeDropdowChange.emit(selectedModel.value);
+    }
+    onResumeCheckSelect(updateResumeCheckEvent) {
+        this.updateResumeChecked.emit(updateResumeCheckEvent.label);
+    }
+}
+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" }, 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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeUploadComplete", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { 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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { uploadResumeModel: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], closeUploadComplete: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }], closeButtonClicked: [{
+                type: Output
+            }], docTypeDropdowChange: [{
+                type: Output
+            }], updateResumeChecked: [{
+                type: Output
+            }] } });
+
+class UploadResumeModalModule {
+}
+UploadResumeModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule], exports: [UploadResumeModalComponent] });
+UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [UploadResumeModalComponent],
+                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule],
+                    exports: [UploadResumeModalComponent],
+                }]
+        }] });
+
+class NoteComponent {
+    constructor() {
+        this.noteModel = {
+            firstName: '',
+            lastName: '',
+            listTitle: '',
+            timeStamp: '',
+            description: '',
+            moreActions: {
+                items: [],
+                hasBorder: false,
+            },
+        };
+    }
+}
+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"] }, { 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { noteModel: [{
+                type: Input
+            }] } });
+
+class NoteListComponent {
+    constructor() { }
+}
+NoteListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NoteListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteListComponent, selector: "symphony-note-list", inputs: { noteList: "noteList" }, ngImport: i0, template: "<ul class=\"list-unstyled\">\n    <li *ngFor=\"let note of noteList\">\n        <symphony-note [noteModel]='note'></symphony-note>\n    </li>\n</ul>\n", styles: ["li{border-bottom:1px solid #d9d9d9}li:last-child{border-bottom-color:transparent}\n"], components: [{ type: NoteComponent, selector: "symphony-note", inputs: ["noteModel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteListComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'symphony-note-list', template: "<ul class=\"list-unstyled\">\n    <li *ngFor=\"let note of noteList\">\n        <symphony-note [noteModel]='note'></symphony-note>\n    </li>\n</ul>\n", styles: ["li{border-bottom:1px solid #d9d9d9}li:last-child{border-bottom-color:transparent}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { noteList: [{
                 type: Input
@@ -2954,104 +3186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class UploadResumeModalComponent {
-    constructor() {
-        this.closeUploadComplete = new EventEmitter();
-        this.buttonClicked = new EventEmitter();
-        this.closeButtonClicked = new EventEmitter();
-        this.docTypeDropdowChange = new EventEmitter();
-        this.updateResumeChecked = new EventEmitter();
-        this.isResumeSelected = false;
-    }
-    ngOnInit() {
-        var _a;
-        this.model = {
-            title: 'Upload File',
-            subTitle: 'Attach a .rtf, .docx, .txt or .pdf file upto 2MB',
-            btnPrimary: 'Save',
-            btnSecondary: 'Cancel',
-            documentTypeDropdown: {
-                selectedName: 'Cover letter',
-                dropdownList: [
-                    {
-                        id: 1,
-                        name: 'Cover letter',
-                        value: 'Cover letter',
-                    },
-                    {
-                        id: 2,
-                        name: 'Resume',
-                        value: 'Resume',
-                    },
-                    {
-                        id: 3,
-                        name: 'Other',
-                        value: 'Other',
-                    },
-                ],
-                componentHeading: 'Document Type',
-            },
-            fileUploadModel: this.uploadResumeModel,
-        };
-        this.uploadResumeModel.fileUploadModel.fileFormatAccepted = ['.rtf', '.docx', '.txt', '.pdf'];
-        if ((_a = this.uploadResumeModel) === null || _a === void 0 ? void 0 : _a.isResume) {
-            this.model.documentTypeDropdown.selectedName = 'Resume';
-        }
-    }
-    onButtonClick(text) {
-        this.buttonClicked.emit(text);
-    }
-    onCloseButtonClick() {
-        this.closeButtonClicked.emit();
-    }
-    onDocTypeSelect(selectedModel) {
-        if (selectedModel.value == 'Resume') {
-            this.uploadResumeModel.isResume = true;
-        }
-        else {
-            this.uploadResumeModel.isResume = false;
-        }
-        this.docTypeDropdowChange.emit(selectedModel.value);
-    }
-    onResumeCheckSelect(updateResumeCheckEvent) {
-        this.updateResumeChecked.emit(updateResumeCheckEvent.label);
-    }
-}
-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" }, 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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeUploadComplete", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle"] }, { 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)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadComplete || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"uploadResumeModel.isLoading || uploadResumeModel.fileUploadModel.navigation.showUploadFile || uploadResumeModel.fileUploadModel.navigation.showUploadProgress || uploadResumeModel.fileUploadModel.navigation.showUploadError\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { uploadResumeModel: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], closeUploadComplete: [{
-                type: Output
-            }], buttonClicked: [{
-                type: Output
-            }], closeButtonClicked: [{
-                type: Output
-            }], docTypeDropdowChange: [{
-                type: Output
-            }], updateResumeChecked: [{
-                type: Output
-            }] } });
-
-class UploadResumeModalModule {
-}
-UploadResumeModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule], exports: [UploadResumeModalComponent] });
-UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [UploadResumeModalComponent],
-                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule],
-                    exports: [UploadResumeModalComponent],
-                }]
-        }] });
-
 class FeedbackDetailHeaderComponent {
     constructor() {
         this.previewClicked = new EventEmitter();
@@ -3101,6 +3235,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+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 *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom 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-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></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}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], 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: FeedbackCandidateWorkHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-candidate-workhistory', encapsulation: ViewEncapsulation.None, template: "<section *ngIf=\"workHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom 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-5\"\n        [text]=\"history.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph [text]=\"history.description\"></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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { workHistories: [{
+                type: Input
+            }] } });
+
+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 *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom 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-5\"\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}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], 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: FeedbackCandidateEducationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-candidate-education', template: "<section *ngIf=\"educationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 border-bottom 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-5\"\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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { educationHistories: [{
+                type: Input
+            }] } });
+
+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 *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\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-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></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}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], 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: FeedbackCandidateCertificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-feedback-candidate-certifications', template: "<section *ngIf=\"certificationHistories\">\n  <ul class=\"list-unstyled sfx-mt-40 sfx-mb-0 border-bottom\">\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-5\"\n        [text]=\"certifications.location\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"certifications.description\"\n      ></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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { certificationHistories: [{
+                type: Input
+            }] } });
+
+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: { historyList: "historyList", educationList: "educationList", certificationList: "certificationList" }, ngImport: i0, template: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\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)}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1$4.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { type: i1$4.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["isOpen", "panelClass", "heading", "isDisabled"], outputs: ["isOpenChange"] }, { type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: ["heading"] }, { 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"] }], 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: "<accordion>\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Work History'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"historyList\"\n    ></symphony-feedback-candidate-workhistory>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Education'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"educationList\"\n    ></symphony-feedback-candidate-education>\n  </accordion-group>\n\n  <accordion-group [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      [heading]=\"'Certifications'\"\n    ></symphony-sfx-accordion-header>\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"certificationList\"\n    ></symphony-feedback-candidate-certifications>\n  </accordion-group>\n</accordion>\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)}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { historyList: [{
+                type: Input
+            }], educationList: [{
+                type: Input
+            }], certificationList: [{
+                type: Input
+            }] } });
+
+class FeedbackCandidateWorkHistoryModule {
+}
+FeedbackCandidateWorkHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackCandidateWorkHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryModule, declarations: [FeedbackCandidateWorkHistoryComponent], imports: [CommonModule, H3Module, ParagraphModule], exports: [FeedbackCandidateWorkHistoryComponent] });
+FeedbackCandidateWorkHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryModule, imports: [[CommonModule, H3Module, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateWorkHistoryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackCandidateWorkHistoryComponent],
+                    imports: [CommonModule, H3Module, ParagraphModule],
+                    exports: [FeedbackCandidateWorkHistoryComponent]
+                }]
+        }] });
+
+class FeedbackCandidateEducationModule {
+}
+FeedbackCandidateEducationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackCandidateEducationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationModule, declarations: [FeedbackCandidateEducationComponent], imports: [CommonModule, H3Module, ParagraphModule], exports: [FeedbackCandidateEducationComponent] });
+FeedbackCandidateEducationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationModule, imports: [[CommonModule, H3Module, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateEducationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackCandidateEducationComponent],
+                    imports: [CommonModule, H3Module, ParagraphModule],
+                    exports: [FeedbackCandidateEducationComponent]
+                }]
+        }] });
+
+class FeedbackCandidateCertificationsModule {
+}
+FeedbackCandidateCertificationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackCandidateCertificationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsModule, declarations: [FeedbackCandidateCertificationsComponent], imports: [CommonModule, H3Module, ParagraphModule], exports: [FeedbackCandidateCertificationsComponent] });
+FeedbackCandidateCertificationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsModule, imports: [[CommonModule, H3Module, ParagraphModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCandidateCertificationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackCandidateCertificationsComponent],
+                    imports: [CommonModule, H3Module, ParagraphModule],
+                    exports: [FeedbackCandidateCertificationsComponent]
+                }]
+        }] });
+
+class FeedbackDetailCandidateInfoModule {
+}
+FeedbackDetailCandidateInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeedbackDetailCandidateInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, declarations: [FeedbackDetailCandidateInfoComponent], imports: [CommonModule, i1$4.AccordionModule, BrowserAnimationsModule,
+        IconModule,
+        H4Module,
+        SfxAccordionHeaderModule,
+        FeedbackCandidateWorkHistoryModule,
+        FeedbackCandidateEducationModule,
+        FeedbackCandidateCertificationsModule], exports: [FeedbackDetailCandidateInfoComponent] });
+FeedbackDetailCandidateInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, imports: [[
+            CommonModule,
+            AccordionModule.forRoot(),
+            BrowserAnimationsModule,
+            IconModule,
+            H4Module,
+            SfxAccordionHeaderModule,
+            FeedbackCandidateWorkHistoryModule,
+            FeedbackCandidateEducationModule,
+            FeedbackCandidateCertificationsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FeedbackDetailCandidateInfoComponent],
+                    imports: [
+                        CommonModule,
+                        AccordionModule.forRoot(),
+                        BrowserAnimationsModule,
+                        IconModule,
+                        H4Module,
+                        SfxAccordionHeaderModule,
+                        FeedbackCandidateWorkHistoryModule,
+                        FeedbackCandidateEducationModule,
+                        FeedbackCandidateCertificationsModule
+                    ],
+                    exports: [FeedbackDetailCandidateInfoComponent]
+                }]
+        }] });
+
 class OrganismsModule {
 }
 OrganismsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3113,7 +3381,9 @@ OrganismsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         CancelModalModule,
         UploadResumeModalModule,
         FeedbackCardListModule,
-        FeedbackDetailHeaderModule] });
+        FeedbackDetailHeaderModule,
+        FeedbackDetailCandidateInfoModule,
+        FeedbackLoginModalModule] });
 OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, imports: [[
             CommonModule,
             NoteListModule,
@@ -3124,7 +3394,9 @@ OrganismsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             CancelModalModule,
             UploadResumeModalModule,
             FeedbackCardListModule,
-            FeedbackDetailHeaderModule
+            FeedbackDetailHeaderModule,
+            FeedbackDetailCandidateInfoModule,
+            FeedbackLoginModalModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: OrganismsModule, decorators: [{
             type: NgModule,
@@ -3140,7 +3412,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         CancelModalModule,
                         UploadResumeModalModule,
                         FeedbackCardListModule,
-                        FeedbackDetailHeaderModule
+                        FeedbackDetailHeaderModule,
+                        FeedbackDetailCandidateInfoModule,
+                        FeedbackLoginModalModule
                     ]
                 }]
         }] });
@@ -3149,10 +3423,10 @@ class AdminListTemplateComponent {
     constructor() { }
 }
 AdminListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
+AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-filter-section\">\n      <div class=\"row\">\n        <ng-content select=\"[sfx-filter-area]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <!-- <h4 class=\"margin-left-minus-15\">22 Event Venues</h4> -->\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
+            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class EventsSettingsPageComponent {
@@ -3419,10 +3693,10 @@ class TwoColumnBodyTemplateComponent {
     constructor() { }
 }
 TwoColumnBodyTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnBodyTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: { showHeader: "showHeader" }, ngImport: i0, template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TwoColumnBodyTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: { showHeader: "showHeader" }, ngImport: i0, template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-pt-0 sfx-pb-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnBodyTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-two-column-body-template', template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-px-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"] }]
+            args: [{ selector: 'symphony-two-column-body-template', template: "<!-- filter area -->\n\n<div class=\"modal-header sfx-p-30\" *ngIf=\"showHeader\">\n  <div class=\"col-headers row\">\n    <div class=\"left-col-header col-xs-6 col-sm-6 col-md-6 sfx-pr-30\">\n      <ng-content select=\"[sfx-left-col-header]\"></ng-content>\n    </div>\n    <div class=\"right-col-header col-xs-6 col-sm-6 col-md-6 sfx-pl-30\">\n      <ng-content select=\"[sfx-right-col-header]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- main body -->\n<div class=\"modal-body sfx-pt-0 sfx-pb-0\">\n  <div class=\"row\">\n    <div class=\"sfx-checkbox-list col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-left-column]\"></ng-content>\n    </div>\n    <div class=\"sfx-price-totals col-xs-12 col-sm-6 col-md-6 sfx-p-30\">\n      <ng-content select=\"[sfx-right-column]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-checkbox-list{border-right:1px solid #e5e5e5}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { showHeader: [{
                 type: Input
             }] } });
@@ -4050,5 +4324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackListPageComponent, FeedbackListPageModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, gridType };
+export { ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridCellLoaderModule, GridComponent, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library-projects-component-library.mjs.map