@leanix/components 0.2.239 → 0.2.240

package/fesm2020/leanix-components.mjs

@@ -1142,6 +1142,174 @@ 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') {
+            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];
+                    if (lastCharacterInUrl === '.') {
+                        const characterAfterUrl = textUsedToPerformMatching[lastUrlCharacterIndex + 1];
+                        if (!characterAfterUrl || characterAfterUrl === ' ' || characterAfterUrl === '\n') {
+                            const urlWithoutDotAtTheEnd = url.slice(0, -1);
+                            wrapUrlInAnchor(urlWithoutDotAtTheEnd);
+                        }
+                    }
+                    else if (rawLinkMatch.index > 3) {
+                        const twoCharactersInFrontOfTheLink = `${textUsedToPerformMatching[rawLinkMatch.index - 2]}${textUsedToPerformMatching[rawLinkMatch.index - 1]}`;
+                        if (twoCharactersInFrontOfTheLink && twoCharactersInFrontOfTheLink !== '](') {
+                            // only wrap url in anchor when it is not a named markdown link
+                            wrapUrlInAnchor(url);
+                        }
+                    }
+                    else {
+                        wrapUrlInAnchor(url);
+                    }
+                }
+            });
+            let textWithRawAndNamedLinks = textWithRawLinks;
+            const namedLinkMatches = this.getAllRegexMatches(LxLinkifyPipe.NAMED_LINK_REGEX, textWithRawLinks);
+            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;
+        }
+        else {
+            return text;
+        }
+    }
+    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 +1659,8 @@ LxCoreUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HighlightTermPipe,
         HtmlDirective,
         IconScaleComponent,
+        LxLinkifyPipe,
+        LxUnlinkifyPipe,
         LxTimeAgo,
         LxTranslatePipe,
         MarkdownPipe,
@@ -1521,6 +1691,8 @@ LxCoreUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         HighlightTermPipe,
         HtmlDirective,
         IconScaleComponent,
+        LxLinkifyPipe,
+        LxUnlinkifyPipe,
         LxTimeAgo,
         LxTranslatePipe,
         MarkdownPipe,
@@ -1558,6 +1730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         HighlightTermPipe,
                         HtmlDirective,
                         IconScaleComponent,
+                        LxLinkifyPipe,
+                        LxUnlinkifyPipe,
                         LxTimeAgo,
                         LxTranslatePipe,
                         MarkdownPipe,
@@ -1592,6 +1766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         HighlightTermPipe,
                         HtmlDirective,
                         IconScaleComponent,
+                        LxLinkifyPipe,
+                        LxUnlinkifyPipe,
                         LxTimeAgo,
                         LxTranslatePipe,
                         MarkdownPipe,
@@ -6301,5 +6477,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