@rivet-health/design-system 31.8.0 → 31.8.2
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/input/mentions-input/mentions-input.component.mjs +96 -40
- package/esm2020/lib/input/phone-field/phone-field.component.mjs +4 -4
- package/fesm2015/rivet-health-design-system.mjs +98 -42
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +98 -42
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/mentions-input/mentions-input.component.d.ts +6 -2
- package/lib/input/phone-field/phone-field.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3938,6 +3938,8 @@ class MentionsInputComponent {
|
|
|
3938
3938
|
return `<span class="${readonly ? 'readonly-mention' : 'mention'}" data-id="${item.id}" data-type="mention" contenteditable="false">@${MentionsInputComponent.escapeHtml(item.name)}</span>`;
|
|
3939
3939
|
case 'text':
|
|
3940
3940
|
return MentionsInputComponent.escapeHtml(item.text);
|
|
3941
|
+
case 'newline':
|
|
3942
|
+
return '<br>';
|
|
3941
3943
|
}
|
|
3942
3944
|
}
|
|
3943
3945
|
static escapeHtml(text) {
|
|
@@ -3950,37 +3952,42 @@ class MentionsInputComponent {
|
|
|
3950
3952
|
this.emitContentChange();
|
|
3951
3953
|
}
|
|
3952
3954
|
onKeyDown(event) {
|
|
3953
|
-
if (
|
|
3955
|
+
if (this.mentionsVisible) {
|
|
3956
|
+
const filteredUsers = this.getFilteredUsers();
|
|
3957
|
+
if (filteredUsers.length === 0) {
|
|
3958
|
+
this.closeMentions();
|
|
3959
|
+
return;
|
|
3960
|
+
}
|
|
3961
|
+
switch (event.key) {
|
|
3962
|
+
case 'ArrowDown':
|
|
3963
|
+
event.preventDefault();
|
|
3964
|
+
this.selectedUserIndex = Math.min(this.selectedUserIndex + 1, filteredUsers.length - 1);
|
|
3965
|
+
this.cdr.markForCheck();
|
|
3966
|
+
break;
|
|
3967
|
+
case 'ArrowUp':
|
|
3968
|
+
event.preventDefault();
|
|
3969
|
+
this.selectedUserIndex = Math.max(this.selectedUserIndex - 1, 0);
|
|
3970
|
+
this.cdr.markForCheck();
|
|
3971
|
+
break;
|
|
3972
|
+
case 'Enter':
|
|
3973
|
+
case 'Tab':
|
|
3974
|
+
event.preventDefault();
|
|
3975
|
+
if (filteredUsers[this.selectedUserIndex]) {
|
|
3976
|
+
this.selectUser(filteredUsers[this.selectedUserIndex]);
|
|
3977
|
+
}
|
|
3978
|
+
break;
|
|
3979
|
+
case 'Escape':
|
|
3980
|
+
event.preventDefault();
|
|
3981
|
+
this.closeMentions();
|
|
3982
|
+
break;
|
|
3983
|
+
}
|
|
3954
3984
|
return;
|
|
3955
3985
|
}
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
this.cdr.markForCheck();
|
|
3962
|
-
break;
|
|
3963
|
-
case 'ArrowUp':
|
|
3964
|
-
event.preventDefault();
|
|
3965
|
-
this.selectedUserIndex = Math.max(this.selectedUserIndex - 1, 0);
|
|
3966
|
-
this.cdr.markForCheck();
|
|
3967
|
-
break;
|
|
3968
|
-
case 'Enter':
|
|
3969
|
-
event.preventDefault();
|
|
3970
|
-
if (filteredUsers[this.selectedUserIndex]) {
|
|
3971
|
-
this.selectUser(filteredUsers[this.selectedUserIndex]);
|
|
3972
|
-
}
|
|
3973
|
-
break;
|
|
3974
|
-
case 'Tab':
|
|
3975
|
-
event.preventDefault();
|
|
3976
|
-
if (filteredUsers[this.selectedUserIndex]) {
|
|
3977
|
-
this.selectUser(filteredUsers[this.selectedUserIndex]);
|
|
3978
|
-
}
|
|
3979
|
-
break;
|
|
3980
|
-
case 'Escape':
|
|
3981
|
-
event.preventDefault();
|
|
3982
|
-
this.closeMentions();
|
|
3983
|
-
break;
|
|
3986
|
+
//Handle newlines when mentions aren't visible
|
|
3987
|
+
if (event.key === 'Enter') {
|
|
3988
|
+
event.preventDefault();
|
|
3989
|
+
this.insertLineBreak();
|
|
3990
|
+
this.emitContentChange();
|
|
3984
3991
|
}
|
|
3985
3992
|
}
|
|
3986
3993
|
onPaste(event) {
|
|
@@ -3996,11 +4003,24 @@ class MentionsInputComponent {
|
|
|
3996
4003
|
this.insertNodesAtCursor(sanitizedNodes);
|
|
3997
4004
|
}
|
|
3998
4005
|
else if (plainText) {
|
|
3999
|
-
|
|
4000
|
-
this.
|
|
4006
|
+
const nodes = this.plainTextToNodes(plainText);
|
|
4007
|
+
this.insertNodesAtCursor(nodes);
|
|
4001
4008
|
}
|
|
4002
4009
|
this.emitContentChange();
|
|
4003
4010
|
}
|
|
4011
|
+
plainTextToNodes(text) {
|
|
4012
|
+
const nodes = [];
|
|
4013
|
+
const lines = text.split('\n');
|
|
4014
|
+
lines.forEach((line, index) => {
|
|
4015
|
+
if (line) {
|
|
4016
|
+
nodes.push(document.createTextNode(line));
|
|
4017
|
+
}
|
|
4018
|
+
if (index < lines.length - 1) {
|
|
4019
|
+
nodes.push(document.createElement('br'));
|
|
4020
|
+
}
|
|
4021
|
+
});
|
|
4022
|
+
return nodes;
|
|
4023
|
+
}
|
|
4004
4024
|
parsePastedHtml(html) {
|
|
4005
4025
|
// Create a temporary container to parse the HTML
|
|
4006
4026
|
const tempContainer = document.createElement('div');
|
|
@@ -4009,7 +4029,7 @@ class MentionsInputComponent {
|
|
|
4009
4029
|
const walkNodes = (node) => {
|
|
4010
4030
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
4011
4031
|
const element = node;
|
|
4012
|
-
// DAHNE NOTE - we only want mention spans and text
|
|
4032
|
+
// DAHNE NOTE - we only want mention spans, br elements, and text
|
|
4013
4033
|
if (element.tagName === 'SPAN' &&
|
|
4014
4034
|
element.getAttribute('data-type') === 'mention' &&
|
|
4015
4035
|
element.hasAttribute('data-id')) {
|
|
@@ -4024,6 +4044,10 @@ class MentionsInputComponent {
|
|
|
4024
4044
|
mentionSpan.textContent = element.textContent;
|
|
4025
4045
|
nodes.push(mentionSpan);
|
|
4026
4046
|
}
|
|
4047
|
+
else if (element.tagName === 'BR') {
|
|
4048
|
+
// Preserve line breaks
|
|
4049
|
+
nodes.push(document.createElement('br'));
|
|
4050
|
+
}
|
|
4027
4051
|
else {
|
|
4028
4052
|
//Recursively look for nested children
|
|
4029
4053
|
for (const child of Array.from(element.childNodes)) {
|
|
@@ -4041,7 +4065,7 @@ class MentionsInputComponent {
|
|
|
4041
4065
|
for (const child of Array.from(tempContainer.childNodes)) {
|
|
4042
4066
|
walkNodes(child);
|
|
4043
4067
|
}
|
|
4044
|
-
//DAHNE NOTE - the result here should be an array of text/span-mention nodes
|
|
4068
|
+
//DAHNE NOTE - the result here should be an array of text/span-mention/br nodes
|
|
4045
4069
|
return nodes;
|
|
4046
4070
|
}
|
|
4047
4071
|
insertNodesAtCursor(nodes) {
|
|
@@ -4078,6 +4102,20 @@ class MentionsInputComponent {
|
|
|
4078
4102
|
selection.removeAllRanges();
|
|
4079
4103
|
selection.addRange(range);
|
|
4080
4104
|
}
|
|
4105
|
+
insertLineBreak() {
|
|
4106
|
+
const selection = window.getSelection();
|
|
4107
|
+
if (!selection || !selection.rangeCount) {
|
|
4108
|
+
return;
|
|
4109
|
+
}
|
|
4110
|
+
const range = selection.getRangeAt(0);
|
|
4111
|
+
range.deleteContents();
|
|
4112
|
+
const br = document.createElement('br');
|
|
4113
|
+
range.insertNode(br);
|
|
4114
|
+
range.setStartAfter(br);
|
|
4115
|
+
range.setEndAfter(br);
|
|
4116
|
+
selection.removeAllRanges();
|
|
4117
|
+
selection.addRange(range);
|
|
4118
|
+
}
|
|
4081
4119
|
checkForMentionTrigger() {
|
|
4082
4120
|
const selection = window.getSelection();
|
|
4083
4121
|
if (!selection || !selection.rangeCount || !this.inputElement) {
|
|
@@ -4115,15 +4153,24 @@ class MentionsInputComponent {
|
|
|
4115
4153
|
}
|
|
4116
4154
|
// Trim trailing/leading spaces from search text while preserving spaces in the middle
|
|
4117
4155
|
this.mentionSearchText = textAfterAt.trim();
|
|
4156
|
+
// Only show mentions if there are filtered users
|
|
4157
|
+
const filteredUsers = this.getFilteredUsers();
|
|
4158
|
+
if (filteredUsers.length === 0) {
|
|
4159
|
+
this.closeMentions();
|
|
4160
|
+
return;
|
|
4161
|
+
}
|
|
4118
4162
|
this.mentionsVisible = true;
|
|
4119
4163
|
this.selectedUserIndex = 0;
|
|
4120
4164
|
//Save the current range for later restoration (needed for click selection)
|
|
4121
4165
|
//DAHNE NOTE - this is annoyingly neceessary because clicks and enter keys have different effects on the
|
|
4122
4166
|
//focus of the contenteditable div
|
|
4123
4167
|
this.savedRange = range.cloneRange();
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4168
|
+
if (atPosition) {
|
|
4169
|
+
const atRange = document.createRange();
|
|
4170
|
+
atRange.setStart(atPosition.node, atPosition.offset);
|
|
4171
|
+
atRange.setEnd(atPosition.node, atPosition.offset + 1);
|
|
4172
|
+
this.mentionAnchor = atRange.getBoundingClientRect();
|
|
4173
|
+
}
|
|
4127
4174
|
this.cdr.markForCheck();
|
|
4128
4175
|
}
|
|
4129
4176
|
getTextBeforeCursor(range) {
|
|
@@ -4146,6 +4193,10 @@ class MentionsInputComponent {
|
|
|
4146
4193
|
.includes(this.mentionSearchText.toLowerCase()));
|
|
4147
4194
|
return users.slice().sort((a, b) => a.name.localeCompare(b.name));
|
|
4148
4195
|
}
|
|
4196
|
+
onUserHover(index) {
|
|
4197
|
+
this.selectedUserIndex = index;
|
|
4198
|
+
this.cdr.markForCheck();
|
|
4199
|
+
}
|
|
4149
4200
|
selectUser(user) {
|
|
4150
4201
|
var _a;
|
|
4151
4202
|
if (!this.inputElement) {
|
|
@@ -4277,6 +4328,9 @@ class MentionsInputComponent {
|
|
|
4277
4328
|
const name = ((_b = element.textContent) === null || _b === void 0 ? void 0 : _b.replace('@', '')) || '';
|
|
4278
4329
|
items.push({ type: 'mention', id, name });
|
|
4279
4330
|
}
|
|
4331
|
+
else if (element.tagName === 'BR') {
|
|
4332
|
+
items.push({ type: 'newline' });
|
|
4333
|
+
}
|
|
4280
4334
|
}
|
|
4281
4335
|
else if (node.nodeType === Node.TEXT_NODE) {
|
|
4282
4336
|
const text = node.textContent || '';
|
|
@@ -4292,10 +4346,10 @@ class MentionsInputComponent {
|
|
|
4292
4346
|
}
|
|
4293
4347
|
}
|
|
4294
4348
|
MentionsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4295
|
-
MentionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n <div\n *ngIf=\"!readonly\"\n #input\n class=\"text-content editable\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder\"\n (input)=\"onInput()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n <riv-callout\n *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n [anchor]=\"mentionAnchor\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [
|
|
4349
|
+
MentionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n <div\n *ngIf=\"!readonly\"\n #input\n class=\"text-content editable\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder\"\n (input)=\"onInput()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n <riv-callout\n *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n [anchor]=\"mentionAnchor\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [allowedPositions]=\"['bottom-right', 'top-right']\"\n [theme]=\"'light'\"\n (close)=\"onCalloutClose()\"\n >\n <div class=\"mentions-content\">\n <div class=\"mentions-header\">Mention someone</div>\n <div class=\"mentions-list\">\n <button\n *ngFor=\"let user of getFilteredUsers(); let i = index\"\n [class.selected]=\"i === selectedUserIndex\"\n (mouseenter)=\"onUserHover(i)\"\n (click)=\"selectUser(user)\"\n >\n {{ user.name }}\n </button>\n </div>\n </div>\n </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy)}span.readonly-mention{font-weight:var(--font-weight-heavy)}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-disabled)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4296
4350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MentionsInputComponent, decorators: [{
|
|
4297
4351
|
type: Component,
|
|
4298
|
-
args: [{ selector: 'riv-mentions-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mentions-container\" #container>\n <div\n *ngIf=\"!readonly\"\n #input\n class=\"text-content editable\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder\"\n (input)=\"onInput()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n <riv-callout\n *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n [anchor]=\"mentionAnchor\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [
|
|
4352
|
+
args: [{ selector: 'riv-mentions-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mentions-container\" #container>\n <div\n *ngIf=\"!readonly\"\n #input\n class=\"text-content editable\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder\"\n (input)=\"onInput()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n ></div>\n\n <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n <riv-callout\n *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n [anchor]=\"mentionAnchor\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [allowedPositions]=\"['bottom-right', 'top-right']\"\n [theme]=\"'light'\"\n (close)=\"onCalloutClose()\"\n >\n <div class=\"mentions-content\">\n <div class=\"mentions-header\">Mention someone</div>\n <div class=\"mentions-list\">\n <button\n *ngFor=\"let user of getFilteredUsers(); let i = index\"\n [class.selected]=\"i === selectedUserIndex\"\n (mouseenter)=\"onUserHover(i)\"\n (click)=\"selectUser(user)\"\n >\n {{ user.name }}\n </button>\n </div>\n </div>\n </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy)}span.readonly-mention{font-weight:var(--font-weight-heavy)}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-disabled)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
|
|
4299
4353
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
|
|
4300
4354
|
type: Input
|
|
4301
4355
|
}], users: [{
|
|
@@ -4311,7 +4365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4311
4365
|
args: ['input', { static: false }]
|
|
4312
4366
|
}] } });
|
|
4313
4367
|
(function (MentionsInputComponent) {
|
|
4314
|
-
MentionsInputComponent.ContentTypes = ['mention', 'text'];
|
|
4368
|
+
MentionsInputComponent.ContentTypes = ['mention', 'text', 'newline'];
|
|
4315
4369
|
function contentToPlainText(content) {
|
|
4316
4370
|
return content
|
|
4317
4371
|
.map(item => {
|
|
@@ -4320,6 +4374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4320
4374
|
return `@${item.name}`;
|
|
4321
4375
|
case 'text':
|
|
4322
4376
|
return item.text;
|
|
4377
|
+
case 'newline':
|
|
4378
|
+
return '\n';
|
|
4323
4379
|
}
|
|
4324
4380
|
})
|
|
4325
4381
|
.join('');
|
|
@@ -4388,8 +4444,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4388
4444
|
return digits.length > 10 ? digits.slice(0, 10) : digits;
|
|
4389
4445
|
}
|
|
4390
4446
|
PhoneFieldComponent.clean = clean;
|
|
4391
|
-
function format(
|
|
4392
|
-
const cleaned = clean(
|
|
4447
|
+
function format(value) {
|
|
4448
|
+
const cleaned = clean(value);
|
|
4393
4449
|
if (!cleaned)
|
|
4394
4450
|
return '';
|
|
4395
4451
|
function formatBody(v) {
|
|
@@ -4406,7 +4462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4406
4462
|
if (cleaned.length === 11) {
|
|
4407
4463
|
return `1 ${formatBody(cleaned.slice(1))}`;
|
|
4408
4464
|
}
|
|
4409
|
-
return formatBody(
|
|
4465
|
+
return formatBody(cleaned);
|
|
4410
4466
|
}
|
|
4411
4467
|
PhoneFieldComponent.format = format;
|
|
4412
4468
|
})(PhoneFieldComponent || (PhoneFieldComponent = {}));
|