@fundamental-ngx/core 0.56.7 → 0.56.9
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.
- package/combobox/combobox.component.d.ts +4 -0
- package/fesm2022/fundamental-ngx-core-combobox.mjs +27 -3
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +39 -26
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/package.json +7 -7
- package/shellbar/shellbar-action/shellbar-action.component.d.ts +21 -13
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, ElementRef, EventEmitter, Output, isDevMode, Directive, ContentChild, ChangeDetectorRef, ContentChildren, computed, DestroyRef, NgModule } from '@angular/core';
|
|
2
|
+
import { ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, input, inject, ElementRef, EventEmitter, Output, isDevMode, Directive, ContentChild, ChangeDetectorRef, ContentChildren, computed, DestroyRef, NgModule } from '@angular/core';
|
|
3
3
|
import { ButtonComponent, FD_BUTTON_COMPONENT, defaultButtonType } from '@fundamental-ngx/core/button';
|
|
4
4
|
import { ContentDensityDirective, contentDensityObserverProviders, ContentDensityMode, ContentDensityModule } from '@fundamental-ngx/core/content-density';
|
|
5
5
|
import { IconComponent, FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
|
|
@@ -102,6 +102,8 @@ const FD_SHELLBAR_COMPONENT = new InjectionToken('FdShellbarComponent');
|
|
|
102
102
|
* [glyph]="action.glyph"
|
|
103
103
|
* [callback]="action.callback"
|
|
104
104
|
* [label]="action.label"
|
|
105
|
+
* [ariaLabel]="action.ariaLabel"
|
|
106
|
+
* [title]="action.title"
|
|
105
107
|
* [notificationCount]="action.notificationCount"
|
|
106
108
|
* [notificationLabel]="action.notificationLabel">
|
|
107
109
|
* </fd-shellbar-action>
|
|
@@ -109,18 +111,39 @@ const FD_SHELLBAR_COMPONENT = new InjectionToken('FdShellbarComponent');
|
|
|
109
111
|
*/
|
|
110
112
|
class ShellbarActionComponent {
|
|
111
113
|
constructor() {
|
|
112
|
-
/**
|
|
113
|
-
this.
|
|
114
|
+
/** Icon name for the button. */
|
|
115
|
+
this.glyph = input();
|
|
116
|
+
/** Icon font family. */
|
|
117
|
+
this.glyphFont = input(FD_DEFAULT_ICON_FONT_FAMILY);
|
|
118
|
+
/** Function to call when the action is clicked. */
|
|
119
|
+
this.callback = input(null);
|
|
120
|
+
/** Accessible label for the action. */
|
|
121
|
+
this.label = input('');
|
|
122
|
+
/** ARIA label for screen readers. */
|
|
123
|
+
this.ariaLabel = input('');
|
|
124
|
+
/** Tooltip text shown on hover. */
|
|
125
|
+
this.title = input('');
|
|
126
|
+
/** ARIA label for the notification badge. */
|
|
127
|
+
this.notificationLabel = input();
|
|
128
|
+
/** Number of notifications to display in badge. */
|
|
129
|
+
this.notificationCount = input();
|
|
114
130
|
/** @hidden */
|
|
115
131
|
this._elRef = inject(ElementRef);
|
|
116
132
|
}
|
|
133
|
+
/** @hidden */
|
|
134
|
+
_handleClick(event) {
|
|
135
|
+
const callbackFn = this.callback();
|
|
136
|
+
if (callbackFn) {
|
|
137
|
+
callbackFn(event);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
117
140
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionComponent, isStandalone: true, selector: "fd-shellbar-action", inputs: { glyph: "glyph", glyphFont: "glyphFont", callback: "callback", label: "label", notificationLabel: "notificationLabel", notificationCount: "notificationCount" }, providers: [
|
|
141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionComponent, isStandalone: true, selector: "fd-shellbar-action", inputs: { glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, notificationLabel: { classPropertyName: "notificationLabel", publicName: "notificationLabel", isSignal: true, isRequired: false, transformFunction: null }, notificationCount: { classPropertyName: "notificationCount", publicName: "notificationCount", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
119
142
|
{
|
|
120
143
|
provide: FD_SHELLBAR_ACTION_COMPONENT,
|
|
121
144
|
useExisting: ShellbarActionComponent
|
|
122
145
|
}
|
|
123
|
-
], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-shellbar__button\"\n fdCozy\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n (click)=\"
|
|
146
|
+
], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-shellbar__button\"\n fdCozy\n [ariaLabel]=\"ariaLabel()\"\n [title]=\"title() || ariaLabel()\"\n [glyph]=\"glyph()\"\n [glyphFont]=\"glyphFont()\"\n (click)=\"_handleClick($event)\"\n >\n @if (notificationCount()) {\n <span class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel()\">\n {{ notificationCount() }}\n </span>\n }\n </button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
124
147
|
}
|
|
125
148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionComponent, decorators: [{
|
|
126
149
|
type: Component,
|
|
@@ -129,20 +152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
129
152
|
provide: FD_SHELLBAR_ACTION_COMPONENT,
|
|
130
153
|
useExisting: ShellbarActionComponent
|
|
131
154
|
}
|
|
132
|
-
], imports: [ButtonComponent, ContentDensityDirective], template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-shellbar__button\"\n fdCozy\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n (click)=\"
|
|
133
|
-
}]
|
|
134
|
-
type: Input
|
|
135
|
-
}], glyphFont: [{
|
|
136
|
-
type: Input
|
|
137
|
-
}], callback: [{
|
|
138
|
-
type: Input
|
|
139
|
-
}], label: [{
|
|
140
|
-
type: Input
|
|
141
|
-
}], notificationLabel: [{
|
|
142
|
-
type: Input
|
|
143
|
-
}], notificationCount: [{
|
|
144
|
-
type: Input
|
|
145
|
-
}] } });
|
|
155
|
+
], imports: [ButtonComponent, ContentDensityDirective], template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n <button\n fd-button\n fdType=\"transparent\"\n class=\"fd-shellbar__button\"\n fdCozy\n [ariaLabel]=\"ariaLabel()\"\n [title]=\"title() || ariaLabel()\"\n [glyph]=\"glyph()\"\n [glyphFont]=\"glyphFont()\"\n (click)=\"_handleClick($event)\"\n >\n @if (notificationCount()) {\n <span class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel()\">\n {{ notificationCount() }}\n </span>\n }\n </button>\n</div>\n" }]
|
|
156
|
+
}] });
|
|
146
157
|
|
|
147
158
|
class ShellbarActionsMobileComponent {
|
|
148
159
|
constructor() {
|
|
@@ -155,21 +166,23 @@ class ShellbarActionsMobileComponent {
|
|
|
155
166
|
}
|
|
156
167
|
/** @hidden */
|
|
157
168
|
actionClicked(item, event) {
|
|
158
|
-
|
|
159
|
-
|
|
169
|
+
const callbackFn = item.callback();
|
|
170
|
+
if (callbackFn) {
|
|
171
|
+
callbackFn(event);
|
|
160
172
|
}
|
|
161
173
|
}
|
|
162
174
|
/** @hidden */
|
|
163
175
|
ngAfterContentChecked() {
|
|
164
176
|
this.totalNotifications = 0;
|
|
165
177
|
this.shellbarActions?.forEach((action) => {
|
|
166
|
-
|
|
167
|
-
|
|
178
|
+
const count = action.notificationCount();
|
|
179
|
+
if (count && typeof count === 'number') {
|
|
180
|
+
this.totalNotifications = this.totalNotifications + count;
|
|
168
181
|
}
|
|
169
182
|
});
|
|
170
183
|
}
|
|
171
184
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionsMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionsMobileComponent, isStandalone: true, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: "shellbarActions", searchExists: "searchExists", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "@if (shellbarActions.length > 0 || searchExists) {\n <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 @if (totalNotifications) {\n <span class=\"fd-button__badge\">\n {{ totalNotifications }}\n </span>\n }\n </button>\n </fd-action-sheet-control>\n <fd-action-sheet-body>\n @if (searchExists) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"search\"\n [label]=\"'coreShellbar.search' | fdTranslate\"\n (click)=\"showSearch.emit(); actionSheet.close()\"\n ></li>\n }\n @for (action of shellbarActions; track action) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n [glyph]=\"action.glyph\"\n [label]=\"action.label\"\n (click)=\"actionClicked(action, $event)\"\n >\n @if (action.notificationCount) {\n <span class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n }\n </li>\n }\n @if (!!assistiveToolsCallback) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"sys-help\"\n [label]=\"'coreShellbar.assistiveTools' | fdTranslate\"\n (click)=\"assistiveToolsCallback($event)\"\n ></li>\n }\n </fd-action-sheet-body>\n </fd-action-sheet>\n </div>\n}\n", dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
185
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionsMobileComponent, isStandalone: true, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: "shellbarActions", searchExists: "searchExists", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "@if (shellbarActions.length > 0 || searchExists) {\n <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 [title]=\"'coreShellbar.collapsedItemMenuLabel' | fdTranslate\"\n >\n @if (totalNotifications) {\n <span class=\"fd-button__badge\">\n {{ totalNotifications }}\n </span>\n }\n </button>\n </fd-action-sheet-control>\n <fd-action-sheet-body>\n @if (searchExists) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"search\"\n [label]=\"'coreShellbar.search' | fdTranslate\"\n (click)=\"showSearch.emit(); actionSheet.close()\"\n ></li>\n }\n @for (action of shellbarActions; track action) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n [glyph]=\"action.glyph() || ''\"\n [label]=\"action.label()\"\n (click)=\"actionClicked(action, $event)\"\n >\n @if (action.notificationCount()) {\n <span class=\"fd-button__badge\">{{ action.notificationCount() }}</span>\n }\n </li>\n }\n @if (!!assistiveToolsCallback) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"sys-help\"\n [label]=\"'coreShellbar.assistiveTools' | fdTranslate\"\n (click)=\"assistiveToolsCallback($event)\"\n ></li>\n }\n </fd-action-sheet-body>\n </fd-action-sheet>\n </div>\n}\n", dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
173
186
|
}
|
|
174
187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionsMobileComponent, decorators: [{
|
|
175
188
|
type: Component,
|
|
@@ -180,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
180
193
|
ActionSheetBodyComponent,
|
|
181
194
|
ButtonComponent,
|
|
182
195
|
FdTranslatePipe
|
|
183
|
-
], template: "@if (shellbarActions.length > 0 || searchExists) {\n <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 @if (totalNotifications) {\n <span class=\"fd-button__badge\">\n {{ totalNotifications }}\n </span>\n }\n </button>\n </fd-action-sheet-control>\n <fd-action-sheet-body>\n @if (searchExists) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"search\"\n [label]=\"'coreShellbar.search' | fdTranslate\"\n (click)=\"showSearch.emit(); actionSheet.close()\"\n ></li>\n }\n @for (action of shellbarActions; track action) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n [glyph]=\"action.glyph\"\n [label]=\"action.label\"\n (click)=\"actionClicked(action, $event)\"\n >\n @if (action.notificationCount) {\n <span class=\"fd-button__badge\">{{ action.notificationCount }}</span>\n }\n </li>\n }\n @if (!!assistiveToolsCallback) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"sys-help\"\n [label]=\"'coreShellbar.assistiveTools' | fdTranslate\"\n (click)=\"assistiveToolsCallback($event)\"\n ></li>\n }\n </fd-action-sheet-body>\n </fd-action-sheet>\n </div>\n}\n" }]
|
|
196
|
+
], template: "@if (shellbarActions.length > 0 || searchExists) {\n <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 [title]=\"'coreShellbar.collapsedItemMenuLabel' | fdTranslate\"\n >\n @if (totalNotifications) {\n <span class=\"fd-button__badge\">\n {{ totalNotifications }}\n </span>\n }\n </button>\n </fd-action-sheet-control>\n <fd-action-sheet-body>\n @if (searchExists) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"search\"\n [label]=\"'coreShellbar.search' | fdTranslate\"\n (click)=\"showSearch.emit(); actionSheet.close()\"\n ></li>\n }\n @for (action of shellbarActions; track action) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n [glyph]=\"action.glyph() || ''\"\n [label]=\"action.label()\"\n (click)=\"actionClicked(action, $event)\"\n >\n @if (action.notificationCount()) {\n <span class=\"fd-button__badge\">{{ action.notificationCount() }}</span>\n }\n </li>\n }\n @if (!!assistiveToolsCallback) {\n <li\n fd-action-sheet-item\n tabindex=\"-1\"\n glyph=\"sys-help\"\n [label]=\"'coreShellbar.assistiveTools' | fdTranslate\"\n (click)=\"assistiveToolsCallback($event)\"\n ></li>\n }\n </fd-action-sheet-body>\n </fd-action-sheet>\n </div>\n}\n" }]
|
|
184
197
|
}], propDecorators: { shellbarActions: [{
|
|
185
198
|
type: Input
|
|
186
199
|
}], searchExists: [{
|
|
@@ -428,7 +441,7 @@ class ShellbarActionsComponent {
|
|
|
428
441
|
}
|
|
429
442
|
}
|
|
430
443
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionsComponent, isStandalone: true, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", assistiveTools: "assistiveTools", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true" } }, 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: "userMenuComponent", first: true, predicate: UserMenuComponent, 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: "@if (comboboxComponent) {\n <div class=\"fd-shellbar__action\">\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@if (_showMobileActions) {\n <div class=\"fd-shellbar__action\">\n <fd-shellbar-actions-mobile\n [shellbarActions]=\"shellbarActions\"\n [searchExists]=\"!!_searchPortal\"\n (showSearch)=\"_toggleSearch()\"\n [assistiveToolsCallback]=\"assistiveToolsCallback\"\n ></fd-shellbar-actions-mobile>\n </div>\n}\n<div class=\"fd-shellbar__action\">\n <ng-content></ng-content>\n</div>\n@if (_addSearchIcon && !showSearch && !_showMobileActions) {\n <fd-shellbar-action glyph=\"search\" [callback]=\"_toggleSearch\"></fd-shellbar-action>\n}\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n@if (userComponent || userItem) {\n @if (!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 } @else {\n <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n }\n}\n@if (userMenuComponent) {\n <div class=\"fd-shellbar__action\">\n <ng-content select=\"fd-user-menu\"></ng-content>\n </div>\n}\n@if (productSwitchComponent) {\n <div class=\"fd-shellbar__action\">\n <ng-content select=\"fd-product-switch\"></ng-content>\n </div>\n}\n@if (assistiveTools && !_showMobileActions) {\n <fd-shellbar-action\n glyph=\"sys-help\"\n label=\"{{ 'coreShellbar.assistiveTools' | fdTranslate }}\"\n [notificationCount]=\"0\"\n notificationLabel=\"{{ 'coreShellbar.assistiveTools' | fdTranslate }}\"\n [callback]=\"assistiveToolsCallback\"\n >\n </fd-shellbar-action>\n}\n", dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "searchExists", "assistiveToolsCallback"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "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"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: ShellbarActionsComponent, isStandalone: true, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", assistiveTools: "assistiveTools", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true" } }, 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: "userMenuComponent", first: true, predicate: UserMenuComponent, 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: "@if (comboboxComponent) {\n <div class=\"fd-shellbar__action\">\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@if (_showMobileActions) {\n <div class=\"fd-shellbar__action\">\n <fd-shellbar-actions-mobile\n [shellbarActions]=\"shellbarActions\"\n [searchExists]=\"!!_searchPortal\"\n (showSearch)=\"_toggleSearch()\"\n [assistiveToolsCallback]=\"assistiveToolsCallback\"\n ></fd-shellbar-actions-mobile>\n </div>\n}\n<div class=\"fd-shellbar__action\">\n <ng-content></ng-content>\n</div>\n@if (_addSearchIcon && !showSearch && !_showMobileActions) {\n <fd-shellbar-action glyph=\"search\" [callback]=\"_toggleSearch\"></fd-shellbar-action>\n}\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n@if (userComponent || userItem) {\n @if (!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 } @else {\n <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n }\n}\n@if (userMenuComponent) {\n <div class=\"fd-shellbar__action\">\n <ng-content select=\"fd-user-menu\"></ng-content>\n </div>\n}\n@if (productSwitchComponent) {\n <div class=\"fd-shellbar__action\">\n <ng-content select=\"fd-product-switch\"></ng-content>\n </div>\n}\n@if (assistiveTools && !_showMobileActions) {\n <fd-shellbar-action\n glyph=\"sys-help\"\n label=\"{{ 'coreShellbar.assistiveTools' | fdTranslate }}\"\n [notificationCount]=\"0\"\n notificationLabel=\"{{ 'coreShellbar.assistiveTools' | fdTranslate }}\"\n [callback]=\"assistiveToolsCallback\"\n >\n </fd-shellbar-action>\n}\n", dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "searchExists", "assistiveToolsCallback"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "ariaLabel", "title", "notificationLabel", "notificationCount"] }, { kind: "component", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
432
445
|
}
|
|
433
446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShellbarActionsComponent, decorators: [{
|
|
434
447
|
type: Component,
|