adb-shared 6.2.23 → 6.2.26

package/fesm2022/adb-shared.mjs

@@ -1874,10 +1874,13 @@ class AdbRichEditorComponent {
     hasTaxon = false;
     hasReference = false;
     rows = 3;
+    label = 'Set label';
+    id;
     constructor(el) {
         this.el = el;
     }
     getTextarea() {
+        this.id = this.getId();
         return this.el.nativeElement.querySelector('textarea');
     }
     onDoubleClick() {
@@ -1912,8 +1915,10 @@ class AdbRichEditorComponent {
                 value.slice(start);
             this.updateValue(newValue);
             const cursor = start + marker.length;
-            textarea.focus();
-            textarea.setSelectionRange(cursor, cursor);
+            requestAnimationFrame(() => {
+                textarea.focus();
+                textarea.setSelectionRange(cursorStart, cursorEnd);
+            });
             return;
         }
         const existingMarker = this.findWrappingMarker(value, start, end, FORMAT_MARKERS[type]);
@@ -1934,8 +1939,10 @@ class AdbRichEditorComponent {
         const cursorEnd = existingMarker
             ? end - marker.length
             : end + marker.length;
-        textarea.focus();
-        textarea.setSelectionRange(cursorStart, cursorEnd);
+        requestAnimationFrame(() => {
+            textarea.focus();
+            textarea.setSelectionRange(cursorStart, cursorEnd);
+        });
     }
     findWrappingMarker(value, start, end, markers) {
         return (markers.find(marker => value.substring(start - marker.length, start) === marker &&
@@ -1998,15 +2005,18 @@ class AdbRichEditorComponent {
         this.text = value;
         this.onChange(this.text);
     }
+    getId() {
+        return '' + Math.floor(Math.random() * Date.now());
+    }
     ngOnDestroy() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows", label: "label" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AdbRichEditorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], ngImport: i0, template: "<div>\r\n  <div class=\"d-flex justify-content-end align-items-end gap-3 mb-1\">\r\n    <label  class=\"me-auto\" [for]=\"id\">{{label|translate}}</label>\r\n    <button class=\"btn btn-sm btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-sm btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-sm btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-sm btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea [id]=\"id\" class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorComponent, decorators: [{
             type: Component,
@@ -2016,13 +2026,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => AdbRichEditorComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
+                    ], standalone: false, template: "<div>\r\n  <div class=\"d-flex justify-content-end align-items-end gap-3 mb-1\">\r\n    <label  class=\"me-auto\" [for]=\"id\">{{label|translate}}</label>\r\n    <button class=\"btn btn-sm btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-sm btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-sm btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-sm btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea [id]=\"id\" class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasTaxon: [{
                 type: Input
             }], hasReference: [{
                 type: Input
             }], rows: [{
                 type: Input
+            }], label: [{
+                type: Input
             }] } });
 
 const RICH_MODULE_CONFIG = new InjectionToken('richModule.config');
