npm - @symphony-talent/component-library - Versions diffs - 3.22.0 → 3.24.1 - Mend

@symphony-talent/component-library 3.22.0 → 3.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/fesm2020/symphony-talent-component-library-projects-component-library.mjs CHANGED Viewed

@@ -900,12 +900,14 @@ class IconWrapperComponent {
     }
 }
 IconWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse", hasHoverWithoutBorder: "hasHoverWithoutBorder" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}\n"] }]
+            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isInverse: [{
                 type: Input
+            }], hasHoverWithoutBorder: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -1385,6 +1387,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
+class NavigationLinkComponent {
+    constructor() {
+        this.linkClick = new EventEmitter();
+    }
+    onClick() {
+        this.linkClick.emit(this.navigationLinkModel);
+    }
+}
+NavigationLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NavigationLinkComponent, selector: "symphony-navigation-link", inputs: { navigationLinkModel: "navigationLinkModel", isMenuOpen: "isMenuOpen" }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<symphony-tooltip-wrapper\n  *ngIf=\"!isMenuOpen\"\n  [placement]=\"'right'\"\n  [tooltipHtml]=\"navigationLinkModel.linkText\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <div class=\"nav-link\">\n    <a\n      [href]=\"navigationLinkModel.href\"\n      [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n      (click)=\"onClick()\"\n      ><symphony-icon\n        [icon]=\"navigationLinkModel.iconClass\"\n        [size]=\"'24px'\"\n      ></symphony-icon>\n      <span>{{ navigationLinkModel.linkText }}</span>\n    </a>\n  </div>\n</symphony-tooltip-wrapper>\n\n<div\n  class=\"nav-link\"\n  *ngIf=\"isMenuOpen\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <a\n    [href]=\"navigationLinkModel.href\"\n    [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n    (click)=\"onClick()\"\n    ><symphony-icon\n      [icon]=\"navigationLinkModel.iconClass\"\n      [size]=\"'24px'\"\n    ></symphony-icon>\n    <span>{{ navigationLinkModel.linkText }}</span>\n  </a>\n</div>\n", styles: [".nav-link a{color:#000;display:block;text-align:left;text-decoration:none;padding:16px 10px 16px 40px;border-left:5px solid white;transition:all .3s linear 0s}.nav-link a i{display:inline-block;vertical-align:middle}.nav-link a span{margin-left:30px;font-size:12px;line-height:1;text-transform:uppercase;vertical-align:middle;font-weight:600;display:none;opacity:0;transition:opacity 1s;font-family:neuzeit_groteskbold,sans-serif}.nav-link a.sfx-menu-active{color:#eb0d8b;border-left:5px solid #eb0d8b}symphony-icon{display:inline-block;line-height:.6;vertical-align:middle}.sfx-menu-open.nav-link{width:280px}.sfx-menu-open a span{display:inline-block;animation:fade-in .5s forwards}.sfx-menu-open a:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}.sfx-menu-open a.sfx-menu-active{background:#eb0d8b;color:#fff}@keyframes fade-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-navigation-link', template: "<symphony-tooltip-wrapper\n  *ngIf=\"!isMenuOpen\"\n  [placement]=\"'right'\"\n  [tooltipHtml]=\"navigationLinkModel.linkText\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <div class=\"nav-link\">\n    <a\n      [href]=\"navigationLinkModel.href\"\n      [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n      (click)=\"onClick()\"\n      ><symphony-icon\n        [icon]=\"navigationLinkModel.iconClass\"\n        [size]=\"'24px'\"\n      ></symphony-icon>\n      <span>{{ navigationLinkModel.linkText }}</span>\n    </a>\n  </div>\n</symphony-tooltip-wrapper>\n\n<div\n  class=\"nav-link\"\n  *ngIf=\"isMenuOpen\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n>\n  <a\n    [href]=\"navigationLinkModel.href\"\n    [ngClass]=\"{ 'sfx-menu-active': navigationLinkModel.isActive }\"\n    (click)=\"onClick()\"\n    ><symphony-icon\n      [icon]=\"navigationLinkModel.iconClass\"\n      [size]=\"'24px'\"\n    ></symphony-icon>\n    <span>{{ navigationLinkModel.linkText }}</span>\n  </a>\n</div>\n", styles: [".nav-link a{color:#000;display:block;text-align:left;text-decoration:none;padding:16px 10px 16px 40px;border-left:5px solid white;transition:all .3s linear 0s}.nav-link a i{display:inline-block;vertical-align:middle}.nav-link a span{margin-left:30px;font-size:12px;line-height:1;text-transform:uppercase;vertical-align:middle;font-weight:600;display:none;opacity:0;transition:opacity 1s;font-family:neuzeit_groteskbold,sans-serif}.nav-link a.sfx-menu-active{color:#eb0d8b;border-left:5px solid #eb0d8b}symphony-icon{display:inline-block;line-height:.6;vertical-align:middle}.sfx-menu-open.nav-link{width:280px}.sfx-menu-open a span{display:inline-block;animation:fade-in .5s forwards}.sfx-menu-open a:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}.sfx-menu-open a.sfx-menu-active{background:#eb0d8b;color:#fff}@keyframes fade-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { navigationLinkModel: [{
+                type: Input
+            }], isMenuOpen: [{
+                type: Input
+            }], linkClick: [{
+                type: Output
+            }] } });
+class NavigationLinkModule {
+}
+NavigationLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, declarations: [NavigationLinkComponent], imports: [CommonModule, TooltipWrapperModule, IconModule], exports: [NavigationLinkComponent] });
+NavigationLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, imports: [[CommonModule, TooltipWrapperModule, IconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NavigationLinkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavigationLinkComponent],
+                    imports: [CommonModule, TooltipWrapperModule, IconModule],
+                    exports: [NavigationLinkComponent],
+                }]
+        }] });
 class AtomsModule {
 }
 AtomsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AtomsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1690,10 +1727,10 @@ class FileUploadStatusComponent {
     }
 }
 FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-10\">\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
