@fundamental-ngx/core 0.44.1-rc.3 → 0.45.0

package/fesm2022/fundamental-ngx-core-shellbar.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, InjectionToken, ViewEncapsulation, inject, ChangeDetectorRef, ContentChildren, ContentChild, HostBinding, DestroyRef, ElementRef, Directive, forwardRef, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, InjectionToken, ViewEncapsulation, inject, ChangeDetectorRef, ContentChildren, ContentChild, HostBinding, DestroyRef, ElementRef, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@fundamental-ngx/core/action-sheet';
 import { ActionSheetModule } from '@fundamental-ngx/core/action-sheet';
 import * as i2$3 from '@angular/cdk/portal';
 import { CdkPortalOutlet, DomPortal, PortalModule } from '@angular/cdk/portal';
-import { warnOnce, resizeObservable, DragAndDropModule } from '@fundamental-ngx/cdk/utils';
+import { resizeObservable, DragAndDropModule } from '@fundamental-ngx/cdk/utils';
 import * as i3 from '@fundamental-ngx/core/button';
 import { FD_BUTTON_COMPONENT, ButtonModule } from '@fundamental-ngx/core/button';
 import { FD_COMBOBOX_COMPONENT } from '@fundamental-ngx/core/combobox';
 import * as i2$2 from '@fundamental-ngx/core/content-density';
