@symphony-talent/component-library 4.227.0 → 4.228.0

package/esm2020/projects/component-library/lib/molecules/file-upload-status/file-upload-status.component.mjs

@@ -14,7 +14,7 @@ export class FileUploadStatusComponent {
     }
 }
 FileUploadStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: i1.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FileUploadStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FileUploadStatusComponent, selector: "symphony-file-upload-status", inputs: { fileUploadStatusModel: "fileUploadStatusModel", uploadStatus: "uploadStatus" }, outputs: { closeUploadComplete: "closeUploadComplete" }, ngImport: i0, template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"], components: [{ type: i1.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FileUploadStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-file-upload-status', template: "<!-- File Upload In Progress -->\n<div class=\"sfx-file-uploaded\" *ngIf=\"fileUploadStatusModel\">\n  <symphony-h3\n    class=\"sfx-mt-0 sfx-mb-15 sfx-font24\"\n    [text]=\"uploadStatus\"\n  ></symphony-h3>\n  <div class=\"sfx-position-relative sfx-mt-15\">\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showSelectedfile\"\n      class=\"sfx-mr-10 sfx-txt-green fileuploadicon\"\n      [icon]=\"'si-confirmation'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showUploadFailed\"\n      class=\"sfx-mr-10 sfx-txt-red fileuploadicon\"\n      [icon]=\"'si-pending-incomplete'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n    <symphony-paragraph\n      class=\"sfx-mr-40 sfx-font-bold file-name\"\n      [text]=\"fileUploadStatusModel.fileName\"\n    ></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-ml-40\"\n      [text]=\"fileUploadStatusModel.fileSize\"\n    ></symphony-paragraph>\n    <symphony-icon\n      *ngIf=\"fileUploadStatusModel.showClose\"\n      class=\"pull-right\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"oncloseUploadComplete()\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-file-uploaded\">\n    <symphony-sfx-progress-bar\n      *ngIf=\"fileUploadStatusModel.showProgressBar\"\n      [progress]=\"fileUploadStatusModel.progress\"\n    ></symphony-sfx-progress-bar>\n    <div\n      *ngIf=\"!fileUploadStatusModel.showProgressBar\"\n      class=\"progress-bar-spacer\"\n    ></div>\n  </div>\n</div>\n<!-- (clicked)=\"closeUploadComplete()\" -->\n", styles: [".sfx-bg-light-gray3{background:#f1f1f1}.sfx-v-h-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.sfx-min-height{min-height:256px}.sfx-file-upload{display:contents}.sfx-file-upload .symbol{border:1px dashed #000;width:80px;height:80px;display:inline-block;border-radius:50%;text-align:center;line-height:85px;margin-bottom:50px;font-style:normal;font-size:24px}.sfx-file-uploaded{min-width:450px;max-width:450px}.sfx-file-uploaded .fileuploadicon{top:2px;position:relative}.sfx-file-uploaded p .sfx-icon-Close_Outlined{position:absolute;right:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%)}.sfx-file-uploaded symphony-paragraph{display:inline-block}.sfx-file-uploaded symphony-paragraph:first-child{font-weight:700}.sfx-word-break{word-break:break-word}.sfx-progressBar.progress{background-color:#fff;border-radius:10px}.sfx-progressBar.progress .progress-bar{background-color:#00bb5b}.progress-bar-spacer{height:20px}\n"] }]

package/esm2020/projects/component-library/lib/molecules/icon-swatch/icon-swatch.component.mjs

@@ -14,7 +14,7 @@ export class IconSwatchComponent {
     }
 }
 IconSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: i1.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IconSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconSwatchComponent, selector: "symphony-icon-swatch", inputs: { iconSwatchModel: "iconSwatchModel", isInverse: "isInverse" }, ngImport: i0, template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"], components: [{ type: i1.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconSwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-icon-swatch', template: "<div class=\"sfx-icon-swatch\">\n  <div\n    class=\"sfx-icon-wrapper\"\n    [ngClass]=\"{\n      'mt-0': iconSwatchModel.hasBorder\n    }\"\n  >\n    <symphony-icon-wrapper\n      *ngIf=\"iconSwatchModel.hasBorder\"\n      [isInverse]=\"isInverse\"\n    >\n      <symphony-icon [icon]=\"iconSwatchModel.icon\"></symphony-icon>\n    </symphony-icon-wrapper>\n    <symphony-icon\n      *ngIf=\"!iconSwatchModel.hasBorder\"\n      [icon]=\"iconSwatchModel.icon\"\n    ></symphony-icon>\n  </div>\n  <div class=\"sfx-icon-description-wrapper\">\n    <symphony-h5 [text]=\"iconSwatchModel.iconName\"></symphony-h5>\n\n    <symphony-paragraph [text]=\"iconSwatchModel.iconClass\"></symphony-paragraph>\n  </div>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-icon-wrapper{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;text-align:center}.mt-0{margin-top:0}.sfx-icon-description-wrapper{display:inline-block}\n"] }]

package/esm2020/projects/component-library/lib/molecules/invoice-line-item/invoice-line-item.component.mjs

@@ -12,7 +12,7 @@ export class InvoiceLineItemComponent {
     }
 }
 InvoiceLineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InvoiceLineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"], components: [{ type: i1.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InvoiceLineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InvoiceLineItemComponent, selector: "symphony-invoice-line-item", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"], components: [{ type: i1.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InvoiceLineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-invoice-line-item', template: "<div class=\"row sfx-d-flex\">\n  <div class=\"text-left col-xs-12 col-sm-8 sfx-d-flex\">\n    <symphony-h5 *ngIf=\"model.label\">{{ model.label }}</symphony-h5>\n    <symphony-paragraph>{{ model.textLeft }}</symphony-paragraph>\n  </div>\n  <div class=\"text-right col-xs-12 col-sm-4 sfx-d-flex\">\n    <symphony-paragraph>{{ model.textRight }}</symphony-paragraph>\n  </div>\n</div>\n", styles: [".text-right{justify-content:end}\n"] }]

package/esm2020/projects/component-library/lib/molecules/molecules.module.mjs

@@ -15,6 +15,7 @@ import { FileUploadStatusModule } from './file-upload-status/file-upload-status.
 import { ButtonWithIconModule } from './button-with-icon/button-with-icon.module';
 import { IconWithTooltipModule } from './icon-with-tooltip/icon-with-tooltip.module';
 import { DocumentManagementItemModule } from './document-management-item/document-management-item.module';
+import { CandidateItemModule } from './candidate-item/candidate-item.module';
 import { PhaserCardModule } from './phaser-card/phaser-card.module';
 import { ActionBarSelectionCounterModule } from './action-bar-selection-counter/action-bar-selection-counter.module';
 import { InputTextareaModule } from '../atoms/input-textarea/input-textarea.module';
@@ -50,6 +51,7 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ButtonWithIconModule,
         IconWithTooltipModule,
         DocumentManagementItemModule,
+        CandidateItemModule,
         ActionBarSelectionCounterModule,
         InputTextareaModule,
         CharacterCounterModule,
@@ -68,6 +70,7 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FeedbackCardModule,
         FilterTabsV2Module,
         DocumentManagementItemModule,
+        CandidateItemModule,
         PhaserCardModule,
         SettingsDetailNavigationItemModule,
         TaskStatusModule] });