+            args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { fileUploadStatusModel: [{
                 type: Input
             }], uploadStatus: [{
@@ -1791,6 +1828,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
+class FileUploadV2Component extends FileUploadComponent {
+    constructor() {
+        super();
+    }
+}
+FileUploadV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadV2Component, selector: "symphony-file-upload-v2", usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input\n      type=\"file\"\n      id=\"Upload\"\n      name=\"Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      class=\"hide\"\n    />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Uploading...'\"\n    class=\"hidefiledetail\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n\n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'File succesfully uploaded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n  <!-- File Upload Error -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. File exceeds 2MB'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n\n  <!-- File Upload Incomplete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadIncomplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. Please try again'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Incomplete -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:496px;max-width:496px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.hidefiledetail .sfx-position-relative{display:none}.hidefiledetail .sfx-file-uploaded{margin-top:15px}.hidefiledetail .progress{height:10px}\n"], components: [{ type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: ["fileUploadStatusModel", "uploadStatus"], outputs: ["closeUploadComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-file-upload-v2', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"fileUploadModel\"\n  class=\"sfx-v-h-center sfx-min-height sfx-bg-light-gray3 sfx-mb-20 sfx-ml-5 sfx-mr-5 sfx-mt-20\"\n>\n  <!-- File Upload -->\n  <label\n    *ngIf=\"fileUploadModel.navigation.showUploadFile\"\n    class=\"sfx-file-upload sfx-cursor-pointer text-center\"\n    for=\"Upload\"\n  >\n    <span class=\"symbol\">+</span>\n    <p>Please click here and select a file to upload</p>\n    <input\n      type=\"file\"\n      id=\"Upload\"\n      name=\"Upload\"\n      accept=\"{{ filetypeAccepted }}\"\n      (change)=\"onFileSelect($event)\"\n      class=\"hide\"\n    />\n  </label>\n  <!-- File Upload -->\n\n  <!-- File Upload In Progress -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadProgress\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Uploading...'\"\n    class=\"hidefiledetail\"\n  ></symphony-file-upload-status>\n  <!-- File Upload In Progress -->\n\n  <!-- File Upload Complete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadComplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'File succesfully uploaded'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Complete -->\n\n  <!-- Selected File -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showSelectedFile\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Selected File'\"\n  ></symphony-file-upload-status>\n  <!-- Selected File  -->\n\n  <!-- File Upload Error -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadError\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. File exceeds 2MB'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Error -->\n\n  <!-- File Upload Incomplete -->\n  <symphony-file-upload-status\n    *ngIf=\"fileUploadModel.navigation.showUploadIncomplete\"\n    [fileUploadStatusModel]=\"fileUploadModel.fileStatus\"\n    [uploadStatus]=\"'Upload failed. Please try again'\"\n  ></symphony-file-upload-status>\n  <!-- File Upload Incomplete -->\n</div>\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:496px;max-width:496px}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.hidefiledetail .sfx-position-relative{display:none}.hidefiledetail .sfx-file-uploaded{margin-top:15px}.hidefiledetail .progress{height:10px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+class FileUploadV2Module {
+}
+FileUploadV2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadV2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, declarations: [FileUploadV2Component], imports: [CommonModule,
+        H3Module,
+        IconModule,
+        ParagraphModule,
+        FileUploadStatusModule], exports: [FileUploadV2Component] });
+FileUploadV2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, imports: [[
+            CommonModule,
+            H3Module,
+            IconModule,
+            ParagraphModule,
+            FileUploadStatusModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FileUploadV2Component],
+                    imports: [
+                        CommonModule,
+                        H3Module,
+                        IconModule,
+                        ParagraphModule,
+                        FileUploadStatusModule,
+                    ],
+                    exports: [FileUploadV2Component],
+                }]
+        }] });
 class DocumentManagementItemComponent {
     constructor() {
         this.previewClicked = new EventEmitter();
@@ -1804,10 +1883,10 @@ class DocumentManagementItemComponent {
     }
 }
 DocumentManagementItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"\n        documentManagementItemModel.addedDate\n        \"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span *ngIf=\"documentManagementItemModel.uploadedBy\" class=\"sfx-txt-gray\">by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n      (click)=\"onPreviewClicked()\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      class=\"sfx-d-inline-block pull-left sfx-ml-10\"\n    >\n      <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+DocumentManagementItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: { documentManagementItemModel: "documentManagementItemModel" }, outputs: { previewClicked: "previewClicked", moreOptionClicked: "moreOptionClicked" }, ngImport: i0, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n    (click)=\"onPreviewClicked()\"\n    *ngIf=\"documentManagementItemModel.hasPreview\"\n    class=\"sfx-d-inline-block pull-left\"\n    [hasHoverWithoutBorder]=\"true\"\n  >\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n  </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"\n        documentManagementItemModel.addedDate\n        \"\n      ><span class=\"sfx-txt-gray\"\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span *ngIf=\"documentManagementItemModel.uploadedBy\" class=\"sfx-txt-gray\">by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n      (click)=\"onPreviewClicked()\"\n      *ngIf=\"documentManagementItemModel.hasPreview\"\n      class=\"sfx-d-inline-block pull-left sfx-ml-10\"\n    >\n      <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
+            args: [{ selector: 'symphony-document-management-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-dm-item\">\n  <div class=\"dm-icon-wrap\">\n    <symphony-icon class=\"dm-icon\" [icon]=\"'si-document'\"></symphony-icon>\n  </div>\n  <div class=\"dm-content\">\n    <symphony-h5\n      title=\"{{ documentManagementItemModel.fileName }} [{{\n        documentManagementItemModel.fileType\n      }}]\"\n      >{{ documentManagementItemModel.fileName }}&nbsp;<span\n        *ngIf=\"documentManagementItemModel.fileType\"\n        >[{{ documentManagementItemModel.fileType }}]</span\n      ></symphony-h5\n    >\n    <symphony-paragraph\n      title=\"Added on {{ documentManagementItemModel.addedDate }} by {{\n        documentManagementItemModel.uploadedBy\n      }}\"\n      *ngIf=\"documentManagementItemModel.addedDate\"\n      ><span\n        >Added on&nbsp;<span>{{\n          documentManagementItemModel.addedDate\n        }}</span></span\n      >&nbsp;<span\n        ><span\n          *ngIf=\"documentManagementItemModel.uploadedBy\"\n          >by&nbsp;</span\n        >{{ documentManagementItemModel.uploadedBy }}</span\n      >\n    </symphony-paragraph>\n  </div>\n  <div class=\"dm-action\">\n    <symphony-icon-wrapper\n    (click)=\"onPreviewClicked()\"\n    *ngIf=\"documentManagementItemModel.hasPreview\"\n    class=\"sfx-d-inline-block pull-left\"\n    [hasHoverWithoutBorder]=\"true\"\n  >\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon>\n  </symphony-icon-wrapper>\n    <symphony-contextual-menu\n      (itemClick)=\"onMoreOptionClicked($event)\"\n      *ngIf=\"documentManagementItemModel.moreActions.items.length > 0\"\n      class=\"dm-more-option sfx-d-inline-block pull-left sfx-ml-10\"\n      [model]=\"documentManagementItemModel.moreActions\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".sfx-dm-item{position:relative;padding-block:20px;margin-right:15px}.sfx-dm-item .dm-icon-wrap{position:absolute;left:0;top:20px}.sfx-dm-item .dm-icon-wrap .dm-icon{display:block;width:40px;height:40px;background:#000;text-align:center;color:#fff;border-radius:50%;line-height:46px}.sfx-dm-item .dm-content{padding-left:60px;padding-right:100px}.sfx-dm-item .dm-content h5,.sfx-dm-item .dm-content p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sfx-dm-item .dm-action{position:absolute;right:0;top:20px;display:none}.sfx-dm-item:hover .dm-action{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { documentManagementItemModel: [{
                 type: Input
             }], previewClicked: [{
@@ -1823,15 +1902,15 @@ DocumentManagementItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         ContextualMenuModule,
         H5Module,
         IconModule,
-        IconWrapperModule,
-        ParagraphModule], exports: [DocumentManagementItemComponent] });
+        ParagraphModule,
+        IconWrapperModule], exports: [DocumentManagementItemComponent] });
 DocumentManagementItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, imports: [[
             CommonModule,
             ContextualMenuModule,
             H5Module,
             IconModule,
-            IconWrapperModule,
-            ParagraphModule
+            ParagraphModule,
+            IconWrapperModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementItemModule, decorators: [{
             type: NgModule,
@@ -1842,8 +1921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ContextualMenuModule,
                         H5Module,
                         IconModule,
-                        IconWrapperModule,
-                        ParagraphModule
+                        ParagraphModule,
+                        IconWrapperModule
                     ],
                     exports: [DocumentManagementItemComponent],
                 }]
@@ -1938,7 +2017,7 @@ class IconSwatchComponent {
     }
 }
 IconSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-icon-swatch', template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"] }]
