@symphony-talent/component-library 4.21.0 → 4.23.0

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

@@ -19,7 +19,9 @@ import * as i1$4 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
 import * as i8 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i1$5 from 'ngx-bootstrap/accordion';
+import * as i1$5 from 'ngx-bootstrap/tabs';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+import * as i1$6 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 class AvatarComponent {
@@ -3119,6 +3121,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class TabsComponent {
+    constructor() { }
+    ngOnInit() {
+        this.displayTabs = false;
+    }
+    toggleTabs() {
+        this.displayTabs = !this.displayTabs;
+    }
+    onSelectTab() {
+        this.displayTabs = true;
+    }
+}
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TabsComponent, selector: "symphony-tabs", ngImport: i0, template: "<section class=\"sfx-tab-wrapper\">\n  <a\n    href=\"javascript:;\"\n    class=\"pull-right sfx-font12\"\n    (click)=\"toggleTabs()\"\n  >\n    <i\n      class=\"si-arrow-bold-next\"\n      [ngClass]=\"{\n        down: !displayTabs,\n        up: displayTabs\n      }\"\n    ></i>\n  </a>\n  <tabset\n    [ngClass]=\"{ 'tab-not-active': displayTabs === false }\"\n    (click)=\"onSelectTab()\"\n  >\n    <tab heading=\"Tab1\"> <p>Tab 1 content is here</p> </tab>\n    <tab heading=\"Tab2\"> <p>Tab 2 content is here</p> </tab>\n    <tab heading=\"Tab3\"> <p>Tab 3 content is here</p> </tab>\n  </tabset>\n</section>\n", styles: [""], components: [{ type: i1$5.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$5.TabDirective, selector: "tab, [tab]", inputs: ["customClass", "active", "removable", "heading", "id", "disabled"], outputs: ["selectTab", "deselect", "removed"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-tabs', template: "<section class=\"sfx-tab-wrapper\">\n  <a\n    href=\"javascript:;\"\n    class=\"pull-right sfx-font12\"\n    (click)=\"toggleTabs()\"\n  >\n    <i\n      class=\"si-arrow-bold-next\"\n      [ngClass]=\"{\n        down: !displayTabs,\n        up: displayTabs\n      }\"\n    ></i>\n  </a>\n  <tabset\n    [ngClass]=\"{ 'tab-not-active': displayTabs === false }\"\n    (click)=\"onSelectTab()\"\n  >\n    <tab heading=\"Tab1\"> <p>Tab 1 content is here</p> </tab>\n    <tab heading=\"Tab2\"> <p>Tab 2 content is here</p> </tab>\n    <tab heading=\"Tab3\"> <p>Tab 3 content is here</p> </tab>\n  </tabset>\n</section>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class TabsModules {
+}
+TabsModules.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsModules, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TabsModules.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsModules, declarations: [TabsComponent], imports: [CommonModule, i1$5.TabsModule], exports: [TabsComponent] });
+TabsModules.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsModules, imports: [[CommonModule, TabsModule.forRoot()]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TabsModules, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TabsComponent],
+                    imports: [CommonModule, TabsModule.forRoot()],
+                    exports: [TabsComponent],
+                }]
+        }] });
+
 class ColorSwatchComponent {
     constructor() {
         this.colorSwatchModel = {
@@ -3339,7 +3374,8 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         InputTextareaModule,
         CharacterCounterModule,
         SettingsDetailNavigationItemModule,
-        EditableSettingItemModule], exports: [PillsModule,
+        EditableSettingItemModule,
+        TabsModules], exports: [PillsModule,
         BreadcrumbModule,
         FeedbackCardModule,
         DocumentManagementItemModule,
@@ -3367,7 +3403,8 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             InputTextareaModule,
             CharacterCounterModule,
             SettingsDetailNavigationItemModule,
-            EditableSettingItemModule
+            EditableSettingItemModule,
+            TabsModules
         ], PillsModule,
         BreadcrumbModule,
         FeedbackCardModule,
@@ -3408,7 +3445,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         InputTextareaModule,
                         CharacterCounterModule,
                         SettingsDetailNavigationItemModule,
-                        EditableSettingItemModule
+                        EditableSettingItemModule,
+                        TabsModules
                     ]
                 }]
         }] });
