@leanix/components 0.4.13 → 0.4.14

package/fesm2020/leanix-components.mjs

@@ -1,7 +1,7 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Injectable, ElementRef, Inject, ViewChild, ContentChildren, SecurityContext, Pipe, Optional, NgModule, ViewChildren, forwardRef, ContentChild, TemplateRef, Self, Host } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Injectable, InjectionToken, ElementRef, Inject, ViewChild, ContentChildren, SecurityContext, Pipe, Optional, NgModule, ViewChildren, forwardRef, ContentChild, TemplateRef, Self, Host } from '@angular/core';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$7 from '@angular/cdk/portal';
@@ -17,7 +17,7 @@ import * as i1$3 from '@angular/platform-browser';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import { sanitize } from 'dompurify';
-import { isArray, isEqual, split, isString, curry } from 'lodash-es';
+import { isArray, isEqual, split, isString, intersection, isNil, curry } from 'lodash-es';
 import { Renderer, marked } from 'marked';
 import * as i1$4 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -37,6 +37,18 @@ import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i4 from '@angular/router';
 import { RouterLinkActive, RouterModule } from '@angular/router';
 
+const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
+    providedIn: 'root',
+    factory: () => ({
+        getDateFormat: () => 'YYYY-MM-DD',
+        getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
+        getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
+    })
+});
+const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
+const LOCALE_FN = new InjectionToken('LOCALE_FN');
+const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
+
 class BadgeComponent {
     constructor() {
         this.size = 'default';
@@ -1362,18 +1374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
-const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
-    providedIn: 'root',
-    factory: () => ({
-        getDateFormat: () => 'YYYY-MM-DD',
-        getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
-        getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
-    })
-});
-const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
-const LOCALE_FN = new InjectionToken('LOCALE_FN');
-const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
-
 class CustomDatePipe {
     constructor(getDateFnLocale) {
         this.getDateFnLocale = getDateFnLocale;
@@ -6962,6 +6962,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Output
             }] } });
 
+// /**
+// * Converts HTML to text, preserving semantic newlines for block-level
+// * elements. (Taken from https://stackoverflow.com/a/20384452/6813271)
+// *
+// * @param node - The HTML node to perform text extraction.
+// */
+// export function getNodeTextWithNewlines(node: Element, _inner = false): string {
+//   let result = '';
+//   if (node.nodeType === document.TEXT_NODE) {
+//     // Replace repeated spaces, newlines, and tabs with a single space.
+//     result = node.nodeValue.replace( /\s+/g, ' ' );
+//   } else {
+//     for (let i = 0, j = node.childNodes.length; i < j; i++ ) {
+//       result += this.getNodeTextWithNewlines(node.childNodes[i] as Element, true);
+//     }
+//     const d = node['currentStyle'] ?
+//               node['currentStyle']['display'] :
+//               document.defaultView.getComputedStyle(node, null).getPropertyValue('display');
+//     if (d.match(/^block/)) {
+//       result = '\n' + result + '\n';
+//     } else if (d.match(/list/) || d.match(/row/) || node.tagName === 'BR' || node.tagName === 'HR' ) {
+//       result += '\n';
+//     }
+//   }
+//   return _inner ? result : _.trim(result, '\n');
+// }
+/** Trim whitespaces from html */
+function trimHtml(str) {
+    return str
+        .replace(/(<\/?(br *\/?|p)>|&nbsp;|\s)*$/i, '')
+        .replace(/^(<\/?(br *\/?|p)>|&nbsp;|\s)*/i, '')
+        .replace(/^<(div|p)>(<\/?(br *\/?|p)>|&nbsp;|\s)*<\/ *(div|p)>$/i, '');
+}
+
+// First version based on https://stackoverflow.com/a/41253897/6813271
+class ContenteditableDirective {
+    constructor(elRef, sanitizer) {
+        this.elRef = elRef;
+        this.sanitizer = sanitizer;
+        this.lxContenteditableModelChange = new EventEmitter();
+        /** Allow (sanitized) html */
+        this.lxContenteditableHtml = false;
+        this.lxContenteditableHtmlPaste = true;
+        this.emittedValue = null;
+    }
+    ngOnChanges(changes) {
+        if (changes['lxContenteditableModel']) {
+            // On init: if lxContenteditableModel is empty, read from DOM in case the element has content
+            if (changes['lxContenteditableModel'].isFirstChange() && !this.lxContenteditableModel) {
+                // Prevent Exp.HasChanged: Don't read and emit value from DOM during change detection
+                setTimeout(() => {
+                    this.onInput(true);
+                });
+            }
+            this.refreshView();
+        }
+    }
+    onInput(initialInlineData = false) {
+        let value = this.elRef.nativeElement[this.getProperty()];
+        value = this.cleanContent(value, initialInlineData);
+        this.emittedValue = value;
+        this.lxContenteditableModelChange.emit(value);
+    }
+    /**
+     * @param event {ClipboardEvent}
+     */
+    onPaste(event) {
+        const clipboardEvent = event;
+        this.onInput();
+        // For text-only contenteditable, remove pasted HTML.
+        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
+            let isHtml = true;
+            // TODO: Use beforepaste event. See https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/.
+            if (clipboardEvent.clipboardData && clipboardEvent.clipboardData.types) {
+                const types = [].slice.apply(clipboardEvent.clipboardData.types);
+                isHtml = intersection(types, ['text/html', 'com.apple.webarchive']).length > 0;
+            }
+            if (isHtml) {
+                // 1 tick wait is required for DOM update
+                setTimeout(() => {
+                    // Cursor will be lost
+                    // The lint disabling here should be clearified. See if and how this directive is needed.
+                    this.elRef.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.elRef.nativeElement.innerText.replace(/\n/g, '<br />'));
+                });
+            }
+        }
+    }
+    onDrop(event) {
+        this.onInput();
+        // For text-only contenteditable, don't allow drop content.
+        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        return;
+    }
+    cleanContent(value, initialInlineData = false) {
+        if (this.lxContenteditableHtml === 'trim' || (this.lxContenteditableHtml && initialInlineData)) {
+            value = trimHtml(value);
+        }
+        else if (initialInlineData && !this.lxContenteditableHtml && value) {
+            value = value.replace(/^[\n\s]+/, '');
+            value = value.replace(/[\n\s]+$/, '');
+        }
+        // Some browsers like Chrome insert nbsp; when using contentEditable attribute
+        return new NbspPipe().transform(value);
+    }
+    refreshView() {
+        if (!isNil(this.lxContenteditableModel)) {
+            const newContent = this.cleanContent(this.lxContenteditableModel);
+            // Only refresh if content changed to avoid cursor loss
+            // (as ngOnChanges can be triggered an additional time by onInput())
+            if (this.emittedValue === null || this.emittedValue !== newContent) {
+                this.elRef.nativeElement[this.getProperty()] = this.sanitize(newContent);
+            }
+        }
+    }
+    getProperty() {
+        return this.lxContenteditableHtml ? 'innerHTML' : 'innerText';
+    }
+    sanitize(content) {
+        return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
+    }
+}
+ContenteditableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
+ContenteditableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ContenteditableDirective, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ContenteditableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxContenteditableModel]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }]; }, propDecorators: { lxContenteditableModel: [{
+                type: Input
+            }], lxContenteditableModelChange: [{
+                type: Output
+            }], lxContenteditableHtml: [{
+                type: Input
+            }], lxContenteditableHtmlPaste: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }, {
+                type: HostListener,
+                args: ['keyup']
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
 class FormSubmitDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -7240,7 +7397,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         FormatNumberPipe,
         FormErrorDirective,
         ErrorMessageComponent,
-        FormSubmitDirective], imports: [CommonModule,
+        FormSubmitDirective,
+        ContenteditableDirective], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule, i1$2.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
         ClipboardModule,
