@symphony-talent/component-library 4.202.0 → 4.204.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/atoms/icon/icon.enum.mjs +2 -1
- package/esm2020/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.mjs +25 -4
- package/esm2020/lib/atoms/input-textarea-with-send/input-textarea-with-send.module.mjs +8 -4
- package/esm2020/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +7 -1
- package/esm2020/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.mjs +9 -3
- package/esm2020/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.mjs +1 -1
- package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs +41 -3
- package/esm2020/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/atoms/icon/icon.enum.mjs +2 -1
- package/esm2020/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.mjs +25 -4
- package/esm2020/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.module.mjs +8 -4
- package/esm2020/projects/component-library/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +7 -1
- package/esm2020/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.mjs +9 -3
- package/esm2020/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.mjs +41 -3
- package/esm2020/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.mjs +1 -1
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +83 -10
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +83 -10
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +85 -10
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +85 -10
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/icon/icon.enum.d.ts +2 -1
- package/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +8 -1
- package/lib/atoms/input-textarea-with-send/input-textarea-with-send.module.d.ts +2 -1
- package/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.d.ts +3 -1
- package/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.d.ts +1 -0
- package/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.d.ts +9 -2
- package/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.d.ts +6 -0
- package/package.json +1 -1
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.eot +0 -0
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.svg +1 -0
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.ttf +0 -0
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.woff +0 -0
- package/projects/component-library/global-assets/iconography/library-icons.css +8 -5
- package/projects/component-library/global-assets/iconography/{sfx icons-v10.json → sfx icons-v11.json } +24 -9
- package/projects/component-library/lib/atoms/icon/icon.enum.d.ts +2 -1
- package/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +8 -1
- package/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.module.d.ts +2 -1
- package/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.d.ts +3 -1
- package/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.d.ts +1 -0
- package/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.component.d.ts +9 -2
- package/projects/component-library/lib/organisms/merge-contacts-modal/merge-contacts-modal.model.d.ts +6 -0
|
@@ -1622,6 +1622,7 @@ var Icons;
|
|
|
1622
1622
|
Icons["REPORTS"] = "si-reports";
|
|
1623
1623
|
Icons["SFXINSIGHTS"] = "si-sfx-insights-b";
|
|
1624
1624
|
Icons["SPARKLES"] = "si-ai-withoutBorder";
|
|
1625
|
+
Icons["STARTOVER"] = "si-start-over";
|
|
1625
1626
|
})(Icons || (Icons = {}));
|
|
1626
1627
|
|
|
1627
1628
|
class IconWrapperComponent {
|
|
@@ -1990,9 +1991,13 @@ class InputTextareaWithSendComponent {
|
|
|
1990
1991
|
this.sendButtonIcon = 'si-arrow-next';
|
|
1991
1992
|
this.sendButtonAriaLabel = 'Send message';
|
|
1992
1993
|
this.autoResize = true;
|
|
1994
|
+
this.startOverDisabled = false;
|
|
1995
|
+
this.startOverButtonIcon = 'si-start-over';
|
|
1996
|
+
this.startOverButtonTitle = 'Start Over';
|
|
1993
1997
|
this.sendClicked = new EventEmitter();
|
|
1994
1998
|
this.enterPressed = new EventEmitter();
|
|
1995
1999
|
this.valueChanged = new EventEmitter();
|
|
2000
|
+
this.startOverClicked = new EventEmitter();
|
|
1996
2001
|
this.value = '';
|
|
1997
2002
|
this.currentRows = 1;
|
|
1998
2003
|
this.characterCount = 0;
|
|
@@ -2095,15 +2100,20 @@ class InputTextareaWithSendComponent {
|
|
|
2095
2100
|
}, 0);
|
|
2096
2101
|
}
|
|
2097
2102
|
}
|
|
2103
|
+
onStartOverClick() {
|
|
2104
|
+
if (this.showStartOverButton && !this.startOverDisabled) {
|
|
2105
|
+
this.startOverClicked.emit();
|
|
2106
|
+
}
|
|
2107
|
+
}
|
|
2098
2108
|
}
|
|
2099
2109
|
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2100
|
-
InputTextareaWithSendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: { placeholder: "placeholder", isDisabled: "isDisabled", maxCharacterLimit: "maxCharacterLimit", showCharacterCount: "showCharacterCount", minRows: "minRows", maxRows: "maxRows", sendButtonIcon: "sendButtonIcon", sendButtonAriaLabel: "sendButtonAriaLabel", autoResize: "autoResize" }, outputs: { sendClicked: "sendClicked", enterPressed: "enterPressed", valueChanged: "valueChanged" }, providers: [
|
|
2110
|
+
InputTextareaWithSendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: { placeholder: "placeholder", isDisabled: "isDisabled", maxCharacterLimit: "maxCharacterLimit", showCharacterCount: "showCharacterCount", minRows: "minRows", maxRows: "maxRows", sendButtonIcon: "sendButtonIcon", sendButtonAriaLabel: "sendButtonAriaLabel", autoResize: "autoResize", showStartOverButton: "showStartOverButton", startOverButtonId: "startOverButtonId", startOverDisabled: "startOverDisabled", startOverButtonIcon: "startOverButtonIcon", startOverButtonTitle: "startOverButtonTitle" }, outputs: { sendClicked: "sendClicked", enterPressed: "enterPressed", valueChanged: "valueChanged", startOverClicked: "startOverClicked" }, providers: [
|
|
2101
2111
|
{
|
|
2102
2112
|
provide: NG_VALUE_ACCESSOR,
|
|
2103
2113
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2104
2114
|
multi: true
|
|
2105
2115
|
}
|
|
2106
|
-
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n
|
|
2116
|
+
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\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}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:auto;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i{color:#c3cbdc}.composer-meta .ai-start-over symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover{color:#2b8ff3}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2107
2117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, decorators: [{
|
|
2108
2118
|
type: Component,
|
|
2109
2119
|
args: [{ selector: 'symphony-input-textarea-with-send', providers: [
|
|
@@ -2112,7 +2122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2112
2122
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2113
2123
|
multi: true
|
|
2114
2124
|
}
|
|
2115
|
-
], template: "<div class=\"input-textarea-with-send-container\">\n
|
|
2125
|
+
], template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\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}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:auto;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i{color:#c3cbdc}.composer-meta .ai-start-over symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover{color:#2b8ff3}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"] }]
|
|
2116
2126
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
|
|
2117
2127
|
type: Input
|
|
2118
2128
|
}], isDisabled: [{
|
|
@@ -2131,12 +2141,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2131
2141
|
type: Input
|
|
2132
2142
|
}], autoResize: [{
|
|
2133
2143
|
type: Input
|
|
2144
|
+
}], showStartOverButton: [{
|
|
2145
|
+
type: Input
|
|
2146
|
+
}], startOverButtonId: [{
|
|
2147
|
+
type: Input
|
|
2148
|
+
}], startOverDisabled: [{
|
|
2149
|
+
type: Input
|
|
2150
|
+
}], startOverButtonIcon: [{
|
|
2151
|
+
type: Input
|
|
2152
|
+
}], startOverButtonTitle: [{
|
|
2153
|
+
type: Input
|
|
2134
2154
|
}], sendClicked: [{
|
|
2135
2155
|
type: Output
|
|
2136
2156
|
}], enterPressed: [{
|
|
2137
2157
|
type: Output
|
|
2138
2158
|
}], valueChanged: [{
|
|
2139
2159
|
type: Output
|
|
2160
|
+
}], startOverClicked: [{
|
|
2161
|
+
type: Output
|
|
2140
2162
|
}], textareaElement: [{
|
|
2141
2163
|
type: ViewChild,
|
|
2142
2164
|
args: ['textareaElement']
|
|
@@ -2147,11 +2169,13 @@ class InputTextareaWithSendModule {
|
|
|
2147
2169
|
InputTextareaWithSendModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2148
2170
|
InputTextareaWithSendModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendModule, declarations: [InputTextareaWithSendComponent], imports: [CommonModule,
|
|
2149
2171
|
FormsModule,
|
|
2150
|
-
IconModule
|
|
2172
|
+
IconModule,
|
|
2173
|
+
PipeModule], exports: [InputTextareaWithSendComponent] });
|
|
2151
2174
|
InputTextareaWithSendModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendModule, imports: [[
|
|
2152
2175
|
CommonModule,
|
|
2153
2176
|
FormsModule,
|
|
2154
|
-
IconModule
|
|
2177
|
+
IconModule,
|
|
2178
|
+
PipeModule
|
|
2155
2179
|
]] });
|
|
2156
2180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendModule, decorators: [{
|
|
2157
2181
|
type: NgModule,
|
|
@@ -2162,7 +2186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2162
2186
|
imports: [
|
|
2163
2187
|
CommonModule,
|
|
2164
2188
|
FormsModule,
|
|
2165
|
-
IconModule
|
|
2189
|
+
IconModule,
|
|
2190
|
+
PipeModule
|
|
2166
2191
|
],
|
|
2167
2192
|
exports: [
|
|
2168
2193
|
InputTextareaWithSendComponent
|
|
@@ -5183,6 +5208,7 @@ class MergeContactsModalComponent {
|
|
|
5183
5208
|
constructor() {
|
|
5184
5209
|
this.isLoading = false;
|
|
5185
5210
|
this.hasError = false;
|
|
5211
|
+
this.stepCopy = {};
|
|
5186
5212
|
this.next = new EventEmitter();
|
|
5187
5213
|
this.cancel = new EventEmitter();
|
|
5188
5214
|
this.notDuplicate = new EventEmitter();
|
|
@@ -5257,18 +5283,53 @@ class MergeContactsModalComponent {
|
|
|
5257
5283
|
const [baseUrl] = url.split('#');
|
|
5258
5284
|
return `${baseUrl}#/candidateprofileview?id=${id}`;
|
|
5259
5285
|
}
|
|
5286
|
+
getStepTitle(step) {
|
|
5287
|
+
return this.getStepCopy(step)?.title;
|
|
5288
|
+
}
|
|
5289
|
+
getStepDescription(step) {
|
|
5290
|
+
return this.getStepCopy(step)?.description;
|
|
5291
|
+
}
|
|
5292
|
+
getStepCopy(step) {
|
|
5293
|
+
if (this.confirmSuggestion && step === 1) {
|
|
5294
|
+
return this.getConfirmSuggestionCopy();
|
|
5295
|
+
}
|
|
5296
|
+
return this.getConfiguredStepCopy(step);
|
|
5297
|
+
}
|
|
5298
|
+
getConfirmSuggestionCopy() {
|
|
5299
|
+
const confirmCopy = {
|
|
5300
|
+
...(this.model?.confirmStepCopy ?? {}),
|
|
5301
|
+
...(this.confirmStepCopy ?? {}),
|
|
5302
|
+
};
|
|
5303
|
+
if (confirmCopy.title || confirmCopy.description) {
|
|
5304
|
+
return confirmCopy;
|
|
5305
|
+
}
|
|
5306
|
+
return this.getConfiguredStepCopy(1);
|
|
5307
|
+
}
|
|
5308
|
+
getConfiguredStepCopy(step) {
|
|
5309
|
+
const modelCopy = this.model?.stepCopy?.[step];
|
|
5310
|
+
const inputCopy = this.stepCopy?.[step];
|
|
5311
|
+
if (modelCopy || inputCopy) {
|
|
5312
|
+
return {
|
|
5313
|
+
...modelCopy,
|
|
5314
|
+
...inputCopy,
|
|
5315
|
+
};
|
|
5316
|
+
}
|
|
5317
|
+
return undefined;
|
|
5318
|
+
}
|
|
5260
5319
|
}
|
|
5261
5320
|
MergeContactsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5262
|
-
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"] }] });
|
|
5321
|
+
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", stepCopy: "stepCopy", confirmStepCopy: "confirmStepCopy", 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 <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \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\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\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=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></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 <div 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 }}</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>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\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 </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\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 </ng-template>\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}.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}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}\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"] }] });
|
|
5263
5322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MergeContactsModalComponent, decorators: [{
|
|
5264
5323
|
type: Component,
|
|
5265
|
-
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"] }]
|
|
5324
|
+
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 <ng-container *ngIf=\"getStepTitle(currentStep) as stepTitle\">\n <symphony-h4 [text]=\"stepTitle\"></symphony-h4>\n </ng-container> \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\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mt-15\"\n *ngIf=\"getStepDescription(currentStep)\"\n >\n <ng-container *ngIf=\"getStepDescription(currentStep) as stepDescription\">\n <symphony-paragraph [text]=\"stepDescription\"></symphony-paragraph>\n </ng-container> \n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"currentStep === 1\">\n <ng-container>\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=\"We couldn't retrieve the candidate data. The information cannot be displayed at this time, please try again.\"></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 <div 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 }}</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>\n </ng-container>\n </section>\n <section *ngIf=\"currentStep === 2\" class=\"modal-body merge-contacts-body\">\n <ng-content></ng-content>\n </section>\n <section *ngIf=\"currentStep === 1\" class=\"modal-footer\">\n <ng-container *ngIf=\"!confirmSuggestion; else confirmActions\">\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 </ng-container>\n <ng-template #confirmActions>\n <div class=\"confirm-actions\">\n <symphony-button-v2\n text=\"Back\"\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 </ng-template>\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}.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}.sfx-modal.modal-container .modal-body.merge-contacts-body{padding:0}\n"] }]
|
|
5266
5325
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5267
5326
|
type: Input
|
|
5268
5327
|
}], isLoading: [{
|
|
5269
5328
|
type: Input
|
|
5270
5329
|
}], hasError: [{
|
|
5271
5330
|
type: Input
|
|
5331
|
+
}], stepCopy: [{
|
|
5332
|
+
type: Input
|
|
5272
5333
|
}], next: [{
|
|
5273
5334
|
type: Output
|
|
5274
5335
|
}], cancel: [{
|
|
@@ -5283,6 +5344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
5283
5344
|
type: Output
|
|
5284
5345
|
}], requestConfirmSuggestion: [{
|
|
5285
5346
|
type: Output
|
|
5347
|
+
}], confirmStepCopy: [{
|
|
5348
|
+
type: Input
|
|
5286
5349
|
}], requestCancelConfirmSuggestion: [{
|
|
5287
5350
|
type: Output
|
|
5288
5351
|
}], selected: [{
|
|
@@ -7071,6 +7134,12 @@ class IconExplorerHelper {
|
|
|
7071
7134
|
iconClass: 'si-ai-withoutBorder',
|
|
7072
7135
|
hasBorder: false,
|
|
7073
7136
|
},
|
|
7137
|
+
{
|
|
7138
|
+
icon: Icons.STARTOVER,
|
|
7139
|
+
iconName: 'STARTOVER',
|
|
7140
|
+
iconClass: 'si-start-over',
|
|
7141
|
+
hasBorder: false,
|
|
7142
|
+
},
|
|
7074
7143
|
];
|
|
7075
7144
|
}
|
|
7076
7145
|
static getInverseIconList() {
|
|
@@ -7638,6 +7707,7 @@ class AISearchAssistantDrawerComponent {
|
|
|
7638
7707
|
showTimestamps: true,
|
|
7639
7708
|
enableSuggestedPrompts: true
|
|
7640
7709
|
};
|
|
7710
|
+
this.startOverClicked = new EventEmitter();
|
|
7641
7711
|
// Simple event outputs following Symphony patterns
|
|
7642
7712
|
this.drawerClosed = new EventEmitter();
|
|
7643
7713
|
this.promptSelected = new EventEmitter();
|
|
@@ -7775,18 +7845,23 @@ class AISearchAssistantDrawerComponent {
|
|
|
7775
7845
|
this.shouldScrollToBottom = true;
|
|
7776
7846
|
}
|
|
7777
7847
|
}
|
|
7848
|
+
onStartOverClick() {
|
|
7849
|
+
this.startOverClicked.emit();
|
|
7850
|
+
}
|
|
7778
7851
|
}
|
|
7779
7852
|
AISearchAssistantDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7780
|
-
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 } });
|
|
7853
|
+
AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", 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 [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\">\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", "showStartOverButton", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked"] }], 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 } });
|
|
7781
7854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, decorators: [{
|
|
7782
7855
|
type: Component,
|
|
7783
|
-
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"] }]
|
|
7856
|
+
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 [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\">\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"] }]
|
|
7784
7857
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
|
|
7785
7858
|
type: Input
|
|
7786
7859
|
}], config: [{
|
|
7787
7860
|
type: Input
|
|
7788
7861
|
}], contextId: [{
|
|
7789
7862
|
type: Input
|
|
7863
|
+
}], startOverClicked: [{
|
|
7864
|
+
type: Output
|
|
7790
7865
|
}], drawerClosed: [{
|
|
7791
7866
|
type: Output
|
|
7792
7867
|
}], promptSelected: [{
|