@leanix/components 0.3.101 → 0.3.103

package/fesm2020/leanix-components.mjs

@@ -2590,6 +2590,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: [TooltipDirective, { descendants: true }]
             }] } });
 
+class BreadcrumbComponent {
+    constructor() {
+        this.breadcrumbs = [];
+        this.viewBreadcrumbs = [];
+    }
+    ngOnChanges(changes) {
+        if (changes['breadcrumbs']) {
+            this.viewBreadcrumbs = this.breadcrumbs.reduce((viewBreadcrumbs, breadcrumb) => {
+                if (!breadcrumb.ellipsed) {
+                    // Append normal breadcrumbs to the end of view breadcrumb array
+                    viewBreadcrumbs.push(breadcrumb);
+                }
+                else {
+                    // Reduce consecutive ellipsed breadcrumbs into one entry and show dropdown of these
+                    const lastBreadcrumb = viewBreadcrumbs[viewBreadcrumbs.length - 1];
+                    if (lastBreadcrumb && this.isEllipsedBreadcrumb(lastBreadcrumb)) {
+                        lastBreadcrumb.breadcrumbs.push(breadcrumb);
+                    }
+                    else {
+                        viewBreadcrumbs.push({
+                            breadcrumbs: [breadcrumb]
+                        });
+                    }
+                }
+                return viewBreadcrumbs;
+            }, []);
+        }
+    }
+    isEllipsedBreadcrumb(breadcrumb) {
+        return !!breadcrumb.breadcrumbs;
+    }
+}
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: BreadcrumbComponent, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); false\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\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: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-breadcrumb', template: "<div class=\"breadcrumbs\">\n  <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n    <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n      <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n        <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n        <lx-option\n          *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n          [hasSelectedState]=\"false\"\n          (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n        >\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      </lx-cdk-options-dropdown>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n    <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n      <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); false\">{{ breadcrumb.label }}</a>\n      <span class=\"arrow\">&gt;</span>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"] }]
+        }], propDecorators: { breadcrumbs: [{
+                type: Input
+            }] } });
+
 const BOTTOM_LEFT_POSITION = {
     originX: 'start',
     overlayX: 'end',
@@ -5656,6 +5697,7 @@ class LxFormsModule {
 LxFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: LxFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: LxFormsModule, declarations: [BasicDropdownComponent,
         BasicDropdownItemComponent,
+        BreadcrumbComponent,
         CurrencyInputComponent,
         CurrencySymbolComponent,
         DateInputComponent,
@@ -5698,6 +5740,7 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         LxCoreUiModule,
         LxDragAndDropListModule], exports: [BasicDropdownComponent,
         BasicDropdownItemComponent,
+        BreadcrumbComponent,
         CurrencyInputComponent,
         CurrencySymbolComponent,
         DateInputComponent,
@@ -5748,6 +5791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                     declarations: [
                         BasicDropdownComponent,
                         BasicDropdownItemComponent,
+                        BreadcrumbComponent,
                         CurrencyInputComponent,
                         CurrencySymbolComponent,
                         DateInputComponent,
@@ -5798,6 +5842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                     exports: [
                         BasicDropdownComponent,
                         BasicDropdownItemComponent,
+                        BreadcrumbComponent,
                         CurrencyInputComponent,
                         CurrencySymbolComponent,
                         DateInputComponent,
@@ -6642,5 +6687,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, 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, RELEVANCE_SORTING_KEY, 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, 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, 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, RELEVANCE_SORTING_KEY, 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, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
 //# sourceMappingURL=leanix-components.mjs.map