@@ -7286,7 +7444,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         FormErrorDirective,
         FormSubmitDirective,
         ErrorMessageComponent,
-        LxDragAndDropListModule] });
+        LxDragAndDropListModule,
+        ContenteditableDirective] });
 LxFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -7341,7 +7500,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         FormatNumberPipe,
                         FormErrorDirective,
                         ErrorMessageComponent,
-                        FormSubmitDirective
+                        FormSubmitDirective,
+                        ContenteditableDirective
                     ],
                     imports: [
                         CommonModule,
@@ -7396,7 +7556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         FormErrorDirective,
                         FormSubmitDirective,
                         ErrorMessageComponent,
-                        LxDragAndDropListModule
+                        LxDragAndDropListModule,
+                        ContenteditableDirective
                     ]
                 }]
         }] });
@@ -7462,6 +7623,22 @@ function ValidateStringNotInArrayAsync(array$, valueMapFunction, validatorName =
     };
 }
 
+const MODAL_CLOSE = new InjectionToken('MODAL_CLOSE');
+/**
+ * An enum to track how the modal was closed
+ * Escape - Esc key press
+ * CloseButton - top right close button (x)
+ * OutsideClick - click outside the modal
+ * Other - modal close with the trigger through closeModal$ subject
+ */
+var ModalCloseClickLocation;
+(function (ModalCloseClickLocation) {
+    ModalCloseClickLocation["Escape"] = "escape";
+    ModalCloseClickLocation["CloseButton"] = "closeButton";
+    ModalCloseClickLocation["OutsideClick"] = "outsideClick";
+    ModalCloseClickLocation["Other"] = "other";
+})(ModalCloseClickLocation || (ModalCloseClickLocation = {}));
+
 class ModalFooterComponent {
     constructor() {
         this.border = false;
@@ -7504,22 +7681,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
-const MODAL_CLOSE = new InjectionToken('MODAL_CLOSE');
-/**
- * An enum to track how the modal was closed
- * Escape - Esc key press
- * CloseButton - top right close button (x)
- * OutsideClick - click outside the modal
- * Other - modal close with the trigger through closeModal$ subject
- */
-var ModalCloseClickLocation;
-(function (ModalCloseClickLocation) {
-    ModalCloseClickLocation["Escape"] = "escape";
-    ModalCloseClickLocation["CloseButton"] = "closeButton";
-    ModalCloseClickLocation["OutsideClick"] = "outsideClick";
-    ModalCloseClickLocation["Other"] = "other";
-})(ModalCloseClickLocation || (ModalCloseClickLocation = {}));
-
 /**
  *
  * ATTENTION - SCROLLABLE DIALOG:
@@ -8225,5 +8386,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.mjs.map