@leanix/components 0.2.239 → 0.2.242

package/fesm2020/leanix-components.mjs

@@ -8,7 +8,7 @@ import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { __decorate } from 'tslib';
 import * as i6 from 'rxjs';
-import { BehaviorSubject, Subject, combineLatest, merge, concat, fromEvent, Observable, ReplaySubject, of, timer } from 'rxjs';
+import { BehaviorSubject, timer, Subject, combineLatest, merge, concat, fromEvent, Observable, ReplaySubject, of } from 'rxjs';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, first, delay, mapTo, tap } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
@@ -513,7 +513,16 @@ function isResizeableElement(element) {
 class ResizeObserverService {
     observe(element, callback, options) {
         if (!this.resizeObserver) {
-            this.resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
+            try {
+                this.resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
+            }
+            catch {
+                // All the browsers we support implement the ResizeObserver API.
+                // For unsupported browsers, there's this "one time artifical resize event".
+                // They will not get the functionality tied to later resize events.
+                timer(500).subscribe(() => callback(this.getMockOneTimeResizeEventForUnsupportedBrowsers(element)));
+                return;
+            }
         }
         element.handleResize = callback;
         this.resizeObserver.observe(element, options);
@@ -531,6 +540,45 @@ class ResizeObserverService {
             }
         });
     }
+    /**
+     * All browsers we officially support implement the ResizeObserver API.
+     * Still as a curtesy do customers who for some reason have older browsers
+     * we call the callback once with the initial dimensions of the element
+     * and then do not react on resize events afterwards.
+     * This should still make them happier than a "browser not supported" warning.
+     */
+    getMockOneTimeResizeEventForUnsupportedBrowsers(element) {
+        const contentRect = {
+            bottom: element.clientHeight,
+            height: element.clientHeight,
+            left: 0,
+            right: element.clientWidth,
+            top: 0,
+            width: element.clientWidth,
+            x: 0,
+            y: 0
+        };
+        return {
+            borderBoxSize: [{ blockSize: element.clientHeight, inlineSize: element.clientWidth }],
+            contentBoxSize: [
+                {
+                    blockSize: element.clientHeight,
+                    inlineSize: element.clientWidth
+                }
+            ],
+            contentRect: {
+                ...contentRect,
+                toJSON: () => JSON.stringify(contentRect)
+            },
+            devicePixelContentBoxSize: [
+                {
+                    blockSize: element.clientWidth,
+                    inlineSize: element.clientWidth
+                }
+            ],
+            target: element
+        };
+    }
 }
 ResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ResizeObserverService, providedIn: 'root' });
@@ -1142,6 +1190,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
             args: [{ name: 'lxHighlightTerm' }]
         }] });
 