@@ -88,6 +91,7 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             ButtonWithIconModule,
             IconWithTooltipModule,
             DocumentManagementItemModule,
+            CandidateItemModule,
             ActionBarSelectionCounterModule,
             InputTextareaModule,
             CharacterCounterModule,
@@ -107,6 +111,7 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         FeedbackCardModule,
         FilterTabsV2Module,
         DocumentManagementItemModule,
+        CandidateItemModule,
         PhaserCardModule,
         SettingsDetailNavigationItemModule,
         TaskStatusModule] });
@@ -120,6 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         FeedbackCardModule,
                         FilterTabsV2Module,
                         DocumentManagementItemModule,
+                        CandidateItemModule,
                         PhaserCardModule,
                         SettingsDetailNavigationItemModule,
                         TaskStatusModule,
@@ -141,6 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         ButtonWithIconModule,
                         IconWithTooltipModule,
                         DocumentManagementItemModule,
+                        CandidateItemModule,
                         ActionBarSelectionCounterModule,
                         InputTextareaModule,
                         CharacterCounterModule,
@@ -158,4 +165,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                     ],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9sZWN1bGVzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvbW9sZWN1bGVzL21vbGVjdWxlcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzdELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNsRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUN2RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN0RSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNyRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUMxRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxvREFBb0QsQ0FBQztBQUM5RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUN4RixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUNsRixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNyRixPQUFPLEVB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QUFFO3dCQUNQLFdBQVc7d0JBQ1gsZ0JBQWdCO3dCQUNoQixrQkFBa0I7d0JBQ2xCLGtCQUFrQjt3QkFDbEIsNEJBQTRCO3dCQUM1QixnQkFBZ0I7d0JBQ2hCLGtDQUFrQzt3QkFDbEMsZ0JBQWdCO3FCQUNqQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixZQUFZO3dCQUNaLG9CQUFvQjt3QkFDcEIsV0FBVzt3QkFDWCxpQkFBaUI7d0JBQ2pCLGdCQUFnQjt3QkFDaEIsZ0JBQWdCO3dCQUNoQixnQkFBZ0I7d0JBQ2hCLHFCQUFxQjt3QkFDckIsd0JBQXdCO3dCQUN4QixnQkFBZ0I7d0JBQ2hCLHNCQUFzQjt3QkFDdEIsa0JBQWtCO3dCQUNsQixvQkFBb0I7d0JBQ3BCLHFCQUFxQjt3QkFDckIsNEJBQTRCO3dCQUM1QiwrQkFBK0I7d0JBQy9CLG1CQUFtQjt3QkFDbkIsc0JBQXNCO3dCQUN0QixrQ0FBa0M7d0JBQ2xDLHlCQUF5Qjt3QkFDekIsV0FBVzt3QkFDWCxpQkFBaUI7d0JBQ2pCLHlCQUF5Qjt3QkFDekIsd0JBQXdCO3dCQUN4Qiw0QkFBNEI7d0JBQzVCLGdCQUFnQjt3QkFDaEIsa0JBQWtCO3dCQUNsQixzQkFBc0I7d0JBQ3RCLGdCQUFnQjtxQkFDakI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEF2YXRhck1vZHVsZSB9IGZyb20gJy4uL2F0b21zL2F2YXRhci9hdmF0YXIubW9kdWxlJztcbmltcG9ydCB7IFBpbGxzTW9kdWxlIH0gZnJvbSAnLi9waWxscy9waWxscy5tb2R1bGUnO1xuaW1wb3J0IHsgQ29sb3JTd2F0Y2hNb2R1bGUgfSBmcm9tICcuL2NvbG9yLXN3YXRjaC9jb2xvci1zd2F0Y2gubW9kdWxlJztcbmltcG9ydCB7IEljb25Td2F0Y2hNb2R1bGUgfSBmcm9tICcuL2ljb24tc3dhdGNoL2ljb24tc3dhdGNoLm1vZHVsZSc7XG5pbXBvcnQgeyBCcmVhZGNydW1iTW9kdWxlIH0gZnJvbSAnLi9icmVhZGNydW1iL2JyZWFkY3J1bWIubW9kdWxlJztcbmltcG9ydCB7IENvbnRleHR1YWxNZW51TW9kdWxlIH0gZnJvbSAnLi4vYXRvbXMvY29udGV4dHVhbC1tZW51L2NvbnRleHR1YWwtbWVudS5tb2R1bGUnO1xuaW1wb3J0IHsgSDVXaXRoSWNvbk1vZHVsZSB9IGZyb20gJy4vaDUtd2l0aC1pY29uL2g1LXdpdGgtaWNvbi5tb2R1bGUnO1xuaW1wb3J0IHsgSW52b2ljZUxpbmVJdGVtTW9kdWxlIH0gZnJvbSAnLi9pbnZvaWNlLWxpbmUtaXRlbS9pbnZvaWNlLWxpbmUtaXRlbS5tb2R1bGUnO1xuaW1wb3J0IHsgRmVlZGJhY2tDYXJkTW9kdWxlIH0gZnJvbSAnLi9mZWVkYmFjay1jYXJkL2ZlZWRiYWNrLWNhcmQubW9kdWxlJztcbmltcG9ydCB7IFNmeEFjY29yZGlvbkhlYWRlck1vZHVsZSB9IGZyb20gJy4vc2Z4LWFjY29yZGlvbi1oZWFkZXIvc2Z4LWFjY29yZGlvbi1oZWFkZXIubW9kdWxlJztcbmltcG9ydCB7IEZpbGVVcGxvYWRNb2R1bGUgfSBmcm9tICcuL2ZpbGUtdXBsb2FkL2ZpbGUtdXBsb2FkLm1vZHVsZSc7XG5pbXBvcnQgeyBGaWxlVXBsb2FkU3RhdHVzTW9kdWxlIH0gZnJvbSAnLi9maWxlLXVwbG9hZC1zdGF0dXMvZmlsZS11cGxvYWQtc3RhdHVzLm1vZHVsZSc7XG5pbXBvcnQgeyBCdXR0b25XaXRoSWNvbk1vZHVsZSB9IGZyb20gJy4vYnV0dG9uLXdpdGgtaWNvbi9idXR0b24td2l0aC1pY29uLm1vZHVsZSc7XG5pbXBvcnQgeyBJY29uV2l0aFRvb2x0aXBNb2R1bGUgfSBmcm9tICcuL2ljb24td2l0aC10b29sdGlwL2ljb24td2l0aC10b29sdGlwLm1vZHVsZSc7XG5pbXBvcnQgeyBEb2N1bWVudE1hbmFnZW1lbnRJdGVtTW9kdWxlIH0gZnJvbSAnLi9kb2N1bWVudC1tYW5hZ2VtZW50LWl0ZW0vZG9jdW1lbnQtbWFuYWdlbWVudC1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBQaGFzZXJDYXJkTW9kdWxlIH0gZnJvbSAnLi9waGFzZXItY2FyZC9waGFzZXItY2FyZC5tb2R1bGUnO1xuaW1wb3J0IHsgQWN0aW9uQmFyU2VsZWN0aW9uQ291bnRlck1vZHVsZSB9IGZyb20gJy4vYWN0aW9uLWJhci1zZWxlY3Rpb24tY291bnRlci9hY3Rpb24tYmFyLXNlbGVjdGlvbi1jb3VudGVyLm1vZHVsZSc7XG5pbXBvcnQgeyBJbnB1dFRleHRhcmVhTW9kdWxlIH0gZnJvbSAnLi4vYXRvbXMvaW5wdXQtdGV4dGFyZWEvaW5wdXQtdGV4dGFyZWEubW9kdWxlJztcbmltcG9ydCB7IENoYXJhY3RlckNvdW50ZXJNb2R1bGUgfSBmcm9tICcuLi9hdG9tcy9jaGFyYWN0ZXItY291bnRlci9jaGFyYWN0ZXItY291bnRlci5tb2R1bGUnO1xuaW1wb3J0IHsgU2V0dGluZ3NEZXRhaWxOYXZpZ2F0aW9uSXRlbU1vZHVsZSB9IGZyb20gJy4vc2V0dGluZ3MtZGV0YWlsLW5hdmlnYXRpb24taXRlbS9zZXR0aW5ncy1kZXRhaWwtbmF2aWdhdGlvbi1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBFZGl0YWJsZVNldHRpbmdJdGVtTW9kdWxlIH0gZnJvbSAnLi9lZGl0YWJsZS1zZXR0aW5nLWl0ZW0vZWRpdGFibGUtc2V0dGluZy1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBUYWJzTW9kdWxlcyB9IGZyb20gJy4vdGFicy90YWJzLm1vZHVsZSc7XG5pbXBvcnQgeyBJbnB1dFRvZ2dsZU1vZHVsZSB9IGZyb20gJy4uL2F0b21zL2lucHV0LXRvZ2dsZS9pbnB1dC10b2dnbGUubW9kdWxlJztcbmltcG9ydCB7IExhYmVsbGVkSW5wdXRUb2dnbGVNb2R1bGUgfSBmcm9tICcuL2xhYmVsbGVkLWlucHV0LXRvZ2dsZS9sYWJlbGxlZC1pbnB1dC10b2dnbGUubW9kdWxlJztcbmltcG9ydCB7IExhYmVsbGVkVG9nZ2xlTGlzdE1vZHVsZSB9IGZyb20gJy4vbGFiZWxsZWQtdG9nZ2xlLWxpc3QvbGFiZWxsZWQtdG9nZ2xlLWxpc3QubW9kdWxlJztcbmltcG9ydCB7IENoYXRIaXN0b3J5TWVzc2FnZUl0ZW1Nb2R1bGUgfSBmcm9tICcuL2NoYXQtaGlzdG9yeS1tZXNzYWdlLWl0ZW0vY2hhdC1oaXN0b3J5LW1lc3NhZ2UtaXRlbS5tb2R1bGUnO1xuaW1wb3J0IHsgRmlsdGVyVGFic01vZHVsZSB9IGZyb20gJy4vZmlsdGVyLXRhYnMvZmlsdGVyLXRhYnMubW9kdWxlJztcbmltcG9ydCB7IEZpbHRlckRldGFpbFRyZWVNb2R1bGUgfSBmcm9tICcuL2ZpbHRlci1kZXRhaWwtdHJlZS9maWx0ZXItZGV0YWlsLXRyZWUubW9kdWxlJztcbmltcG9ydCB7IEZpbHRlclRhYnNWMk1vZHVsZSB9IGZyb20gJy4vZmlsdGVyLXRhYnMtdjIvZmlsdGVyLXRhYnMubW9kdWxlJztcbmltcG9ydCB7IFRhc2tTdGF0dXNNb2R1bGUgfSBmcm9tICcuL3Rhc2stc3RhdHVzL3Rhc2stc3RhdHVzLm1vZHVsZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW10sXG4gIGV4cG9ydHM6IFtcbiAgICBQaWxsc01vZHVsZSxcbiAgICBCcmVhZGNydW1iTW9kdWxlLFxuICAgIEZlZWRiYWNrQ2FyZE1vZHVsZSxcbiAgICBGaWx0ZXJUYWJzVjJNb2R1bGUsXG4gICAgRG9jdW1lbnRNYW5hZ2VtZW50SXRlbU1vZHVsZSxcbiAgICBQaGFzZXJDYXJkTW9kdWxlLFxuICAgIFNldHRpbmdzRGV0YWlsTmF2aWdhdGlvbkl0ZW1Nb2R1bGUsXG4gICAgVGFza1N0YXR1c01vZHVsZSxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBBdmF0YXJNb2R1bGUsXG4gICAgQ29udGV4dHVhbE1lbnVNb2R1bGUsXG4gICAgUGlsbHNNb2R1bGUsXG4gICAgQ29sb3JTd2F0Y2hNb2R1bGUsXG4gICAgSWNvblN3YXRjaE1vZHVsZSxcbiAgICBCcmVhZGNydW1iTW9kdWxlLFxuICAgIEg1V2l0aEljb25Nb2R1bGUsXG4gICAgSW52b2ljZUxpbmVJdGVtTW9kdWxlLFxuICAgIFNmeEFjY29yZGlvbkhlYWRlck1vZHVsZSxcbiAgICBGaWxlVXBsb2FkTW9kdWxlLFxuICAgIEZpbGVVcGxvYWRTdGF0dXNNb2R1bGUsXG4gICAgRmVlZGJhY2tDYXJkTW9kdWxlLFxuICAgIEJ1dHRvbldpdGhJY29uTW9kdWxlLFxuICAgIEljb25XaXRoVG9vbHRpcE1vZHVsZSxcbiAgICBEb2N1bWVudE1hbmFnZW1lbnRJdGVtTW9kdWxlLFxuICAgIEFjdGlvbkJhclNlbGVjdGlvbkNvdW50ZXJNb2R1bGUsXG4gICAgSW5wdXRUZXh0YXJlYU1vZHVsZSxcbiAgICBDaGFyYWN0ZXJDb3VudGVyTW9kdWxlLFxuICAgIFNldHRpbmdzRGV0YWlsTmF2aWdhdGlvbkl0ZW1Nb2R1bGUsXG4gICAgRWRpdGFibGVTZXR0aW5nSXRlbU1vZHVsZSxcbiAgICBUYWJzTW9kdWxlcyxcbiAgICBJbnB1dFRvZ2dsZU1vZHVsZSxcbiAgICBMYWJlbGxlZElucHV0VG9nZ2xlTW9kdWxlLFxuICAgIExhYmVsbGVkVG9nZ2xlTGlzdE1vZHVsZSxcbiAgICBDaGF0SGlzdG9yeU1lc3NhZ2VJdGVtTW9kdWxlLFxuICAgIEZpbHRlclRhYnNNb2R1bGUsXG4gICAgRmlsdGVyVGFic1YyTW9kdWxlLFxuICAgIEZpbHRlckRldGFpbFRyZWVNb2R1bGUsXG4gICAgVGFza1N0YXR1c01vZHVsZSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgTW9sZWN1bGVzTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9sZWN1bGVzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvbW9sZWN1bGVzL21vbGVjdWxlcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzdELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNsRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUN2RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN0RSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNyRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUMxRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxvREFBb0QsQ0FBQztBQUM5RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUN4RixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUNsRixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNyRixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSw0REFBNEQsQ0FBQztBQUMxRyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsK0JBQStCLEVBQUUsTUFBTSxvRUFBb0UsQ0FBQztBQUNySCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUNwRixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUM3RixPQUFPLEVBQUUsa0NBQWtDLEVBQUUsTUFBTSwwRUFBMEUsQ0FBQztBQUM5SCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUNqRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDakQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDOUUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDakcsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sb0RBQW9ELENBQUM7QUFDOUYsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sOERBQThELENBQUM7QUFDNUcsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDcEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDeEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDekUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBaURwRSxNQUFNLE9BQU8sZUFBZTs7NEdBQWYsZUFBZTs2R0FBZixlQUFlLFlBakN4QixZQUFZO1FBQ1osWUFBWTtRQUNaLG9CQUFvQjtRQUNwQixXQUFXO1FBQ1gsaUJBQWlCO1FBQ2pCLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLHFCQUFxQjtRQUNyQix3QkFBd0I7UUFDeEIsZ0JBQWdCO1FBQ2hCLHNCQUFzQjtRQUN0QixrQkFBa0I7UUFDbEIsb0JBQW9CO1FBQ3BCLHFCQUFxQjtRQUNyQiw0QkFBNEI7UUFDNUIsbUJBQW1CO1FBQ25CLCtCQUErQjtRQUMvQixtQkFBbUI7UUFDbkIsc0JBQXNCO1FBQ3RCLGtDQUFrQztRQUNsQyx5QkFBeUI7UUFDekIsV0FBVztRQUNYLGlCQUFpQjtRQUNqQix5QkFBeUI7UUFDekIsd0JBQXdCO1FBQ3hCLDRCQUE0QjtRQUM1QixnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLHNCQUFzQjtRQUN0QixnQkFBZ0IsYUF6Q2hCLFdBQVc7UUFDWCxnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLGtCQUFrQjtRQUNsQiw0QkFBNEI7UUFDNUIsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQixrQ0FBa0M7UUFDbEMsZ0JBQWdCOzZHQW9DUCxlQUFlLFlBbENqQjtZQUNQLFlBQVk7WUFDWixZQUFZO1lBQ1osb0JBQW9CO1lBQ3BCLFdBQVc7WUFDWCxpQkFBaUI7WUFDakIsZ0JBQWdCO1lBQ2hCLGdCQUFnQjtZQUNoQixnQkFBZ0I7WUFDaEIscUJBQXFCO1lBQ3JCLHdCQUF3QjtZQUN4QixnQkFBZ0I7WUFDaEIsc0JBQXNCO1lBQ3RCLGtCQUFrQjtZQUNsQixvQkFBb0I7WUFDcEIscUJBQXFCO1lBQ3JCLDRCQUE0QjtZQUM1QixtQkFBbUI7WUFDbkIsK0JBQStCO1lBQy9CLG1CQUFtQjtZQUNuQixzQkFBc0I7WUFDdEIsa0NBQWtDO1lBQ2xDLHlCQUF5QjtZQUN6QixXQUFXO1lBQ1gsaUJBQWlCO1lBQ2pCLHlCQUF5QjtZQUN6Qix3QkFBd0I7WUFDeEIsNEJBQTRCO1lBQzVCLGdCQUFnQjtZQUNoQixrQkFBa0I7WUFDbEIsc0JBQXNCO1lBQ3RCLGdCQUFnQjtTQUNqQixFQTFDQyxXQUFXO1FBQ1gsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQixrQkFBa0I7UUFDbEIsNEJBQTRCO1FBQzVCLG1CQUFtQjtRQUNuQixnQkFBZ0I7UUFDaEIsa0NBQWtDO1FBQ2xDLGdCQUFnQjsyRkFvQ1AsZUFBZTtrQkEvQzNCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLEVBQUU7b0JBQ2hCLE9BQU8sRUFBRTt3QkFDUCxXQUFXO3dCQUNYLGdCQUFnQjt3QkFDaEIsa0JBQWtCO3dCQUNsQixrQkFBa0I7d0JBQ2xCLDRCQUE0Qjt3QkFDNUIsbUJBQW1CO3dCQUNuQixnQkFBZ0I7d0JBQ2hCLGtDQUFrQzt3QkFDbEMsZ0JBQWdCO3FCQUNqQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixZQUFZO3dCQUNaLG9CQUFvQjt3QkFDcEIsV0FBVzt3QkFDWCxpQkFBaUI7d0JBQ2pCLGdCQUFnQjt3QkFDaEIsZ0JBQWdCO3dCQUNoQixnQkFBZ0I7d0JBQ2hCLHFCQUFxQjt3QkFDckIsd0JBQXdCO3dCQUN4QixnQkFBZ0I7d0JBQ2hCLHNCQUFzQjt3QkFDdEIsa0JBQWtCO3dCQUNsQixvQkFBb0I7d0JBQ3BCLHFCQUFxQjt3QkFDckIsNEJBQTRCO3dCQUM1QixtQkFBbUI7d0JBQ25CLCtCQUErQjt3QkFDL0IsbUJBQW1CO3dCQUNuQixzQkFBc0I7d0JBQ3RCLGtDQUFrQzt3QkFDbEMseUJBQXlCO3dCQUN6QixXQUFXO3dCQUNYLGlCQUFpQjt3QkFDakIseUJBQXlCO3dCQUN6Qix3QkFBd0I7d0JBQ3hCLDRCQUE0Qjt3QkFDNUIsZ0JBQWdCO3dCQUNoQixrQkFBa0I7d0JBQ2xCLHNCQUFzQjt3QkFDdEIsZ0JBQWdCO3FCQUNqQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQXZhdGFyTW9kdWxlIH0gZnJvbSAnLi4vYXRvbXMvYXZhdGFyL2F2YXRhci5tb2R1bGUnO1xuaW1wb3J0IHsgUGlsbHNNb2R1bGUgfSBmcm9tICcuL3BpbGxzL3BpbGxzLm1vZHVsZSc7XG5pbXBvcnQgeyBDb2xvclN3YXRjaE1vZHVsZSB9IGZyb20gJy4vY29sb3Itc3dhdGNoL2NvbG9yLXN3YXRjaC5tb2R1bGUnO1xuaW1wb3J0IHsgSWNvblN3YXRjaE1vZHVsZSB9IGZyb20gJy4vaWNvbi1zd2F0Y2gvaWNvbi1zd2F0Y2gubW9kdWxlJztcbmltcG9ydCB7IEJyZWFkY3J1bWJNb2R1bGUgfSBmcm9tICcuL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5tb2R1bGUnO1xuaW1wb3J0IHsgQ29udGV4dHVhbE1lbnVNb2R1bGUgfSBmcm9tICcuLi9hdG9tcy9jb250ZXh0dWFsLW1lbnUvY29udGV4dHVhbC1tZW51Lm1vZHVsZSc7XG5pbXBvcnQgeyBINVdpdGhJY29uTW9kdWxlIH0gZnJvbSAnLi9oNS13aXRoLWljb24vaDUtd2l0aC1pY29uLm1vZHVsZSc7XG5pbXBvcnQgeyBJbnZvaWNlTGluZUl0ZW1Nb2R1bGUgfSBmcm9tICcuL2ludm9pY2UtbGluZS1pdGVtL2ludm9pY2UtbGluZS1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBGZWVkYmFja0NhcmRNb2R1bGUgfSBmcm9tICcuL2ZlZWRiYWNrLWNhcmQvZmVlZGJhY2stY2FyZC5tb2R1bGUnO1xuaW1wb3J0IHsgU2Z4QWNjb3JkaW9uSGVhZGVyTW9kdWxlIH0gZnJvbSAnLi9zZngtYWNjb3JkaW9uLWhlYWRlci9zZngtYWNjb3JkaW9uLWhlYWRlci5tb2R1bGUnO1xuaW1wb3J0IHsgRmlsZVVwbG9hZE1vZHVsZSB9IGZyb20gJy4vZmlsZS11cGxvYWQvZmlsZS11cGxvYWQubW9kdWxlJztcbmltcG9ydCB7IEZpbGVVcGxvYWRTdGF0dXNNb2R1bGUgfSBmcm9tICcuL2ZpbGUtdXBsb2FkLXN0YXR1cy9maWxlLXVwbG9hZC1zdGF0dXMubW9kdWxlJztcbmltcG9ydCB7IEJ1dHRvbldpdGhJY29uTW9kdWxlIH0gZnJvbSAnLi9idXR0b24td2l0aC1pY29uL2J1dHRvbi13aXRoLWljb24ubW9kdWxlJztcbmltcG9ydCB7IEljb25XaXRoVG9vbHRpcE1vZHVsZSB9IGZyb20gJy4vaWNvbi13aXRoLXRvb2x0aXAvaWNvbi13aXRoLXRvb2x0aXAubW9kdWxlJztcbmltcG9ydCB7IERvY3VtZW50TWFuYWdlbWVudEl0ZW1Nb2R1bGUgfSBmcm9tICcuL2RvY3VtZW50LW1hbmFnZW1lbnQtaXRlbS9kb2N1bWVudC1tYW5hZ2VtZW50LWl0ZW0ubW9kdWxlJztcbmltcG9ydCB7IENhbmRpZGF0ZUl0ZW1Nb2R1bGUgfSBmcm9tICcuL2NhbmRpZGF0ZS1pdGVtL2NhbmRpZGF0ZS1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBQaGFzZXJDYXJkTW9kdWxlIH0gZnJvbSAnLi9waGFzZXItY2FyZC9waGFzZXItY2FyZC5tb2R1bGUnO1xuaW1wb3J0IHsgQWN0aW9uQmFyU2VsZWN0aW9uQ291bnRlck1vZHVsZSB9IGZyb20gJy4vYWN0aW9uLWJhci1zZWxlY3Rpb24tY291bnRlci9hY3Rpb24tYmFyLXNlbGVjdGlvbi1jb3VudGVyLm1vZHVsZSc7XG5pbXBvcnQgeyBJbnB1dFRleHRhcmVhTW9kdWxlIH0gZnJvbSAnLi4vYXRvbXMvaW5wdXQtdGV4dGFyZWEvaW5wdXQtdGV4dGFyZWEubW9kdWxlJztcbmltcG9ydCB7IENoYXJhY3RlckNvdW50ZXJNb2R1bGUgfSBmcm9tICcuLi9hdG9tcy9jaGFyYWN0ZXItY291bnRlci9jaGFyYWN0ZXItY291bnRlci5tb2R1bGUnO1xuaW1wb3J0IHsgU2V0dGluZ3NEZXRhaWxOYXZpZ2F0aW9uSXRlbU1vZHVsZSB9IGZyb20gJy4vc2V0dGluZ3MtZGV0YWlsLW5hdmlnYXRpb24taXRlbS9zZXR0aW5ncy1kZXRhaWwtbmF2aWdhdGlvbi1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBFZGl0YWJsZVNldHRpbmdJdGVtTW9kdWxlIH0gZnJvbSAnLi9lZGl0YWJsZS1zZXR0aW5nLWl0ZW0vZWRpdGFibGUtc2V0dGluZy1pdGVtLm1vZHVsZSc7XG5pbXBvcnQgeyBUYWJzTW9kdWxlcyB9IGZyb20gJy4vdGFicy90YWJzLm1vZHVsZSc7XG5pbXBvcnQgeyBJbnB1dFRvZ2dsZU1vZHVsZSB9IGZyb20gJy4uL2F0b21zL2lucHV0LXRvZ2dsZS9pbnB1dC10b2dnbGUubW9kdWxlJztcbmltcG9ydCB7IExhYmVsbGVkSW5wdXRUb2dnbGVNb2R1bGUgfSBmcm9tICcuL2xhYmVsbGVkLWlucHV0LXRvZ2dsZS9sYWJlbGxlZC1pbnB1dC10b2dnbGUubW9kdWxlJztcbmltcG9ydCB7IExhYmVsbGVkVG9nZ2xlTGlzdE1vZHVsZSB9IGZyb20gJy4vbGFiZWxsZWQtdG9nZ2xlLWxpc3QvbGFiZWxsZWQtdG9nZ2xlLWxpc3QubW9kdWxlJztcbmltcG9ydCB7IENoYXRIaXN0b3J5TWVzc2FnZUl0ZW1Nb2R1bGUgfSBmcm9tICcuL2NoYXQtaGlzdG9yeS1tZXNzYWdlLWl0ZW0vY2hhdC1oaXN0b3J5LW1lc3NhZ2UtaXRlbS5tb2R1bGUnO1xuaW1wb3J0IHsgRmlsdGVyVGFic01vZHVsZSB9IGZyb20gJy4vZmlsdGVyLXRhYnMvZmlsdGVyLXRhYnMubW9kdWxlJztcbmltcG9ydCB7IEZpbHRlckRldGFpbFRyZWVNb2R1bGUgfSBmcm9tICcuL2ZpbHRlci1kZXRhaWwtdHJlZS9maWx0ZXItZGV0YWlsLXRyZWUubW9kdWxlJztcbmltcG9ydCB7IEZpbHRlclRhYnNWMk1vZHVsZSB9IGZyb20gJy4vZmlsdGVyLXRhYnMtdjIvZmlsdGVyLXRhYnMubW9kdWxlJztcbmltcG9ydCB7IFRhc2tTdGF0dXNNb2R1bGUgfSBmcm9tICcuL3Rhc2stc3RhdHVzL3Rhc2stc3RhdHVzLm1vZHVsZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW10sXG4gIGV4cG9ydHM6IFtcbiAgICBQaWxsc01vZHVsZSxcbiAgICBCcmVhZGNydW1iTW9kdWxlLFxuICAgIEZlZWRiYWNrQ2FyZE1vZHVsZSxcbiAgICBGaWx0ZXJUYWJzVjJNb2R1bGUsXG4gICAgRG9jdW1lbnRNYW5hZ2VtZW50SXRlbU1vZHVsZSxcbiAgICBDYW5kaWRhdGVJdGVtTW9kdWxlLFxuICAgIFBoYXNlckNhcmRNb2R1bGUsXG4gICAgU2V0dGluZ3NEZXRhaWxOYXZpZ2F0aW9uSXRlbU1vZHVsZSxcbiAgICBUYXNrU3RhdHVzTW9kdWxlLFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEF2YXRhck1vZHVsZSxcbiAgICBDb250ZXh0dWFsTWVudU1vZHVsZSxcbiAgICBQaWxsc01vZHVsZSxcbiAgICBDb2xvclN3YXRjaE1vZHVsZSxcbiAgICBJY29uU3dhdGNoTW9kdWxlLFxuICAgIEJyZWFkY3J1bWJNb2R1bGUsXG4gICAgSDVXaXRoSWNvbk1vZHVsZSxcbiAgICBJbnZvaWNlTGluZUl0ZW1Nb2R1bGUsXG4gICAgU2Z4QWNjb3JkaW9uSGVhZGVyTW9kdWxlLFxuICAgIEZpbGVVcGxvYWRNb2R1bGUsXG4gICAgRmlsZVVwbG9hZFN0YXR1c01vZHVsZSxcbiAgICBGZWVkYmFja0NhcmRNb2R1bGUsXG4gICAgQnV0dG9uV2l0aEljb25Nb2R1bGUsXG4gICAgSWNvbldpdGhUb29sdGlwTW9kdWxlLFxuICAgIERvY3VtZW50TWFuYWdlbWVudEl0ZW1Nb2R1bGUsXG4gICAgQ2FuZGlkYXRlSXRlbU1vZHVsZSxcbiAgICBBY3Rpb25CYXJTZWxlY3Rpb25Db3VudGVyTW9kdWxlLFxuICAgIElucHV0VGV4dGFyZWFNb2R1bGUsXG4gICAgQ2hhcmFjdGVyQ291bnRlck1vZHVsZSxcbiAgICBTZXR0aW5nc0RldGFpbE5hdmlnYXRpb25JdGVtTW9kdWxlLFxuICAgIEVkaXRhYmxlU2V0dGluZ0l0ZW1Nb2R1bGUsXG4gICAgVGFic01vZHVsZXMsXG4gICAgSW5wdXRUb2dnbGVNb2R1bGUsXG4gICAgTGFiZWxsZWRJbnB1dFRvZ2dsZU1vZHVsZSxcbiAgICBMYWJlbGxlZFRvZ2dsZUxpc3RNb2R1bGUsXG4gICAgQ2hhdEhpc3RvcnlNZXNzYWdlSXRlbU1vZHVsZSxcbiAgICBGaWx0ZXJUYWJzTW9kdWxlLFxuICAgIEZpbHRlclRhYnNWMk1vZHVsZSxcbiAgICBGaWx0ZXJEZXRhaWxUcmVlTW9kdWxlLFxuICAgIFRhc2tTdGF0dXNNb2R1bGUsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE1vbGVjdWxlc01vZHVsZSB7fVxuIl19

