@symphony-talent/component-library 4.200.0 → 4.202.0

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

@@ -1621,6 +1621,7 @@ var Icons;
     Icons["LICENSE"] = "si-license";
     Icons["REPORTS"] = "si-reports";
     Icons["SFXINSIGHTS"] = "si-sfx-insights-b";
+    Icons["SPARKLES"] = "si-ai-withoutBorder";
 })(Icons || (Icons = {}));
 
 class IconWrapperComponent {
@@ -5258,10 +5259,10 @@ class MergeContactsModalComponent {
     }
 }
 MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n          <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n             <symphony-paragraph\n              *ngIf=\"currentStep === 1\"\n              text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n            ></symphony-paragraph>\n            <symphony-paragraph\n              *ngIf=\"currentStep === 2\"\n              text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n            ></symphony-paragraph>        \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <ng-container *ngIf=\"currentStep === 1\">\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n        <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n        <p>{{ model.selectedContact.email }}</p>\n        <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">\n              <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n              <div class=\"criteria-list\">\n                <symphony-status-pill\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                ></symphony-status-pill>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n      <div class=\"sfx-mt-20 radio-action\">\n                <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n      <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n      </div>\n      <div class=\"row sfx-mt-30\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n          <p>{{ model.selectedContact.email }}</p>\n          <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Merge Suggestion\"></symphony-h5>\n          <div class=\"suggestion-confirm\">\n            <div class=\"sfx-font-bold\">{{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]</div>\n            <div class=\"sfx-mt-5\">{{ confirmSuggestion.email }}</div>\n            <div *ngFor=\"let criterion of confirmSuggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n            <div *ngFor=\"let status of confirmSuggestion.statuses\" class=\"sfx-mt-10\">\n              <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Cancel\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </div>\n    </ng-container>\n    <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n    <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px;margin-top:20px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: StatusPillComponent, selector: "symphony-status-pill", inputs: ["statusPillModel"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+MergeContactsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MergeContactsModalComponent, selector: "symphony-merge-contacts-modal", inputs: { model: "model", isLoading: "isLoading", hasError: "hasError", selected: "selected", confirmSuggestion: "confirmSuggestion", showSuccessToast: "showSuccessToast", showFailureToast: "showFailureToast", currentStep: "currentStep" }, outputs: { next: "next", cancel: "cancel", notDuplicate: "notDuplicate", selectionChange: "selectionChange", hideSuccessToast: "hideSuccessToast", hideFailureToast: "hideFailureToast", requestConfirmSuggestion: "requestConfirmSuggestion", requestCancelConfirmSuggestion: "requestCancelConfirmSuggestion" }, ngImport: i0, template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n          <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n             <symphony-paragraph\n              *ngIf=\"currentStep === 1\"\n              text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n            ></symphony-paragraph>\n            <symphony-paragraph\n              *ngIf=\"currentStep === 2\"\n              text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n            ></symphony-paragraph>        \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <ng-container *ngIf=\"currentStep === 1\">\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n        <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n        <p>{{ model.selectedContact.email }}</p>\n        <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">\n              <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n              <div class=\"criteria-list\">\n                <symphony-status-pill\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                ></symphony-status-pill>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n      <div class=\"sfx-mt-20 radio-action\">\n                <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n      <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n      </div>\n      <div class=\"row sfx-mt-30\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n          <p>{{ model.selectedContact.email }}</p>\n          <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card confirm-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ confirmSuggestion.email }}</span>\n                </div>\n                <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n                  <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ confirmSuggestion.atsId }}</span>\n                </div>\n              </div>\n              <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n                <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n                <div class=\"criteria-list\">\n                  <symphony-status-pill\n                    *ngFor=\"let status of confirmSuggestion.statuses\"\n                    [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                  ></symphony-status-pill>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Cancel\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </div>\n    </ng-container>\n    <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n    <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px;margin-top:20px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ToasterAlertComponent, selector: "symphony-toaster-alert", inputs: ["alertModel", "showAlert"], outputs: ["hideAlert", "refreshClicked"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: InputRadioComponent, selector: "symphony-input-radio", inputs: ["isActive", "name", "label", "isRequired", "radioID"], outputs: ["clicked"] }, { type: GridCellClickedOpenNewTabComponent, selector: "symphony-grid-cell-clicked-open-new-tab", inputs: ["newTabUrl"] }, { type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["backgroundColor", "isInverse", "hasHoverWithoutBorder", "isDisabled"], outputs: ["clicked"] }, { type: StatusPillComponent, selector: "symphony-status-pill", inputs: ["statusPillModel"] }, { type: ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-merge-contacts-modal', template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n          <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n             <symphony-paragraph\n              *ngIf=\"currentStep === 1\"\n              text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n            ></symphony-paragraph>\n            <symphony-paragraph\n              *ngIf=\"currentStep === 2\"\n              text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n            ></symphony-paragraph>        \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <ng-container *ngIf=\"currentStep === 1\">\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n        <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n        <p>{{ model.selectedContact.email }}</p>\n        <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">\n              <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n              <div class=\"criteria-list\">\n                <symphony-status-pill\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                ></symphony-status-pill>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n      <div class=\"sfx-mt-20 radio-action\">\n                <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n      <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n      </div>\n      <div class=\"row sfx-mt-30\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <p class=\"sfx-mt-40 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n          <p>{{ model.selectedContact.email }}</p>\n          <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Merge Suggestion\"></symphony-h5>\n          <div class=\"suggestion-confirm\">\n            <div class=\"sfx-font-bold\">{{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]</div>\n            <div class=\"sfx-mt-5\">{{ confirmSuggestion.email }}</div>\n            <div *ngFor=\"let criterion of confirmSuggestion.criteria\" class=\"sfx-mt-5\">{{ criterion }}</div>\n            <div *ngFor=\"let status of confirmSuggestion.statuses\" class=\"sfx-mt-10\">\n              <symphony-status-pill [statusPillModel]=\"{statusClass: 'statusGrey', value: status}\"></symphony-status-pill>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Cancel\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </div>\n    </ng-container>\n    <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n    <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px;margin-top:20px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