@@ -2044,7 +2123,7 @@ class ButtonWithIconComponent {
     }
 }
 ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton", showPopover: "showPopover" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"] }]
@@ -2054,6 +2133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], showActionButton: [{
                 type: Input
+            }], showPopover: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -2280,10 +2361,10 @@ class UploadResumeModalComponent {
     }
     ngOnInit() {
         this.model = {
-            title: 'Upload File',
+            title: 'Add document',
             subTitle: 'Attach a .rtf, .docx, .txt or .pdf file upto 2MB',
             btnPrimary: 'Save',
-            btnSecondary: 'Cancel',
+            btnSecondary: 'Back',
             documentTypeDropdown: {
                 selectedName: 'Cover letter',
                 dropdownList: [
@@ -2340,10 +2421,10 @@ class UploadResumeModalComponent {
     }
 }
 UploadResumeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadComponent, selector: "symphony-file-upload", inputs: ["fileUploadModel"], outputs: ["closeClick", "getFileDetails"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UploadResumeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: UploadResumeModalComponent, selector: "symphony-upload-resume-modal", inputs: { uploadResumeModel: "uploadResumeModel", isLoading: "isLoading" }, outputs: { closeUploadComplete: "closeUploadComplete", buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", docTypeDropdowChange: "docTypeDropdowChange", updateResumeChecked: "updateResumeChecked", fileCloseClick: "fileCloseClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: ["isActive", "label", "isRequired"], outputs: ["clicked"] }, { type: FileUploadV2Component, selector: "symphony-file-upload-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
+            args: [{ selector: 'symphony-upload-resume-modal', template: "<div class=\"sfx sfx-modal\" *ngIf=\"uploadResumeModel && model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n          <div class=\"sfx-mt-15\">\n            <symphony-paragraph [text]=\"model.subTitle\"></symphony-paragraph>\n          </div>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-input-dropdown\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [inputDropdownListModel]=\"model.documentTypeDropdown\"\n          (selectItem)=\"onDocTypeSelect($event)\"\n        ></symphony-input-dropdown>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mt-33\">\n        <symphony-input-checkbox\n          *ngIf=\"uploadResumeModel.isResume\"\n          [label]=\"'Update the contact data with this resume'\"\n          (clicked)=\"onResumeCheckSelect($event)\"\n        ></symphony-input-checkbox>\n      </div>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <symphony-file-upload-v2\n          *ngIf=\"!uploadResumeModel.isLoading\"\n          [fileUploadModel]=\"uploadResumeModel.fileUploadModel\"\n          (closeClick)=\"onCloseClick()\"\n        ></symphony-file-upload-v2>\n        <div class=\"sfx-mt-30 sfx-mb-30\" *ngIf=\"uploadResumeModel.isLoading\">\n          <symphony-sfx-loader></symphony-sfx-loader>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pl-30 sfx-pr-30\">\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    <symphony-button\n      *ngIf=\"\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadComplete ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"\n        uploadResumeModel.isLoading ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadFile ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadProgress ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadError ||\n        uploadResumeModel.fileUploadModel.navigation.showUploadIncomplete\n      \"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n  </section>\n</div>\n", styles: [".sfx-mt-33{margin-top:33px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { uploadResumeModel: [{
                 type: Input
             }], isLoading: [{
@@ -2365,13 +2446,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class UploadResumeModalModule {
 }
 UploadResumeModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule], exports: [UploadResumeModalComponent] });
-UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule]] });
+UploadResumeModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, declarations: [UploadResumeModalComponent], imports: [CommonModule,
+        H4Module,
+        ParagraphModule,
+        IconModule,
+        ButtonModule,
+        InputDropdownModule,
+        FileUploadV2Module,
+        SfxLoaderModule,
+        InputCheckboxModule], exports: [UploadResumeModalComponent] });
+UploadResumeModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, imports: [[
+            CommonModule,
+            H4Module,
+            ParagraphModule,
+            IconModule,
+            ButtonModule,
+            InputDropdownModule,
+            FileUploadV2Module,
+            SfxLoaderModule,
+            InputCheckboxModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: UploadResumeModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UploadResumeModalComponent],
-                    imports: [CommonModule, H4Module, ParagraphModule, IconModule, ButtonModule, InputDropdownModule, FileUploadModule, SfxLoaderModule, InputCheckboxModule],
+                    imports: [
+                        CommonModule,
+                        H4Module,
+                        ParagraphModule,
+                        IconModule,
+                        ButtonModule,
+                        InputDropdownModule,
+                        FileUploadV2Module,
+                        SfxLoaderModule,
+                        InputCheckboxModule,
+                    ],
                     exports: [UploadResumeModalComponent],
                 }]
         }] });