package/esm2020/projects/component-library/lib/molecules/note/note.component.mjs

@@ -21,7 +21,7 @@ export class NoteComponent {
     }
 }
 NoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: i1.AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+NoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NoteComponent, selector: "symphony-note", inputs: { noteModel: "noteModel" }, ngImport: i0, template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"], components: [{ type: i1.AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NoteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-note', template: "<div class=\"sfx-note\">\n  <symphony-avatar\n    class=\"list-avatar\"\n    [firstName]=\"noteModel.firstName\"\n    [lastName]=\"noteModel.lastName\"\n  ></symphony-avatar>\n  <div class=\"list-content\">\n    <symphony-h3 [text]=\"noteModel.listTitle\"></symphony-h3>\n    <symphony-paragraph [text]=\"noteModel.timeStamp\"></symphony-paragraph>\n    <symphony-paragraph [text]=\"noteModel.description\"></symphony-paragraph>\n  </div>\n  <symphony-contextual-menu\n    class=\"list-more-option\"\n    *ngIf=\"noteModel.moreActions && noteModel.moreActions.items.length > 0\"\n    [model]=\"noteModel.moreActions\"\n  ></symphony-contextual-menu>\n</div>\n", styles: [".sfx-note{position:relative;padding:20px 75px}.sfx-note .list-avatar{position:absolute;left:0;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}\n"] }]

