@fundamental-ngx/core 0.35.2-rc.28 → 0.35.2-rc.30

package/fesm2015/fundamental-ngx-core-breadcrumb.mjs

@@ -6,7 +6,7 @@ import * as i3 from '@fundamental-ngx/core/link';
 import { LinkComponent, LinkModule } from '@fundamental-ngx/core/link';
 import * as i6 from '@angular/cdk/portal';
 import { DomPortal, PortalModule } from '@angular/cdk/portal';
-import { BehaviorSubject, Subscription, startWith, map, tap, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, Subscription, startWith, map, tap, firstValueFrom, debounceTime } from 'rxjs';
 import * as i2 from '@fundamental-ngx/core/menu';
 import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
 import * as i1 from '@fundamental-ngx/core/utils';
@@ -90,9 +90,9 @@ class BreadcrumbComponent {
         this._resizeObserver = _resizeObserver;
         this._ngZone = _ngZone;
         /** @hidden */
-        this.collapsedBreadcrumbItems = [];
+        this._collapsedBreadcrumbItems = [];
         /** @hidden */
-        this.placement$ = new BehaviorSubject('bottom-start');
+        this._placement$ = new BehaviorSubject('bottom-start');
         /** Whether to append items to the overflow dropdown in reverse order. Default is true. */
         this.reverse = false;
         /** @hidden */
@@ -103,16 +103,19 @@ class BreadcrumbComponent {
     /** @hidden */
     ngOnInit() {
         if (this._rtlService) {
-            this._subscriptions.add(this._rtlService.rtl.subscribe((value) => this.placement$.next(value ? 'bottom-end' : 'bottom-start')));
+            this._subscriptions.add(this._rtlService.rtl.subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start')));
         }
     }
+    /** @hidden */
     ngAfterViewInit() {
-        this._subscriptions.add(this.breadcrumbItems.changes
-            .pipe(startWith(this.breadcrumbItems), map((items) => items.toArray()), map((items) => items.map((item) => [item, item.width])), tap((itemToSize) => (this._itemToSize = new Map(itemToSize))))
+        this._subscriptions.add(this._breadcrumbItems.changes
+            .pipe(startWith(this._breadcrumbItems), map((items) => items.toArray()), map((items) => items.map((item) => [item, item.width])), tap((itemToSize) => (this._itemToSize = new Map(itemToSize))))
             .subscribe());
         firstValueFrom(this._ngZone.onStable).then(() => {
             this._subscriptions.add(this._resizeObserver
                 .observe(this.containerElement || this.elementRef.nativeElement.parentElement)
+                // Add small delay for performance reasons.
+                .pipe(debounceTime(30))
                 .subscribe(() => this.onResize()));
         });
     }
@@ -120,24 +123,29 @@ class BreadcrumbComponent {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
-    /** @hidden */
+    /**
+     * Callback function when breadcrumbs container has been resized.
+     */
     onResize() {
         if (!this.elementRef.nativeElement.parentElement) {
             return;
         }
-        this.containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;
+        this._containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;
         if (this.containerElement) {
-            this.containerBoundary = this.containerElement.getBoundingClientRect().width;
+            this._containerBoundary = this.containerElement.getBoundingClientRect().width;
+        }
+        if (this._overflowContainer) {
+            this._containerBoundary -= this._overflowContainer.nativeElement.getBoundingClientRect().width;
         }
         let visibleSum = 0;
-        const breadcrumbItemComponents = this.breadcrumbItems.toArray();
+        const breadcrumbItemComponents = this._breadcrumbItems.toArray();
         let i;
         for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {
             const breadcrumbItem = breadcrumbItemComponents[i];
             const itemSize = this._itemToSize.has(breadcrumbItem)
                 ? this._itemToSize.get(breadcrumbItem)
                 : breadcrumbItem.width;
-            if (visibleSum + itemSize <= this.containerBoundary) {
+            if (visibleSum + itemSize <= this._containerBoundary) {
                 visibleSum += itemSize;
                 breadcrumbItem.show();
             }
@@ -146,13 +154,13 @@ class BreadcrumbComponent {
             }
         }
         const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);
-        this.collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();
-        this.collapsedBreadcrumbItems.forEach((item) => item.hide());
+        this._collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();
+        this._collapsedBreadcrumbItems.forEach((item) => item.hide());
         this._cdRef.detectChanges();
     }
     /** @hidden */
-    keyDownHandle(event) {
-        this.menuComponent.toggle();
+    _keyDownHandle(event) {
+        this._menuComponent.toggle();
         event.preventDefault();
     }
     /**
@@ -167,22 +175,25 @@ class BreadcrumbComponent {
     }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1.RtlService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { containerElement: "containerElement", reverse: "reverse" }, host: { classAttribute: "fd-breadcrumb" }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(function () { return BreadcrumbItemComponent; }) }], viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"keyDownHandle($event)\"\n        (keydown.space)=\"keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"], components: [{ type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { type: i2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { type: i3.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { containerElement: "containerElement", reverse: "reverse" }, host: { classAttribute: "fd-breadcrumb" }, queries: [{ propertyName: "_breadcrumbItems", predicate: i0.forwardRef(function () { return BreadcrumbItemComponent; }) }], viewQueries: [{ propertyName: "_menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowContainer", first: true, predicate: ["overflowBreadcrumbsContainer"], descendants: true }], ngImport: i0, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"], components: [{ type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { type: i2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { type: i3.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-breadcrumb', host: {
                         class: 'fd-breadcrumb'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"keyDownHandle($event)\"\n        (keydown.space)=\"keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
                         type: Optional
                     }] }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeObserverService }, { type: i0.NgZone }];
-    }, propDecorators: { breadcrumbItems: [{
+    }, propDecorators: { _breadcrumbItems: [{
                 type: ContentChildren,
                 args: [forwardRef(() => BreadcrumbItemComponent)]
-            }], menuComponent: [{
+            }], _menuComponent: [{
                 type: ViewChild,
                 args: [MenuComponent]
+            }], _overflowContainer: [{
+                type: ViewChild,
+                args: ['overflowBreadcrumbsContainer']
             }], containerElement: [{
                 type: Input
             }], reverse: [{

package/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.component.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../libs/core/src/lib/breadcrumb/deprecated-breadcrumbs-compact.directive.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    forwardRef,\n    Renderer2\n} from '@angular/core';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { DomPortal } from '@angular/cdk/portal';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n *     <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'fd-breadcrumb-item',\n    template: '<div style=\"display: inline\"><ng-content></ng-content></div>',\n    host: {\n        class: 'fd-breadcrumb__item'\n    }\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n    /** @hidden */\n    get elementRef(): ElementRef<HTMLElement> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    @ContentChild(forwardRef(() => LinkComponent))\n    breadcrumbLink: LinkComponent;\n\n    /** @hidden */\n    get width(): number {\n        return this._elementRef.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** In case there is no link in Item and breadcrumb item is non-interactive, we move whole item content to menu item title */\n    breadcrumbItemPortal: DomPortal<Element>;\n\n    /** When breadcrumb item has link in it, we are moving link content to menu item title */\n    linkContentPortal: DomPortal;\n\n    constructor(\n        private _elementRef: ElementRef<HTMLElement>,\n        private renderer2: Renderer2,\n        private _cdR: ChangeDetectorRef\n    ) {}\n\n    /** @hidden */\n    get needsClickProxy(): boolean {\n        return (\n            !!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink\n        );\n    }\n\n    show = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');\n    hide = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.breadcrumbLink) {\n            this.linkContentPortal = new DomPortal<HTMLElement>(this.breadcrumbLink.contentSpan.nativeElement);\n        }\n        this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n        this._cdR.detectChanges();\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    Input,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Optional,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { ResizeObserverService, RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, firstValueFrom, map, startWith, Subscription, tap } from 'rxjs';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { Placement } from '@fundamental-ngx/core/shared';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n *     <fd-breadcrumb-item>\n *         <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n *     </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n    // TODO to be discussed\n    // eslint-disable-next-line\n    selector: 'fd-breadcrumb',\n    host: {\n        class: 'fd-breadcrumb'\n    },\n    templateUrl: './breadcrumb.component.html',\n    styleUrls: ['./breadcrumb.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnInit, OnDestroy {\n    /** @hidden */\n    @ContentChildren(forwardRef(() => BreadcrumbItemComponent))\n    breadcrumbItems: QueryList<BreadcrumbItemComponent>;\n\n    /** @hidden */\n    @ViewChild(MenuComponent)\n    menuComponent: MenuComponent;\n\n    /** @hidden */\n    collapsedBreadcrumbItems: Array<BreadcrumbItemComponent> = [];\n\n    /** @hidden */\n    placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n    /**\n     * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n     * performs better. When not provided, the immediate parent element's width will be used.\n     */\n    @Input()\n    containerElement: HTMLElement;\n\n    /** Whether to append items to the overflow dropdown in reverse order. Default is true. */\n    @Input()\n    reverse = false;\n\n    /** @hidden */\n    containerBoundary: number;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private _itemToSize = new Map<BreadcrumbItemComponent, number>();\n\n    constructor(\n        public elementRef: ElementRef<Element>,\n        @Optional() private _rtlService: RtlService,\n        private _cdRef: ChangeDetectorRef,\n        private _resizeObserver: ResizeObserverService,\n        private _ngZone: NgZone\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        if (this._rtlService) {\n            this._subscriptions.add(\n                this._rtlService.rtl.subscribe((value) => this.placement$.next(value ? 'bottom-end' : 'bottom-start'))\n            );\n        }\n    }\n\n    ngAfterViewInit(): void {\n        this._subscriptions.add(\n            this.breadcrumbItems.changes\n                .pipe(\n                    startWith(this.breadcrumbItems),\n                    map((items) => items.toArray() as BreadcrumbItemComponent[]),\n                    map((items) => items.map((item) => [item, item.width]) as [BreadcrumbItemComponent, number][]),\n                    tap((itemToSize: [BreadcrumbItemComponent, number][]) => (this._itemToSize = new Map(itemToSize)))\n                )\n                .subscribe()\n        );\n        firstValueFrom(this._ngZone.onStable).then(() => {\n            this._subscriptions.add(\n                this._resizeObserver\n                    .observe(this.containerElement || (this.elementRef.nativeElement.parentElement as Element))\n                    .subscribe(() => this.onResize())\n            );\n        });\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /** @hidden */\n    onResize(): void {\n        if (!this.elementRef.nativeElement.parentElement) {\n            return;\n        }\n        this.containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n\n        if (this.containerElement) {\n            this.containerBoundary = this.containerElement.getBoundingClientRect().width;\n        }\n\n        let visibleSum = 0;\n        const breadcrumbItemComponents = this.breadcrumbItems.toArray();\n        let i;\n        for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {\n            const breadcrumbItem = breadcrumbItemComponents[i];\n            const itemSize = this._itemToSize.has(breadcrumbItem)\n                ? (this._itemToSize.get(breadcrumbItem) as number)\n                : breadcrumbItem.width;\n            if (visibleSum + itemSize <= this.containerBoundary) {\n                visibleSum += itemSize;\n                breadcrumbItem.show();\n            } else {\n                break;\n            }\n        }\n        const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);\n        this.collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();\n        this.collapsedBreadcrumbItems.forEach((item) => item.hide());\n        this._cdRef.detectChanges();\n    }\n\n    /** @hidden */\n    keyDownHandle(event: Event): void {\n        this.menuComponent.toggle();\n        event.preventDefault();\n    }\n\n    /**\n     * We catch interactions with item, Enter, Space, Mouse click and Touch click,\n     * if original element had router link we are proxying click to that element\n     * */\n    itemClicked(breadcrumbItem: BreadcrumbItemComponent, $event: any): void {\n        if (breadcrumbItem.needsClickProxy) {\n            $event.preventDefault();\n            breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();\n        }\n    }\n}\n","<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span class=\"fd-breadcrumb__item\" *ngIf=\"collapsedBreadcrumbItems.length\" [fdMenuTrigger]=\"menu\">\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"keyDownHandle($event)\"\n        (keydown.space)=\"keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-breadcrumb[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedBreadcrumbsCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedBreadcrumbsCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-breadcrumb');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedBreadcrumbsCompactDirective } from './deprecated-breadcrumbs-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        MenuModule,\n        LinkModule,\n        PortalModule,\n        PipeModule,\n        ContentDensityModule\n    ],\n    exports: [\n        BreadcrumbComponent,\n        BreadcrumbItemComponent,\n        LinkModule,\n        DeprecatedBreadcrumbsCompactDirective,\n        ContentDensityModule\n    ],\n    declarations: [BreadcrumbComponent, BreadcrumbItemComponent, DeprecatedBreadcrumbsCompactDirective]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.component.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../libs/core/src/lib/breadcrumb/deprecated-breadcrumbs-compact.directive.ts","../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    forwardRef,\n    Renderer2\n} from '@angular/core';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { DomPortal } from '@angular/cdk/portal';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n *     <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'fd-breadcrumb-item',\n    template: '<div style=\"display: inline\"><ng-content></ng-content></div>',\n    host: {\n        class: 'fd-breadcrumb__item'\n    }\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n    /** @hidden */\n    get elementRef(): ElementRef<HTMLElement> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    @ContentChild(forwardRef(() => LinkComponent))\n    breadcrumbLink: LinkComponent;\n\n    /** @hidden */\n    get width(): number {\n        return this._elementRef.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** In case there is no link in Item and breadcrumb item is non-interactive, we move whole item content to menu item title */\n    breadcrumbItemPortal: DomPortal<Element>;\n\n    /** When breadcrumb item has link in it, we are moving link content to menu item title */\n    linkContentPortal: DomPortal;\n\n    constructor(\n        private _elementRef: ElementRef<HTMLElement>,\n        private renderer2: Renderer2,\n        private _cdR: ChangeDetectorRef\n    ) {}\n\n    /** @hidden */\n    get needsClickProxy(): boolean {\n        return (\n            !!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink\n        );\n    }\n\n    show = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');\n    hide = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.breadcrumbLink) {\n            this.linkContentPortal = new DomPortal<HTMLElement>(this.breadcrumbLink.contentSpan.nativeElement);\n        }\n        this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n        this._cdR.detectChanges();\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    Input,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Optional,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { ResizeObserverService, RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, debounceTime, firstValueFrom, map, startWith, Subscription, tap } from 'rxjs';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { Placement } from '@fundamental-ngx/core/shared';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n *     <fd-breadcrumb-item>\n *         <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n *     </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n    // TODO to be discussed\n    // eslint-disable-next-line\n    selector: 'fd-breadcrumb',\n    host: {\n        class: 'fd-breadcrumb'\n    },\n    templateUrl: './breadcrumb.component.html',\n    styleUrls: ['./breadcrumb.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnInit, OnDestroy {\n    /** @hidden */\n    @ContentChildren(forwardRef(() => BreadcrumbItemComponent))\n    _breadcrumbItems: QueryList<BreadcrumbItemComponent>;\n\n    /** @hidden */\n    @ViewChild(MenuComponent)\n    _menuComponent: MenuComponent;\n\n    @ViewChild('overflowBreadcrumbsContainer')\n    private readonly _overflowContainer: ElementRef<HTMLElement>;\n\n    /** @hidden */\n    _collapsedBreadcrumbItems: Array<BreadcrumbItemComponent> = [];\n\n    /** @hidden */\n    _placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n    /**\n     * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n     * performs better. When not provided, the immediate parent element's width will be used.\n     */\n    @Input()\n    containerElement: HTMLElement;\n\n    /** Whether to append items to the overflow dropdown in reverse order. Default is true. */\n    @Input()\n    reverse = false;\n\n    /** @hidden */\n    _containerBoundary: number;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private _itemToSize = new Map<BreadcrumbItemComponent, number>();\n\n    constructor(\n        public readonly elementRef: ElementRef<Element>,\n        @Optional() private readonly _rtlService: RtlService | null,\n        private readonly _cdRef: ChangeDetectorRef,\n        private readonly _resizeObserver: ResizeObserverService,\n        private readonly _ngZone: NgZone\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        if (this._rtlService) {\n            this._subscriptions.add(\n                this._rtlService.rtl.subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start'))\n            );\n        }\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._subscriptions.add(\n            this._breadcrumbItems.changes\n                .pipe(\n                    startWith(this._breadcrumbItems),\n                    map((items) => items.toArray() as BreadcrumbItemComponent[]),\n                    map((items) => items.map((item) => [item, item.width]) as [BreadcrumbItemComponent, number][]),\n                    tap((itemToSize: [BreadcrumbItemComponent, number][]) => (this._itemToSize = new Map(itemToSize)))\n                )\n                .subscribe()\n        );\n        firstValueFrom(this._ngZone.onStable).then(() => {\n            this._subscriptions.add(\n                this._resizeObserver\n                    .observe(this.containerElement || (this.elementRef.nativeElement.parentElement as Element))\n                    // Add small delay for performance reasons.\n                    .pipe(debounceTime(30))\n                    .subscribe(() => this.onResize())\n            );\n        });\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /**\n     * Callback function when breadcrumbs container has been resized.\n     */\n    onResize(): void {\n        if (!this.elementRef.nativeElement.parentElement) {\n            return;\n        }\n        this._containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n\n        if (this.containerElement) {\n            this._containerBoundary = this.containerElement.getBoundingClientRect().width;\n        }\n\n        if (this._overflowContainer) {\n            this._containerBoundary -= this._overflowContainer.nativeElement.getBoundingClientRect().width;\n        }\n\n        let visibleSum = 0;\n        const breadcrumbItemComponents = this._breadcrumbItems.toArray();\n        let i;\n        for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {\n            const breadcrumbItem = breadcrumbItemComponents[i];\n            const itemSize = this._itemToSize.has(breadcrumbItem)\n                ? (this._itemToSize.get(breadcrumbItem) as number)\n                : breadcrumbItem.width;\n            if (visibleSum + itemSize <= this._containerBoundary) {\n                visibleSum += itemSize;\n                breadcrumbItem.show();\n            } else {\n                break;\n            }\n        }\n        const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);\n        this._collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();\n        this._collapsedBreadcrumbItems.forEach((item) => item.hide());\n        this._cdRef.detectChanges();\n    }\n\n    /** @hidden */\n    _keyDownHandle(event: Event): void {\n        this._menuComponent.toggle();\n        event.preventDefault();\n    }\n\n    /**\n     * We catch interactions with item, Enter, Space, Mouse click and Touch click,\n     * if original element had router link we are proxying click to that element\n     * */\n    itemClicked(breadcrumbItem: BreadcrumbItemComponent, $event: any): void {\n        if (breadcrumbItem.needsClickProxy) {\n            $event.preventDefault();\n            breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();\n        }\n    }\n}\n","<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-breadcrumb[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedBreadcrumbsCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedBreadcrumbsCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-breadcrumb');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedBreadcrumbsCompactDirective } from './deprecated-breadcrumbs-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        MenuModule,\n        LinkModule,\n        PortalModule,\n        PipeModule,\n        ContentDensityModule\n    ],\n    exports: [\n        BreadcrumbComponent,\n        BreadcrumbItemComponent,\n        LinkModule,\n        DeprecatedBreadcrumbsCompactDirective,\n        ContentDensityModule\n    ],\n    declarations: [BreadcrumbComponent, BreadcrumbItemComponent, DeprecatedBreadcrumbsCompactDirective]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-illustrated-message.mjs

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, Directive, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
 import { applyCssClass } from '@fundamental-ngx/core/utils';
 import { Subscription, fromEvent } from 'rxjs';
+import * as i1 from '@angular/platform-browser';
 
 let illustratedMessageUniqueId = 0;
 class IllustratedMessageComponent {
     /** @hidden */
-    constructor(_elementRef, _cdRef) {
+    constructor(_elementRef, _cdRef, _sanitizer) {
         this._elementRef = _elementRef;
         this._cdRef = _cdRef;
+        this._sanitizer = _sanitizer;
         /**
          * The type of the Illustrated Message
          * Options include: 'scene' | 'spot' | 'dialog'
@@ -63,40 +65,43 @@ class IllustratedMessageComponent {
     }
     /** @hidden */
     _constructHref() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        let inlineSvg;
+        this._inlineSvg = undefined;
         if (this.svgConfig) {
             switch (this.type) {
                 case 'scene':
-                    {
-                        this._isSmallScreen = window.innerWidth < 600;
-                        this._href = this._isSmallScreen
-                            ? `${(_a = this.svgConfig.dialog) === null || _a === void 0 ? void 0 : _a.url}#${(_b = this.svgConfig.dialog) === null || _b === void 0 ? void 0 : _b.id}`
-                            : `${(_c = this.svgConfig.scene) === null || _c === void 0 ? void 0 : _c.url}#${(_d = this.svgConfig.scene) === null || _d === void 0 ? void 0 : _d.id}`;
-                        this._cdRef.detectChanges();
-                    }
+                    this._isSmallScreen = window.innerWidth < 600;
+                    inlineSvg = this._isSmallScreen ? (_a = this.svgConfig.dialog) === null || _a === void 0 ? void 0 : _a.file : (_b = this.svgConfig.scene) === null || _b === void 0 ? void 0 : _b.file;
+                    this._href = this._isSmallScreen
+                        ? `${((_c = this.svgConfig.dialog) === null || _c === void 0 ? void 0 : _c.url) || ''}#${(_d = this.svgConfig.dialog) === null || _d === void 0 ? void 0 : _d.id}`
+                        : `${((_e = this.svgConfig.scene) === null || _e === void 0 ? void 0 : _e.url) || ''}#${(_f = this.svgConfig.scene) === null || _f === void 0 ? void 0 : _f.id}`;
                     break;
                 case 'dialog':
-                    {
-                        this._href = `${(_e = this.svgConfig.dialog) === null || _e === void 0 ? void 0 : _e.url}#${(_f = this.svgConfig.dialog) === null || _f === void 0 ? void 0 : _f.id}`;
-                    }
+                    inlineSvg = (_g = this.svgConfig.dialog) === null || _g === void 0 ? void 0 : _g.file;
+                    this._href = `${((_h = this.svgConfig.dialog) === null || _h === void 0 ? void 0 : _h.url) || ''}#${(_j = this.svgConfig.dialog) === null || _j === void 0 ? void 0 : _j.id}`;
                     break;
                 case 'spot':
-                    {
-                        this._href = `${(_g = this.svgConfig.spot) === null || _g === void 0 ? void 0 : _g.url}#${(_h = this.svgConfig.spot) === null || _h === void 0 ? void 0 : _h.id}`;
-                    }
+                    inlineSvg = (_k = this.svgConfig.spot) === null || _k === void 0 ? void 0 : _k.file;
+                    this._href = `${((_l = this.svgConfig.spot) === null || _l === void 0 ? void 0 : _l.url) || ''}#${(_m = this.svgConfig.spot) === null || _m === void 0 ? void 0 : _m.id}`;
                     break;
             }
         }
+        if (inlineSvg) {
+            this._inlineSvg = this._sanitizer.bypassSecurityTrustHtml(inlineSvg);
+        }
+        this._cdRef.detectChanges();
     }
 }
-IllustratedMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: IllustratedMessageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+IllustratedMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: IllustratedMessageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
 IllustratedMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: IllustratedMessageComponent, selector: "[fd-illustrated-message]", inputs: { type: "type", svgConfig: "svgConfig", noSvg: "noSvg", id: "id", class: "class" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: `
-        <svg class="fd-illustrated-message__illustration" *ngIf="!noSvg">
+        <svg class="fd-illustrated-message__illustration" *ngIf="!noSvg || _inlineSvg">
             <use [attr.href]="_href"></use>
         </svg>
+        <div *ngIf="_inlineSvg" style="display: none;" [innerHTML]="_inlineSvg"></div>
         <ng-content select="[fd-illustrated-message-figcaption]"></ng-content>
         <ng-content select="fd-illustrated-message-actions"></ng-content>
-    `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-illustrated-message{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:auto;line-height:var(--sapContent_LineHeight);margin:5rem 0 0;max-width:30rem;padding:1rem;text-align:center;width:100%}.fd-illustrated-message:after,.fd-illustrated-message:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__illustration{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:15rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:20rem}.fd-illustrated-message__illustration:after,.fd-illustrated-message__illustration:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__figcaption{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-illustrated-message__figcaption:after,.fd-illustrated-message__figcaption:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader2Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);line-height:var(--sapContent_LineHeight);line-height:1.3;margin:2rem 0 .5rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__title:after,.fd-illustrated-message__title:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 2rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__text:after,.fd-illustrated-message__text:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 2rem;padding:0;width:100%}.fd-illustrated-message__actions:after,.fd-illustrated-message__actions:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions *{margin:0 .25rem}@media screen and (max-width: 599px){.fd-illustrated-message{max-width:20rem}.fd-illustrated-message .fd-illustrated-message__illustration{height:10rem;width:10rem}}.fd-illustrated-message--dialog{margin-top:0;max-width:100%}.fd-illustrated-message--dialog .fd-illustrated-message__illustration{height:10rem;margin-bottom:2rem;margin-top:1rem;width:10rem}.fd-illustrated-message--dialog .fd-illustrated-message__title{font-size:var(--sapFontHeader4Size);margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--dialog .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);max-width:25rem}@media screen and (max-width: 599px){.fd-illustrated-message--dialog .fd-illustrated-message__text,.fd-illustrated-message--dialog .fd-illustrated-message__title{max-width:18rem}}.fd-illustrated-message--spot{margin-top:0;max-width:100%}.fd-illustrated-message--spot .fd-illustrated-message__illustration{height:8rem;margin:.5rem 0;padding:0;width:8rem}.fd-illustrated-message--spot .fd-illustrated-message__title{font-size:var(--sapFontHeader5Size);line-height:1.25;margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);margin:0 0 1rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__actions{margin:.5rem 0 1rem;padding:0}@media screen and (max-width: 599px){.fd-illustrated-message--spot .fd-illustrated-message__text,.fd-illustrated-message--spot .fd-illustrated-message__title{max-width:18rem}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-illustrated-message{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:auto;line-height:var(--sapContent_LineHeight);margin:5rem 0 0;max-width:30rem;padding:1rem;text-align:center;width:100%}.fd-illustrated-message:after,.fd-illustrated-message:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__illustration{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:15rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:20rem}.fd-illustrated-message__illustration:after,.fd-illustrated-message__illustration:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__figcaption{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-illustrated-message__figcaption:after,.fd-illustrated-message__figcaption:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader2Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);line-height:var(--sapContent_LineHeight);line-height:1.3;margin:2rem 0 .5rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__title:after,.fd-illustrated-message__title:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 2rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__text:after,.fd-illustrated-message__text:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 2rem;padding:0;width:100%}.fd-illustrated-message__actions:after,.fd-illustrated-message__actions:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions *{margin:0 .25rem}@media screen and (max-width: 599px){.fd-illustrated-message{max-width:20rem}.fd-illustrated-message .fd-illustrated-message__illustration{height:10rem;width:10rem}}.fd-illustrated-message--dialog{margin-top:0;max-width:100%}.fd-illustrated-message--dialog .fd-illustrated-message__illustration{height:10rem;margin-bottom:2rem;margin-top:1rem;width:10rem}.fd-illustrated-message--dialog .fd-illustrated-message__title{font-size:var(--sapFontHeader4Size);margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--dialog .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);max-width:25rem}@media screen and (max-width: 599px){.fd-illustrated-message--dialog .fd-illustrated-message__text,.fd-illustrated-message--dialog .fd-illustrated-message__title{max-width:18rem}}.fd-illustrated-message--spot{margin-top:0;max-width:100%}.fd-illustrated-message--spot .fd-illustrated-message__illustration{height:8rem;margin:.5rem 0;padding:0;width:8rem}.fd-illustrated-message--spot .fd-illustrated-message__title{font-size:var(--sapFontHeader5Size);line-height:1.25;margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);margin:0 0 1rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__actions{margin:.5rem 0 1rem;padding:0}@media screen and (max-width: 599px){.fd-illustrated-message--spot .fd-illustrated-message__text,.fd-illustrated-message--spot .fd-illustrated-message__title{max-width:18rem}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -106,13 +111,14 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: IllustratedMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fd-illustrated-message]', template: `
-        <svg class="fd-illustrated-message__illustration" *ngIf="!noSvg">
+        <svg class="fd-illustrated-message__illustration" *ngIf="!noSvg || _inlineSvg">
             <use [attr.href]="_href"></use>
         </svg>
+        <div *ngIf="_inlineSvg" style="display: none;" [innerHTML]="_inlineSvg"></div>
         <ng-content select="[fd-illustrated-message-figcaption]"></ng-content>
         <ng-content select="fd-illustrated-message-actions"></ng-content>
     `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-illustrated-message{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:auto;line-height:var(--sapContent_LineHeight);margin:5rem 0 0;max-width:30rem;padding:1rem;text-align:center;width:100%}.fd-illustrated-message:after,.fd-illustrated-message:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__illustration{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:15rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:20rem}.fd-illustrated-message__illustration:after,.fd-illustrated-message__illustration:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__figcaption{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:100%}.fd-illustrated-message__figcaption:after,.fd-illustrated-message__figcaption:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader2Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);line-height:var(--sapContent_LineHeight);line-height:1.3;margin:2rem 0 .5rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__title:after,.fd-illustrated-message__title:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 2rem;padding:0;text-align:center;width:100%}.fd-illustrated-message__text:after,.fd-illustrated-message__text:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 2rem;padding:0;width:100%}.fd-illustrated-message__actions:after,.fd-illustrated-message__actions:before{box-sizing:inherit;font-size:inherit}.fd-illustrated-message__actions *{margin:0 .25rem}@media screen and (max-width: 599px){.fd-illustrated-message{max-width:20rem}.fd-illustrated-message .fd-illustrated-message__illustration{height:10rem;width:10rem}}.fd-illustrated-message--dialog{margin-top:0;max-width:100%}.fd-illustrated-message--dialog .fd-illustrated-message__illustration{height:10rem;margin-bottom:2rem;margin-top:1rem;width:10rem}.fd-illustrated-message--dialog .fd-illustrated-message__title{font-size:var(--sapFontHeader4Size);margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--dialog .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);max-width:25rem}@media screen and (max-width: 599px){.fd-illustrated-message--dialog .fd-illustrated-message__text,.fd-illustrated-message--dialog .fd-illustrated-message__title{max-width:18rem}}.fd-illustrated-message--spot{margin-top:0;max-width:100%}.fd-illustrated-message--spot .fd-illustrated-message__illustration{height:8rem;margin:.5rem 0;padding:0;width:8rem}.fd-illustrated-message--spot .fd-illustrated-message__title{font-size:var(--sapFontHeader5Size);line-height:1.25;margin:0 0 .25rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__text{color:var(--sapTile_TextColor);font-size:var(--sapFontSize);margin:0 0 1rem;max-width:25rem;padding:0}.fd-illustrated-message--spot .fd-illustrated-message__actions{margin:.5rem 0 1rem;padding:0}@media screen and (max-width: 599px){.fd-illustrated-message--spot .fd-illustrated-message__text,.fd-illustrated-message--spot .fd-illustrated-message__title{max-width:18rem}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }]; }, propDecorators: { type: [{
                 type: Input
             }], svgConfig: [{
                 type: Input

package/fesm2015/fundamental-ngx-core-illustrated-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-illustrated-message.mjs","sources":["../../../../libs/core/src/lib/illustrated-message/illustrated-message.component.ts","../../../../libs/core/src/lib/illustrated-message/components/illustrated-message-actions/illustrated-message-actions.component.ts","../../../../libs/core/src/lib/illustrated-message/components/illustrated-message-figcaption/illustrated-message-figcaption.component.ts","../../../../libs/core/src/lib/illustrated-message/directives/illustrated-message-text/illustrated-message-text.directive.ts","../../../../libs/core/src/lib/illustrated-message/directives/illustrated-message-title/illustrated-message-title.directive.ts","../../../../libs/core/src/lib/illustrated-message/illustrated-message.module.ts","../../../../libs/core/src/lib/illustrated-message/fundamental-ngx-core-illustrated-message.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    ViewEncapsulation\n} from '@angular/core';\nimport { applyCssClass } from '@fundamental-ngx/core/utils';\nimport { CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { fromEvent, Subscription } from 'rxjs';\n\nexport interface SvgConfig {\n    scene?: { url: string; id: string };\n    dialog?: { url: string; id: string };\n    spot?: { url: string; id: string };\n}\n\nlet illustratedMessageUniqueId = 0;\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fd-illustrated-message]',\n    template: `\n        <svg class=\"fd-illustrated-message__illustration\" *ngIf=\"!noSvg\">\n            <use [attr.href]=\"_href\"></use>\n        </svg>\n        <ng-content select=\"[fd-illustrated-message-figcaption]\"></ng-content>\n        <ng-content select=\"fd-illustrated-message-actions\"></ng-content>\n    `,\n    styleUrls: ['./illustrated-message.component.scss'],\n\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class IllustratedMessageComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit, CssClassBuilder {\n    /**\n     * The type of the Illustrated Message\n     * Options include: 'scene' | 'spot' | 'dialog'\n     * The default type is set to 'scene'\n     */\n    @Input() type: 'scene' | 'dialog' | 'spot' = 'scene';\n\n    /**\n     * An object containing url and id for each type used to construct the svg href\n     * For 'scene' type 'scene' and 'dialog' values are required\n     * In small screens (less than 600px) 'dialog' svg will be applied for 'scene' type\n     */\n    @Input() svgConfig: SvgConfig;\n\n    /**\n     * When set to true will remove the illustration from the Illustrated Message\n     * The default is set to false\n     */\n    @Input() noSvg = false;\n\n    /**\n     * Id of the Illustrated Message\n     * If not provided, a default one is generated\n     */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-illustrated-message-' + illustratedMessageUniqueId++;\n\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    _href: string;\n\n    /** @hidden */\n    _isSmallScreen: boolean;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _cdRef: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n        this._constructHref();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.type === 'scene') {\n            this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return ['fd-illustrated-message', this.type ? `fd-illustrated-message--${this.type}` : '', this.class];\n    }\n\n    /** @hidden */\n    private _constructHref(): void {\n        if (this.svgConfig) {\n            switch (this.type) {\n                case 'scene':\n                    {\n                        this._isSmallScreen = window.innerWidth < 600;\n\n                        this._href = this._isSmallScreen\n                            ? `${this.svgConfig.dialog?.url}#${this.svgConfig.dialog?.id}`\n                            : `${this.svgConfig.scene?.url}#${this.svgConfig.scene?.id}`;\n                        this._cdRef.detectChanges();\n                    }\n                    break;\n\n                case 'dialog':\n                    {\n                        this._href = `${this.svgConfig.dialog?.url}#${this.svgConfig.dialog?.id}`;\n                    }\n                    break;\n\n                case 'spot':\n                    {\n                        this._href = `${this.svgConfig.spot?.url}#${this.svgConfig.spot?.id}`;\n                    }\n                    break;\n            }\n        }\n    }\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n    selector: 'fd-illustrated-message-actions',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'fd-illustrated-message__actions'\n    }\n})\nexport class IllustratedMessageActionsComponent {}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fd-illustrated-message-figcaption]',\n    template: `\n        <ng-content select=\"[fd-illustrated-message-title]\"></ng-content>\n        <ng-content select=\"[fd-illustrated-message-text]\"></ng-content>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'fd-illustrated-message__figcaption'\n    }\n})\nexport class IllustratedMessageFigcaptionComponent {}\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-illustrated-message-text]'\n})\nexport class IllustratedMessageTextDirective {\n    /** @hidden */\n    @HostBinding('class.fd-illustrated-message__text')\n    fdIllustratedMessageTextClass = true;\n}\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-illustrated-message-title]'\n})\nexport class IllustratedMessageTitleDirective {\n    /** @hidden */\n    @HostBinding('class.fd-illustrated-message__title')\n    fdIllustratedMessageTitleClass = true;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IllustratedMessageComponent } from './illustrated-message.component';\nimport { IllustratedMessageActionsComponent } from './components/illustrated-message-actions/illustrated-message-actions.component';\n// eslint-disable-next-line max-len\nimport { IllustratedMessageFigcaptionComponent } from './components/illustrated-message-figcaption/illustrated-message-figcaption.component';\nimport { IllustratedMessageTextDirective } from './directives/illustrated-message-text/illustrated-message-text.directive';\nimport { IllustratedMessageTitleDirective } from './directives/illustrated-message-title/illustrated-message-title.directive';\n\n@NgModule({\n    declarations: [\n        IllustratedMessageComponent,\n        IllustratedMessageActionsComponent,\n        IllustratedMessageFigcaptionComponent,\n        IllustratedMessageTextDirective,\n        IllustratedMessageTitleDirective\n    ],\n    imports: [CommonModule],\n    exports: [\n        IllustratedMessageComponent,\n        IllustratedMessageActionsComponent,\n        IllustratedMessageFigcaptionComponent,\n        IllustratedMessageTextDirective,\n        IllustratedMessageTitleDirective\n    ]\n})\nexport class IllustratedMessageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-illustrated-message.mjs","sources":["../../../../libs/core/src/lib/illustrated-message/illustrated-message.component.ts","../../../../libs/core/src/lib/illustrated-message/components/illustrated-message-actions/illustrated-message-actions.component.ts","../../../../libs/core/src/lib/illustrated-message/components/illustrated-message-figcaption/illustrated-message-figcaption.component.ts","../../../../libs/core/src/lib/illustrated-message/directives/illustrated-message-text/illustrated-message-text.directive.ts","../../../../libs/core/src/lib/illustrated-message/directives/illustrated-message-title/illustrated-message-title.directive.ts","../../../../libs/core/src/lib/illustrated-message/illustrated-message.module.ts","../../../../libs/core/src/lib/illustrated-message/fundamental-ngx-core-illustrated-message.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { applyCssClass, RequireOnlyOne } from '@fundamental-ngx/core/utils';\nimport { CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { fromEvent, Subscription } from 'rxjs';\n\nexport interface SvgConfig {\n    scene?: RequireOnlyOne<SvgItemConfig, 'url' | 'file'>;\n    dialog?: RequireOnlyOne<SvgItemConfig, 'url' | 'file'>;\n    spot?: RequireOnlyOne<SvgItemConfig, 'url' | 'file'>;\n}\n\nexport interface SvgItemConfig {\n    url: string;\n    id: string;\n    file: string;\n}\n\nexport type IllustratedMessageType = 'scene' | 'dialog' | 'spot';\n\nlet illustratedMessageUniqueId = 0;\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fd-illustrated-message]',\n    template: `\n        <svg class=\"fd-illustrated-message__illustration\" *ngIf=\"!noSvg || _inlineSvg\">\n            <use [attr.href]=\"_href\"></use>\n        </svg>\n        <div *ngIf=\"_inlineSvg\" style=\"display: none;\" [innerHTML]=\"_inlineSvg\"></div>\n        <ng-content select=\"[fd-illustrated-message-figcaption]\"></ng-content>\n        <ng-content select=\"fd-illustrated-message-actions\"></ng-content>\n    `,\n    styleUrls: ['./illustrated-message.component.scss'],\n\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class IllustratedMessageComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit, CssClassBuilder {\n    /**\n     * The type of the Illustrated Message\n     * Options include: 'scene' | 'spot' | 'dialog'\n     * The default type is set to 'scene'\n     */\n    @Input()\n    type: IllustratedMessageType = 'scene';\n\n    /**\n     * An object containing url and id for each type used to construct the svg href\n     * For 'scene' type 'scene' and 'dialog' values are required\n     * In small screens (less than 600px) 'dialog' svg will be applied for 'scene' type\n     */\n    @Input()\n    svgConfig: SvgConfig;\n\n    /**\n     * When set to true will remove the illustration from the Illustrated Message\n     * The default is set to false\n     */\n    @Input()\n    noSvg = false;\n\n    /**\n     * Id of the Illustrated Message\n     * If not provided, a default one is generated\n     */\n    @Input()\n    @HostBinding('attr.id')\n    id: string = 'fd-illustrated-message-' + illustratedMessageUniqueId++;\n\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    _href: string;\n\n    /** @hidden */\n    _isSmallScreen: boolean;\n\n    /** @hidden */\n    _inlineSvg: SafeHtml | undefined;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _cdRef: ChangeDetectorRef, private _sanitizer: DomSanitizer) {}\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n        this._constructHref();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.type === 'scene') {\n            this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef {\n        return this._elementRef;\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return ['fd-illustrated-message', this.type ? `fd-illustrated-message--${this.type}` : '', this.class];\n    }\n\n    /** @hidden */\n    private _constructHref(): void {\n        let inlineSvg;\n        this._inlineSvg = undefined;\n        if (this.svgConfig) {\n            switch (this.type) {\n                case 'scene':\n                    this._isSmallScreen = window.innerWidth < 600;\n\n                    inlineSvg = this._isSmallScreen ? this.svgConfig.dialog?.file : this.svgConfig.scene?.file;\n\n                    this._href = this._isSmallScreen\n                        ? `${this.svgConfig.dialog?.url || ''}#${this.svgConfig.dialog?.id}`\n                        : `${this.svgConfig.scene?.url || ''}#${this.svgConfig.scene?.id}`;\n                    break;\n\n                case 'dialog':\n                    inlineSvg = this.svgConfig.dialog?.file;\n                    this._href = `${this.svgConfig.dialog?.url || ''}#${this.svgConfig.dialog?.id}`;\n                    break;\n\n                case 'spot':\n                    inlineSvg = this.svgConfig.spot?.file;\n                    this._href = `${this.svgConfig.spot?.url || ''}#${this.svgConfig.spot?.id}`;\n                    break;\n            }\n        }\n        if (inlineSvg) {\n            this._inlineSvg = this._sanitizer.bypassSecurityTrustHtml(inlineSvg);\n        }\n\n        this._cdRef.detectChanges();\n    }\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n    selector: 'fd-illustrated-message-actions',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'fd-illustrated-message__actions'\n    }\n})\nexport class IllustratedMessageActionsComponent {}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fd-illustrated-message-figcaption]',\n    template: `\n        <ng-content select=\"[fd-illustrated-message-title]\"></ng-content>\n        <ng-content select=\"[fd-illustrated-message-text]\"></ng-content>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'fd-illustrated-message__figcaption'\n    }\n})\nexport class IllustratedMessageFigcaptionComponent {}\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-illustrated-message-text]'\n})\nexport class IllustratedMessageTextDirective {\n    /** @hidden */\n    @HostBinding('class.fd-illustrated-message__text')\n    fdIllustratedMessageTextClass = true;\n}\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-illustrated-message-title]'\n})\nexport class IllustratedMessageTitleDirective {\n    /** @hidden */\n    @HostBinding('class.fd-illustrated-message__title')\n    fdIllustratedMessageTitleClass = true;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IllustratedMessageComponent } from './illustrated-message.component';\nimport { IllustratedMessageActionsComponent } from './components/illustrated-message-actions/illustrated-message-actions.component';\n// eslint-disable-next-line max-len\nimport { IllustratedMessageFigcaptionComponent } from './components/illustrated-message-figcaption/illustrated-message-figcaption.component';\nimport { IllustratedMessageTextDirective } from './directives/illustrated-message-text/illustrated-message-text.directive';\nimport { IllustratedMessageTitleDirective } from './directives/illustrated-message-title/illustrated-message-title.directive';\n\n@NgModule({\n    declarations: [\n        IllustratedMessageComponent,\n        IllustratedMessageActionsComponent,\n        IllustratedMessageFigcaptionComponent,\n        IllustratedMessageTextDirective,\n        IllustratedMessageTitleDirective\n    ],\n    imports: [CommonModule],\n    exports: [\n        IllustratedMessageComponent,\n        IllustratedMessageActionsComponent,\n        IllustratedMessageFigcaptionComponent,\n        IllustratedMessageTextDirective,\n        IllustratedMessageTitleDirective\n    ]\n})\nexport class IllustratedMessageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}