@@ -2386,7 +2495,7 @@ class ActionBarComponent {
     }
 }
 ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n  <div\n    class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items\"\n  >\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"] }]
@@ -2416,7 +2525,7 @@ class GridControlsJobListComponent {
     }
 }
 GridControlsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridControlsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: { model: "model" }, outputs: { Clicked: "Clicked", menuClicked: "menuClicked" }, ngImport: i0, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+GridControlsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridControlsJobListComponent, selector: "symphony-grid-controls-job-list", inputs: { model: "model" }, outputs: { Clicked: "Clicked", menuClicked: "menuClicked" }, ngImport: i0, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridControlsJobListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-grid-controls-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-action\">\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-mt-10 sfx-pr-30\"\n    *ngIf=\"model.gridRowCount\"\n  >\n    <strong class=\"text-label\">{{ model.gridRowCount }}</strong>\n  </div>\n  <div\n    class=\"sfx-d-inline-block pull-left sfx-pr-20\"\n    *ngIf=\"model.showCustomiseColumns\"\n  >\n    <symphony-tooltip-wrapper\n      [tooltipHtml]=\"'Customise Columns'\"\n      [placement]=\"'top'\"\n      class=\"actionIcon-tooltip\"\n    >\n      <symphony-icon-wrapper (click)=\"onClick()\"\n        ><symphony-icon [icon]=\"'si-organize-columns'\"></symphony-icon>\n      </symphony-icon-wrapper>\n    </symphony-tooltip-wrapper>\n  </div>\n  <div class=\"sfx-d-inline-block pull-left\">\n    <symphony-contextual-menu\n      class=\"task-more-option\"\n      *ngIf=\"gridMoreActions && gridMoreActions.items.length > 0\"\n      [model]=\"gridMoreActions\"\n      (itemClick)=\"onItemClick($event)\"\n    >\n    </symphony-contextual-menu>\n  </div>\n</div>\n", styles: [".task-more-option .btn-group .dropdown-menu{min-width:200px!important}.actionIcon-tooltip .tooltip{min-width:160px}.actionIcon-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionIcon-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
@@ -2437,10 +2546,10 @@ class GridActionsJobListComponent {
     }
 }
 GridActionsJobListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+GridActionsJobListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsJobListComponent, selector: "symphony-grid-actions-job-list", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover"], outputs: ["clicked"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid-actions-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n  ></symphony-button-with-icon>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'symphony-grid-actions-job-list', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{