package/esm2020/projects/component-library/lib/molecules/reports-card/reports-card.component.mjs

@@ -14,7 +14,7 @@ export class ReportsCardComponent {
     }
 }
 ReportsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": i5.TrimIdPipe } });
+ReportsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportsCardComponent, selector: "symphony-reports-card", inputs: { reportsCardModel: "reportsCardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": i5.TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportsCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-reports-card', template: "<div *ngIf=\"!reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-disabled\">\n        <div class=\"reports-card-title-wrap sfx-d-flex\">\n            <div class=\"reports-card-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n            </div>\n        </div>\n        <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n            <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessage\" class=\"reports-card-info-wrap sfx-d-flex\">\n            <div class=\"reports-card-info-icon\">\n                <symphony-icon [icon]=\"reportsCardModel.disabledMessageIcon\"></symphony-icon>\n            </div>\n            <div class=\"reports-card-title\">\n                <symphony-paragraph>{{ reportsCardModel.disabledMessage }}</symphony-paragraph>\n            </div>\n        </div>\n        <div *ngIf=\"reportsCardModel.disabledMessageLinkValue\" class=\"reports-card-link\">\n            <a href=\"{{reportsCardModel.disabledMessageLinkValue}}\">{{reportsCardModel.disabledMessageLinkText}}</a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"reportsCardModel.enabled\" class=\"reports-card-item-wrapper\" id=\"reports-card-item-{{ reportsCardModel.title | trimId}}\">\n    <div class=\"reports-card-item-enabled\" (click)=\"onClick()\">\n      <div class=\"reports-card-title-wrap sfx-d-flex\">\n        <div class=\"reports-card-icon\">\n          <symphony-icon [icon]=\"reportsCardModel.cardIcon\"></symphony-icon>\n        </div>\n        <div class=\"reports-card-title\">\n          <symphony-h4>{{ reportsCardModel.title }}</symphony-h4>\n        </div>\n      </div>\n      <div class=\"report-card-description\" title=\"{{ reportsCardModel.description }}\">\n        <symphony-paragraph>{{ reportsCardModel.description }}</symphony-paragraph>\n      </div>\n    </div>\n  </div>", styles: [".reports-card-item-wrapper{position:relative;width:100%;height:190px}.reports-card-item-disabled{width:100%;height:100%;border-radius:10px;padding:20px;border:2px #82919F dashed;cursor:context-menu;opacity:.3}.reports-card-item-disabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-item-enabled{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;border:2px solid transparent;cursor:pointer}.reports-card-item-enabled:hover{box-shadow:none;border-color:#82919f}.reports-card-item-enabled .report-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reports-card-title-wrap{margin-bottom:11px;align-items:baseline}.reports-card-icon{padding-right:15px;color:#334860}.reports-card-info-wrap{margin-top:1rem;align-items:baseline}.reports-card-info-icon{padding-right:7px;color:#f0001e}.reports-card-link{font-weight:500;color:#801afc;cursor:pointer;margin-left:25px}\n"] }]

package/esm2020/projects/component-library/lib/molecules/settings-detail-navigation-item/settings-detail-navigation-item.component.mjs

@@ -13,7 +13,7 @@ export class SettingsDetailNavigationItemComponent {
     }
 }
 SettingsDetailNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingsDetailNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingsDetailNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingsDetailNavigationItemComponent, selector: "symphony-settings-detail-navigation-item", inputs: { settingDetailNavigationModel: "settingDetailNavigationModel" }, outputs: { settingNavigationClicked: "settingNavigationClicked" }, ngImport: i0, template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "trimId": i4.TrimIdPipe } });
+SettingsDetailNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingsDetailNavigationItemComponent, selector: "symphony-settings-detail-navigation-item", inputs: { settingDetailNavigationModel: "settingDetailNavigationModel" }, outputs: { settingNavigationClicked: "settingNavigationClicked" }, ngImport: i0, template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "trimId": i4.TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingsDetailNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-settings-detail-navigation-item', template: "<div *ngIf=\"settingDetailNavigationModel\"\n  class=\"setting-navigation-item-wrap sfx-cursor-pointer\"\n  [ngClass]=\"{ active: settingDetailNavigationModel.isActive }\"\n  (click)=\"onSettingNavigationClick($event)\"\n  title=\"{{ settingDetailNavigationModel.settingNavigationText }}\"\n  id=\"navigation-tab-{{ settingDetailNavigationModel.settingNavigationText | trimId}}\"\n>\n  <symphony-paragraph\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n    class=\"sfx-font-bold\"\n  >\n    {{ settingDetailNavigationModel.settingNavigationText }}\n  </symphony-paragraph>\n  <symphony-icon\n    class=\"icon-position\"\n    [size]=\"'14px'\"\n    [icon]=\"'si-arrow-bold-next'\"\n    *ngIf=\"settingDetailNavigationModel.isActive\"\n    [ngClass]=\"{ 'sfx-v2-purple1': settingDetailNavigationModel.isActive }\"\n  ></symphony-icon>\n</div>\n", styles: [".setting-navigation-item-wrap{display:flex;justify-content:space-between;padding:10px 15px;border-radius:4px}.setting-navigation-item-wrap .icon-position{position:relative;top:2px}.setting-navigation-item-wrap.active{background:#f3efff}.setting-navigation-item-wrap:hover{color:#712ace}\n"] }]

