@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
|
@@ -1976,7 +1976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1976
1976
|
}] });
|
|
1977
1977
|
|
|
1978
1978
|
class InputTextareaWithSendComponent {
|
|
1979
|
-
constructor() {
|
|
1979
|
+
constructor(cdr) {
|
|
1980
|
+
this.cdr = cdr;
|
|
1980
1981
|
this.placeholder = 'Type your message...';
|
|
1981
1982
|
this.isDisabled = false;
|
|
1982
1983
|
this.showCharacterCount = false;
|
|
@@ -1990,6 +1991,9 @@ class InputTextareaWithSendComponent {
|
|
|
1990
1991
|
this.valueChanged = new EventEmitter();
|
|
1991
1992
|
this.value = '';
|
|
1992
1993
|
this.currentRows = 1;
|
|
1994
|
+
this.characterCount = 0;
|
|
1995
|
+
this.characterLimitExceeded = false;
|
|
1996
|
+
this.canSendMessage = false;
|
|
1993
1997
|
this.onChange = (value) => { };
|
|
1994
1998
|
this.onTouched = () => { };
|
|
1995
1999
|
}
|
|
@@ -1997,10 +2001,13 @@ class InputTextareaWithSendComponent {
|
|
|
1997
2001
|
if (this.autoResize) {
|
|
1998
2002
|
this.adjustTextareaHeight();
|
|
1999
2003
|
}
|
|
2004
|
+
// Initialize computed properties
|
|
2005
|
+
this.refreshInputState();
|
|
2000
2006
|
}
|
|
2001
2007
|
// ControlValueAccessor implementation
|
|
2002
2008
|
writeValue(value) {
|
|
2003
2009
|
this.value = value || '';
|
|
2010
|
+
this.refreshInputState();
|
|
2004
2011
|
if (this.autoResize) {
|
|
2005
2012
|
setTimeout(() => this.adjustTextareaHeight(), 0);
|
|
2006
2013
|
}
|
|
@@ -2017,8 +2024,11 @@ class InputTextareaWithSendComponent {
|
|
|
2017
2024
|
onInputChange(event) {
|
|
2018
2025
|
const target = event.target;
|
|
2019
2026
|
this.value = target.value;
|
|
2027
|
+
// Update computed properties for character count and send button
|
|
2028
|
+
this.refreshInputState();
|
|
2020
2029
|
this.onChange(this.value);
|
|
2021
2030
|
this.valueChanged.emit(this.value);
|
|
2031
|
+
this.cdr.detectChanges();
|
|
2022
2032
|
if (this.autoResize) {
|
|
2023
2033
|
this.adjustTextareaHeight();
|
|
2024
2034
|
}
|
|
@@ -2026,13 +2036,13 @@ class InputTextareaWithSendComponent {
|
|
|
2026
2036
|
onInputKeyPress(event) {
|
|
2027
2037
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
2028
2038
|
event.preventDefault();
|
|
2029
|
-
if (this.
|
|
2039
|
+
if (this.canSendMessage) {
|
|
2030
2040
|
this.onSendClick();
|
|
2031
2041
|
}
|
|
2032
2042
|
}
|
|
2033
2043
|
}
|
|
2034
2044
|
onSendClick() {
|
|
2035
|
-
if (this.
|
|
2045
|
+
if (this.canSendMessage) {
|
|
2036
2046
|
this.sendClicked.emit(this.value);
|
|
2037
2047
|
this.enterPressed.emit(this.value);
|
|
2038
2048
|
}
|
|
@@ -2054,19 +2064,17 @@ class InputTextareaWithSendComponent {
|
|
|
2054
2064
|
// Update current rows for styling purposes
|
|
2055
2065
|
this.currentRows = Math.ceil((newHeight - padding) / lineHeight);
|
|
2056
2066
|
}
|
|
2057
|
-
|
|
2058
|
-
var _a;
|
|
2059
|
-
|
|
2067
|
+
refreshInputState() {
|
|
2068
|
+
var _a, _b;
|
|
2069
|
+
// Update character count
|
|
2070
|
+
this.characterCount = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
2071
|
+
// Update character limit exceeded status
|
|
2072
|
+
this.characterLimitExceeded = !!this.maxCharacterLimit && this.characterCount > this.maxCharacterLimit;
|
|
2073
|
+
// Update can send status
|
|
2074
|
+
const trimmedValue = (_b = this.value) === null || _b === void 0 ? void 0 : _b.trim();
|
|
2060
2075
|
const hasValue = !!trimmedValue;
|
|
2061
|
-
const withinLimit = !this.maxCharacterLimit || this.
|
|
2062
|
-
|
|
2063
|
-
}
|
|
2064
|
-
getCharacterCount() {
|
|
2065
|
-
var _a;
|
|
2066
|
-
return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
2067
|
-
}
|
|
2068
|
-
isCharacterLimitExceeded() {
|
|
2069
|
-
return !!this.maxCharacterLimit && this.getCharacterCount() > this.maxCharacterLimit;
|
|
2076
|
+
const withinLimit = !this.maxCharacterLimit || this.characterCount <= this.maxCharacterLimit;
|
|
2077
|
+
this.canSendMessage = !this.isDisabled && hasValue && withinLimit;
|
|
2070
2078
|
}
|
|
2071
2079
|
focus() {
|
|
2072
2080
|
if (this.textareaElement) {
|
|
@@ -2082,14 +2090,14 @@ class InputTextareaWithSendComponent {
|
|
|
2082
2090
|
}
|
|
2083
2091
|
}
|
|
2084
2092
|
}
|
|
2085
|
-
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2093
|
+
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2086
2094
|
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: [
|
|
2087
2095
|
{
|
|
2088
2096
|
provide: NG_VALUE_ACCESSOR,
|
|
2089
2097
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2090
2098
|
multi: true
|
|
2091
2099
|
}
|
|
2092
|
-
], 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]=\"
|
|
2100
|
+
], 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"] }] });
|
|
2093
2101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, decorators: [{
|
|
2094
2102
|
type: Component,
|
|
2095
2103
|
args: [{ selector: 'symphony-input-textarea-with-send', providers: [
|
|
@@ -2098,8 +2106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2098
2106
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2099
2107
|
multi: true
|
|
2100
2108
|
}
|
|
2101
|
-
], 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]=\"
|
|
2102
|
-
}], propDecorators: { placeholder: [{
|
|
2109
|
+
], 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"] }]
|
|
2110
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
|
|
2103
2111
|
type: Input
|
|
2104
2112
|
}], isDisabled: [{
|
|
2105
2113
|
type: Input
|