-import { contentDensityObserverProviders, ContentDensityMode, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
+import { contentDensityObserverProviders, ContentDensityMode, ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import equal from 'fast-deep-equal';
 import { BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
 import { FD_PRODUCT_SWITCH_COMPONENT, ProductSwitchModule } from '@fundamental-ngx/core/product-switch';
@@ -60,7 +60,7 @@ class ShellbarUserMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: { user: "user", userMenu: "userMenu", fillControlMode: "fillControlMode", placement: "placement", triggers: "triggers", closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", disabled: "disabled", noArrow: "noArrow" }, outputs: { itemClicked: "itemClicked" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--show-always\" *ngIf=\"user\">\n    <div class=\"fd-user-menu\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            class=\"fd-shellbar__button fd-shellbar__button--user-menu\"\n            [disabled]=\"disabled\"\n            [fdMenuTrigger]=\"menu\"\n        >\n            <fd-avatar\n                size=\"xs\"\n                *ngIf=\"!user.image\"\n                [colorAccent]=\"user.colorAccent\"\n                [circle]=\"true\"\n                label=\"{{ user.fullName }}\"\n            >\n            </fd-avatar>\n\n            <fd-avatar\n                [colorAccent]=\"user.colorAccent\"\n                [circle]=\"true\"\n                size=\"xs\"\n                *ngIf=\"user.image\"\n                image=\"{{ user.image }}\"\n            ></fd-avatar>\n        </button>\n\n        <fd-menu\n            #menu\n            [triggers]=\"triggers\"\n            [placement]=\"placement\"\n            [fillControlMode]=\"fillControlMode\"\n            [closeOnEscapeKey]=\"closeOnEscapeKey\"\n            [noArrow]=\"noArrow\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        >\n            <li fd-menu-item *ngFor=\"let item of userMenu\" (click)=\"itemClick(item, $event)\">\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ item.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: { user: "user", userMenu: "userMenu", fillControlMode: "fillControlMode", placement: "placement", triggers: "triggers", closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", disabled: "disabled", noArrow: "noArrow" }, outputs: { itemClicked: "itemClicked" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--show-always\" *ngIf=\"user\">\n    <div class=\"fd-user-menu\">\n        <button\n            fd-button\n            fdType=\"transparent\"\n            class=\"fd-shellbar__button fd-shellbar__button--user-menu\"\n            [disabled]=\"disabled\"\n            [fdMenuTrigger]=\"menu\"\n        >\n            <fd-avatar\n                size=\"xs\"\n                *ngIf=\"!user.image\"\n                [colorAccent]=\"user.colorAccent\"\n                [circle]=\"true\"\n                label=\"{{ user.fullName }}\"\n            >\n            </fd-avatar>\n\n            <fd-avatar\n                [colorAccent]=\"user.colorAccent\"\n                [circle]=\"true\"\n                size=\"xs\"\n                *ngIf=\"user.image\"\n                image=\"{{ user.image }}\"\n            ></fd-avatar>\n        </button>\n\n        <fd-menu\n            #menu\n            [triggers]=\"triggers\"\n            [placement]=\"placement\"\n            [fillControlMode]=\"fillControlMode\"\n            [closeOnEscapeKey]=\"closeOnEscapeKey\"\n            [noArrow]=\"noArrow\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        >\n            <li fd-menu-item *ngFor=\"let item of userMenu\" (click)=\"itemClick(item, $event)\">\n                <div fd-menu-interactive>\n                    <span fd-menu-title>{{ item.text }}</span>\n                </div>\n            </li>\n        </fd-menu>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarUserMenuComponent, decorators: [{
             type: Component,
@@ -120,15 +120,13 @@ class ShellbarActionsMobileComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarActionsMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: "shellbarActions", collapsedItemMenuLabel: "collapsedItemMenuLabel", searchExists: "searchExists" }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "<div class=\"fd-shellbar-collapse\">\n    <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n        <fd-action-sheet-control>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                class=\"fd-shellbar__button\"\n                [attr.aria-label]=\"collapsedItemMenuLabel || ('coreShellbar.collapsedItemMenuLabel' | fdTranslate)\"\n            >\n                <span *ngIf=\"totalNotifications\" class=\"fd-button__badge\">\n                    {{ totalNotifications }}\n                </span>\n            </button>\n        </fd-action-sheet-control>\n\n        <fd-action-sheet-body>\n            <li\n                fd-action-sheet-item\n                *ngIf=\"searchExists\"\n                tabindex=\"-1\"\n                [glyph]=\"'search'\"\n                [label]=\"'coreShellbar.search' | fdTranslate\"\n                (click)=\"showSearch.emit(); actionSheet.close()\"\n            ></li>\n            <li\n                fd-action-sheet-item\n                *ngFor=\"let action of shellbarActions\"\n                tabindex=\"-1\"\n                [glyph]=\"action.glyph\"\n                [label]=\"action.label\"\n                (click)=\"actionClicked(action, $event)\"\n            >\n                <span *ngIf=\"action.notificationCount\" class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n            </li>\n        </fd-action-sheet-body>\n    </fd-action-sheet>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$1.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$1.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$1.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: i4$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: "shellbarActions", searchExists: "searchExists" }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "<div class=\"fd-shellbar-collapse\">\n    <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n        <fd-action-sheet-control>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                class=\"fd-shellbar__button\"\n                [attr.aria-label]=\"'coreShellbar.collapsedItemMenuLabel' | fdTranslate\"\n            >\n                <span *ngIf=\"totalNotifications\" class=\"fd-button__badge\">\n                    {{ totalNotifications }}\n                </span>\n            </button>\n        </fd-action-sheet-control>\n\n        <fd-action-sheet-body>\n            <li\n                fd-action-sheet-item\n                *ngIf=\"searchExists\"\n                tabindex=\"-1\"\n                [glyph]=\"'search'\"\n                [label]=\"'coreShellbar.search' | fdTranslate\"\n                (click)=\"showSearch.emit(); actionSheet.close()\"\n            ></li>\n            <li\n                fd-action-sheet-item\n                *ngFor=\"let action of shellbarActions\"\n                tabindex=\"-1\"\n                [glyph]=\"action.glyph\"\n                [label]=\"action.label\"\n                (click)=\"actionClicked(action, $event)\"\n            >\n                <span *ngIf=\"action.notificationCount\" class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n            </li>\n        </fd-action-sheet-body>\n    </fd-action-sheet>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$1.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$1.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$1.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: i4$1.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarActionsMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-shellbar-actions-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fd-shellbar-collapse\">\n    <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n        <fd-action-sheet-control>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                class=\"fd-shellbar__button\"\n                [attr.aria-label]=\"collapsedItemMenuLabel || ('coreShellbar.collapsedItemMenuLabel' | fdTranslate)\"\n            >\n                <span *ngIf=\"totalNotifications\" class=\"fd-button__badge\">\n                    {{ totalNotifications }}\n                </span>\n            </button>\n        </fd-action-sheet-control>\n\n        <fd-action-sheet-body>\n            <li\n                fd-action-sheet-item\n                *ngIf=\"searchExists\"\n                tabindex=\"-1\"\n                [glyph]=\"'search'\"\n                [label]=\"'coreShellbar.search' | fdTranslate\"\n                (click)=\"showSearch.emit(); actionSheet.close()\"\n            ></li>\n            <li\n                fd-action-sheet-item\n                *ngFor=\"let action of shellbarActions\"\n                tabindex=\"-1\"\n                [glyph]=\"action.glyph\"\n                [label]=\"action.label\"\n                (click)=\"actionClicked(action, $event)\"\n            >\n                <span *ngIf=\"action.notificationCount\" class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n            </li>\n        </fd-action-sheet-body>\n    </fd-action-sheet>\n</div>\n" }]
+            args: [{ selector: 'fd-shellbar-actions-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fd-shellbar-collapse\">\n    <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n        <fd-action-sheet-control>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                class=\"fd-shellbar__button\"\n                [attr.aria-label]=\"'coreShellbar.collapsedItemMenuLabel' | fdTranslate\"\n            >\n                <span *ngIf=\"totalNotifications\" class=\"fd-button__badge\">\n                    {{ totalNotifications }}\n                </span>\n            </button>\n        </fd-action-sheet-control>\n\n        <fd-action-sheet-body>\n            <li\n                fd-action-sheet-item\n                *ngIf=\"searchExists\"\n                tabindex=\"-1\"\n                [glyph]=\"'search'\"\n                [label]=\"'coreShellbar.search' | fdTranslate\"\n                (click)=\"showSearch.emit(); actionSheet.close()\"\n            ></li>\n            <li\n                fd-action-sheet-item\n                *ngFor=\"let action of shellbarActions\"\n                tabindex=\"-1\"\n                [glyph]=\"action.glyph\"\n                [label]=\"action.label\"\n                (click)=\"actionClicked(action, $event)\"\n            >\n                <span *ngIf=\"action.notificationCount\" class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n            </li>\n        </fd-action-sheet-body>\n    </fd-action-sheet>\n</div>\n" }]
         }], propDecorators: { shellbarActions: [{
                 type: Input
-            }], collapsedItemMenuLabel: [{
-                type: Input
             }], searchExists: [{
                 type: Input
             }], showSearch: [{
@@ -220,17 +218,6 @@ class ShellbarActionsComponent {
             this._setSearchVisibility(!this.showSearch);
         };
     }
-    /**
-     * @deprecated use i18n capabilities instead
-     * Label for the collapsed item menu.
-     */
-    set collapsedItemMenuLabel(value) {
-        warnOnce("Property collapsedItemMenuLabel is deprecated. Use i18n capabilities 'coreShellbar.collapsedItemMenuLabel' key instead.");
-        this._collapsedItemMenuLabel = value;
-    }
-    get collapsedItemMenuLabel() {
-        return this._collapsedItemMenuLabel;
-    }
     /** @hidden */
     get _groupShrink() {
         return !!this._shellbar?.groupFlex?.actions?.shrink;
@@ -301,22 +288,20 @@ class ShellbarActionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", collapsedItemMenuLabel: "collapsedItemMenuLabel" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true", "class.fd-shellbar__group--shrink": "this._groupShrink", "class.fd-shellbar__group--basis-auto": "this._groupBasisAuto" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [collapsedItemMenuLabel]=\"collapsedItemMenuLabel\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "collapsedItemMenuLabel", "searchExists"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true", "class.fd-shellbar__group--shrink": "this._groupShrink", "class.fd-shellbar__group--basis-auto": "this._groupBasisAuto" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "searchExists"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-actions', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.fd-shellbar__group]': 'true',
                         '[class.fd-shellbar__group--actions]': 'true'
-                    }, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [collapsedItemMenuLabel]=\"collapsedItemMenuLabel\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n" }]
+                    }, template: "<div *ngIf=\"comboboxComponent\" class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content select=\"fd-combobox\"></ng-content>\n</div>\n\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--mobile\">\n    <fd-shellbar-actions-mobile\n        [shellbarActions]=\"shellbarActions\"\n        [searchExists]=\"!!_searchPortal\"\n        (showSearch)=\"_toggleSearch()\"\n    ></fd-shellbar-actions-mobile>\n</div>\n\n<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <ng-content></ng-content>\n</div>\n\n<fd-shellbar-action\n    *ngIf=\"_addSearchIcon && !showSearch\"\n    glyph=\"search\"\n    [callback]=\"_toggleSearch\"\n></fd-shellbar-action>\n\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n\n<ng-container *ngIf=\"userItem\">\n    <ng-container *ngIf=\"!userComponent\">\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    </ng-container>\n\n    <ng-container *ngIf=\"userComponent\">\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    </ng-container>\n</ng-container>\n\n<div *ngIf=\"productSwitchComponent\" class=\"fd-shellbar__action\">\n    <ng-content select=\"fd-product-switch\"></ng-content>\n</div>\n" }]
         }], propDecorators: { user: [{
                 type: Input
             }], userMenu: [{
                 type: Input
             }], closePopoverOnSelect: [{
                 type: Input
-            }], collapsedItemMenuLabel: [{
-                type: Input
             }], searchOpen: [{
                 type: Output
             }], shellbarActions: [{
@@ -757,33 +742,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }] });
 