package/esm2020/projects/component-library/lib/molecules/task/task.component.mjs

@@ -15,7 +15,7 @@ export class TaskComponent {
     }
 }
 TaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"], components: [{ type: i1.TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskComponent, selector: "symphony-task", inputs: { taskModel: "taskModel" }, ngImport: i0, template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"], components: [{ type: i1.TaskIconComponent, selector: "symphony-task-icon", inputs: ["isComplete"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: ["model"], outputs: ["itemClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-task', template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph [text]=\"taskModel.dueDate\"></symphony-paragraph>\n      <symphony-paragraph [text]=\"taskModel.assignee\"></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-contextual-menu\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.items.length > 0\"\n    [model]=\"taskModel.moreActions\"\n  >\n  </symphony-contextual-menu>\n</div>\n", styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{display:flex;align-items:center;padding:30px 0;border-bottom:1px solid #d9d9d9}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{width:80%;height:50px}.sfx-task symphony-contextual-menu{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}\n"] }]

package/esm2020/projects/component-library/lib/molecules/task-status/task-status.component.mjs

@@ -50,7 +50,7 @@ export class TaskStatusComponent {
     }
 }
 TaskStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TaskStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskStatusComponent, selector: "symphony-task-status", inputs: { taskStatusModel: "taskStatusModel" }, outputs: { cancelTask: "cancelTask", retryTask: "retryTask" }, ngImport: i0, template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }, { type: i5.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TaskStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TaskStatusComponent, selector: "symphony-task-status", inputs: { taskStatusModel: "taskStatusModel" }, outputs: { cancelTask: "cancelTask", retryTask: "retryTask" }, ngImport: i0, template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.SfxProgressBarComponent, selector: "symphony-sfx-progress-bar", inputs: ["progress"] }, { type: i5.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TaskStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-task-status', template: "<!-- Task Status - Card-based Design -->\n<div class=\"task-status\" *ngIf=\"taskStatusModel\">\n  <!-- Task Status Card -->\n  <div class=\"task-card\" \n       [class.success-state]=\"taskStatusModel.showCompleted\"\n       [class.error-state]=\"taskStatusModel.hasError\"\n       [class.progress-state]=\"taskStatusModel.showProgressBar\">\n    \n    <!-- Card Header -->\n    <div class=\"task-header\">\n      <!-- Status Icon -->\n      <div class=\"task-icon-container\">\n        <!-- Success Icon (completion state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCompleted\"\n          class=\"task-icon success-icon\"\n          [icon]=\"'si-confirmation'\"\n        ></symphony-icon>\n        \n        <!-- Error Icon (error state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.hasError\"\n          class=\"task-icon error-icon\"\n          [icon]=\"'si-pending-incomplete'\"\n        ></symphony-icon>\n        \n        <!-- Processing Icon (progress state) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"task-icon processing-icon\"\n          [icon]=\"taskStatusModel.processingIcon || 'si-chatbot'\"\n        ></symphony-icon>\n      </div>\n      \n      <!-- Status Text and Task Name -->\n      <div class=\"task-content\">\n        <symphony-h4 class=\"task-status-text\">\n          {{ getTaskStatusText() }}\n        </symphony-h4>\n        <symphony-paragraph class=\"task-name\">\n          {{ getTaskName() }}\n        </symphony-paragraph>\n      </div>\n      \n      <!-- Progress Percentage or Actions -->\n      <div class=\"task-actions\">\n        <!-- Progress Percentage -->\n        <symphony-paragraph\n          *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n          class=\"progress-text\">\n          {{ getProgressText() }}\n        </symphony-paragraph>\n        \n        <!-- Cancel Button (only during progress) -->\n        <symphony-icon\n          *ngIf=\"taskStatusModel.showCancel && !taskStatusModel.showCompleted && !taskStatusModel.hasError\"\n          class=\"cancel-btn\"\n          [icon]=\"'si-close-modal'\"\n          (clicked)=\"onCancelTask()\">\n        </symphony-icon>\n      </div>\n    </div>\n    \n    <!-- Card Body -->\n    <div class=\"task-body\">\n      <!-- Progress Bar -->\n      <symphony-sfx-progress-bar\n        *ngIf=\"taskStatusModel.showProgressBar && !taskStatusModel.hasError\"\n        [progress]=\"taskStatusModel.progress\"\n        class=\"progress-bar\">\n      </symphony-sfx-progress-bar>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"taskStatusModel.hasError\" class=\"error-content\">\n        <symphony-paragraph class=\"error-message\">\n          {{ getErrorMessage() }}\n        </symphony-paragraph>\n        <symphony-icon-wrapper \n          *ngIf=\"shouldShowRetry()\"\n          class=\"retry-icon\"\n          (clicked)=\"onRetryTask()\">\n          <symphony-icon [icon]=\"'si-refresh'\"></symphony-icon>\n        </symphony-icon-wrapper>\n      </div>\n    </div>\n  </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.task-status .task-card{background:#F1F2F5;border:1px solid #D2D8E5;border-radius:8px;padding:16px;margin:8px 0;transition:all .3s ease;min-height:80px}.task-status .task-card.success-state{border-color:#2cb45f;background:#f8fff9}.task-status .task-card.error-state{border-color:#ac4463;background:#fff8f8}.task-status .task-card.progress-state{border-color:#2b8ff3;background:#f8f9ff}.task-status .task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.task-status .task-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .task-icon{font-size:18px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.task-status .task-icon-container .success-icon{color:#2cb45f;background:#d2f4de}.task-status .task-icon-container .error-icon{color:#ac4463;background:#f4e2e7}.task-status .task-icon-container .processing-icon{color:#2b8ff3;background:white}.task-status .task-content{flex:1;min-width:0}.task-status .task-content .task-status-text{margin:0 0 4px;font-weight:600;font-size:.875rem;color:#08203e}.task-status .task-content .task-name{margin:0;font-size:.75rem;color:#5b6d80;line-height:1.4;word-wrap:break-word}.task-status .task-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}.task-status .task-actions .progress-text{margin:0;font-weight:600;font-size:.75rem;color:#2b8ff3;min-width:35px;text-align:right}.task-status .task-actions .cancel-btn{cursor:pointer;font-size:16px;color:#5b6d80;transition:color .2s ease;padding:4px}.task-status .task-actions .cancel-btn:hover{color:#ac4463}.task-status .task-body .progress-bar{margin:0}.task-status .task-body .error-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-status .task-body .error-content .error-message{margin:0;font-size:.75rem;color:#ac4463;line-height:1.4;flex:1}.task-status .task-body .error-content .retry-icon{flex-shrink:0;width:32px;height:32px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper{width:32px;height:32px;border:1px solid #AC4463;color:#ac4463;padding:6px;font-size:14px}.task-status .task-body .error-content .retry-icon ::ng-deep .icon-wrapper:hover{background:#AC4463;color:#fff}.task-status symphony-sfx-progress-bar{transition:all .3s ease;float:none}\n"] }]

package/esm2020/projects/component-library/lib/organisms/action-bar/action-bar.component.mjs

@@ -15,7 +15,7 @@ export class ActionBarComponent {
     }
 }
 ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled", hasActionToggle: "hasActionToggle", hasSelectionCounter: "hasSelectionCounter", hasSeparator: "hasSeparator", model: "model" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: i1.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ActionBarSelectionCounterComponent, selector: "symphony-action-bar-selection-counter", inputs: ["model", "hasSeparator"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled", hasActionToggle: "hasActionToggle", hasSelectionCounter: "hasSelectionCounter", hasSeparator: "hasSeparator", model: "model" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"], components: [{ type: i1.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.ActionBarSelectionCounterComponent, selector: "symphony-action-bar-selection-counter", inputs: ["model", "hasSeparator"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-pb-30 sfx-action-bar\">\n  <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n    <div class=\"max-contentwidth\" (click)=\"toggleClicked()\" *ngIf=\"hasActionToggle\">\n      <symphony-icon-wrapper\n        [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n        class=\"sfx-d-inline-block\"\n        ><symphony-icon\n          [icon]=\"'si-arrow-bold-next'\"\n          [size]=\"'13px'\"\n        ></symphony-icon>\n      </symphony-icon-wrapper>\n      <symphony-paragraph class=\"sfx-d-inline-block sfx-ml-20\"\n        >Actions</symphony-paragraph\n      >\n    </div>\n    <symphony-action-bar-selection-counter *ngIf=\"hasSelectionCounter\" [hasSeparator]=\"hasSeparator\" [model]=\"model\"></symphony-action-bar-selection-counter>\n  </div>\n  <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n    <div class=\"pull-right sfx-actions-controls\">\n      <ng-content select=\"[grid-controls]\"></ng-content>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"isToggled\"\n  class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-p-0\"\n>\n  <div class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-pl-0 sfx-actions-items\">\n    <ng-content select=\"[grid-actions]\"></ng-content>\n  </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:2px solid #000000}.sfx-action-bar .sfx-action-button,.sfx-action-bar .sfx-action-button .max-contentwidth{display:flex;align-items:center}.sfx-action-bar .sfx-action-button .icon-wrapper{padding:10px 0}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600;margin-left:1px}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}.sfx-action-bar .sfx-action-button .action-arrow-down i{margin-left:0}.sfx-actions-items{margin-top:1.875rem;padding-bottom:1.25rem}\n"] }]

