@symphony-talent/component-library 4.126.0 → 4.128.0

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

@@ -3023,6 +3023,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ReportsCardComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit(this.reportsCardModel);
+    }
+}
+ReportsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:170px}.reports-card-item-disabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu}.reports-card-item-disabled .reports-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-reports-card', template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:170px}.reports-card-item-disabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu}.reports-card-item-disabled .reports-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { reportsCardModel: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ReportsCardModule {
+}
+ReportsCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ReportsCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, declarations: [ReportsCardComponent], imports: [CommonModule, IconModule, H4Module, ParagraphModule, PipeModule], exports: [ReportsCardComponent] });
+ReportsCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, imports: [[CommonModule, IconModule, H4Module, ParagraphModule, PipeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ReportsCardComponent],
+                    imports: [CommonModule, IconModule, H4Module, ParagraphModule, PipeModule],
+                    exports: [ReportsCardComponent],
+                }]
+        }] });
+
 class ChatHistoryMessageItemComponent {
     constructor() { }
 }
@@ -6476,39 +6509,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
-class ReportsCardComponent {
-    constructor() {
-        this.clicked = new EventEmitter();
-    }
-    onClick() {
-        this.clicked.emit(this.reportsCardModel);
-    }
-}
-ReportsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:170px}.reports-card-item-disabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu}.reports-card-item-disabled .reports-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'symphony-reports-card', template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"reports-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:170px}.reports-card-item-disabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu}.reports-card-item-disabled .reports-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { reportsCardModel: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-class ReportsCardModule {
-}
-ReportsCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ReportsCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, declarations: [ReportsCardComponent], imports: [CommonModule, IconModule, H4Module, ParagraphModule, PipeModule], exports: [ReportsCardComponent] });
-ReportsCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, imports: [[CommonModule, IconModule, H4Module, ParagraphModule, PipeModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ReportsCardComponent],
-                    imports: [CommonModule, IconModule, H4Module, ParagraphModule, PipeModule],
-                    exports: [ReportsCardComponent],
-                }]
-        }] });
-
 class ReportsCardListComponent {
     constructor() {
         this.cardClicked = new EventEmitter();
@@ -6518,10 +6518,10 @@ class ReportsCardListComponent {
     }
 }
 ReportsCardListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportsCardListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardListComponent, selector: "symphony-reports-card-list", inputs: { reportsCardList: "reportsCardList" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let reportCard of reportsCardList\">\n      <symphony-reports-card\n        [reportsCardModel]=\"reportCard\"\n      ></symphony-reports-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"], components: [{ type: ReportsCardComponent, selector: "symphony-reports-card", inputs: ["reportsCardModel"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ReportsCardListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardListComponent, selector: "symphony-reports-card-list", inputs: { reportsCardList: "reportsCardList" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let reportCard of reportsCardList\">\n      <symphony-reports-card\n        [reportsCardModel]=\"reportCard\"\n        (clicked)=\"onCardClick($event)\"\n      ></symphony-reports-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"], components: [{ type: ReportsCardComponent, selector: "symphony-reports-card", inputs: ["reportsCardModel"], outputs: ["clicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-reports-card-list', template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let reportCard of reportsCardList\">\n      <symphony-reports-card\n        [reportsCardModel]=\"reportCard\"\n      ></symphony-reports-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"] }]
+            args: [{ selector: 'symphony-reports-card-list', template: "<section class=\"card-list\">\n  <ul class=\"row card-list list-unstyled\">\n    <li class=\"col-sm-4 col-md-3 card-list-item\" *ngFor=\"let reportCard of reportsCardList\">\n      <symphony-reports-card\n        [reportsCardModel]=\"reportCard\"\n        (clicked)=\"onCardClick($event)\"\n      ></symphony-reports-card>\n    </li>\n  </ul>\n</section>\n", styles: [".card-list-item{margin-bottom:40px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cardClicked: [{
                 type: Output
             }], reportsCardList: [{
@@ -9381,6 +9381,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class ReportsListTemplateComponent {
+    constructor() { }
+}
+ReportsListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ReportsListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsListTemplateComponent, selector: "symphony-reports-list-template", ngImport: i0, template: "  <section class=\"sfx-page-title\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n        <ng-content select=\"[page-title]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <div class=\"sfx-border-bottom-black-2\"></div>\n  <section\n    class=\"setting-list-header sfx-pt-30 sfx-pb-30 sfx-border-bottom-gray-1 sfx-mb-40\"\n  >\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-9 col-lg-9 sfx-pt-15\">\n        <ng-content select=\"[List-title]\"></ng-content>\n      </div>\n      <div class=\"col-xs-12 col-sm-12 col-md-3 col-lg-3\">\n        <ng-content select=\"[filter-input]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"setting-list-wrap\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[reports-card-list]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  ", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-reports-list-template', template: "  <section class=\"sfx-page-title\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n        <ng-content select=\"[page-title]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <div class=\"sfx-border-bottom-black-2\"></div>\n  <section\n    class=\"setting-list-header sfx-pt-30 sfx-pb-30 sfx-border-bottom-gray-1 sfx-mb-40\"\n  >\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-9 col-lg-9 sfx-pt-15\">\n        <ng-content select=\"[List-title]\"></ng-content>\n      </div>\n      <div class=\"col-xs-12 col-sm-12 col-md-3 col-lg-3\">\n        <ng-content select=\"[filter-input]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  <section class=\"setting-list-wrap\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n        <ng-content select=\"[reports-card-list]\"></ng-content>\n      </div>\n    </div>\n  </section>\n  ", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class ReportsPageComponent {
+    constructor() {
+        this.cardClicked = new EventEmitter();
+    }
+    ngOnInit() {
+        this.filteredCardList = this.model.reportsCardList;
+    }
+    keywordSearch(keyword) {
+        this.filteredCardList = this.model.reportsCardList.filter((card) => card.title.toLowerCase().includes(keyword.toLowerCase()));
+    }
+    onCardClick(card) {
+        this.cardClicked.emit(card);
+    }
+}
+ReportsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ReportsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsPageComponent, selector: "symphony-reports-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-reports-list-template *ngIf=\"model\">\n    <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n    <symphony-h4 List-title>{{ model.listTitle }}</symphony-h4>\n    <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n  >\n  </symphony-input-text>\n    <symphony-reports-card-list\n      reports-card-list\n      [reportsCardList]=\"filteredCardList\"\n      (cardClicked)=\"onCardClick($event)\"\n    ></symphony-reports-card-list>\n</symphony-reports-list-template>\n  ", styles: [""], components: [{ type: ReportsListTemplateComponent, selector: "symphony-reports-list-template" }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "maxlength", "isDisabled"], outputs: ["textChange"] }, { type: ReportsCardListComponent, selector: "symphony-reports-card-list", inputs: ["reportsCardList"], outputs: ["cardClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-reports-page', template: "<symphony-reports-list-template *ngIf=\"model\">\n    <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n    <symphony-h4 List-title>{{ model.listTitle }}</symphony-h4>\n    <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n  >\n  </symphony-input-text>\n    <symphony-reports-card-list\n      reports-card-list\n      [reportsCardList]=\"filteredCardList\"\n      (cardClicked)=\"onCardClick($event)\"\n    ></symphony-reports-card-list>\n</symphony-reports-list-template>\n  ", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], cardClicked: [{
+                type: Output
+            }] } });
+
+class ReportsListTemplateModule {
+}
+ReportsListTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ReportsListTemplateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateModule, declarations: [ReportsListTemplateComponent], imports: [CommonModule,
+        PlaceholderModule], exports: [ReportsListTemplateComponent] });
+ReportsListTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateModule, imports: [[
+            CommonModule,
+            PlaceholderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsListTemplateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ReportsListTemplateComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PlaceholderModule
+                    ],
+                    exports: [ReportsListTemplateComponent],
+                }]
+        }] });
+
+class ReportsPageModule {
+}
+ReportsPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ReportsPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageModule, declarations: [ReportsPageComponent], imports: [CommonModule,
+        ReportsListTemplateModule,
+        H3Module,
+        H4Module,
+        ParagraphModule,
+        InputTextModule,
+        ReportsCardListModule,
+        ReportsCardModule], exports: [ReportsPageComponent] });
+ReportsPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageModule, imports: [[
+            CommonModule,
+            ReportsListTemplateModule,
+            H3Module,
+            H4Module,
+            ParagraphModule,
+            InputTextModule,
+            ReportsCardListModule,
+            ReportsCardModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ReportsPageComponent],
+                    imports: [
+                        CommonModule,
+                        ReportsListTemplateModule,
+                        H3Module,
+                        H4Module,
+                        ParagraphModule,
+                        InputTextModule,
+                        ReportsCardListModule,
+                        ReportsCardModule
+                    ],
+                    exports: [ReportsPageComponent],
+                }]
+        }] });
+
 /*
  * ATOMS
  */