+/**
+ * This pipe transforms...
+ * - "raw" http(s) links
+ * - markdown link syntax
+ * ... into clickable anchor elements.
+ *
+ * You have an user interface where you don't want clickable links but also
+ * don't want users to see the "ugly" markdown link syntax?
+ * -> Use the 'lxUnlikify' pipe to replace markdown link syntax with just the link name
+ */
+class LxLinkifyPipe {
+    transform(text) {
+        if (text && typeof text === 'string') {
+            const textWithRawLinks = this.wrapRawHttpLinksWithAnchorTags(text);
+            const textWithRawAndNamedLinks = this.turnMarkdownStyleLinksIntoAnchorTags(textWithRawLinks);
+            return textWithRawAndNamedLinks;
+        }
+        else {
+            return text;
+        }
+    }
+    turnMarkdownStyleLinksIntoAnchorTags(text) {
+        let textWithRawAndNamedLinks = text;
+        const namedLinkMatches = this.getAllRegexMatches(LxLinkifyPipe.NAMED_LINK_REGEX, text);
+        namedLinkMatches.forEach((namedLinkMatch) => {
+            const [source, name, url] = namedLinkMatch;
+            const urlIsValid = url && !/javascript\:/i.test(url);
+            if (source && name && urlIsValid) {
+                textWithRawAndNamedLinks = textWithRawAndNamedLinks.replace(source, `<a href="${url}" target="_blank" rel="noopener noreferrer">${name}</a>`);
+            }
+        });
+        return textWithRawAndNamedLinks;
+    }
+    wrapRawHttpLinksWithAnchorTags(text) {
+        let textWithRawLinks = text;
+        /**
+         * Keeping track of this index prevents infinite loops
+         * where a previously processed link starts with the same characters
+         * as a second link.
+         * e.g. https://angular.io/docs followed by https://angular.io
+         */
+        let nextIndexToStartReplacingFrom = 0;
+        const rawLinkMatches = this.getAllRegexMatches(LxLinkifyPipe.HTTP_LINK_REGEX, text);
+        rawLinkMatches.forEach((rawLinkMatch) => {
+            const [url] = rawLinkMatch;
+            const wrapUrlInAnchor = (sanitizedUrlMatch) => {
+                const firstPart = textWithRawLinks.substring(0, nextIndexToStartReplacingFrom);
+                const anchorTagHtml = `<a href="${sanitizedUrlMatch}" target="_blank" rel="noopener noreferrer">${sanitizedUrlMatch}</a>`;
+                const secondPart = textWithRawLinks.substring(nextIndexToStartReplacingFrom).replace(sanitizedUrlMatch, anchorTagHtml);
+                textWithRawLinks = firstPart + secondPart;
+                nextIndexToStartReplacingFrom = rawLinkMatch.index + anchorTagHtml.length;
+            };
+            if (url) {
+                /*
+                 * TODO: get rid of all this code once Safari supports negative lookbehinds in regular expressions
+                 * The following is RegExp that handles the same stuff as the JS code below:
+                 *
+                 * /(?:(?:(?<!\]\())(?:https|http):\/\/)(?:[^\s/$.?#][^\s]*(?<![\.)]))/gi;
+                 *
+                 * Demo on regex101: https://regex101.com/r/7Vl9bg/1
+                 *
+                 * Check lookbehind support here: https://caniuse.com/?search=lookbehind
+                 */
+                const lastUrlCharacterIndex = rawLinkMatch.index + url.length - 1;
+                const textUsedToPerformMatching = rawLinkMatch.input;
+                const lastCharacterInUrl = textUsedToPerformMatching[lastUrlCharacterIndex];
+                const twoCharactersInFrontOfTheLink = rawLinkMatch.index > 3
+                    ? `${textUsedToPerformMatching[rawLinkMatch.index - 2]}${textUsedToPerformMatching[rawLinkMatch.index - 1]}`
+                    : '';
+                const isMarkdownSyntaxLink = twoCharactersInFrontOfTheLink === '](';
+                if (!isMarkdownSyntaxLink && lastCharacterInUrl === '.') {
+                    const characterAfterUrl = textUsedToPerformMatching[lastUrlCharacterIndex + 1];
+                    if (!characterAfterUrl || characterAfterUrl === ' ' || characterAfterUrl === '\n') {
+                        const urlWithoutDotAtTheEnd = url.slice(0, -1);
+                        wrapUrlInAnchor(urlWithoutDotAtTheEnd);
+                    }
+                }
+                else if (!isMarkdownSyntaxLink) {
+                    wrapUrlInAnchor(url);
+                }
+            }
+        });
+        return textWithRawLinks;
+    }
+    getAllRegexMatches(regex, input) {
+        let match;
+        const matches = [];
+        while ((match = regex.exec(input)) !== null) {
+            matches.push(match);
+        }
+        return matches;
+    }
+}
+/**
+ * This is not the "one URL regex to rule them all", but a more realistic one which should work
+ * for any URLs that our customers include in text fields on a Fact Sheet.
+ *
+ * Regex rules explained in plain text:
+ *
+ * (?:(?:https?):\/\/)       ->    Links must start with "https://" or "http://"
+ *
+ * (?:[^\s/$.?#][^\s]*(?<![\.)])) LET'S SPLIT THIS ONE UP
+ *
+ * [^\s/$.?#][^\s]*   ->    Match any legal URL character until the next whitespace
+ * (?<![\.)]          ->    A negative lookahead to prevent matching a dot or parenthesis following a URL
+ *
+ * Link to regex101: https://regex101.com/r/d3KtfH/1 (NOTE: please update this link when changing the regex)
+ */
+LxLinkifyPipe.HTTP_LINK_REGEX = /(?:(?:https?):\/\/)(?:[^\s/$.?#][^\s]*)/gi;
+/**
+ * This will match the markdown link syntax: [link name](url)
+ * Regex rules explained in plain text:
+ *
+ * (?:\[([^\]]*)\])            ->     Match any characters inside square brackets
+ * \(([^\s\/$.?#][^\s]*)\)     ->     Notice that this is the same regex as the HTTP_LINK_REGEX above,
+ *                                    but without the requirement for the http protocol.
+ *                                    This allows for links without including the protocol or also "mailto:hello@world.de" links
+ *
+ * Link to regex101: https://regex101.com/r/5UMUH8/1
+ */
+LxLinkifyPipe.NAMED_LINK_REGEX = /(?:\[([^\]]*)\])\(([^\s\/$.?#][^\s]*)\)/gi;
+LxLinkifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxLinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LxLinkifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxLinkifyPipe, name: "lxLinkify" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxLinkifyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lxLinkify' }]
+        }] });
+
+/**
+ * This pipe replaces markdown link syntax with just the link name (omits the link altogether).
+ * Example: [Angular documentation](http://angular.io/docs) -> Angular documentation
+ *
+ * It can also be used for "bridging the gap" until your view is ready to use "lxLinkify"
+ * and you just want to get rid of the "useless" markdown syntax fast.
+ *
+ * While there are views where we want markdown style links to be clickable anchor tags,
+ * there are other views where this can degrade the UX.
+ * Example: in the Fact Sheet list on the inventory list view, having an arbitrary number
+ * of links on the page can slow down the keyboard navigation while navigating through the list.
+ */
+class LxUnlinkifyPipe {
+    transform(text) {
+        if (text && typeof text === 'string') {
+            let textWhereMarkdownLinkSyntaxIsReplacedWithJustTheLinkName = text;
+            const markdownLinkSyntaxMatches = this.getAllRegexMatches(LxLinkifyPipe.NAMED_LINK_REGEX, text);
+            markdownLinkSyntaxMatches.forEach((markdownLinkSyntaxMatch) => {
+                const [source, name] = markdownLinkSyntaxMatch;
+                if (source && name) {
+                    textWhereMarkdownLinkSyntaxIsReplacedWithJustTheLinkName = textWhereMarkdownLinkSyntaxIsReplacedWithJustTheLinkName.replace(source, name);
+                }
+            });
+            return textWhereMarkdownLinkSyntaxIsReplacedWithJustTheLinkName;
+        }
+        else {
+            return text;
+        }
+    }
+    getAllRegexMatches(regex, input) {
+        let match;
+        const matches = [];
+        while ((match = regex.exec(input)) !== null) {
+            matches.push(match);
+        }
+        return matches;
+    }
+}
+LxUnlinkifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxUnlinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LxUnlinkifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxUnlinkifyPipe, name: "lxUnlinkify" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: LxUnlinkifyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lxUnlinkify' }]
+        }] });
+
 function isUuid(s) {
     const uuidRegEx = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
     return uuidRegEx.test(s);
@@ -1491,6 +1712,8 @@ LxCoreUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HighlightTermPipe,
         HtmlDirective,
         IconScaleComponent,
+        LxLinkifyPipe,
+        LxUnlinkifyPipe,
         LxTimeAgo,
         LxTranslatePipe,
         MarkdownPipe,
@@ -1521,6 +1744,8 @@ LxCoreUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HighlightTermPipe,
         HtmlDirective,
         IconScaleComponent,
+        LxLinkifyPipe,
+        LxUnlinkifyPipe,
         LxTimeAgo,
         LxTranslatePipe,
         MarkdownPipe,
@@ -1558,6 +1783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         HighlightTermPipe,
                         HtmlDirective,
                         IconScaleComponent,
+                        LxLinkifyPipe,
+                        LxUnlinkifyPipe,
                         LxTimeAgo,
                         LxTranslatePipe,
                         MarkdownPipe,
@@ -1592,6 +1819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         HighlightTermPipe,
                         HtmlDirective,
                         IconScaleComponent,
+                        LxLinkifyPipe,
+                        LxUnlinkifyPipe,
                         LxTimeAgo,
                         LxTranslatePipe,
                         MarkdownPipe,
@@ -6301,5 +6530,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", 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, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, 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, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, 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, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, 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, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.mjs.map