npm - @fundamental-ngx/core - Versions diffs - 0.62.0-rc.3 → 0.62.0-rc.30 - Mend

@fundamental-ngx/core 0.62.0-rc.3 → 0.62.0-rc.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/fesm2022/fundamental-ngx-core-breadcrumb.mjs CHANGED Viewed

@@ -214,7 +214,7 @@ class BreadcrumbComponent {
                 provide: FD_BREADCRUMB_COMPONENT,
                 useExisting: BreadcrumbComponent
             }
-        ], queries: [{ propertyName: "_contentItems", predicate: FD_BREADCRUMB_ITEM_COMPONENT }], viewQueries: [{ propertyName: "_menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }], ngImport: i0, template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"!reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n    ariaRole=\"list\"\n>\n    @for (breadcrumb of _items$(); track breadcrumb) {\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    }\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n            @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n                    \"\n                >\n                    <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n                        @if (breadcrumbItem?.item.breadcrumbLink) {\n                            @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            }\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            }\n                        } @else {\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n        @if (breadcrumbs.length > 0) {\n            <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n                <a\n                    fd-link\n                    [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    aria-haspopup=\"menu\"\n                    tabindex=\"0\"\n                    class=\"fd-breadcrumb__collapsed\"\n                    (keydown.enter)=\"_keyDownHandle($event)\"\n                    (keydown.space)=\"_keyDownHandle($event)\"\n                >\n                    <fd-icon\n                        glyph=\"overflow\"\n                        [title]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                        [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    ></fd-icon>\n                    <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n                </a>\n                <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n            </span>\n        }\n    </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n", styles: [".fd-breadcrumb{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;--fdLink_Line_Height: 1.5rem;list-style:none;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-breadcrumb:before,.fd-breadcrumb:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-block:.0625rem;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:last-child:not(:has(a)){--fdBreadcrumb_Separator: none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0}.fd-breadcrumb__separator:before,.fd-breadcrumb__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__separator:after{margin-inline:.25rem;color:var(--sapTextColor);content:var(--fdBreadcrumb_Separator, \"/\")}.fd-breadcrumb--backslash{--fdBreadcrumb_Separator: \"\\\\\"}.fd-breadcrumb--double-slash{--fdBreadcrumb_Separator: \"//\"}.fd-breadcrumb--double-backslash{--fdBreadcrumb_Separator: \"\\\\\\\\\"}.fd-breadcrumb--greater-than{--fdBreadcrumb_Separator: \">\"}.fd-breadcrumb--double-greater-than{--fdBreadcrumb_Separator: \">>\"}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb .fd-overflow-layout{justify-content:start}.fd-breadcrumb .fd-overflow-layout .fd-overflow-layout__more .fd-breadcrumb__item{height:26px;vertical-align:text-top}.fd-breadcrumb .fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"], dependencies: [{ kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "component", type: MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_contentItems", predicate: FD_BREADCRUMB_ITEM_COMPONENT }], viewQueries: [{ propertyName: "_menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }], ngImport: i0, template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"!reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n    ariaRole=\"list\"\n>\n    @for (breadcrumb of _items$(); track breadcrumb) {\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    }\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n            @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled() : false\n                    \"\n                >\n                    <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n                        @if (breadcrumbItem?.item.breadcrumbLink) {\n                            @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            }\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            }\n                        } @else {\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n        @if (breadcrumbs.length > 0) {\n            <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n                <a\n                    fd-link\n                    [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    aria-haspopup=\"menu\"\n                    tabindex=\"0\"\n                    class=\"fd-breadcrumb__collapsed\"\n                    (keydown.enter)=\"_keyDownHandle($event)\"\n                    (keydown.space)=\"_keyDownHandle($event)\"\n                >\n                    <fd-icon\n                        glyph=\"overflow\"\n                        [title]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                        [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    ></fd-icon>\n                    <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n                </a>\n                <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n            </span>\n        }\n    </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n", styles: [".fd-breadcrumb{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;--fdLink_Line_Height: 1.5rem;list-style:none;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-breadcrumb:before,.fd-breadcrumb:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-block:.0625rem;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:last-child:not(:has(a)){--fdBreadcrumb_Separator: none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0}.fd-breadcrumb__separator:before,.fd-breadcrumb__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__separator:after{margin-inline:.25rem;color:var(--sapTextColor);content:var(--fdBreadcrumb_Separator, \"/\")}.fd-breadcrumb--backslash{--fdBreadcrumb_Separator: \"\\\\\"}.fd-breadcrumb--double-slash{--fdBreadcrumb_Separator: \"//\"}.fd-breadcrumb--double-backslash{--fdBreadcrumb_Separator: \"\\\\\\\\\"}.fd-breadcrumb--greater-than{--fdBreadcrumb_Separator: \">\"}.fd-breadcrumb--double-greater-than{--fdBreadcrumb_Separator: \">>\"}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb .fd-overflow-layout{justify-content:start}.fd-breadcrumb .fd-overflow-layout .fd-overflow-layout__more .fd-breadcrumb__item{height:26px;vertical-align:text-top}.fd-breadcrumb .fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"], dependencies: [{ kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "component", type: MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
@@ -243,7 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         LinkComponent,
                         IconComponent,
                         FdTranslatePipe
-                    ], template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"!reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n    ariaRole=\"list\"\n>\n    @for (breadcrumb of _items$(); track breadcrumb) {\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    }\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n            @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n                    \"\n                >\n                    <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n                        @if (breadcrumbItem?.item.breadcrumbLink) {\n                            @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            }\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            }\n                        } @else {\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n        @if (breadcrumbs.length > 0) {\n            <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n                <a\n                    fd-link\n                    [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    aria-haspopup=\"menu\"\n                    tabindex=\"0\"\n                    class=\"fd-breadcrumb__collapsed\"\n                    (keydown.enter)=\"_keyDownHandle($event)\"\n                    (keydown.space)=\"_keyDownHandle($event)\"\n                >\n                    <fd-icon\n                        glyph=\"overflow\"\n                        [title]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                        [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    ></fd-icon>\n                    <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n                </a>\n                <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n            </span>\n        }\n    </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n", styles: [".fd-breadcrumb{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;--fdLink_Line_Height: 1.5rem;list-style:none;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-breadcrumb:before,.fd-breadcrumb:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-block:.0625rem;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:last-child:not(:has(a)){--fdBreadcrumb_Separator: none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0}.fd-breadcrumb__separator:before,.fd-breadcrumb__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__separator:after{margin-inline:.25rem;color:var(--sapTextColor);content:var(--fdBreadcrumb_Separator, \"/\")}.fd-breadcrumb--backslash{--fdBreadcrumb_Separator: \"\\\\\"}.fd-breadcrumb--double-slash{--fdBreadcrumb_Separator: \"//\"}.fd-breadcrumb--double-backslash{--fdBreadcrumb_Separator: \"\\\\\\\\\"}.fd-breadcrumb--greater-than{--fdBreadcrumb_Separator: \">\"}.fd-breadcrumb--double-greater-than{--fdBreadcrumb_Separator: \">>\"}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb .fd-overflow-layout{justify-content:start}.fd-breadcrumb .fd-overflow-layout .fd-overflow-layout__more .fd-breadcrumb__item{height:26px;vertical-align:text-top}.fd-breadcrumb .fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"] }]
+                    ], template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"!reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n    ariaRole=\"list\"\n>\n    @for (breadcrumb of _items$(); track breadcrumb) {\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    }\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n            @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled() : false\n                    \"\n                >\n                    <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n                        @if (breadcrumbItem?.item.breadcrumbLink) {\n                            @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            }\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            }\n                        } @else {\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n        @if (breadcrumbs.length > 0) {\n            <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n                <a\n                    fd-link\n                    [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    aria-haspopup=\"menu\"\n                    tabindex=\"0\"\n                    class=\"fd-breadcrumb__collapsed\"\n                    (keydown.enter)=\"_keyDownHandle($event)\"\n                    (keydown.space)=\"_keyDownHandle($event)\"\n                >\n                    <fd-icon\n                        glyph=\"overflow\"\n                        [title]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                        [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' | fdTranslate)()\"\n                    ></fd-icon>\n                    <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n                </a>\n                <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n            </span>\n        }\n    </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n", styles: [".fd-breadcrumb{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;--fdLink_Line_Height: 1.5rem;list-style:none;-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-breadcrumb:before,.fd-breadcrumb:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-block:.0625rem;color:var(--sapContent_LabelColor)}.fd-breadcrumb__item:before,.fd-breadcrumb__item:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:last-child:not(:has(a)){--fdBreadcrumb_Separator: none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb__separator{font-size:var(--sapFontSize);line-height:normal;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;forced-color-adjust:none;padding-inline:0;padding-block:0;margin-inline:0;margin-block:0;border:0}.fd-breadcrumb__separator:before,.fd-breadcrumb__separator:after{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-breadcrumb__separator:after{margin-inline:.25rem;color:var(--sapTextColor);content:var(--fdBreadcrumb_Separator, \"/\")}.fd-breadcrumb--backslash{--fdBreadcrumb_Separator: \"\\\\\"}.fd-breadcrumb--double-slash{--fdBreadcrumb_Separator: \"//\"}.fd-breadcrumb--double-backslash{--fdBreadcrumb_Separator: \"\\\\\\\\\"}.fd-breadcrumb--greater-than{--fdBreadcrumb_Separator: \">\"}.fd-breadcrumb--double-greater-than{--fdBreadcrumb_Separator: \">>\"}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb .fd-overflow-layout{justify-content:start}.fd-breadcrumb .fd-overflow-layout .fd-overflow-layout__more .fd-breadcrumb__item{height:26px;vertical-align:text-top}.fd-breadcrumb .fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { reverse: [{
                 type: Input
             }], tabIndex: [{

package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../libs/core/breadcrumb/tokens.ts","../../../../libs/core/breadcrumb/breadcrumb-item.component.ts","../../../../libs/core/breadcrumb/breadcrumb.component.ts","../../../../libs/core/breadcrumb/breadcrumb.component.html","../../../../libs/core/breadcrumb/breadcrumb.module.ts","../../../../libs/core/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const FD_BREADCRUMB_ITEM_COMPONENT = new InjectionToken('FdBreadcrumbItemComponent');\nexport const FD_BREADCRUMB_COMPONENT = new InjectionToken('FdBreadcrumbComponent');\n","import { DomPortal } from '@angular/cdk/portal';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n ViewEncapsulation\n} from '@angular/core';\nimport { FD_LINK_COMPONENT, LinkComponent } from '@fundamental-ngx/core/link';\nimport { FD_BREADCRUMB_ITEM_COMPONENT } from './tokens';\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: `<ng-content></ng-content> <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>`,\n host: {\n class: 'fd-breadcrumb__item'\n },\n providers: [\n {\n provide: FD_BREADCRUMB_ITEM_COMPONENT,\n useExisting: BreadcrumbItemComponent\n }\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n /* @hidden /\n @ContentChild(FD_LINK_COMPONENT)\n breadcrumbLink: LinkComponent;\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 /\n Breadcrumb item dom portal.\n /\n portal: DomPortal;\n\n /* @hidden /\n private _attached = false;\n\n /* @hidden /\n constructor(public readonly elementRef: ElementRef<HTMLElement>) {}\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._attach();\n }\n\n /\n Sets breadcrumb item dom portal.\n /\n setPortal(): void {\n if (!this.portal) {\n this.portal = new DomPortal(this.elementRef);\n }\n }\n\n /* @hidden /\n _detach(): void {\n if (!this._attached) {\n return;\n }\n\n if (this.linkContentPortal?.isAttached) {\n this.linkContentPortal?.detach();\n }\n\n if (this.breadcrumbItemPortal?.isAttached) {\n this.breadcrumbItemPortal?.detach();\n }\n\n this._attached = false;\n }\n\n /* @hidden /\n _attach(): void {\n if (this._attached) {\n return;\n }\n\n const contentSpan = this.breadcrumbLink?.contentSpan();\n if (this.breadcrumbLink && contentSpan) {\n this.linkContentPortal = new DomPortal<HTMLElement>(contentSpan.nativeElement);\n }\n\n this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n this._attached = true;\n }\n}\n","import { PortalModule } from '@angular/cdk/portal';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n DestroyRef,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n computed,\n effect,\n inject,\n input,\n signal\n} from '@angular/core';\nimport { HasElementRef, RtlService } from '@fundamental-ngx/cdk/utils';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport {\n GlyphMenuAddonDirective,\n MenuAddonDirective,\n MenuComponent,\n MenuInteractiveComponent,\n MenuItemComponent,\n MenuTitleDirective,\n MenuTriggerDirective\n} from '@fundamental-ngx/core/menu';\nimport {\n OverflowExpandDirective,\n OverflowItemRefDirective,\n OverflowLayoutComponent,\n OverflowLayoutItemDirective\n} from '@fundamental-ngx/core/overflow-layout';\nimport { Placement } from '@fundamental-ngx/core/shared';\nimport { FD_LANGUAGE_SIGNAL, FdTranslatePipe, TranslationResolver } from '@fundamental-ngx/i18n';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { FD_BREADCRUMB_COMPONENT, FD_BREADCRUMB_ITEM_COMPONENT } from './tokens';\n\nexport type BreadcrumbSeparatorStyle =\n \| ''\n \| 'backslash'\n \| 'double-slash'\n \| 'double-backslash'\n \| 'greater-than'\n \| 'double-greater-than';\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 selector: 'fd-breadcrumb',\n host: {\n role: 'navigation',\n '[class]': '_cssClass()',\n '[attr.aria-label]': '_ariaLabel'\n },\n templateUrl: './breadcrumb.component.html',\n styleUrl: './breadcrumb.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: FD_BREADCRUMB_COMPONENT,\n useExisting: BreadcrumbComponent\n }\n ],\n imports: [\n OverflowLayoutComponent,\n OverflowItemRefDirective,\n OverflowLayoutItemDirective,\n PortalModule,\n OverflowExpandDirective,\n MenuComponent,\n MenuItemComponent,\n MenuInteractiveComponent,\n GlyphMenuAddonDirective,\n MenuAddonDirective,\n MenuTitleDirective,\n MenuTriggerDirective,\n LinkComponent,\n IconComponent,\n FdTranslatePipe\n ]\n})\nexport class BreadcrumbComponent implements AfterViewInit, HasElementRef {\n /* Whether to append items to the overflow dropdown in reverse order. Default is true. /\n @Input()\n reverse = false;\n\n /* Tabindex of the breadcrumb. /\n @Input()\n tabIndex = '0';\n\n /\n Event emitted when visible items count is changed.\n /\n @Output()\n visibleItemsCount = new EventEmitter<number>();\n\n /\n Event emitted when hidden items count is changed.\n /\n @Output()\n hiddenItemsCount = new EventEmitter<number>();\n\n /* @hidden /\n @ContentChildren(FD_BREADCRUMB_ITEM_COMPONENT)\n private readonly _contentItems: QueryList<BreadcrumbItemComponent>;\n\n /* @hidden /\n @ViewChild(MenuComponent)\n private readonly _menuComponent: MenuComponent;\n\n /* @hidden /\n @ViewChild(OverflowLayoutComponent)\n private readonly _overflowLayout: OverflowLayoutComponent;\n\n /\n Separator style for the breadcrumb items.\n * Can be 'backslash' \| 'double-slash' \| 'double-backslash' \| 'greater-than' \| 'double-greater-than'\n * Omit for default (slash)\n /\n separatorStyle = input<BreadcrumbSeparatorStyle>('');\n\n /* @hidden /\n _ariaLabel: string;\n\n /\n @hidden\n * Array of breadcrumb items.\n /\n _items$ = signal<BreadcrumbItemComponent[]>([]);\n\n /* @hidden /\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /* @hidden /\n protected readonly placement = computed<Placement>(() => (this._rtlService?.rtl() ? 'bottom-end' : 'bottom-start'));\n\n /* @hidden /\n protected readonly _cssClass = computed(() => {\n const classes = ['fd-breadcrumb'];\n const style = this.separatorStyle();\n if (style) {\n classes.push(`fd-breadcrumb--${style}`);\n }\n return classes.join(' ');\n });\n\n /* @hidden /\n private readonly _rtlService = inject(RtlService, {\n optional: true\n });\n\n /* @hidden /\n private readonly _langSignal = inject(FD_LANGUAGE_SIGNAL);\n\n /* @hidden /\n private readonly _translationResolver = new TranslationResolver();\n\n /* @hidden /\n private readonly _destroyRef = inject(DestroyRef);\n\n /* @hidden /\n constructor() {\n effect(() => {\n const lang = this._langSignal();\n this._ariaLabel = this._translationResolver.resolve(lang, 'coreBreadcrumb.breadcrumbTrailLabel');\n });\n }\n\n /* @hidden /\n onResize(): void {\n this._overflowLayout.triggerRecalculation();\n }\n\n /\n Function that handles click, touch, enter and space events.\n /\n itemClicked(breadcrumbItem: BreadcrumbItemComponent, $event: Event): void {\n $event.preventDefault();\n breadcrumbItem.breadcrumbLink.elementRef.nativeElement.click();\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._setItems();\n\n this._contentItems.changes.subscribe(() => this._setItems());\n\n // Set menu roles for breadcrumb context\n (this._menuComponent as any)._navContainerRole = 'dialog';\n (this._menuComponent as any)._menuListContainerRole = 'menu';\n }\n\n /* @hidden /\n _keyDownHandle(event: Event): void {\n this._menuComponent.toggle();\n event.preventDefault();\n }\n\n /* @hidden /\n _onHiddenChange(isHidden: boolean, breadcrumb: BreadcrumbItemComponent): void {\n if (!isHidden) {\n breadcrumb._detach();\n } else {\n breadcrumb._attach();\n }\n }\n\n /* @hidden /\n _onVisibleItemsCountChange(visibleItemsCount: number): void {\n this.visibleItemsCount.emit(visibleItemsCount);\n }\n\n /* @hidden /\n _onHiddenItemsCountChange(hiddenItemsCount: number): void {\n this.hiddenItemsCount.emit(hiddenItemsCount);\n }\n\n /* @hidden /\n private _setItems(): void {\n this._contentItems.forEach((item) => item.setPortal());\n this._items$.set(this._contentItems.toArray());\n }\n}\n","<fd-overflow-layout\n [reverseHiddenItems]=\"!reverse\"\n showMorePosition=\"left\"\n [enableKeyboardNavigation]=\"false\"\n (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n ariaRole=\"list\"\n>\n @for (breadcrumb of _items$(); track breadcrumb) {\n <div\n fdOverflowItemRef=\"breadcrumb; let hidden\"\n fdOverflowLayoutItem\n (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n >\n <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n </div>\n }\n <ng-container fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n <li\n fd-menu-item\n [disabled]=\"\n breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n \"\n >\n <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n @if (breadcrumbItem?.item.breadcrumbLink) {\n @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n <fd-menu-addon\n position=\"before\"\n [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n ></fd-menu-addon>\n }\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n </span>\n @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n <fd-menu-addon\n [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n ></fd-menu-addon>\n }\n } @else {\n <span fd-menu-title>\n <ng-container\n [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n ></ng-container>\n </span>\n }\n </a>\n </li>\n }\n </fd-menu>\n @if (breadcrumbs.length > 0) {\n <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n <a\n fd-link\n [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n aria-haspopup=\"menu\"\n tabindex=\"0\"\n class=\"fd-breadcrumb__collapsed\"\n (keydown.enter)=\"_keyDownHandle($event)\"\n (keydown.space)=\"_keyDownHandle($event)\"\n >\n <fd-icon\n glyph=\"overflow\"\n [title]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n ></fd-icon>\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </a>\n <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n </span>\n }\n </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\nconst components = [BreadcrumbComponent, BreadcrumbItemComponent, LinkComponent, ContentDensityModule];\n\n/\n @deprecated\n * Use direct imports of components and directives.\n /\n@NgModule({\n imports: [...components],\n exports: [...components]\n})\nexport class BreadcrumbModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../libs/core/breadcrumb/tokens.ts","../../../../libs/core/breadcrumb/breadcrumb-item.component.ts","../../../../libs/core/breadcrumb/breadcrumb.component.ts","../../../../libs/core/breadcrumb/breadcrumb.component.html","../../../../libs/core/breadcrumb/breadcrumb.module.ts","../../../../libs/core/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const FD_BREADCRUMB_ITEM_COMPONENT = new InjectionToken('FdBreadcrumbItemComponent');\nexport const FD_BREADCRUMB_COMPONENT = new InjectionToken('FdBreadcrumbComponent');\n","import { DomPortal } from '@angular/cdk/portal';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n ViewEncapsulation\n} from '@angular/core';\nimport { FD_LINK_COMPONENT, LinkComponent } from '@fundamental-ngx/core/link';\nimport { FD_BREADCRUMB_ITEM_COMPONENT } from './tokens';\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: `<ng-content></ng-content> <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>`,\n host: {\n class: 'fd-breadcrumb__item'\n },\n providers: [\n {\n provide: FD_BREADCRUMB_ITEM_COMPONENT,\n useExisting: BreadcrumbItemComponent\n }\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n /* @hidden /\n @ContentChild(FD_LINK_COMPONENT)\n breadcrumbLink: LinkComponent;\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 /\n Breadcrumb item dom portal.\n /\n portal: DomPortal;\n\n /* @hidden /\n private _attached = false;\n\n /* @hidden /\n constructor(public readonly elementRef: ElementRef<HTMLElement>) {}\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._attach();\n }\n\n /\n Sets breadcrumb item dom portal.\n /\n setPortal(): void {\n if (!this.portal) {\n this.portal = new DomPortal(this.elementRef);\n }\n }\n\n /* @hidden /\n _detach(): void {\n if (!this._attached) {\n return;\n }\n\n if (this.linkContentPortal?.isAttached) {\n this.linkContentPortal?.detach();\n }\n\n if (this.breadcrumbItemPortal?.isAttached) {\n this.breadcrumbItemPortal?.detach();\n }\n\n this._attached = false;\n }\n\n /* @hidden /\n _attach(): void {\n if (this._attached) {\n return;\n }\n\n const contentSpan = this.breadcrumbLink?.contentSpan();\n if (this.breadcrumbLink && contentSpan) {\n this.linkContentPortal = new DomPortal<HTMLElement>(contentSpan.nativeElement);\n }\n\n this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n this._attached = true;\n }\n}\n","import { PortalModule } from '@angular/cdk/portal';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n DestroyRef,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n computed,\n effect,\n inject,\n input,\n signal\n} from '@angular/core';\nimport { HasElementRef, RtlService } from '@fundamental-ngx/cdk/utils';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport {\n GlyphMenuAddonDirective,\n MenuAddonDirective,\n MenuComponent,\n MenuInteractiveComponent,\n MenuItemComponent,\n MenuTitleDirective,\n MenuTriggerDirective\n} from '@fundamental-ngx/core/menu';\nimport {\n OverflowExpandDirective,\n OverflowItemRefDirective,\n OverflowLayoutComponent,\n OverflowLayoutItemDirective\n} from '@fundamental-ngx/core/overflow-layout';\nimport { Placement } from '@fundamental-ngx/core/shared';\nimport { FD_LANGUAGE_SIGNAL, FdTranslatePipe, TranslationResolver } from '@fundamental-ngx/i18n';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { FD_BREADCRUMB_COMPONENT, FD_BREADCRUMB_ITEM_COMPONENT } from './tokens';\n\nexport type BreadcrumbSeparatorStyle =\n \| ''\n \| 'backslash'\n \| 'double-slash'\n \| 'double-backslash'\n \| 'greater-than'\n \| 'double-greater-than';\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 selector: 'fd-breadcrumb',\n host: {\n role: 'navigation',\n '[class]': '_cssClass()',\n '[attr.aria-label]': '_ariaLabel'\n },\n templateUrl: './breadcrumb.component.html',\n styleUrl: './breadcrumb.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: FD_BREADCRUMB_COMPONENT,\n useExisting: BreadcrumbComponent\n }\n ],\n imports: [\n OverflowLayoutComponent,\n OverflowItemRefDirective,\n OverflowLayoutItemDirective,\n PortalModule,\n OverflowExpandDirective,\n MenuComponent,\n MenuItemComponent,\n MenuInteractiveComponent,\n GlyphMenuAddonDirective,\n MenuAddonDirective,\n MenuTitleDirective,\n MenuTriggerDirective,\n LinkComponent,\n IconComponent,\n FdTranslatePipe\n ]\n})\nexport class BreadcrumbComponent implements AfterViewInit, HasElementRef {\n /* Whether to append items to the overflow dropdown in reverse order. Default is true. /\n @Input()\n reverse = false;\n\n /* Tabindex of the breadcrumb. /\n @Input()\n tabIndex = '0';\n\n /\n Event emitted when visible items count is changed.\n /\n @Output()\n visibleItemsCount = new EventEmitter<number>();\n\n /\n Event emitted when hidden items count is changed.\n /\n @Output()\n hiddenItemsCount = new EventEmitter<number>();\n\n /* @hidden /\n @ContentChildren(FD_BREADCRUMB_ITEM_COMPONENT)\n private readonly _contentItems: QueryList<BreadcrumbItemComponent>;\n\n /* @hidden /\n @ViewChild(MenuComponent)\n private readonly _menuComponent: MenuComponent;\n\n /* @hidden /\n @ViewChild(OverflowLayoutComponent)\n private readonly _overflowLayout: OverflowLayoutComponent;\n\n /\n Separator style for the breadcrumb items.\n * Can be 'backslash' \| 'double-slash' \| 'double-backslash' \| 'greater-than' \| 'double-greater-than'\n * Omit for default (slash)\n /\n separatorStyle = input<BreadcrumbSeparatorStyle>('');\n\n /* @hidden /\n _ariaLabel: string;\n\n /\n @hidden\n * Array of breadcrumb items.\n /\n _items$ = signal<BreadcrumbItemComponent[]>([]);\n\n /* @hidden /\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /* @hidden /\n protected readonly placement = computed<Placement>(() => (this._rtlService?.rtl() ? 'bottom-end' : 'bottom-start'));\n\n /* @hidden /\n protected readonly _cssClass = computed(() => {\n const classes = ['fd-breadcrumb'];\n const style = this.separatorStyle();\n if (style) {\n classes.push(`fd-breadcrumb--${style}`);\n }\n return classes.join(' ');\n });\n\n /* @hidden /\n private readonly _rtlService = inject(RtlService, {\n optional: true\n });\n\n /* @hidden /\n private readonly _langSignal = inject(FD_LANGUAGE_SIGNAL);\n\n /* @hidden /\n private readonly _translationResolver = new TranslationResolver();\n\n /* @hidden /\n private readonly _destroyRef = inject(DestroyRef);\n\n /* @hidden /\n constructor() {\n effect(() => {\n const lang = this._langSignal();\n this._ariaLabel = this._translationResolver.resolve(lang, 'coreBreadcrumb.breadcrumbTrailLabel');\n });\n }\n\n /* @hidden /\n onResize(): void {\n this._overflowLayout.triggerRecalculation();\n }\n\n /\n Function that handles click, touch, enter and space events.\n /\n itemClicked(breadcrumbItem: BreadcrumbItemComponent, $event: Event): void {\n $event.preventDefault();\n breadcrumbItem.breadcrumbLink.elementRef.nativeElement.click();\n }\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._setItems();\n\n this._contentItems.changes.subscribe(() => this._setItems());\n\n // Set menu roles for breadcrumb context\n (this._menuComponent as any)._navContainerRole = 'dialog';\n (this._menuComponent as any)._menuListContainerRole = 'menu';\n }\n\n /* @hidden /\n _keyDownHandle(event: Event): void {\n this._menuComponent.toggle();\n event.preventDefault();\n }\n\n /* @hidden /\n _onHiddenChange(isHidden: boolean, breadcrumb: BreadcrumbItemComponent): void {\n if (!isHidden) {\n breadcrumb._detach();\n } else {\n breadcrumb._attach();\n }\n }\n\n /* @hidden /\n _onVisibleItemsCountChange(visibleItemsCount: number): void {\n this.visibleItemsCount.emit(visibleItemsCount);\n }\n\n /* @hidden /\n _onHiddenItemsCountChange(hiddenItemsCount: number): void {\n this.hiddenItemsCount.emit(hiddenItemsCount);\n }\n\n /* @hidden /\n private _setItems(): void {\n this._contentItems.forEach((item) => item.setPortal());\n this._items$.set(this._contentItems.toArray());\n }\n}\n","<fd-overflow-layout\n [reverseHiddenItems]=\"!reverse\"\n showMorePosition=\"left\"\n [enableKeyboardNavigation]=\"false\"\n (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n ariaRole=\"list\"\n>\n @for (breadcrumb of _items$(); track breadcrumb) {\n <div\n fdOverflowItemRef=\"breadcrumb; let hidden\"\n fdOverflowLayoutItem\n (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n >\n <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n </div>\n }\n <ng-container fdOverflowExpand=\"let breadcrumbs; items: _items$()\">\n <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"placement()\">\n @for (breadcrumbItem of breadcrumbs; track breadcrumbItem) {\n <li\n fd-menu-item\n [disabled]=\"\n breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled() : false\n \"\n >\n <a fd-menu-interactive (click)=\"itemClicked(breadcrumbItem.item, $event)\">\n @if (breadcrumbItem?.item.breadcrumbLink) {\n @if (breadcrumbItem.item.breadcrumbLink._prefixIconName) {\n <fd-menu-addon\n position=\"before\"\n [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n ></fd-menu-addon>\n }\n <span fd-menu-title>\n <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n </span>\n @if (breadcrumbItem.item.breadcrumbLink._postfixIconName) {\n <fd-menu-addon\n [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n ></fd-menu-addon>\n }\n } @else {\n <span fd-menu-title>\n <ng-container\n [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n ></ng-container>\n </span>\n }\n </a>\n </li>\n }\n </fd-menu>\n @if (breadcrumbs.length > 0) {\n <span class=\"fd-breadcrumb__item\" [fdMenuTrigger]=\"menu\">\n <a\n fd-link\n [attr.aria-label]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n aria-haspopup=\"menu\"\n tabindex=\"0\"\n class=\"fd-breadcrumb__collapsed\"\n (keydown.enter)=\"_keyDownHandle($event)\"\n (keydown.space)=\"_keyDownHandle($event)\"\n >\n <fd-icon\n glyph=\"overflow\"\n [title]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n [ariaLabel]=\"('coreBreadcrumb.overflowTitleMore' \| fdTranslate)()\"\n ></fd-icon>\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </a>\n <span class=\"fd-breadcrumb__separator\" aria-hidden=\"true\"></span>\n </span>\n }\n </ng-container>\n</fd-overflow-layout>\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\n\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\nconst components = [BreadcrumbComponent, BreadcrumbItemComponent, LinkComponent, ContentDensityModule];\n\n/\n @deprecated\n * Use direct imports of components and directives.\n /\n@NgModule({\n imports: [...components],\n exports: [...components]\n})\nexport class BreadcrumbModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/fundamental-ngx-core-button.mjs CHANGED Viewed

@@ -1,54 +1,97 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, ElementRef, linkedSignal, Directive, InjectionToken, effect, isDevMode, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, inject, ElementRef, linkedSignal, Directive, InjectionToken, effect, isDevMode, computed, signal, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
 import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 const defaultButtonType = 'standard';
 class BaseButton {
     constructor() {
-        /** Whether button is in toggled state. */
+        /**
+         * Whether the button is in a toggled state.
+         * Used for toggle buttons that maintain an on/off state.
+         * When true, adds the toggled class and sets aria-pressed="true".
+         */
         this.toggled = input(false, { ...(ngDevMode ? { debugName: "toggled" } : {}), transform: booleanAttribute });
-        /** Whether button is selected. */
+        /**
+         * Whether the button is selected.
+         * Used in button groups or toolbars to indicate the currently selected option.
+         * When true, sets aria-selected="true".
+         */
         this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
         /**
-         * Native type of button element
+         * Native type attribute of the button element.
+         * Defaults to 'button' to prevent form submission.
+         * Set to 'submit' for form submission buttons or 'reset' for form reset buttons.
          */
         this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        /** Position of glyph related to text */
+        /**
+         * Position of the icon relative to the button text.
+         * - 'before': Icon appears before the text (default)
+         * - 'after': Icon appears after the text
+         */
         this.glyphPosition = input('before', ...(ngDevMode ? [{ debugName: "glyphPosition" }] : []));
-        /** The icon to include in the button. See the icon page for the list of icons.
-         * Setter is used to control when css class have to be rebuilded.
-         * Default value is set to ''.
+        /**
+         * The icon to display in the button.
+         * See the icon documentation for the list of available icons.
+         * Example values: 'add', 'edit', 'delete', 'accept', 'decline'
          */
         this.glyph = input(...(ngDevMode ? [undefined, { debugName: "glyph" }] : []));
-        /** Glyph font family */
+        /**
+         * Font family for the icon.
+         * Defaults to the SAP icon font.
+         * Override when using custom icon fonts.
+         */
         this.glyphFont = input(FD_DEFAULT_ICON_FONT_FAMILY, ...(ngDevMode ? [{ debugName: "glyphFont" }] : []));
-        /** The type of the button. Types include:
-         * 'standard' | 'positive' | 'negative' | 'attention' | 'half' | 'ghost' | 'transparent' | 'emphasized' | 'menu'.
-         * Leave empty for default (Standard button).'
-         * Default value is set to 'standard'
+        /**
+         * Visual style of the button.
+         * Available types:
+         * - 'standard': Default button style (blue)
+         * - 'emphasized': High emphasis action (darker blue)
+         * - 'positive': Successful/positive action (green)
+         * - 'negative': Destructive/negative action (red)
+         * - 'attention': Warning action (orange)
+         * - 'transparent': No background, minimal style
+         * - 'ghost': Subtle button with border on hover
+         * - 'half': Split button style
+         * - 'menu': Menu trigger button
          */
         this.fdType = input(defaultButtonType, ...(ngDevMode ? [{ debugName: "fdType" }] : []));
         /**
-         * Text rendered inside button component
+         * Text label displayed inside the button.
+         * Can be used alone or combined with an icon.
          */
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        /** Whether to apply menu mode to the button.
-         * Default value is set to false
+        /**
+         * Whether to apply menu mode styling to the button.
+         * When true, adds a dropdown arrow icon and menu-specific styling.
          */
         this.fdMenu = input(false, { ...(ngDevMode ? { debugName: "fdMenu" } : {}), transform: booleanAttribute });
         /**
-         * Native disabled attribute of button element
+         * Whether the button is disabled.
+         * When true, the button cannot be interacted with and displays a disabled state.
+         * This sets the native 'disabled' attribute on button elements.
          */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
         /**
-         * Native aria-disabled attribute of button element
+         * ARIA disabled attribute for accessibility.
+         * Use this when you want to indicate a disabled state to screen readers
+         * without preventing interaction (e.g., for showing tooltips on disabled buttons).
+         * Unlike the 'disabled' attribute, this does not prevent click events.
          */
         this.ariaDisabled = input(false, { ...(ngDevMode ? { debugName: "ariaDisabled" } : {}), alias: 'aria-disabled',
             transform: booleanAttribute });
-        /** adding native aria-label to the component */
+        /**
+         * ARIA label for the button.
+         * Provides an accessible name for screen readers.
+         * If not provided, special button types will auto-generate from label or glyph.
+         */
         this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
-        /** adding native aria-description to the component */
+        /**
+         * ARIA description for the button.
+         * Provides additional context for screen readers beyond the label.
+         * Special button types (emphasized, positive, negative, attention) will
+         * auto-generate a description from their type if not provided.
+         */
         this.ariaDescription = input(...(ngDevMode ? [undefined, { debugName: "ariaDescription" }] : []));
         /** @hidden */
         this.elementRef = inject(ElementRef);
@@ -87,7 +130,15 @@ class BaseButton {
     }
     /**
      * Programmatically set the disabled state.
-     * This allows parent components to update the button's disabled state.
+     * This allows parent components or directives to update the button's disabled state.
+     *
+     * @param value - Whether the button should be disabled
+     *
+     * @example
+     * ```typescript
+     * // In a form component that needs to disable all buttons
+     * this.submitButton.setDisabled(this.form.invalid);
+     * ```
      */
     setDisabled(value) {
         this._disabledState.set(value);
@@ -95,13 +146,32 @@ class BaseButton {
     /**
      * Get the current disabled state.
      * Returns the internal disabled state which may have been modified programmatically.
+     *
+     * @returns True if the button is currently disabled
+     *
+     * @example
+     * ```typescript
+     * if (!this.button.isDisabled()) {
+     *     this.button.setDisabled(true);
+     * }
+     * ```
      */
     isDisabled() {
         return this._disabledState();
     }
     /**
      * Programmatically set the button type.
-     * This allows directives to override the button type.
+     * This allows directives to override the button's visual style.
+     *
+     * @param value - The button type to apply
+     *
+     * @example
+     * ```typescript
+     * // A directive that changes button style based on validation state
+     * if (this.validationFailed) {
+     *     this.button.setFdType('negative');
+     * }
+     * ```
      */
     setFdType(value) {
         this.fdTypeState.set(value);
@@ -109,6 +179,8 @@ class BaseButton {
     /**
      * Get the current button type.
      * Returns the internal button type which may have been modified programmatically.
+     *
+     * @returns The current button type
      */
     getFdType() {
         return this.fdTypeState();
@@ -116,6 +188,16 @@ class BaseButton {
     /**
      * Programmatically set the selected state.
      * This allows parent components to update the button's selected state.
+     * Used in button groups or toolbars to indicate active selection.
+     *
+     * @param value - Whether the button should be selected
+     *
+     * @example
+     * ```typescript
+     * // In a button group component managing selection
+     * this.buttons.forEach(btn => btn.setSelected(false));
+     * this.activeButton.setSelected(true);
+     * ```
      */
     setSelected(value) {
         this.selectedState.set(value);
@@ -123,6 +205,8 @@ class BaseButton {
     /**
      * Get the current selected state.
      * Returns the internal selected state which may have been modified programmatically.
+     *
+     * @returns True if the button is currently selected
      */
     isSelected() {
         return this.selectedState();
@@ -130,6 +214,18 @@ class BaseButton {
     /**
      * Programmatically set the toggled state.
      * This allows parent components to update the button's toggled state.
+     * Used for toggle buttons that maintain an on/off state.
+     *
+     * @param value - Whether the button should be toggled on
+     *
+     * @example
+     * ```typescript
+     * // In a toolbar with toggle buttons
+     * handleBoldClick(): void {
+     *     const isActive = !this.boldButton.isToggled();
+     *     this.boldButton.setToggled(isActive);
+     * }
+     * ```
      */
     setToggled(value) {
         this.toggledState.set(value);
@@ -137,6 +233,8 @@ class BaseButton {
     /**
      * Get the current toggled state.
      * Returns the internal toggled state which may have been modified programmatically.
+     *
+     * @returns True if the button is currently toggled
      */
     isToggled() {
         return this.toggledState();
@@ -158,33 +256,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 const FD_BUTTON_COMPONENT = new InjectionToken('FdButtonComponent');
 const badgeEnabledButtonTypes = ['emphasized', 'standard', 'ghost', 'transparent'];
+/**
+ * Directive to display a badge on a button.
+ *
+ * Badges are small status indicators that can be added to buttons to show
+ * notifications, counts, or other supplementary information.
+ *
+ * Usage:
+ * ```html
+ * <button fd-button>
+ *   Button Text
+ *   <fd-button-badge [content]="5" />
+ * </button>
+ * ```
+ *
+ * @note Badge content should not exceed 4 characters for optimal display.
+ * @note Badges are only supported on emphasized, standard, ghost, and transparent button types.
+ */
 class ButtonBadgeDirective {
     /** @hidden */
     constructor() {
         /**
-         * Content, which should be shown inside the Badge.
-         * It should not be longer than 4 characters.
+         * Content to display inside the badge.
+         * Should not exceed 4 characters for optimal display.
+         * Supports both string and numeric values.
          */
         this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
         /** @hidden */
         this.elementRef = inject(ElementRef);
         /** @hidden */
         this.buttonComponent = inject(FD_BUTTON_COMPONENT, { host: true });
-        // Automatically update badge content when content signal changes
+        // Single-purpose effect: Sync badge content to DOM
         effect(() => {
-            this.elementRef.nativeElement.innerHTML = `${this.content()}` || '';
-            if (isDevMode()) {
-                const contentValue = this.content();
-                if (contentValue) {
-                    if (contentValue.toString().length > 4) {
-                        console.warn('Badge content should not be longer than 4 characters');
-                    }
-                }
-                if (badgeEnabledButtonTypes.indexOf(this.buttonComponent.getFdType()) === -1) {
-                    console.warn(`Currently the ${JSON.stringify(badgeEnabledButtonTypes)} type of buttons are required for Badge enablement`);
-                }
-            }
+            this.elementRef.nativeElement.textContent = String(this.content() ?? '');
         });
+        // Validation effect only in development mode (zero overhead in production)
+        if (isDevMode()) {
+            effect(() => {
+                this._validateBadge();
+            });
+        }
+    }
+    /**
+     * Validates badge configuration in development mode.
+     * Checks content length and button type compatibility.
+     * @hidden
+     */
+    _validateBadge() {
+        const contentValue = this.content();
+        if (contentValue && contentValue.toString().length > 4) {
+            console.warn('Badge content should not be longer than 4 characters');
+        }
+        if (!badgeEnabledButtonTypes.includes(this.buttonComponent.getFdType())) {
+            console.warn(`Currently the ${JSON.stringify(badgeEnabledButtonTypes)} type of buttons are required for Badge enablement`);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: ButtonBadgeDirective, isStandalone: true, selector: "fd-button-badge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fd-button__badge" }, ngImport: i0 }); }
@@ -201,6 +326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 let buttonId = 0;
+const SPECIAL_BUTTON_TYPES = new Set(['emphasized', 'positive', 'negative', 'attention']);
 /**
  * Button directive, used to enhance standard HTML buttons.
  *
@@ -218,9 +344,9 @@ class ButtonComponent extends BaseButton {
         /** Button ID - default value is provided if not set  */
         this.id = input(`fd-button-${++buttonId}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** @hidden */
-        this.specialButtonType = ['emphasized', 'positive', 'negative', 'attention'];
-        /** @hidden */
         this.elementRef = inject(ElementRef);
+        /** @hidden */
+        this.contentDensityObserver = inject(ContentDensityObserver);
         /**
          * Calculate aria-label attribute
          * @hidden
@@ -229,12 +355,12 @@ class ButtonComponent extends BaseButton {
             if (this.ariaLabel()) {
                 return this.ariaLabel(); // return the input aria-label
             }
-            const attrAriaLabel = this.elementRef.nativeElement.getAttribute('aria-label');
-            if (attrAriaLabel) {
-                return attrAriaLabel; // return the attribute aria-label
+            const nativeLabel = this._nativeAriaLabel();
+            if (nativeLabel) {
+                return nativeLabel; // return the native attribute aria-label
             }
-            if (this.specialButtonType.includes(this.fdTypeState())) {
-                return this.label() ?? this.glyph()?.replace(/-/g, ' ') ?? null;
+            if (SPECIAL_BUTTON_TYPES.has(this.fdTypeState())) {
+                return this.label() ?? this._glyphLabel() ?? null;
             }
             return null;
         }, ...(ngDevMode ? [{ debugName: "buttonArialabel" }] : []));
@@ -246,28 +372,55 @@ class ButtonComponent extends BaseButton {
             if (this.ariaDescription()) {
                 return this.ariaDescription();
             }
-            if (this.specialButtonType.includes(this.fdTypeState())) {
+            if (SPECIAL_BUTTON_TYPES.has(this.fdTypeState())) {
                 return this.fdTypeState();
             }
             return null;
         }, ...(ngDevMode ? [{ debugName: "buttonAriaDescription" }] : []));
-        /** @hidden */
-        this.contentDensityObserver = inject(ContentDensityObserver);
-        /** @hidden
-         * CssClassBuilder interface implementation
-         * function must return single string
-         * function is responsible for order which css classes are applied
+        /**
+         * Computed CSS classes for the button.
+         * Built as a string to avoid array allocation overhead.
+         * @hidden
          */
-        this.cssClass = computed(() => [
-            'fd-button',
-            this.fdTypeState() ? `fd-button--${this.fdTypeState()}` : '',
-            this.fdMenu() ? 'fd-button--menu' : '',
-            this._disabledState() || this.ariaDisabled() ? 'is-disabled' : '',
-            this.toggledState() ? 'fd-button--toggled' : ''
-        ]
-            .filter(Boolean)
-            .join(' '), ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
-        this.contentDensityObserver.subscribe();
+        this.cssClass = computed(() => {
+            let classes = 'fd-button';
+            const type = this.fdTypeState();
+            if (type) {
+                classes += ` fd-button--${type}`;
+            }
+            if (this.fdMenu()) {
+                classes += ' fd-button--menu';
+            }
+            if (this._disabledState() || this.ariaDisabled()) {
+                classes += ' is-disabled';
+            }
+            if (this.toggledState()) {
+                classes += ' fd-button--toggled';
+            }
+            return classes;
+        }, ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
+        /**
+         * Memoized glyph label for aria-label fallback.
+         * Transforms glyph name (e.g., "slim-arrow-down") to readable text (e.g., "slim arrow down").
+         * @hidden
+         */
+        this._glyphLabel = computed(() => {
+            const glyph = this.glyph();
+            return glyph ? glyph.replace(/-/g, ' ') : null;
+        }, ...(ngDevMode ? [{ debugName: "_glyphLabel" }] : []));
+        /**
+         * Native aria-label attribute read from the DOM element.
+         * Captured once after render for use in aria-label computation.
+         * @hidden
+         */
+        this._nativeAriaLabel = signal(null, ...(ngDevMode ? [{ debugName: "_nativeAriaLabel" }] : []));
+        // Read native aria-label attribute once after render
+        afterNextRender(() => {
+            const nativeLabel = this.elementRef.nativeElement.getAttribute('aria-label');
+            if (nativeLabel) {
+                this._nativeAriaLabel.set(nativeLabel);
+            }
+        });
     }
     /** Forces the focus outline around the button, which is not default behavior in Safari. */
     clicked(event) {