@@ -5257,7 +5295,7 @@ class FeedbackDetailCandidateInfoComponent {
     constructor() { }
 }
 FeedbackDetailCandidateInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<accordion>\n  <accordion-group *ngIf=\"model.workHistory.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Work History\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.workHistory.data?.length\">\n      <symphony-feedback-candidate-workhistory\n        [workHistories]=\"model.workHistory.data\"\n      ></symphony-feedback-candidate-workhistory>\n    </ng-container>\n    <ng-container *ngIf=\"!model.workHistory.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.workHistory.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.education.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Education\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.education.data?.length\">\n      <symphony-feedback-candidate-education\n        [educationHistories]=\"model.education.data\"\n      ></symphony-feedback-candidate-education>\n    </ng-container>\n    <ng-container *ngIf=\"!model.education.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.education.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.certifications.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Certifications\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.certifications.data?.length\">\n      <symphony-feedback-candidate-certifications\n        [certificationHistories]=\"model.certifications.data\"\n      ></symphony-feedback-candidate-certifications>\n    </ng-container>\n    <ng-container *ngIf=\"!model.certifications.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.certifications.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n</accordion>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1$5.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { type: i1$5.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["isOpen", "panelClass", "heading", "isDisabled"], outputs: ["isOpenChange"] }, { type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: ["heading"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<accordion>\n  <accordion-group *ngIf=\"model.workHistory.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Work History\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.workHistory.data?.length\">\n      <symphony-feedback-candidate-workhistory\n        [workHistories]=\"model.workHistory.data\"\n      ></symphony-feedback-candidate-workhistory>\n    </ng-container>\n    <ng-container *ngIf=\"!model.workHistory.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.workHistory.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.education.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Education\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.education.data?.length\">\n      <symphony-feedback-candidate-education\n        [educationHistories]=\"model.education.data\"\n      ></symphony-feedback-candidate-education>\n    </ng-container>\n    <ng-container *ngIf=\"!model.education.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.education.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.certifications.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Certifications\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.certifications.data?.length\">\n      <symphony-feedback-candidate-certifications\n        [certificationHistories]=\"model.certifications.data\"\n      ></symphony-feedback-candidate-certifications>\n    </ng-container>\n    <ng-container *ngIf=\"!model.certifications.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.certifications.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n</accordion>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1$6.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { type: i1$6.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["isOpen", "panelClass", "heading", "isDisabled"], outputs: ["isOpenChange"] }, { type: SfxAccordionHeaderComponent, selector: "symphony-sfx-accordion-header", inputs: ["heading"] }, { type: FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-candidate-info', encapsulation: ViewEncapsulation.None, template: "<accordion>\n  <accordion-group *ngIf=\"model.workHistory.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Work History\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.workHistory.data?.length\">\n      <symphony-feedback-candidate-workhistory\n        [workHistories]=\"model.workHistory.data\"\n      ></symphony-feedback-candidate-workhistory>\n    </ng-container>\n    <ng-container *ngIf=\"!model.workHistory.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.workHistory.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.education.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Education\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.education.data?.length\">\n      <symphony-feedback-candidate-education\n        [educationHistories]=\"model.education.data\"\n      ></symphony-feedback-candidate-education>\n    </ng-container>\n    <ng-container *ngIf=\"!model.education.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.education.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n\n  <accordion-group *ngIf=\"model.certifications.displaySection\" [isOpen]=\"true\">\n    <symphony-sfx-accordion-header\n      accordion-heading\n      heading=\"Certifications\"\n    ></symphony-sfx-accordion-header>\n    <ng-container *ngIf=\"model.certifications.data?.length\">\n      <symphony-feedback-candidate-certifications\n        [certificationHistories]=\"model.certifications.data\"\n      ></symphony-feedback-candidate-certifications>\n    </ng-container>\n    <ng-container *ngIf=\"!model.certifications.data?.length\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          noData;\n          context: { $implicit: model.certifications.displayErrorMessage }\n        \"\n      ></ng-container\n    ></ng-container>\n  </accordion-group>\n</accordion>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]
@@ -5310,7 +5348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
 class FeedbackDetailCandidateInfoModule {
 }
 FeedbackDetailCandidateInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FeedbackDetailCandidateInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, declarations: [FeedbackDetailCandidateInfoComponent], imports: [CommonModule, i1$5.AccordionModule, BrowserAnimationsModule,
+FeedbackDetailCandidateInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoModule, declarations: [FeedbackDetailCandidateInfoComponent], imports: [CommonModule, i1$6.AccordionModule, BrowserAnimationsModule,
         IconModule,
         H4Module,
         SfxAccordionHeaderModule,
@@ -7373,10 +7411,10 @@ class EditableSettingPartialPageComponent {
     }
 }
 EditableSettingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""] }]
