@symphony-talent/component-library 4.226.0 → 4.228.0

package/esm2020/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/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/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" }]

package/esm2020/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.mjs

@@ -179,7 +179,7 @@ export class AISearchAssistantDrawerComponent {
     }
 }
 AISearchAssistantDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\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}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: i1.TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { 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.TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: i5.InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "showUndoRedoButtons", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "redoButtonId", "redoDisabled", "redoButtonIcon"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": i8.NewLineToBrPipe }, encapsulation: i0.ViewEncapsulation.None });
+AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\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}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: i1.TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml", "toolTipClass"] }, { 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.TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: i5.InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "showUndoRedoButtons", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "redoButtonId", "redoDisabled", "redoButtonIcon"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": i8.NewLineToBrPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-ai-search-assistant-drawer', encapsulation: ViewEncapsulation.None, template: "<!-- Drawer Container -->\n<div \n  class=\"ai-drawer-container\" \n  [class.open]=\"model.isOpen\"\n  [id]=\"getPendoId('aiAssistantDrawer')\">\n  \n  <!-- Edge Toggle Button (inside drawer container) -->\n  <symphony-tooltip-wrapper\n    [tooltipHtml]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [placement]=\"'left'\"\n    class=\"toolTipV2\"\n  >\n    <button \n      class=\"ai-drawer-edge-toggle\"\n      [class.drawer-open]=\"model.isOpen\"\n      (click)=\"onToggleDrawer()\"\n      [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n      [id]=\"getPendoId('aiAssistantToggle')\">\n      <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n    </button>\n  </symphony-tooltip-wrapper>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <div class=\"ai-drawer-title sfx-m-0\">\n      Build your email with \n      <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n    </div>\n  </div>\n  </div>\n\n  <!-- Chat Container -->\n  <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n    \n    <!-- Messages Area -->\n    <div \n      class=\"ai-chat-container\" \n      #chatContainer>\n      \n      <!-- Message List -->\n      <div class=\"ai-message-list sfx-mb-20\">\n        <div \n          *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n          class=\"ai-message-wrapper\"\n          [attr.data-message-type]=\"message.type\">\n          \n          <!-- Timestamp Above Message -->\n          <div \n            class=\"ai-message-timestamp-container\"\n            *ngIf=\"config.showTimestamps\">\n            <span class=\"ai-message-timestamp\">\n              {{ getMessageTime(message.timestamp) }}\n            </span>\n          </div>\n          \n          <!-- Message Bubble -->\n          <div \n            class=\"ai-message-bubble\"\n            [class.user-message]=\"message.type === 'user'\"\n            [class.ai-message]=\"message.type === 'ai'\"\n            [class.system-message]=\"message.type === 'system'\">\n            \n            <!-- AI Message Icon -->\n            <div \n              class=\"ai-message-icon\" \n              *ngIf=\"message.type === 'ai'\">\n              <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n            </div>\n            \n            <div class=\"ai-message-content-wrapper\">\n              <symphony-paragraph \n                class=\"ai-message-content sfx-m-0\"\n                [innerHTML]=\"message.content | newLineToBr\">\n              </symphony-paragraph>\n            </div>\n          </div>\n          \n          <!-- Message Status (for user messages) -->\n          <div \n            class=\"ai-message-status\"\n            *ngIf=\"message.type === 'user' && message.status\">\n            <span \n              class=\"ai-status-text\"\n              [class.status-delivered]=\"message.status === 'delivered'\"\n              [class.status-pending]=\"message.status === 'pending'\"\n              [class.status-error]=\"message.status === 'error'\">\n              {{ getStatusText(message.status) }}\n            </span>\n          </div>\n        </div>\n\n        <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n          <div \n            *ngIf=\"model.aiTaskStatus\"\n            class=\"ai-message-wrapper task-status-wrapper\"\n            id=\"taskStatusMessage\">\n            <symphony-task-status\n              [taskStatusModel]=\"model.aiTaskStatus\"\n              (cancelTask)=\"onCancelTask()\"\n              (retryTask)=\"onRetryTask()\"\n              [id]=\"getPendoId('aiTaskStatus')\">\n            </symphony-task-status>\n          </div>\n      </div>\n    </div>\n\n    <!-- Suggested Prompts Section -->\n    <div \n      class=\"ai-suggested-prompts-section\"\n      *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n      <div class=\"ai-prompts-intro-row\">\n        <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n          {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n        </symphony-paragraph>\n        <symphony-tooltip-wrapper\n          [tooltipHtml]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n          [placement]=\"'left'\"\n          class=\"toolTipV2\"\n        >\n          <button\n            class=\"ai-suggestions-toggle-compact\"\n            [class.suggestions-open]=\"model.isSuggestionsOpen\"\n            (click)=\"onToggleSuggestions()\"\n            [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n            [id]=\"getPendoId('aiSuggestionsToggle')\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n            <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n          </button>\n        </symphony-tooltip-wrapper>\n      </div>\n      <div \n        class=\"ai-suggested-prompts\" \n        *ngIf=\"model.isSuggestionsOpen\"\n        [class.open]=\"model.isSuggestionsOpen\"\n        [id]=\"getPendoId('aiSuggestedPrompts')\"\n        [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n        <div class=\"ai-prompts-list\">\n          <button\n            *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n            class=\"ai-prompt-button\"\n            (click)=\"onPromptClick(prompt)\"\n            [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n            [id]=\"getPendoId('aiPromptButton-' + i)\">\n            <symphony-icon \n              *ngIf=\"prompt.icon\" \n              [icon]=\"'si-' + prompt.icon\"\n              class=\"ai-prompt-icon\">\n            </symphony-icon>\n            <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer / Input Area -->\n  <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n    \n    <!-- Input Row -->\n    <div class=\"ai-input-row\">\n      <symphony-input-textarea-with-send\n        #messageInput\n        [(ngModel)]=\"model.inputValue\"\n        [placeholder]=\"config.placeholder\"\n        [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n        [maxCharacterLimit]=\"model.maxCharacterLimit\"\n        [showCharacterCount]=\"!!model.maxCharacterLimit\"\n        (sendClicked)=\"onSendMessage()\"\n        (valueChanged)=\"onInputChange($event)\"\n        (enterPressed)=\"onSendMessage()\"\n        [id]=\"getPendoId('aiMessageInput')\"\n        [showStartOverButton]=\"config.showStartOverButton\"\n        [startOverDisabled]=\"config.startOverDisabled\"\n        [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n        [startOverButtonTitle]=\"'Start Again'\"\n        (startOverClicked)=\"onStartOverClick()\"\n        [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n        [undoDisabled]=\"config.undoDisabled\"\n        [undoButtonId]=\"getPendoId('aiUndoButton')\"\n        (undoClicked)=\"onUndoClick()\"\n        [redoDisabled]=\"config.redoDisabled\"\n        [redoButtonId]=\"getPendoId('aiRedoButton')\"\n        (redoClicked)=\"onRedoClick()\">\n      </symphony-input-textarea-with-send>\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}.toolTipV2 .tooltip{max-width:none!important;width:auto!important}.toolTipV2 .tooltip .tooltip-inner{background-color:#565656!important;padding:8px 15px;border-radius:.625rem;max-width:none!important;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;font-size:12px;color:#fff;white-space:nowrap}.toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-container>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){position:absolute!important;top:50%!important;left:-48px!important;transform:translateY(-50%)!important;z-index:10001!important;width:48px!important;height:48px!important;display:block!important}.ai-drawer-container.open>symphony-tooltip-wrapper:has(.ai-drawer-edge-toggle){left:-35px!important}.ai-drawer-container .toolTipV2 .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right{left:5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.ai-drawer-container .toolTipV2 .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}.ai-drawer-edge-toggle{position:relative;top:0;left:0;transform:none;width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"] }]