+            args: [{ selector: 'symphony-merge-contacts-modal', template: "<div class=\"sfx sfx-modal modal-container\" *ngIf=\"model\">\n  <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n    <div class=\"modal-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n          <symphony-h4 *ngIf=\"currentStep === 1\" text=\"Manage Duplicates\"></symphony-h4>\n          <symphony-h4 *ngIf=\"currentStep === 2\" text=\"Merge Contacts\"></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)=\"onCancel()\"\n          ></symphony-icon>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\">\n             <symphony-paragraph\n              *ngIf=\"currentStep === 1\"\n              text=\"The contacts below are potential duplicates. Please compare their data and select the one you would like to merge.\"\n            ></symphony-paragraph>\n            <symphony-paragraph\n              *ngIf=\"currentStep === 2\"\n              text=\"Using the fields below, choose a Primary Contact, and then select the data you would like to merge and keep in that Primary Contact Record. Merging contacts is irreversible.\"\n            ></symphony-paragraph>        \n        </div>\n      </div>\n    </div>\n  </section>\n  <section class=\"modal-body sfx-p-30\">\n    <ng-container *ngIf=\"currentStep === 1\">\n    <div class=\"toaster-alert-container-global\">\n        <symphony-toaster-alert\n          *ngIf=\"showSuccessToast\"\n          [alertModel]=\"successToast\"\n          (hideAlert)=\"onHideSuccessToast()\"\n        ></symphony-toaster-alert>\n      <symphony-toaster-alert\n        *ngIf=\"showFailureToast\"\n        [alertModel]=\"failureToast\"\n        (hideAlert)=\"onHideFailureToast()\"\n      ></symphony-toaster-alert>\n    </div>\n    <div *ngIf=\"isLoading\" class=\"sfx-mt-30 sfx-mb-30\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n    <div *ngIf=\"hasError\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"Something has went wrong. Try again later or contact support\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && (!model?.suggestions || model.suggestions.length === 0)\" class=\"sfx-mt-30\">\n      <symphony-paragraph text=\"No more duplicates exist for this selected contact. Please try again later\"></symphony-paragraph>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && !confirmSuggestion && model?.suggestions?.length\" class=\"row\">\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n        <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n        <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n        <p>{{ model.selectedContact.email }}</p>\n        <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion.value }}</p>\n      </div>\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n       <symphony-h5 [text]=\"'Potential Duplicates (' + (model?.suggestions?.length || 0) + ')'\"></symphony-h5>\n        <div class=\"scrollable-container card-wrapper\">\n          <div\n            *ngFor=\"let suggestion of model.suggestions; let i = index\"\n            class=\"suggestion-card\"\n            [ngClass]=\"{ selected: selected === suggestion }\"\n            (click)=\"onSelect(suggestion)\"\n          >\n            <div class=\"card-header\">\n              <symphony-input-radio\n                [radioID]=\"suggestion.id\"\n                [name]=\"'merge-suggestions'\"\n                [isActive]=\"selected === suggestion\"\n                (clicked)=\"onSelect(suggestion)\"\n              ></symphony-input-radio>              \n              <div class=\"card-title sfx-font-bold\">\n                {{ suggestion.name }} [{{ suggestion.id }}]\n              </div>\n              <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                <symphony-grid-cell-clicked-open-new-tab\n                  [newTabUrl]=\"getContactUrl(suggestion.id)\"\n                ></symphony-grid-cell-clicked-open-new-tab>\n                <symphony-icon-wrapper\n                  class=\"not-duplicate-icon-global\"\n                  title=\"Mark not duplicate\"\n                  (clicked)=\"onNotDuplicate(suggestion)\"\n                >\n                  <symphony-icon [icon]=\"'si-exclude'\"></symphony-icon>\n                </symphony-icon-wrapper>\n              </div>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"info-row\" *ngIf=\"suggestion.email\">\n                <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                <span>{{ suggestion.email }}</span>\n              </div>\n              <div class=\"info-row\" *ngFor=\"let criterion of suggestion.criteria\">\n                <symphony-icon\n                  *ngIf=\"criterion.iconClass\"\n                  [icon]=\"criterion.iconClass\"\n                ></symphony-icon>\n                <span>{{ criterion.value }}</span>\n              </div>\n              <div class=\"info-row\" *ngIf=\"suggestion.atsId\">\n                <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                <span>{{ suggestion.atsId }}</span>\n              </div>\n            </div>\n            <div class=\"match-criteria\" *ngIf=\"suggestion.statuses?.length\">\n              <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n              <div class=\"criteria-list\">\n                <symphony-status-pill\n                  *ngFor=\"let status of suggestion.statuses\"\n                  [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                ></symphony-status-pill>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!isLoading && !hasError && confirmSuggestion\">\n      <symphony-h5 text=\"Are you sure you want to remove this contact as a potential duplicate? \"></symphony-h5>\n      <div class=\"sfx-mt-20 radio-action\">\n                <symphony-icon class=\"pending-icon\" [icon]=\"'si-pending-incomplete'\"></symphony-icon>\n      <symphony-paragraph class=\"sfx-font-italic\" text=\"Doing so is irreversible and this contact will never be shown as a potential duplicate of this contact again.\"></symphony-paragraph>\n      </div>\n      <div class=\"row sfx-mt-30\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Contact\"></symphony-h5>\n          <p class=\"sfx-mt-20 sfx-font-bold\">{{ model.selectedContact.name }}  [{{ model.selectedContact.id }}]</p>\n          <p>{{ model.selectedContact.email }}</p>\n          <p *ngFor=\"let criterion of model.selectedContact.criteria\">{{ criterion }}</p>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-h5 text=\"Selected Duplicate\"></symphony-h5>\n          <div class=\"card-wrapper sfx-mt-20\">\n            <div class=\"suggestion-card confirm-card\">\n              <div class=\"card-header\">\n                <div class=\"card-title sfx-font-bold\">\n                  {{ confirmSuggestion.name }} [{{ confirmSuggestion.id }}]\n                </div>\n              </div>\n              <div class=\"card-body\">\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.email\">\n                  <symphony-icon [icon]=\"'si-email-send'\"></symphony-icon>\n                  <span>{{ confirmSuggestion.email }}</span>\n                </div>\n                <div class=\"info-row\" *ngFor=\"let criterion of confirmSuggestion.criteria\">\n                  <symphony-icon\n                    *ngIf=\"criterion.iconClass\"\n                    [icon]=\"criterion.iconClass\"\n                  ></symphony-icon>\n                  <span>{{ criterion.value }}</span>\n                </div>\n                <div class=\"info-row\" *ngIf=\"confirmSuggestion.atsId\">\n                  <span class=\"sfx-txt-gray sfx-font-bold sfx-font12\">ATS ID:</span>\n                  <span>{{ confirmSuggestion.atsId }}</span>\n                </div>\n              </div>\n              <div class=\"match-criteria\" *ngIf=\"confirmSuggestion.statuses?.length\">\n                <div class=\"match-label sfx-txt-gray\">Contacts share the same:</div>\n                <div class=\"criteria-list\">\n                  <symphony-status-pill\n                    *ngFor=\"let status of confirmSuggestion.statuses\"\n                    [statusPillModel]=\"{ statusClass: 'statusGrey', value: status }\"\n                  ></symphony-status-pill>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"confirm-actions\">\n        <symphony-button-v2\n          text=\"Cancel\"\n          [isSecondary]=\"true\"\n          (clicked)=\"cancelNotDuplicate()\"\n        ></symphony-button-v2>\n        <symphony-button-v2\n          text=\"Confirm\"\n          (clicked)=\"confirmOnNotDuplicate()\"\n        ></symphony-button-v2>\n      </div>\n    </div>\n    </ng-container>\n    <ng-content *ngIf=\"currentStep === 2\"></ng-content>\n  </section>\n  <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n    <symphony-button-v2 text=\"Close\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n    <symphony-button-v2 text=\"Next\" [disabled]=\"!selected || !!confirmSuggestion\" (clicked)=\"onNext()\"></symphony-button-v2>\n  </section>\n</div>\n", styles: [".scrollable-container{max-height:500px;display:flex;flex-direction:column;overflow-y:auto;padding:20px 10px;gap:10px}.radio-item{display:flex;align-items:flex-start;gap:5px}.radio-label{display:flex;align-items:center;gap:1px}.radio-details{padding-left:24px}.radio-action{margin-left:auto;display:flex}.icon-upwards{margin-top:-1px!important;margin-bottom:auto}.modal-footer{display:flex;gap:10px;width:100%;justify-content:flex-end}.confirm-actions{display:flex;gap:10px;margin-top:20px}.suggestion-confirm{margin-top:38px}.pending-icon{margin-right:8px}.suggestion-card{border:1px solid #e4e7ef;border-radius:10px;padding:20px;background:#ffffff}.suggestion-card .card-header{display:flex;align-items:flex-start}.suggestion-card .card-title{flex:1;word-break:break-word}.suggestion-card .card-actions{margin-left:auto;display:flex;gap:10px}.suggestion-card .card-body{margin-top:15px;display:flex;flex-direction:column;gap:8px}.suggestion-card .info-row{display:flex;align-items:baseline;gap:8px;word-break:break-word}.suggestion-card .match-criteria{margin-top:10px}.suggestion-card .match-label{font-size:12px;font-weight:500;margin-bottom:8px}.suggestion-card .criteria-list{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], isLoading: [{
@@ -7063,7 +7064,13 @@ class IconExplorerHelper {
                 iconName: 'SFXINSIGHTS',
                 iconClass: 'si-sfx-insights-b',
                 hasBorder: false,
-            }
+            },
+            {
+                icon: Icons.SPARKLES,
+                iconName: 'SPARKLES',
+                iconClass: 'si-ai-withoutBorder',
+                hasBorder: false,
+            },
         ];
     }
     static getInverseIconList() {
@@ -7143,7 +7150,7 @@ class IconExplorerHelper {
                 iconName: 'SAVE',
                 iconClass: 'si-save',
                 hasBorder: true,
-            },
+            }
         ];
     }
 }