-class DeprecatedShellbarCompactDirective extends DeprecatedCompactDirective {
-    /** @hidden */
-    constructor() {
-        super('fd-shellbar-user-menu');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedShellbarCompactDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DeprecatedShellbarCompactDirective, selector: "fd-shellbar-user-menu[compact]", providers: [
-            {
-                provide: CONTENT_DENSITY_DIRECTIVE,
-                useExisting: forwardRef(() => DeprecatedShellbarCompactDirective)
-            }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedShellbarCompactDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'fd-shellbar-user-menu[compact]',
-                    providers: [
-                        {
-                            provide: CONTENT_DENSITY_DIRECTIVE,
-                            useExisting: forwardRef(() => DeprecatedShellbarCompactDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class ShellbarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: ShellbarModule, declarations: [ShellbarComponent,
@@ -795,8 +753,7 @@ class ShellbarModule {
             ShellbarLogoComponent,
             ShellbarTitleComponent,
             ShellbarUserMenuComponent,
-            ShellbarSidenavDirective,
-            DeprecatedShellbarCompactDirective], imports: [CommonModule,
+            ShellbarSidenavDirective], imports: [CommonModule,
             PopoverModule,
             MenuModule,
             ActionSheetModule,
@@ -819,7 +776,6 @@ class ShellbarModule {
             ShellbarTitleComponent,
             ShellbarUserMenuComponent,
             ShellbarSidenavDirective,
-            DeprecatedShellbarCompactDirective,
             ContentDensityModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ShellbarModule, imports: [CommonModule,
             PopoverModule,
@@ -849,8 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         ShellbarLogoComponent,
                         ShellbarTitleComponent,
                         ShellbarUserMenuComponent,
-                        ShellbarSidenavDirective,
-                        DeprecatedShellbarCompactDirective
+                        ShellbarSidenavDirective
                     ],
                     imports: [
                         CommonModule,
@@ -879,7 +834,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         ShellbarTitleComponent,
                         ShellbarUserMenuComponent,
                         ShellbarSidenavDirective,
-                        DeprecatedShellbarCompactDirective,
                         ContentDensityModule
                     ]
                 }]
@@ -889,5 +843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DeprecatedShellbarCompactDirective, FD_SHELLBAR_ACTION_COMPONENT, FD_SHELLBAR_COMPONENT, FD_SHELLBAR_SEARCH_COMPONENT, FD_SHELLBAR_SEARCH_CONFIG, ProductMenuComponent, ShellbarActionComponent, ShellbarActionsComponent, ShellbarActionsMobileComponent, ShellbarComponent, ShellbarLogoComponent, ShellbarModule, ShellbarSidenavDirective, ShellbarSubtitleComponent, ShellbarTitleComponent, ShellbarUserMenuComponent };
+export { FD_SHELLBAR_ACTION_COMPONENT, FD_SHELLBAR_COMPONENT, FD_SHELLBAR_SEARCH_COMPONENT, FD_SHELLBAR_SEARCH_CONFIG, ProductMenuComponent, ShellbarActionComponent, ShellbarActionsComponent, ShellbarActionsMobileComponent, ShellbarComponent, ShellbarLogoComponent, ShellbarModule, ShellbarSidenavDirective, ShellbarSubtitleComponent, ShellbarTitleComponent, ShellbarUserMenuComponent };
 //# sourceMappingURL=fundamental-ngx-core-shellbar.mjs.map