package/esm2020/lib/organisms/assigned-to-widget/assigned-to-widget.component.mjs

@@ -17,7 +17,7 @@ export class AssignedToWidgetComponent {
     }
 }
 AssignedToWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignedToWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssignedToWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignedToWidgetComponent, selector: "symphony-assigned-to-widget", inputs: { assignWidgetModel: "assignWidgetModel" }, outputs: { addClick: "addClick" }, ngImport: i0, template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"], components: [{ type: i1.WidgetListContainerTemplateComponent, selector: "symphony-widget-list-container-template" }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.WidgetListTemplateComponent, selector: "symphony-widget-list-template" }, { type: i6.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AssignedToWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignedToWidgetComponent, selector: "symphony-assigned-to-widget", inputs: { assignWidgetModel: "assignWidgetModel" }, outputs: { addClick: "addClick" }, ngImport: i0, template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"], components: [{ type: i1.WidgetListContainerTemplateComponent, selector: "symphony-widget-list-container-template" }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.WidgetListTemplateComponent, selector: "symphony-widget-list-template" }, { type: i6.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i7.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignedToWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-assigned-to-widget', template: "<symphony-widget-list-container-template *ngIf=\"assignWidgetModel\">\n  <symphony-h4 widget-title>{{\n    assignWidgetModel.title\n  }}</symphony-h4>\n  <symphony-icon-wrapper id=\"assignedTo-widget-add\" *ngIf=\"!assignWidgetModel.isLoading\" widget-icon (click)=\"onAddClick()\">\n    <symphony-icon [icon]=\"'si-edit'\"></symphony-icon>\n  </symphony-icon-wrapper>\n  <div widget-content *ngIf=\"!assignWidgetModel.isLoading\">\n    <symphony-widget-list-template\n      class=\"widget-list-container-wrap\"\n      *ngFor=\"let assignedItem of assignWidgetModel.assignWidgetList\"\n    >\n      <symphony-icon\n        [ngClass]=\"{ 'icon-yellow': assignedItem.isAssigned, 'icon-grey': !assignedItem.isAssigned }\"\n        widget-list-icon\n        [icon]=\"'si-assign-to-actions'\"\n      ></symphony-icon>\n      <symphony-paragraph\n        *ngIf=\"assignedItem.isAssigned\"\n        widget-list-content-title\n        class=\"sfx-font-bold\"\n        >{{ assignedItem.title }}</symphony-paragraph\n      >\n      <symphony-paragraph\n        widget-list-content-detail\n        >{{ assignedItem.textContent\n        }}<span class=\"sfx-font-bold\"\n          >&nbsp;{{ assignedItem.date }}</span\n        ></symphony-paragraph\n      >\n    </symphony-widget-list-template>\n  </div>\n  <div widget-content *ngIf=\"assignWidgetModel.isLoading\">\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n</symphony-widget-list-container-template>\n", styles: [".widget-list-container-wrap .icon-yellow{background:#EAE851;width:40px;display:block;height:40px;border-radius:50%;color:#334860}.widget-list-container-wrap .icon-grey{background:#F1F2F5;color:#c3cbdc;width:40px;display:block;height:40px;border-radius:50%}\n"] }]

package/esm2020/lib/organisms/candidate-card/candidate-card.component.mjs

@@ -20,7 +20,7 @@ export class CandidateCardComponent {
     }
 }
 CandidateCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CandidateCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CandidateCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CandidateCardComponent, selector: "symphony-candidate-card", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.AvatarComponent, selector: "symphony-avatar", inputs: ["firstName", "lastName", "sizePx", "fontSizePx"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CandidateCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-candidate-card', template: "<section class=\"candidate-card\" *ngIf=\"model\">\n  <symphony-icon\n    *ngIf=\"model.hasSentIcon\"\n    class=\"candidate-card__status-icon\"\n    [icon]=\"'si-confirmation'\"\n    [iconColor]=\"'#16b783'\"\n    [size]=\"'18px'\"\n  ></symphony-icon>\n\n  <div class=\"candidate-card__header\">\n    <symphony-avatar\n      class=\"candidate-card__avatar\"\n      [firstName]=\"model.firstName || model.fullName\"\n      [lastName]=\"model.lastName\"\n      [sizePx]=\"48\"\n      [fontSizePx]=\"18\"\n    ></symphony-avatar>\n\n    <div class=\"candidate-card__identity\">\n      <symphony-h4 [text]=\"displayName || 'Candidate'\"></symphony-h4>\n\n      <symphony-paragraph\n        *ngFor=\"let item of displayMetaItems\"\n        [text]=\"item\"\n        [isSecondary]=\"false\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n</section>\n", styles: [".candidate-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border:1px solid #dfe3eb;border-radius:10px}.candidate-card__header{display:flex;align-items:flex-start;gap:15px}.candidate-card__status-icon{position:absolute;top:20px;right:20px;line-height:1}.candidate-card__avatar{flex-shrink:0}.candidate-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}\n"] }]

package/esm2020/lib/organisms/confirmation-modal/confirmation-modal.component.mjs

@@ -19,7 +19,7 @@ export class ConfirmationModalComponent {
     }
 }
 ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n    <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n        <div class=\"modal-title\">\n            <div class=\"row\">\n                <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n                    <symphony-h4 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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 *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], 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.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n    <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n        <div class=\"modal-title\">\n            <div class=\"row\">\n                <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n                    <symphony-h4 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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 *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""], 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.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-confirmation-modal', template: "<div class=\"sfx sfx-modal\">\n    <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n        <div class=\"modal-title\">\n            <div class=\"row\">\n                <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n                    <symphony-h4 [text]=\"model.title\"\n                    ></symphony-h4\n                  >\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 *ngIf=\"model.subTitle\" class=\"col-xs-12\">\n                    <symphony-paragraph class=\"sfx-mt-15 sfx-d-block\" [text]=\"model.subTitle\"\n                    ></symphony-paragraph\n                  >\n                </div>              \n            </div>\n        </div>\n    </section>\n    <section class=\"modal-body sfx-p-30\">\n        <symphony-paragraph>{{model.content}} <span *ngIf=\"model.selectedItem\">'{{model.selectedItem}}'?</span></symphony-paragraph>\n    </section>\n    <section class=\"modal-footer sfx-pt-30 sfx-pb-40\">\n        <symphony-button\n        [text]=\"model.btnSecondary\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onCloseButtonClick()\"\n      ></symphony-button>\n      <symphony-button\n      class=\"sfx-ml-20\"\n      [text]=\"model.btnPrimary\"\n      [disabled]=\"false\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button>\n    </section>\n</div>", styles: [""] }]