@@ -7624,8 +7631,8 @@ class AISearchAssistantDrawerComponent {
             isSuggestionsOpen: true // Default to open
         };
         this.config = {
-            welcomeMessage: 'Hello, I\'m Tali. How can I help you today?',
-            placeholder: 'Message Tali',
+            welcomeMessage: 'Hello, I\'m Tala. How can I help you today?',
+            placeholder: 'Message Tala',
             maxMessages: 100,
             autoScroll: true,
             showTimestamps: true,
@@ -7770,10 +7777,10 @@ 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: { 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  <button \n    class=\"ai-drawer-edge-toggle\"\n    [class.drawer-open]=\"model.isOpen\"\n    (click)=\"onToggleDrawer()\"\n    [attr.aria-label]=\"model.isOpen ? 'Close Tali Assistant' : 'Open Tali Assistant'\"\n    [title]=\"model.isOpen ? 'Close Tali Assistant' : 'Tali Assisted Messaging'\"\n    [id]=\"getPendoId('aiAssistantToggle')\">\n    <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n  </button>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <symphony-h4 class=\"ai-drawer-title sfx-m-0\">Tali, your Talent Acquisition Assistant</symphony-h4>\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-chatbot'\"></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        <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          [title]=\"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      </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      </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}.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-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);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);z-index:10001;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:translateY(-50%) 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{left:-35px;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:translateY(-50%) 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:1.25rem 1.5625rem;border-bottom:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:1.125rem;font-weight:600;color:#08203e}.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;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{color:#2b8ff3;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: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize"], outputs: ["sendClicked", "enterPressed", "valueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe } });
+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: { 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  <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    [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [id]=\"getPendoId('aiAssistantToggle')\">\n    <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n  </button>\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        <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          [title]=\"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      </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      </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}.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-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);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);z-index:10001;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:translateY(-50%) 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{left:-35px;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:translateY(-50%) 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: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize"], outputs: ["sendClicked", "enterPressed", "valueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-ai-search-assistant-drawer', 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  <button \n    class=\"ai-drawer-edge-toggle\"\n    [class.drawer-open]=\"model.isOpen\"\n    (click)=\"onToggleDrawer()\"\n    [attr.aria-label]=\"model.isOpen ? 'Close Tali Assistant' : 'Open Tali Assistant'\"\n    [title]=\"model.isOpen ? 'Close Tali Assistant' : 'Tali Assisted Messaging'\"\n    [id]=\"getPendoId('aiAssistantToggle')\">\n    <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n  </button>\n  \n  <!-- Header -->\n  <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n    <symphony-h4 class=\"ai-drawer-title sfx-m-0\">Tali, your Talent Acquisition Assistant</symphony-h4>\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-chatbot'\"></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        <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          [title]=\"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      </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      </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}.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-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);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);z-index:10001;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:translateY(-50%) 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{left:-35px;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:translateY(-50%) 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:1.25rem 1.5625rem;border-bottom:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:1.125rem;font-weight:600;color:#08203e}.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;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{color:#2b8ff3;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"] }]
+            args: [{ selector: 'symphony-ai-search-assistant-drawer', 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  <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    [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n    [id]=\"getPendoId('aiAssistantToggle')\">\n    <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n  </button>\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        <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          [title]=\"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      </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      </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}.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-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);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);z-index:10001;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:translateY(-50%) 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{left:-35px;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:translateY(-50%) 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
                 type: Input
             }], config: [{