@symphony-talent/component-library 4.185.0 → 4.186.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/input-textarea-with-send/input-textarea-with-send.component.mjs +26 -17
- package/esm2020/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.mjs +26 -17
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +27 -19
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +27 -19
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +25 -16
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +25 -16
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +7 -4
- package/package.json +1 -1
- package/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +7 -4
|
@@ -1973,7 +1973,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1973
1973
|
}] });
|
|
1974
1974
|
|
|
1975
1975
|
class InputTextareaWithSendComponent {
|
|
1976
|
-
constructor() {
|
|
1976
|
+
constructor(cdr) {
|
|
1977
|
+
this.cdr = cdr;
|
|
1977
1978
|
this.placeholder = 'Type your message...';
|
|
1978
1979
|
this.isDisabled = false;
|
|
1979
1980
|
this.showCharacterCount = false;
|
|
@@ -1987,6 +1988,9 @@ class InputTextareaWithSendComponent {
|
|
|
1987
1988
|
this.valueChanged = new EventEmitter();
|
|
1988
1989
|
this.value = '';
|
|
1989
1990
|
this.currentRows = 1;
|
|
1991
|
+
this.characterCount = 0;
|
|
1992
|
+
this.characterLimitExceeded = false;
|
|
1993
|
+
this.canSendMessage = false;
|
|
1990
1994
|
this.onChange = (value) => { };
|
|
1991
1995
|
this.onTouched = () => { };
|
|
1992
1996
|
}
|
|
@@ -1994,10 +1998,13 @@ class InputTextareaWithSendComponent {
|
|
|
1994
1998
|
if (this.autoResize) {
|
|
1995
1999
|
this.adjustTextareaHeight();
|
|
1996
2000
|
}
|
|
2001
|
+
// Initialize computed properties
|
|
2002
|
+
this.refreshInputState();
|
|
1997
2003
|
}
|
|
1998
2004
|
// ControlValueAccessor implementation
|
|
1999
2005
|
writeValue(value) {
|
|
2000
2006
|
this.value = value || '';
|
|
2007
|
+
this.refreshInputState();
|
|
2001
2008
|
if (this.autoResize) {
|
|
2002
2009
|
setTimeout(() => this.adjustTextareaHeight(), 0);
|
|
2003
2010
|
}
|
|
@@ -2014,8 +2021,11 @@ class InputTextareaWithSendComponent {
|
|
|
2014
2021
|
onInputChange(event) {
|
|
2015
2022
|
const target = event.target;
|
|
2016
2023
|
this.value = target.value;
|
|
2024
|
+
// Update computed properties for character count and send button
|
|
2025
|
+
this.refreshInputState();
|
|
2017
2026
|
this.onChange(this.value);
|
|
2018
2027
|
this.valueChanged.emit(this.value);
|
|
2028
|
+
this.cdr.detectChanges();
|
|
2019
2029
|
if (this.autoResize) {
|
|
2020
2030
|
this.adjustTextareaHeight();
|
|
2021
2031
|
}
|
|
@@ -2023,13 +2033,13 @@ class InputTextareaWithSendComponent {
|
|
|
2023
2033
|
onInputKeyPress(event) {
|
|
2024
2034
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
2025
2035
|
event.preventDefault();
|
|
2026
|
-
if (this.
|
|
2036
|
+
if (this.canSendMessage) {
|
|
2027
2037
|
this.onSendClick();
|
|
2028
2038
|
}
|
|
2029
2039
|
}
|
|
2030
2040
|
}
|
|
2031
2041
|
onSendClick() {
|
|
2032
|
-
if (this.
|
|
2042
|
+
if (this.canSendMessage) {
|
|
2033
2043
|
this.sendClicked.emit(this.value);
|
|
2034
2044
|
this.enterPressed.emit(this.value);
|
|
2035
2045
|
}
|
|
@@ -2051,17 +2061,16 @@ class InputTextareaWithSendComponent {
|
|
|
2051
2061
|
// Update current rows for styling purposes
|
|
2052
2062
|
this.currentRows = Math.ceil((newHeight - padding) / lineHeight);
|
|
2053
2063
|
}
|
|
2054
|
-
|
|
2064
|
+
refreshInputState() {
|
|
2065
|
+
// Update character count
|
|
2066
|
+
this.characterCount = this.value?.length || 0;
|
|
2067
|
+
// Update character limit exceeded status
|
|
2068
|
+
this.characterLimitExceeded = !!this.maxCharacterLimit && this.characterCount > this.maxCharacterLimit;
|
|
2069
|
+
// Update can send status
|
|
2055
2070
|
const trimmedValue = this.value?.trim();
|
|
2056
2071
|
const hasValue = !!trimmedValue;
|
|
2057
|
-
const withinLimit = !this.maxCharacterLimit || this.
|
|
2058
|
-
|
|
2059
|
-
}
|
|
2060
|
-
getCharacterCount() {
|
|
2061
|
-
return this.value?.length || 0;
|
|
2062
|
-
}
|
|
2063
|
-
isCharacterLimitExceeded() {
|
|
2064
|
-
return !!this.maxCharacterLimit && this.getCharacterCount() > this.maxCharacterLimit;
|
|
2072
|
+
const withinLimit = !this.maxCharacterLimit || this.characterCount <= this.maxCharacterLimit;
|
|
2073
|
+
this.canSendMessage = !this.isDisabled && hasValue && withinLimit;
|
|
2065
2074
|
}
|
|
2066
2075
|
focus() {
|
|
2067
2076
|
if (this.textareaElement) {
|
|
@@ -2077,14 +2086,14 @@ class InputTextareaWithSendComponent {
|
|
|
2077
2086
|
}
|
|
2078
2087
|
}
|
|
2079
2088
|
}
|
|
2080
|
-
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2089
|
+
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2081
2090
|
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: [
|
|
2082
2091
|
{
|
|
2083
2092
|
provide: NG_VALUE_ACCESSOR,
|
|
2084
2093
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2085
2094
|
multi: true
|
|
2086
2095
|
}
|
|
2087
|
-
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n <!-- Character Counter -->\n <div \n class=\"character-counter sfx-mb-10\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span \n class=\"counter-text\"\n [class.counter-exceeded]=\"
|
|
2096
|
+
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n <!-- Character Counter -->\n <div \n class=\"character-counter sfx-mb-10\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span \n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\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%}.character-counter{text-align:right}.character-counter .counter-text{font-size:.75rem;color:#5b6d80}.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"] }] });
|
|
2088
2097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, decorators: [{
|
|
2089
2098
|
type: Component,
|
|
2090
2099
|
args: [{ selector: 'symphony-input-textarea-with-send', providers: [
|
|
@@ -2093,8 +2102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2093
2102
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2094
2103
|
multi: true
|
|
2095
2104
|
}
|
|
2096
|
-
], template: "<div class=\"input-textarea-with-send-container\">\n <!-- Character Counter -->\n <div \n class=\"character-counter sfx-mb-10\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span \n class=\"counter-text\"\n [class.counter-exceeded]=\"
|
|
2097
|
-
}], propDecorators: { placeholder: [{
|
|
2105
|
+
], template: "<div class=\"input-textarea-with-send-container\">\n <!-- Character Counter -->\n <div \n class=\"character-counter sfx-mb-10\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span \n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\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%}.character-counter{text-align:right}.character-counter .counter-text{font-size:.75rem;color:#5b6d80}.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"] }]
|
|
2106
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
|
|
2098
2107
|
type: Input
|
|
2099
2108
|
}], isDisabled: [{
|
|
2100
2109
|
type: Input
|