package/esm2020/lib/organisms/feedback-detail-candidate-info/feedback-detail-candidate-info.component.mjs

@@ -10,7 +10,7 @@ export class FeedbackDetailCandidateInfoComponent {
     constructor() { }
 }
 FeedbackDetailCandidateInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i2.FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: i3.FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: i4.FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailCandidateInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailCandidateInfoComponent, selector: "symphony-feedback-detail-candidate-info", inputs: { model: "model" }, ngImport: i0, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"], components: [{ type: i1.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i2.FeedbackCandidateWorkHistoryComponent, selector: "symphony-feedback-candidate-workhistory", inputs: ["workHistories"] }, { type: i3.FeedbackCandidateEducationComponent, selector: "symphony-feedback-candidate-education", inputs: ["educationHistories"] }, { type: i4.FeedbackCandidateCertificationsComponent, selector: "symphony-feedback-candidate-certifications", inputs: ["certificationHistories"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailCandidateInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-candidate-info', encapsulation: ViewEncapsulation.None, template: "<section class=\"sfx-mb-50\" *ngIf=\"model.workHistory.displaySection\">\n  <symphony-h5>WORK HISTORY</symphony-h5>\n  <ng-container *ngIf=\"model.workHistory.data?.length\">\n    <symphony-feedback-candidate-workhistory\n      [workHistories]=\"model.workHistory.data\"\n    ></symphony-feedback-candidate-workhistory>\n  </ng-container>\n  <ng-container *ngIf=\"!model.workHistory.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.workHistory.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section class=\"sfx-mb-50\" *ngIf=\"model.education.displaySection\">\n  <symphony-h5>EDUCATION</symphony-h5>\n  <ng-container *ngIf=\"model.education.data?.length\">\n    <symphony-feedback-candidate-education\n      [educationHistories]=\"model.education.data\"\n    ></symphony-feedback-candidate-education>\n  </ng-container>\n  <ng-container *ngIf=\"!model.education.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.education.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n</section>\n\n<section *ngIf=\"model.certifications.displaySection\">\n  <symphony-h5>CERTIFICATIONS</symphony-h5>\n  <ng-container *ngIf=\"model.certifications.data?.length\">\n    <symphony-feedback-candidate-certifications\n      [certificationHistories]=\"model.certifications.data\"\n    ></symphony-feedback-candidate-certifications>\n  </ng-container>\n  <ng-container *ngIf=\"!model.certifications.data?.length\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        noData;\n        context: { $implicit: model.certifications.displayErrorMessage }\n      \"\n    ></ng-container\n  ></ng-container>\n  </section>\n\n<ng-template #noData let-displayErrorMessage\n  ><symphony-paragraph\n    *ngIf=\"!displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"No data to display.\"\n  ></symphony-paragraph>\n  <symphony-paragraph\n    *ngIf=\"displayErrorMessage\"\n    class=\"sfx-d-block sfx-mt-20 border-bottom sfx-pb-20\"\n    text=\"Data could not be retrieved, please refresh to try again.\"\n  ></symphony-paragraph\n></ng-template>\n", styles: [".panel-group .panel{border:none;box-shadow:none;margin-bottom:40px}.panel{box-shadow:none;border:none;padding:0}.panel.card{background:none}.panel .card-header{padding:0;background:none}.panel button{padding:0;color:#000;border:none;background:none}.panel button:focus{outline:none}.panel .panel-body{padding:0;border:none}.panel-default>.panel-heading+.panel-collapse>.panel-body{border:none}.panel-group .panel+.panel{margin-top:0}.panel-group .panel.panel-open .panel{margin-bottom:0}.accordion-toggle symphony-icon{transform:rotate(180deg);display:block;transition:all .3s ease-in-out}.accordion-toggle:after{float:none}.panel-open .accordion-toggle symphony-icon{transform:none}\n"] }]