package/esm2020/projects/component-library/lib/organisms/addition-modal/addition-modal.component.mjs

@@ -22,7 +22,7 @@ export class AdditionModalComponent {
     }
 }
 AdditionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n", components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AdditionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdditionModalComponent, selector: "symphony-addition-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n", components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdditionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-addition-modal', template: "<div *ngIf=\"model\" class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 [text]=\"model.title\"></symphony-h4>\n        </div>\n        <div class=\"col-xs-4 col-sm-4 col-md-4 col-lg-4\">\n          <symphony-icon\n            class=\"pull-right\"\n            [icon]=\"'si-close-modal'\"\n            (clicked)=\"onCloseButtonClick()\"\n          ></symphony-icon>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <symphony-paragraph>{{ model.content }}</symphony-paragraph>\n    <symphony-input-text\n      [maxlength]=\"model.maxlength\"\n      (textChange)=\"onTextChanged($event)\"\n    ></symphony-input-text>\n    <symphony-paragraph class=\"sfx-txt-red\">{{ model.message }}</symphony-paragraph>\n  </section>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n    <symphony-button\n      *ngIf=\"model.btnSecondary\"\n      [text]=\"model.btnSecondary\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-button>\n    <symphony-button\n      [disabled]=\"!valueToAdd?.length\"\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      (clicked)=\"onButtonClick()\"\n    ></symphony-button>\n  </section>\n</div>\n" }]