+            args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange(partialPageModel)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { partialPageModel: [{
                 type: Input
             }], isLoadingPartialPage: [{
@@ -7431,10 +7469,10 @@ class SettingDetailsTemplateComponent {
     constructor() { }
 }
 SettingDetailsTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingDetailsTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template", ngImport: i0, template: "<div class=\"sfx\">\n  <section>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[breadcrumb]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section>\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"sfx-border-bottom-black-2\"></div>\n  </section>\n  <section class=\"row sfx-mt-30\">\n    <section class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[sfx-nav]\"></ng-content>\n    </section>\n    <section class=\"col-xs-12 col-sm-12 col-md-8 col-lg-9\">\n      <ng-content select=\"[sfx-content]\"></ng-content>\n    </section>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] });
+SettingDetailsTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template", ngImport: i0, template: "<section>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[breadcrumb]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section>\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"sfx-border-bottom-black-2\"></div>\n  </section>\n  <section class=\"row sfx-mt-30\">\n    <section class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[sfx-nav]\"></ng-content>\n    </section>\n    <section class=\"col-xs-12 col-sm-12 col-md-8 col-lg-9\">\n      <ng-content select=\"[sfx-content]\"></ng-content>\n    </section>\n  </section>\n</section>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailsTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-setting-details-template', template: "<div class=\"sfx\">\n  <section>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[breadcrumb]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section>\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"sfx-border-bottom-black-2\"></div>\n  </section>\n  <section class=\"row sfx-mt-30\">\n    <section class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[sfx-nav]\"></ng-content>\n    </section>\n    <section class=\"col-xs-12 col-sm-12 col-md-8 col-lg-9\">\n      <ng-content select=\"[sfx-content]\"></ng-content>\n    </section>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] }]
+            args: [{ selector: 'symphony-setting-details-template', template: "<section>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[breadcrumb]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section>\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"sfx-border-bottom-black-2\"></div>\n  </section>\n  <section class=\"row sfx-mt-30\">\n    <section class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[sfx-nav]\"></ng-content>\n    </section>\n    <section class=\"col-xs-12 col-sm-12 col-md-8 col-lg-9\">\n      <ng-content select=\"[sfx-content]\"></ng-content>\n    </section>\n  </section>\n</section>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class SettingDetailPageComponent {
@@ -7458,10 +7496,10 @@ class SettingDetailPageComponent {
     }
 }
 SettingDetailPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingDetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailPageComponent, selector: "symphony-setting-detail-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked", outreachValueChanged: "outreachValueChanged", outreachSaveClicked: "outreachSaveClicked", pageReloadClicked: "pageReloadClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (valueChanged)=\"onOutreachValueChange(model)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: ["partialPageModel", "isLoadingPartialPage", "errorPageState"], outputs: ["editableSettingValueChanged", "saveClicked", "reloadClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SettingDetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingDetailPageComponent, selector: "symphony-setting-detail-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked", outreachValueChanged: "outreachValueChanged", outreachSaveClicked: "outreachSaveClicked", pageReloadClicked: "pageReloadClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange(model)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""], components: [{ type: SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: ["partialPageModel", "isLoadingPartialPage", "errorPageState"], outputs: ["editableSettingValueChanged", "saveClicked", "reloadClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingDetailPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-setting-detail-page', template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (valueChanged)=\"onOutreachValueChange(model)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""] }]
+            args: [{ selector: 'symphony-setting-detail-page', template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list\n    sfx-nav\n    [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick(model)\"\n  ></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-editable-setting-partial-page\n      [partialPageModel]=\"model.partialPageModel\"\n      (editableSettingValueChanged)=\"onOutreachValueChange(model)\"\n      (saveClicked)=\"onOutreachSaveClick(model)\"\n      [isLoadingPartialPage]=\"model.isLoadingPartialPage\"\n      [errorPageState]=\"model.errorPageState\"\n      (reloadClicked)=\"onPageReloadClick($event)\"\n    >\n    <ng-content ngProjectAs=\"[dropdown-dropzone]\" select=\"[dropdown-dropzone]\"></ng-content>\n  </symphony-editable-setting-partial-page>\n  </section>\n</symphony-setting-details-template>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], detailNavigationClicked: [{
@@ -7532,5 +7570,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ButtonV2Component, ButtonV2Module, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ColorNames, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, ParagraphComponent, ParagraphModule, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ButtonV2Component, ButtonV2Module, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ColorNames, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputRadioComponent, InputRadioModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, ParagraphComponent, ParagraphModule, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, TabsComponent, TabsModules, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library.mjs.map