@@ -2041,76 +2053,78 @@ class RichTextComponent {
     }
     parseCustomMarkdown(input) {
         const parts = [];
-        const boldRegex = /(\*\*|__)(.+?)\1/g;
-        const italicRegex = /(\*|_)([^*_]+?)\1/g;
-        const taxonRegex = /\[([^\]]+)\]\(taxon:([^)]+)\)/g;
-        const termRegex = /\[([^\]]+)\]\(term:([^)]+)\)/g;
-        const referenceRegex = /\[([^\]]+)\]\(reference:([^)]+)\)/g;
-        const combinedRegex = new RegExp([
-            boldRegex.source,
-            italicRegex.source,
-            taxonRegex.source,
-            termRegex.source,
-            referenceRegex.source
-        ].join('|'), 'g');
-        let lastIndex = 0;
-        let match;
-        while ((match = combinedRegex.exec(input)) !== null) {
-            if (match.index > lastIndex) {
-                parts.push({
-                    type: 'text',
-                    content: input.slice(lastIndex, match.index)
-                });
+        let i = 0;
+        const pushText = (text) => {
+            if (text) {
+                parts.push({ type: 'text', content: text });
             }
-            if (match[2]) {
-                parts.push({
-                    type: 'bold',
-                    content: match[2]
-                });
+        };
+        while (i < input.length) {
+            if (input.startsWith('**', i) || input.startsWith('__', i)) {
+                const marker = input.substr(i, 2);
+                const end = input.indexOf(marker, i + 2);
+                if (end !== -1) {
+                    parts.push({
+                        type: 'bold',
+                        content: input.slice(i + 2, end)
+                    });
+                    i = end + 2;
+                    continue;
+                }
             }
-            else if (match[4]) {
-                parts.push({
-                    type: 'italic',
-                    content: match[4]
-                });
+            if (input[i] === '*' || input[i] === '_') {
+                const marker = input[i];
+                const end = input.indexOf(marker, i + 1);
+                if (end !== -1) {
+                    parts.push({
+                        type: 'italic',
+                        content: input.slice(i + 1, end)
+                    });
+                    i = end + 1;
+                    continue;
+                }
             }
-            else if (match[5]) {
-                parts.push({
-                    type: 'taxon',
-                    content: match[5],
-                    id: match[6]
-                });
+            if (input[i] === '[') {
+                const textEnd = input.indexOf(']', i);
+                const linkStart = input.indexOf('(', textEnd);
+                const linkEnd = input.indexOf(')', linkStart);
+                if (textEnd !== -1 && linkStart !== -1 && linkEnd !== -1) {
+                    const label = input.slice(i + 1, textEnd);
+                    const link = input.slice(linkStart + 1, linkEnd);
+                    const [type, id] = link.split(':');
+                    if (type === 'taxon' || type === 'term' || type === 'reference') {
+                        parts.push({
+                            type: type,
+                            content: label,
+                            id
+                        });
+                        i = linkEnd + 1;
+                        continue;
+                    }
+                }
             }
-            else if (match[7]) {
-                parts.push({
-                    type: 'term',
-                    content: match[7],
-                    id: match[8]
-                });
+            let next = input.length;
+            for (const c of ['*', '_', '[']) {
+                const idx = input.indexOf(c, i + 1);
+                if (idx !== -1 && idx < next) {
+                    next = idx;
+                }
             }
-            else if (match[9]) {
-                parts.push({
-                    type: 'reference',
-                    content: match[9],
-                    id: match[10]
-                });
+            if (next === input.length) {
+                pushText(input.slice(i));
+                break;
             }
-            lastIndex = combinedRegex.lastIndex;
-        }
-        if (lastIndex < input.length) {
-            parts.push({
-                type: 'text',
-                content: input.slice(lastIndex)
-            });
+            pushText(input.slice(i, next));
+            i = next;
         }
         return parts;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RichTextComponent, deps: [{ token: RICH_MODULE_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RichTextComponent, isStandalone: false, selector: "adb-rich-text", inputs: { text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track part) {\r\n    @if (part.type === 'text') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'italic') {\r\n      <em>{{ part.content }}</em>\r\n    }\r\n    @if (part.type === 'bold') {\r\n      <b>{{ part.content }}</b>\r\n    }\r\n    @if (part.type === 'taxon') {\r\n      <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n    }\r\n    @if (part.type === 'term') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'reference') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RichTextComponent, isStandalone: false, selector: "adb-rich-text", inputs: { text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track $index) {\r\n  @switch (part.type) {\r\n    @case ('text') { <span>{{ part.content }}</span> }\r\n    @case ('italic') { <em>{{ part.content }}</em> }\r\n    @case ('bold') { <b>{{ part.content }}</b> }\r\n    @case ('taxon') { <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a> }\r\n    @default { <span>{{ part.content }}</span> }\r\n  }\r\n}\r\n</div>" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-rich-text', standalone: false, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track part) {\r\n    @if (part.type === 'text') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'italic') {\r\n      <em>{{ part.content }}</em>\r\n    }\r\n    @if (part.type === 'bold') {\r\n      <b>{{ part.content }}</b>\r\n    }\r\n    @if (part.type === 'taxon') {\r\n      <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n    }\r\n    @if (part.type === 'term') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'reference') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'adb-rich-text', standalone: false, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track $index) {\r\n  @switch (part.type) {\r\n    @case ('text') { <span>{{ part.content }}</span> }\r\n    @case ('italic') { <em>{{ part.content }}</em> }\r\n    @case ('bold') { <b>{{ part.content }}</b> }\r\n    @case ('taxon') { <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a> }\r\n    @default { <span>{{ part.content }}</span> }\r\n  }\r\n}\r\n</div>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RICH_MODULE_CONFIG]
@@ -2128,13 +2142,13 @@ class AdbRichEditorModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, declarations: [AdbRichEditorComponent, RichTextComponent], imports: [CommonModule, FormsModule], exports: [AdbRichEditorComponent, RichTextComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, imports: [CommonModule, FormsModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, declarations: [AdbRichEditorComponent, RichTextComponent], imports: [CommonModule, FormsModule, i1$1.TranslateModule], exports: [AdbRichEditorComponent, RichTextComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, imports: [CommonModule, FormsModule, TranslateModule.forChild()] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbRichEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, TranslateModule.forChild()],
                     declarations: [AdbRichEditorComponent, RichTextComponent],
                     exports: [AdbRichEditorComponent, RichTextComponent]
                 }]