package/esm2020/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.component.mjs

@@ -32,7 +32,7 @@ export class FeedbackDetailInterestFormComponent {
     }
 }
 FeedbackDetailInterestFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save", commentsTextChange: "commentsTextChange", formUpdated: "formUpdated" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\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.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputLimitedTextComponent, selector: "symphony-input-limited-text", inputs: ["textAreamodel", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textChange"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save", commentsTextChange: "commentsTextChange", formUpdated: "formUpdated" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\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.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i5.InputLimitedTextComponent, selector: "symphony-input-limited-text", inputs: ["textAreamodel", "isDisabled", "currentCount", "placeholder", "rows"], outputs: ["textChange"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-detail-interest-form', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"model\">\n  <symphony-h4\n    class=\"sfx-mb-25 sfx-d-block\"\n    [text]=\"'Interested in this contact?'\"\n  ></symphony-h4>\n\n  <div class=\"form-group sfx-d-flex sfx-mb-30\">\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n        [icon]=\"'si-feedback-yes'\"\n        (clicked)=\"onInterestedButtonClick('Yes')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n        [icon]=\"'si-feedback-no'\"\n        (clicked)=\"onInterestedButtonClick('No')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n    </div>\n    <div class=\"sfx-d-flex sfx-mr-50\">\n      <symphony-icon\n        class=\"sfx-mr-10 color-light-gray2 sfx-cursor-pointer\"\n        [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n        [icon]=\"'si-feedback-maybe'\"\n        (clicked)=\"onInterestedButtonClick('Not Now')\"\n      ></symphony-icon>\n      <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n    </div>\n  </div>\n\n  <div class=\"form-group\">\n    <symphony-input-dropdown\n      *ngIf=\"model.showReasonDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.reasonDropdown\"\n    ></symphony-input-dropdown>\n\n    <symphony-input-dropdown\n      *ngIf=\"model.showRecommendationDropdown\"\n      class=\"sfx-d-block sfx-mb-15\"\n      (selectItem)=\"onFormUpdated()\"\n      [inputDropdownListModel]=\"model.recommendationDropdown\"\n    ></symphony-input-dropdown>\n\n    <ng-container *ngIf=\"model.showCommentTextarea\">\n      <label for=\"comments\" class=\"form-label\">Comments</label>\n      <symphony-input-limited-text\n        [textAreamodel]=\"model.commentTextarea\"\n        [isDisabled]=\"false\"\n        [rows]=\"4\"\n        placeholder=\"\"\n        [currentCount]=\"model.commentTextarea.value?.length\"\n        (textChange)=\"onCommentsTextChange($event)\"\n      >\n      </symphony-input-limited-text>\n    </ng-container>\n  </div>\n\n  <div class=\"sfx-d-inline-block sfx-wid-100 sfx-mt-40\">\n    <symphony-button-v2\n      class=\"sfx-ml-10 save pull-right\"\n      [text]=\"'Save'\"\n      [disabled]=\"model.isSaveDisabled || !model.status\"\n      (clicked)=\"onSaveClick()\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      class=\"pull-right\"\n      [text]=\"'Cancel'\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onCancelClick()\"\n    ></symphony-button-v2>\n  </div>\n</ng-container>\n", styles: ["body .sfx .form-label{line-height:25px;margin-bottom:.27rem;font-weight:500}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"] }]