@@ -2479,13 +2588,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class GridActionsJobListModule {
 }
 GridActionsJobListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridActionsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, declarations: [GridActionsJobListComponent], imports: [CommonModule, ButtonWithIconModule], exports: [GridActionsJobListComponent] });
-GridActionsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, imports: [[CommonModule, ButtonWithIconModule]] });
+GridActionsJobListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, declarations: [GridActionsJobListComponent], imports: [CommonModule, ButtonWithIconModule, TooltipWrapperModule], exports: [GridActionsJobListComponent] });
+GridActionsJobListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, imports: [[CommonModule, ButtonWithIconModule, TooltipWrapperModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsJobListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [GridActionsJobListComponent],
-                    imports: [CommonModule, ButtonWithIconModule],
+                    imports: [CommonModule, ButtonWithIconModule, TooltipWrapperModule],
                     exports: [GridActionsJobListComponent],
                 }]
         }] });
@@ -2611,22 +2720,24 @@ class DocumentManagementListComponent {
     ngOnInit() {
         this.isLoading = false;
     }
-    onMoreClick(documentManagementItemModel) {
-        this.moreOptionClick.emit(documentManagementItemModel);
+    onMoreClick(optionClickEvent, documentManagementItemModel) {
+        this.moreOptionClick.emit({ optionClicked: optionClickEvent, item: documentManagementItemModel });
     }
-    onPreviewClick(documentManagementItemModel) {
-        this.previewClick.emit(documentManagementItemModel);
+    onPreviewClick(optionClickEvent, documentManagementItemModel) {
+        this.previewClick.emit({ optionClicked: optionClickEvent, item: documentManagementItemModel });
     }
     onUploadClick() {
         this.uploadClick.emit();
     }
 }
 DocumentManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DocumentManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: DocumentManagementListComponent, selector: "symphony-document-management-list", inputs: { isLoading: "isLoading", documentManagementList: "documentManagementList" }, outputs: { moreOptionClick: "moreOptionClick", previewClick: "previewClick", uploadClick: "uploadClick" }, ngImport: i0, template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: DocumentManagementItemComponent, selector: "symphony-document-management-item", inputs: ["documentManagementItemModel"], outputs: ["previewClicked", "moreOptionClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: DocumentManagementListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event)\"\n        (previewClicked)=\"onPreviewClick($event)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { documentManagementList: [{
+            args: [{ selector: 'symphony-document-management-list', template: "<section class=\"sf-d-block sfx-pb-20 sfx-border-bottom-black-5\">\n  <div class=\"dml-title-wrap\">\n    <symphony-h3 class=\"sfx-d-block sfx-pt-5\">Documents</symphony-h3>\n    <symphony-icon-wrapper (click)=\"onUploadClick()\"\n    class=\"dml-title-icon-right\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  </div>\n  <ul *ngIf=\"!isLoading\" class=\"list-unstyled dml-wrap\">\n    <li *ngFor=\"let dmItem of documentManagementList\">\n      <symphony-document-management-item\n        [documentManagementItemModel]=\"dmItem\"\n        (moreOptionClicked)=\"onMoreClick($event, dmItem)\"\n        (previewClicked)=\"onPreviewClick($event, dmItem)\"\n      ></symphony-document-management-item>\n    </li>\n  </ul>\n  <div *ngIf=\"isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</section>\n", styles: [".dml-wrap{max-height:245px;overflow-y:auto;overflow-x:hidden}.dml-wrap::-webkit-scrollbar{width:12px}.dml-wrap::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.dml-wrap::-webkit-scrollbar-thumb:hover{cursor:pointer}.dml-wrap li{border-bottom:1px solid #bababa}.dml-wrap li:last-child{border-color:transparent}.dml-title-wrap{position:relative;margin-bottom:20px}.dml-title-wrap .dml-title-icon-right{position:absolute;top:0;right:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isLoading: [{
+                type: Input
+            }], documentManagementList: [{
                 type: Input
             }], moreOptionClick: [{
                 type: Output
@@ -2650,6 +2761,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
+class SidebarNavigationComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.linkClick = new EventEmitter();
+        this.isMenuOpen = false;
+    }
+    onLinkClick(activeLink) {
+        this.linkClick.emit(activeLink.linkText);
+    }
+    onMenuClick() {
+        if (!this.isMenuOpen) {
+            this.isMenuOpen = true;
+        }
+        else {
+            this.isMenuOpen = false;
+        }
+    }
+}
+SidebarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SidebarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SidebarNavigationComponent, selector: "symphony-sidebar-navigation", inputs: { navLinks: "navLinks", isMenuOpen: "isMenuOpen" }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<nav\n  class=\"sfx-sidebar-parent sfx-bg-white\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n  role=\"navigation\"\n>\n  <div class=\"menu-collapse\" (click)=\"onMenuClick()\">\n    <div class=\"menu-btn\" *ngIf=\"!isMenuOpen\">\n      <symphony-tooltip-wrapper [placement]=\"'right'\" [tooltipHtml]=\"'Menu'\">\n        <symphony-icon [icon]=\"'si-menu-all'\" [size]=\"'22px'\"></symphony-icon>\n      </symphony-tooltip-wrapper>\n    </div>\n\n    <div class=\"back-btn\" *ngIf=\"isMenuOpen\">\n      <symphony-icon\n        *ngIf=\"isMenuOpen\"\n        [icon]=\"'si-menu-return'\"\n        [size]=\"'22px'\"\n      ></symphony-icon>\n      <span class=\"back-button-text\">Back</span>\n    </div>\n  </div>\n  <div class=\"nav-link-list\">\n    <symphony-navigation-link\n      *ngFor=\"let navLink of navLinks; index as i\"\n      [navigationLinkModel]=\"navLink\"\n      [isMenuOpen]=\"isMenuOpen\"\n      (linkClick)=\"onLinkClick($event)\"\n    ></symphony-navigation-link>\n  </div>\n</nav>\n", styles: [".sfx-sidebar-parent{z-index:99999999;top:0;left:0;width:110px;height:100%;position:fixed;transition:width .5s;z-index:9;padding-top:.625rem}.sfx-sidebar-parent .menu-collapse{cursor:pointer}.sfx-sidebar-parent .back-btn{display:flex}.sfx-sidebar-parent .back-button-text{padding-top:20px;margin-left:20px;font-size:12px;text-transform:uppercase;vertical-align:middle;font-weight:600;font-family:neuzeit_groteskbold,sans-serif;animation:fade-in .5s forwards}.sfx-sidebar-parent .nav-link-list{overflow:hidden}.sfx-sidebar-parent .nav-link-list symphony-navigation-link{display:block}.sfx-sidebar-parent symphony-icon{display:inline-block;line-height:.6;vertical-align:middle;padding:17px 10px 17px 46px}.sfx-sidebar-parent.sfx-menu-open{width:280px}.sfx-sidebar-parent.sfx-menu-open .menu-collapse:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}\n"], components: [{ type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: NavigationLinkComponent, selector: "symphony-navigation-link", inputs: ["navigationLinkModel", "isMenuOpen"], outputs: ["linkClick"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-sidebar-navigation', template: "<nav\n  class=\"sfx-sidebar-parent sfx-bg-white\"\n  [ngClass]=\"{ 'sfx-menu-open': isMenuOpen }\"\n  role=\"navigation\"\n>\n  <div class=\"menu-collapse\" (click)=\"onMenuClick()\">\n    <div class=\"menu-btn\" *ngIf=\"!isMenuOpen\">\n      <symphony-tooltip-wrapper [placement]=\"'right'\" [tooltipHtml]=\"'Menu'\">\n        <symphony-icon [icon]=\"'si-menu-all'\" [size]=\"'22px'\"></symphony-icon>\n      </symphony-tooltip-wrapper>\n    </div>\n\n    <div class=\"back-btn\" *ngIf=\"isMenuOpen\">\n      <symphony-icon\n        *ngIf=\"isMenuOpen\"\n        [icon]=\"'si-menu-return'\"\n        [size]=\"'22px'\"\n      ></symphony-icon>\n      <span class=\"back-button-text\">Back</span>\n    </div>\n  </div>\n  <div class=\"nav-link-list\">\n    <symphony-navigation-link\n      *ngFor=\"let navLink of navLinks; index as i\"\n      [navigationLinkModel]=\"navLink\"\n      [isMenuOpen]=\"isMenuOpen\"\n      (linkClick)=\"onLinkClick($event)\"\n    ></symphony-navigation-link>\n  </div>\n</nav>\n", styles: [".sfx-sidebar-parent{z-index:99999999;top:0;left:0;width:110px;height:100%;position:fixed;transition:width .5s;z-index:9;padding-top:.625rem}.sfx-sidebar-parent .menu-collapse{cursor:pointer}.sfx-sidebar-parent .back-btn{display:flex}.sfx-sidebar-parent .back-button-text{padding-top:20px;margin-left:20px;font-size:12px;text-transform:uppercase;vertical-align:middle;font-weight:600;font-family:neuzeit_groteskbold,sans-serif;animation:fade-in .5s forwards}.sfx-sidebar-parent .nav-link-list{overflow:hidden}.sfx-sidebar-parent .nav-link-list symphony-navigation-link{display:block}.sfx-sidebar-parent symphony-icon{display:inline-block;line-height:.6;vertical-align:middle;padding:17px 10px 17px 46px}.sfx-sidebar-parent.sfx-menu-open{width:280px}.sfx-sidebar-parent.sfx-menu-open .menu-collapse:hover{background:#eb0d8b;color:#fff;border-left-color:#eb0d8b}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { navLinks: [{
+                type: Input
+            }], linkClick: [{
+                type: Output
+            }], isMenuOpen: [{
+                type: Input
+            }] } });
+class SidebarNavigationModule {
+}
+SidebarNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SidebarNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, declarations: [SidebarNavigationComponent], imports: [CommonModule,
+        NavigationLinkModule,
+        IconModule,
+        TooltipWrapperModule], exports: [SidebarNavigationComponent] });
+SidebarNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, imports: [[
+            CommonModule,
+            NavigationLinkModule,
+            IconModule,
+            TooltipWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SidebarNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SidebarNavigationComponent],
+                    imports: [
+                        CommonModule,
+                        NavigationLinkModule,
+                        IconModule,
+                        TooltipWrapperModule,
+                    ],
+                    exports: [SidebarNavigationComponent],
+                }]
+        }] });
 class NoteComponent {
     constructor() {
         this.noteModel = {
@@ -3564,7 +3733,7 @@ class FeedbackDetailHeaderComponent {
     }
 }
 FeedbackDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailHeaderComponent, selector: "symphony-feedback-detail-header", inputs: { model: "model" }, outputs: { previewClicked: "previewClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"], components: [{ type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-header', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" class=\"sfx-d-inline-block\">\n  <symphony-h3 [text]=\"model.name\"></symphony-h3>\n\n  <ul class=\"candidate-details sfx-mt-10 sfx-mb-20 list-unstyled\">\n    <li>{{ model.location }}</li>\n    <li>{{ model.email }}</li>\n    <li>{{ model.phone }}</li>\n  </ul>\n</div>\n\n<div class=\"sfx-d-inline-block align-text-bottom\">\n  <symphony-icon-wrapper (clicked)=\"onClick()\">\n    <symphony-icon [icon]=\"'si-preview'\"></symphony-icon\n  ></symphony-icon-wrapper>\n</div>\n\n<a href=\"#review\">\n  <symphony-button\n    sfx-button-secondary\n    [text]=\"'Review'\"\n    [isSecondary]=\"true\"\n    class=\"sfx-d-none visible-xs-inline-block sfx-ml-20 align-text-bottom review-button\"\n  >\n  </symphony-button>\n</a>\n", styles: [".candidate-details{min-width:435px}.candidate-details li{display:inline-block}.candidate-details li:nth-child(2):before,.candidate-details li:nth-child(2):after{content:\"\\a\";width:4px;height:4px;border-radius:50%;background:#000;display:inline-block;margin:2px 6px}.align-text-bottom{vertical-align:text-bottom}.review-button .btn.btn-secondary{min-width:100px;height:40px;padding-left:25px;padding-right:25px}@media (max-width: 320px){.candidate-details li:nth-child(2):after{display:none}}\n"] }]
@@ -3846,7 +4015,7 @@ class EventsSettingsPageComponent {
     }
 }
 EventsSettingsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EventsSettingsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EventsSettingsPageComponent, selector: "symphony-events-settings-page", inputs: { model: "model" }, outputs: { keywordSearchChange: "keywordSearchChange", filterChange: "filterChange", gridActionsSelectedOption: "gridActionsSelectedOption", addButtonClicked: "addButtonClicked" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["sfxgrid"], descendants: true }], ngImport: i0, template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""], components: [{ type: AdminListTemplateComponent, selector: "symphony-admin-list-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse", "hasHoverWithoutBorder"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: ["height"] }, { type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EventsSettingsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-events-settings-page', template: "<symphony-admin-list-template *ngIf=\"model\">\n  <symphony-breadcrumb sfx-header [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-icon-wrapper\n    sfx-page-action\n    *ngIf=\"model.showAddButton\"\n    (clicked)=\"onAddButtonClick()\"\n  >\n    <symphony-icon [icon]=\"'si-add'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <symphony-two-column-filter-area sfx-filter-area>\n    <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"model.settingTypeDropdown\"\n      (selectItem)=\"onFilterChange($event)\"\n      *ngIf=\"!model.overrideSettingTypeFilterPlaceholder\"\n    >\n    </symphony-input-dropdown>\n    <ng-content\n      *ngIf=\"model.overrideSettingTypeFilterPlaceholder\"\n      select=\"[filter-one]\"\n    ></ng-content>\n    <symphony-input-text\n      filter-two\n      [label]=\"'Search by Keyword'\"\n      [placeholder]=\"'Enter Search Value'\"\n      [icon]=\"'si-search-new'\"\n      [isInverse]=\"true\"\n      (textChange)=\"keywordSearch($event)\"\n    >\n    </symphony-input-text>\n  </symphony-two-column-filter-area>\n  <symphony-h4 sfx-title>{{ model.gridTitle }}</symphony-h4>\n  <symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"model.grid.columnDefs\"\n    [defaultColDef]=\"model.grid.defaultColumnDef\"\n    [rowData]=\"model.grid.rowData\"\n    [pageSize]=\"model.grid.pageSize\"\n    [onGridReadyFunction]=\"model.grid.onGridReadyFunction\"\n    [rowModelType]=\"model.grid.rowModelType\"\n  ></symphony-grid>\n</symphony-admin-list-template>\n", styles: [""] }]
@@ -4229,6 +4398,7 @@ class AdvertiseModalComponent {
     constructor() {
         this.buttonClicked = new EventEmitter();
         this.closeButtonClicked = new EventEmitter();
+        this.postingBoardChange = new EventEmitter();
         this.fundsInfo = {
             icon: Icons.CONFIRMATION,
             iconFirst: true,
@@ -4360,10 +4530,11 @@ class AdvertiseModalComponent {
         else {
             this.isJobBoardNextButtonDisabled = false;
         }
+        this.postingBoardChange.emit(this.model);
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template" }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "noMargin"], outputs: ["textChange"] }, { type: AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: AdvertiseOrderReviewComponent, selector: "symphony-advertise-order-review" }, { type: H2Component, selector: "symphony-h2", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [noMargin]=\"true\"\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"filteredPostingBoardList\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n  >\n    <div sfx-left-column class=\"posting-boards\">\n      <symphony-advertise-order-review></symphony-advertise-order-review>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div sfx-right-column class=\"posting-boards\">\n      <div class=\"stage\">\n        <div class=\"box bounce-7\">\n          <div class=\"complete-container\">\n            <symphony-h2>Your order is complete</symphony-h2>\n            <div class=\"success-icon-spacing\">\n              <symphony-icon\n                [icon]=\"'si-confirmation'\"\n                [iconColor]=\"'#00D56B'\"\n                [size]=\"'50px'\"\n              ></symphony-icon>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]
@@ -4373,6 +4544,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Output
             }], closeButtonClicked: [{
                 type: Output
+            }], postingBoardChange: [{
+                type: Output
             }] } });
 class TwoColumnModalModule {
@@ -4865,5 +5038,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridActionsJobListComponent, GridActionsJobListModule, GridCellLoaderModule, GridComponent, GridControlsJobListComponent, GridControlsJobListModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActivityScoreLevel, AdvertiseModalComponent, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, CardComponent, CardListComponent, CardListModule, CardModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FrameworkModule, GridActionsJobListComponent, GridActionsJobListModule, GridCellLoaderModule, GridComponent, GridControlsJobListComponent, GridControlsJobListModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, InputToggleComponent, InputToggleModule, LibrariesPageComponent, LibrariesPageModule, ModalModule, MoleculesModule, NavigationLinkComponent, NavigationLinkModule, OrganismsModule, ParagraphComponent, ParagraphModule, PillComponent, PillModule, PillsComponent, PillsModule, RelevanceScoreComponent, RelevanceScoreModule, SettingListPageComponent, SettingListPageModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library-projects-component-library.mjs.map