@@ -9389,5 +9486,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, AdditionModalComponent, AdditionModalModule, AdditionalInformationCardListComponent, AdditionalInformationCardListModule, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AssignToUserModalComponent, AssignToUserModalModule, AssignedToWidgetComponent, AssignedToWidgetModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, ButtonV2Component, ButtonV2Module, ButtonWithIconComponent, ButtonWithIconModule, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ChatHistoryDateStampComponent, ChatHistoryDateStampModule, ChatHistoryMessageAvatarComponent, ChatHistoryMessageAvatarModule, ChatHistoryMessageBubbleComponent, ChatHistoryMessageBubbleModule, ChatHistoryMessageItemComponent, ChatHistoryMessageItemModule, ChatHistoryMessageListComponent, ChatHistoryMessageListModule, ChatbotHistoryModalComponent, ChatbotHistoryModalModule, ColorNames, ColoredTextIndicatorComponent, ColoredTextIndicatorModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, DomainWhitelistingPartialPageComponent, DomainWhitelistingPartialPageModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FeedbackSettingDetailsPageComponent, FeedbackSettingDetailsPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FilterDetailComponent, FilterDetailModule, FilterDetailTreeComponent, FilterDetailTreeModule, FilterTabsComponent, FilterTabsModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InformationModalComponent, InformationModalModule, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputFileUploadComponent, InputFileUploadModule, InputLimitedTextComponent, InputLimitedTextModule, InputRadioComponent, InputRadioModule, InputRadioToggleComponent, InputRadioToggleModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PartialPages, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, ScheduleInterviewModalComponent, ScheduleInterviewModalModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SettingsLicenseManagementComponent, SettingsLicenseManagementModule, SettingsReportManagementComponent, SettingsReportManagementModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, SmsUsageReportPageComponent, SmsUsageReportPageModule, SymphonyModalComponent, SymphonyModalModule, TabsComponent, TabsModules, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
+export { ActionBarComponent, ActionBarJobListComponent, ActionBarJobListModule, ActionBarModule, ActionBarSelectionCounterComponent, ActionBarSelectionCounterModule, ActivityScoreLevel, AdditionModalComponent, AdditionModalModule, AdditionalInformationCardListComponent, AdditionalInformationCardListModule, AdvanceFilterSelectedCounterComponent, AdvanceFilterSelectedCounterModule, AdvanceSearchModalComponent, AdvanceSearchModalModule, AdvertiseModalComponent, AdvertiseModalModule, AdvertisedJobPostingsListPageComponent, AdvertisedJobPostingsListPageModule, AdvertisedJobPostingsModalComponent, AdvertisedJobPostingsModalModule, AdvertisedJobsCostComponent, AdvertisedJobsCostModule, AlertDuration, AssignToUserModalComponent, AssignToUserModalModule, AssignedToWidgetComponent, AssignedToWidgetModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, ButtonV2Component, ButtonV2Module, ButtonWithIconComponent, ButtonWithIconModule, CapitalizeFirstCharacterPipe, CardComponent, CardListComponent, CardListModule, CardModule, CharacterCounterComponent, CharacterCounterModule, ChatHistoryDateStampComponent, ChatHistoryDateStampModule, ChatHistoryMessageAvatarComponent, ChatHistoryMessageAvatarModule, ChatHistoryMessageBubbleComponent, ChatHistoryMessageBubbleModule, ChatHistoryMessageItemComponent, ChatHistoryMessageItemModule, ChatHistoryMessageListComponent, ChatHistoryMessageListModule, ChatbotHistoryModalComponent, ChatbotHistoryModalModule, ColorNames, ColoredTextIndicatorComponent, ColoredTextIndicatorModule, ConfirmationModalComponent, ConfirmationModalModule, ContactActivityScoreComponent, ContactActivityScoreModule, ContextualMenuComponent, ContextualMenuModule, DocumentManagementItemComponent, DocumentManagementItemModule, DocumentManagementListComponent, DocumentManagementListModule, DomainWhitelistingPartialPageComponent, DomainWhitelistingPartialPageModule, EditableSettingItemComponent, EditableSettingItemListComponent, EditableSettingItemListModule, EditableSettingItemModule, EditableSettingKey, EditableSettingPartialPageComponent, EditableSettingPartialPageModule, EmailValidator, EventSettingsMoreOptionsComponent, EventSettingsMoreOptionsModule, EventsSettingsPageComponent, EventsSettingsPageModule, FeedbackCardComponent, FeedbackCardListComponent, FeedbackCardListModule, FeedbackCardModule, FeedbackCardState, FeedbackDetailPageComponent, FeedbackDetailPageModule, FeedbackListPageComponent, FeedbackListPageModule, FeedbackLoginModalComponent, FeedbackLoginModalModule, FeedbackRequestListPageComponent, FeedbackRequestListPageModule, FeedbackSettingDetailsPageComponent, FeedbackSettingDetailsPageModule, FileUploadComponent, FileUploadModule, FileUploadV2Component, FileUploadV2Module, FilterAreaComponent, FilterAreaModule, FilterDetailComponent, FilterDetailModule, FilterDetailTreeComponent, FilterDetailTreeModule, FilterTabsComponent, FilterTabsModule, FormattedCounterComponent, FormattedCounterModule, FrameworkModule, GridActionsComponent, GridActionsModule, GridCellClickableComponent, GridCellClickableModule, GridCellLoaderModule, GridComponent, GridControlsComponent, GridControlsModule, GridDownloadComponent, GridDownloadModule, GridLoadingCellComponent, GridModule, GridNoRowsOverlayComponent, GridNoRowsOverlayModule, GridToggleCellRendererComponent, GridToggleCellRendererModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, H5WithIconComponent, H5WithIconModule, IconComponent, IconModule, IconWithTooltipComponent, IconWithTooltipModule, IconWrapperComponent, IconWrapperModule, Icons, InformationModalComponent, InformationModalModule, InputCheckboxComponent, InputCheckboxListComponent, InputCheckboxListModule, InputCheckboxModule, InputChipsComponent, InputChipsModule, InputDropdownComponent, InputDropdownList, InputDropdownListItemModel, InputDropdownModule, InputFileUploadComponent, InputFileUploadModule, InputLimitedTextComponent, InputLimitedTextModule, InputRadioComponent, InputRadioModule, InputRadioToggleComponent, InputRadioToggleModule, InputSearchCheckboxDropdownComponent, InputSearchCheckboxDropdownModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputToggleComponent, InputToggleModule, JobListPageComponent, JobListPageModule, LibrariesPageComponent, LibrariesPageModule, LinkedinPremiumJobPostingsModalComponent, LinkedinPremiumJobPostingsModalModule, MoleculesModule, MultiSelectDataModule, MultiselectSearchCheckbox, NavigationLinkComponent, NavigationLinkModule, NotificationsComponent, NotificationsModule, OrganismsModule, OverflowTextComponent, OverflowTextModule, OverflowTextTooltipComponent, OverflowTextTooltipModule, ParagraphComponent, ParagraphModule, PartialPages, PhaserCardComponent, PhaserCardModule, PhaserComponent, PhaserModule, PillComponent, PillModule, PillsComponent, PillsModule, PipeModule, RelevanceScoreComponent, RelevanceScoreModule, ReportsCardComponent, ReportsCardListComponent, ReportsCardListModule, ReportsCardModule, ReportsPageComponent, ReportsPageModule, ScheduleInterviewModalComponent, ScheduleInterviewModalModule, SettingDetailPageComponent, SettingDetailPageModule, SettingListPageComponent, SettingListPageModule, SettingsDetailNavigationItemComponent, SettingsDetailNavigationItemModule, SettingsDetailNavigationListComponent, SettingsDetailNavigationListModule, SettingsLicenseManagementComponent, SettingsLicenseManagementModule, SettingsReportManagementComponent, SettingsReportManagementModule, SfxLoaderComponent, SfxLoaderModule, SfxPageLoaderComponent, SfxPageLoaderModule, SfxProgressBarComponent, SfxProgressBarModule, SidebarNavigationComponent, SidebarNavigationModule, SidebarNavigationV2Component, SidebarNavigationV2Module, SmsUsageReportPageComponent, SmsUsageReportPageModule, SymphonyModalComponent, SymphonyModalModule, TabsComponent, TabsModules, ToasterAlertComponent, ToasterAlertModel, ToasterAlertModule, ToasterAlertType, TooltipWrapperComponent, TooltipWrapperModule, TrimIdPipe, TwoColumnFilterAreaComponent, TwoColumnFilterAreaModule, UploadResumeModalComponent, UploadResumeModalModule, VerticalSeparatorComponent, VerticalSeparatorModule, gridType };
 //# sourceMappingURL=symphony-talent-component-library.mjs.map