package/esm2020/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs

@@ -29,7 +29,7 @@ export class FeedbackLoginModalComponent {
     }
 }
 FeedbackLoginModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange", sendCodeClick: "sendCodeClick" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i4.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4>Two-Factor Authentication</symphony-h4>\n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n    <symphony-paragraph [text]=\"model.headerDescription\"></symphony-paragraph>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n      [text]=\"model.email\"\n    ></symphony-paragraph>\n    <div>\n      <symphony-input-text\n        class=\"authentication-input sfx-d-inline-block\"\n        [label]=\"'Authentication Code'\"\n        (textChange)=\"onAuthCodeChange($event)\"\n        [isDisabled]=\"model.isSendCodeEnabled\"\n      >\n      </symphony-input-text>\n      <symphony-paragraph\n        *ngIf=\"model.resendCodeTimerText\"\n        class=\"sfx-d-inline-block resendTimerText\"\n      >\n        <i class=\"si-timeframe\"></i> \n        {{model.resendCodeTimerText}}\n      </symphony-paragraph>\n      <symphony-h5\n        *ngIf=\"model.isResendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Resend'\"\n        (click)=\"onResendClick()\"\n      ></symphony-h5>\n      <symphony-h5\n        *ngIf=\"model.isSendCodeEnabled\"\n        class=\"sfx-d-inline-block sfx-cursor-pointer btn-resend\"\n        [text]=\"'Send Code'\"\n        (click)=\"onSendCodeClick()\"\n      ></symphony-h5>\n    </div>\n    <div class=\"input-validation sfx-txt-red-v2\">\n        <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n    </div>\n    <symphony-paragraph\n      class=\"sfx-mt-20 sfx-d-block\"\n    >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n  </section>\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n  <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n    <symphony-button-v2\n      [text]=\"'Verify'\"\n      [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n      (clicked)=\"onVerifyClick($event)\"\n    ></symphony-button-v2>\n  </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}.btn-resend .h5-primary{font-weight:700!important;font-size:14px;color:#712ace}.resendTimerText{font-style:italic}\n"] }]

package/esm2020/lib/organisms/grid-action-bar-v2/grid-action-bar-v2.component.mjs

@@ -14,7 +14,7 @@ export class GridActionBarV2Component {
     }
 }
 GridActionBarV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionBarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: i4.GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+GridActionBarV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionBarV2Component, selector: "symphony-grid-action-bar-v2", inputs: { actionListModel: "actionListModel" }, outputs: { actionBarListItem: "actionBarListItem" }, ngImport: i0, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.VerticalSeparatorComponent, selector: "symphony-vertical-separator" }, { type: i4.GridActionListV2Component, selector: "symphony-grid-action-list-v2", inputs: ["actionList"], outputs: ["actionClicked"] }], 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: GridActionBarV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-grid-action-bar-v2', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"actionListModel\">\n  <div class=\"sfx-d-flex sfx-grid-action-bar-v2\">\n    <div class=\"selected-wrap\" *ngIf=\"actionListModel.selectedText\">\n      <symphony-icon\n        [ngClass]=\"{\n          isSelected: actionListModel.isSelected,\n          '': !actionListModel.isSelected\n        }\"\n        class=\"sfx-cursor-pointer\"\n        [icon]=\"'si-activity'\"\n        [size]=\"'18px'\"\n      ></symphony-icon>\n      <symphony-paragraph [isFontBold]=\"true\"\n        >{{ actionListModel.selectedCount }}\n        {{ actionListModel.selectedText }}</symphony-paragraph\n      >\n    </div>\n    <symphony-vertical-separator *ngIf=\"actionListModel.selectedText\"\n      class=\"flex-align-content-center\"\n    ></symphony-vertical-separator>\n    <symphony-grid-action-list-v2\n      class=\"flex-1\"\n      [actionList]=\"actionListModel.gridActionListV2\"\n      (actionClicked)=\"onActionBarListClick($event)\"\n    ></symphony-grid-action-list-v2>\n    <div class=\"sfx-grid-controls-v2\">\n      <ng-content select=\"[grid-controls-v2]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sfx-grid-action-bar-v2{flex-flow:wrap}.sfx-grid-action-bar-v2 .selected-wrap{display:flex;align-items:center;gap:5px}.sfx-grid-action-bar-v2 .selected-wrap i{color:#c3cbdc}.sfx-grid-action-bar-v2 .selected-wrap .isSelected i{color:#712ace}.sfx-grid-action-bar-v2 .flex-align-content-center{align-content:center}.sfx-grid-action-bar-v2 .flex-align-content-center .sfx-v-seperator{margin-right:5px}.sfx-grid-action-bar-v2 .flex-1{flex:1}\n"] }]