SiLaunchpadFactoryComponent documentation¶

selector

si-launchpad-factory

Input Properties¶

Name	Type	Default	Description
apps ¶	(`App`[] \| `AppCategory`[])		All app items shown in the launchpad.
closeText ¶	`TranslatableString`	$localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`	Text to close the launchpad. Needed for a11y.
enableFavorites ¶	`boolean`	`false`	Allow the user to select favorite apps which will then be displayed at the top.
favoriteAppsText ¶	`TranslatableString`	$localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`	Title of the favorite apps section.
showMoreAppsText ¶	`TranslatableString`	$localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`	Title of the show more apps button.
subtitleText ¶	`TranslatableString`		Subtitle of the launchpad. When not provided, no subtitle is displayed.
titleText ¶	`TranslatableString`	$localize`:@@SI_LAUNCHPAD.TITLE:Switch app`	Title of the launchpad.
showLessAppsText ¶	`unknown`		Deprecated: This input no longer has an effect. showMoreAppsText is shown in all cases.

Output Properties¶

Name	Type	Description
favoriteChange ¶	`FavoriteChangeEvent`

Types Documentation¶

App (`AppLink` \| `AppRouterLink`)¶ Type alias

AppCategory

¶

Interface

Represents a categories in the launchpad.

Properties
The apps to show under this category. apps: `App`[]¶
The name of the app category. name?: `TranslatableString`¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

FavoriteChangeEvent

¶

Interface

Properties
app: `App`¶
favorite: `boolean`¶

AppLink

extends AppBase¶

Interface

Represents an app to be shown in the launchpad.

Properties
Whether the app is the currently running app. active?: `boolean`¶
Whether the app should be marked as external. external?: `boolean` from `external`¶
Whether the app is marked as favorite. favorite?: `boolean` from `favorite`¶
URL destination of the app. href: `string`¶
CSS class to apply, which should render the icon. Typically, "element-*". iconClass?: `string` from `iconClass`¶
Icon of the app. iconUrl?: `string` from `iconUrl`¶
Name of the app name: `TranslatableString` from `name`¶
Name of the related system. systemName?: `TranslatableString` from `systemName`¶
Value for the anchor target attribute. target?: `string`¶
The type of the app. can be either 'link' or 'router-link' type?: `"link"`¶

AppRouterLink

extends AppBase¶

Interface

Properties
Active match options for routerLinkActive https://angular.dev/api/router/IsActiveMatchOptions . activeMatchOptions?: (`IsActiveMatchOptions` \| { exact: `boolean` })¶
Whether the app should be marked as external. external?: `boolean` from `external`¶
Navigation extras that are passed to the https://angular.dev/api/router/NavigationExtras . extras?: `NavigationExtras`¶
Whether the app is marked as favorite. favorite?: `boolean` from `favorite`¶
CSS class to apply, which should render the icon. Typically, "element-*". iconClass?: `string` from `iconClass`¶
Icon of the app. iconUrl?: `string` from `iconUrl`¶
Name of the app name: `TranslatableString` from `name`¶
Link for the angular router. Accepts the same values as https://angular.dev/api/router/RouterLink . routerLink: (`string` \| `any`[])¶
Name of the related system. systemName?: `TranslatableString` from `systemName`¶
type: `"router-link"`¶

AppBase

¶

Interface

Properties
Whether the app should be marked as external. external?: `boolean`¶
Whether the app is marked as favorite. favorite?: `boolean`¶
CSS class to apply, which should render the icon. Typically, "element-*". iconClass?: `string`¶
Icon of the app. iconUrl?: `string`¶
Name of the app name: `TranslatableString`¶
Name of the related system. systemName?: `TranslatableString`¶

HeaderWithDropdowns

¶

Interface

Properties
Whether the dropdown should be opened inline. inlineDropdown: `Signal`<`boolean`>¶
The position of the dropdown if opened in an overlay. overlayPosition?: `ConnectedPosition`[]¶

Methods

dropdownClosed

(trigger: SiHeaderDropdownTriggerDirective) => void¶

Called whenever a dropdown is close *

Parameters
trigger: `SiHeaderDropdownTriggerDirective`¶

dropdownOpened

(trigger: SiHeaderDropdownTriggerDirective) => void¶

Called whenever a dropdown is opened *

Parameters
trigger: `SiHeaderDropdownTriggerDirective`¶

Called whenever an item is triggered that is not opening another dropdown.
onDropdownItemTriggered: () => void¶

SiApplicationHeaderComponent

implements HeaderWithDropdowns, OnDestroy¶

Class

▶

Root component for the application header.

Constructor
() => `{}`¶

Properties
breakpointObserver: `BreakpointObserver` = ...¶
closeMobileMenus: `Subject`<`void`> = ...¶
closeMobileSub: `Subscription` = ...¶
Defines the minimum breakpoint which must be matched to expand the header / switch to desktop mode. expandBreakpoint: `InputSignal`<(`"never"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`)> = `'sm'`¶
focusTrap: `Signal`<`CdkTrapFocus`> = ...¶
hasNavigation: `WritableSignal`<`boolean`> = ...¶
icons: `Record`<(`"elementThumbnails"` \| `"elementMenu"`), `string`> = ...¶
id: `string` = ...¶
injector: `Injector` = ...¶
inlineDropdown: `Signal`<`boolean`> implements `inlineDropdown` = ...¶
Template reference for the launchpad content rendered inside the header. launchpad: `InputSignal`<(`TemplateRef`<`void`> \| `undefined`)> = ...¶
Accessible label for the launchpad toggle button. launchpadLabel: `InputSignal`<`TranslatableString`> = $localize`:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`¶
launchpadOpen: `WritableSignal`<`boolean`> = ...¶
mobileNavigationExpanded: `WritableSignal`<`boolean`> = ...¶
navigationToggle: `Signal`<(`ElementRef`<`HTMLDivElement`> \| `undefined`)> = ...¶
openDropdown?: `SiHeaderDropdownTriggerDirective`¶
openDropdownCount: `WritableSignal`<`number`> = ...¶
toggleNavigation: `TranslatableString` = ...¶
idCounter: `number` = `0`¶

Methods

backdropClicked: () => void¶

closeLaunchpad: () => void¶

closeMobileNavigation: () => void¶

dropdownClosed

(trigger: SiHeaderDropdownTriggerDirective) => void from dropdownClosed¶

Parameters
trigger?: `SiHeaderDropdownTriggerDirective`¶

dropdownOpened

(trigger: SiHeaderDropdownTriggerDirective) => void from dropdownOpened¶

Parameters
trigger?: `SiHeaderDropdownTriggerDirective`¶

navigationEscapePressed: () => void¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

onDropdownItemTriggered: () => void from onDropdownItemTriggered¶

openLaunchpad: () => void¶

openMobileNavigation: () => void¶

toggleLaunchpad: () => void¶

toggleMobileNavigationExpanded: () => void¶

CdkTrapFocus

implements OnDestroy, AfterContentInit, OnChanges, DoCheck¶

Class

▶

Directive for trapping focus within a region.

Constructor
() => `{}`¶

Properties
_captureFocus: `any`¶
_elementRef: `any`¶
_focusTrapFactory: `any`¶
Previously focused element to restore focus to upon destroy when using autoCapture. _previouslyFocusedElement: `any`¶
Whether the directive should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction. autoCapture: `boolean`¶
Underlying FocusTrap instance. focusTrap: `FocusTrap`¶
ngAcceptInputType_autoCapture: `unknown`¶
ngAcceptInputType_enabled: `unknown`¶

Accessors
Whether the focus trap is active. get enabled: `boolean`¶
set enabled: (value: `boolean`)¶

Methods

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit¶

A callback method that performs change-detection, invoked after the default change-detector has checked the directive's input bindings in the parent template. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck¶

ngOnChanges

(changes: { autoCapture: SimpleChange<boolean>, enabled: SimpleChange<boolean>, focusTrap: SimpleChange<FocusTrap>, ngAfterContentInit: SimpleChange<() => void>, ngDoCheck: SimpleChange<() => void>, ngOnChanges: SimpleChange<(changes:

{ focusTrap?: SimpleChange<FocusTrap> | undefined; enabled?: SimpleChange<boolean> | undefined; autoCapture?: SimpleChange<boolean> | undefined; ngOnDestroy?: SimpleChange<...> | undefined; ngAfterContentInit?: SimpleChange<...> | undefined; ngDoCheck?: SimpleChange<...> | undefined; ngOnChanges?: SimpleChange<...> ...

) => void>, ngOnDestroy: SimpleChange<() => void> }) => void from OnChanges.ngOnChanges¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters

The changed properties.
changes: { autoCapture: SimpleChange<boolean>, enabled: SimpleChange<boolean>, focusTrap: SimpleChange<FocusTrap>, ngAfterContentInit: SimpleChange<() => void>, ngDoCheck: SimpleChange<() => void>, ngOnChanges: SimpleChange<(changes:

{ focusTrap?: SimpleChange<FocusTrap> | undefined; enabled?: SimpleChange<boolean> | undefined; autoCapture?: SimpleChange<boolean> | undefined; ngOnDestroy?: SimpleChange<...> | undefined; ngAfterContentInit?: SimpleChange<...> | undefined; ngDoCheck?: SimpleChange<...> | undefined; ngOnChanges?: SimpleChange<...> ...

) => void>, ngOnDestroy: SimpleChange<() => void> }¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

SiHeaderDropdownTriggerDirective

implements OnChanges, OnInit, OnDestroy¶

Class

▶

Trigger to open dropdowns in a navbar. A dropdown will always be attached to the view, even if not visible.

If a dropdown is opened in desktop mode, it will be reattached to an overlay while being opened.

Constructor
() => `{}`¶

Properties
_isOpen: `boolean` = `false`¶
ariaControls: `string` = ...¶
destroying: `boolean` = `false`¶
Template rendered inside the dropdown. dropdown: `InputSignal`<`TemplateRef`<`unknown`>> = ...¶
dropdownClose: `Subject`<`void`> = ...¶
Context data passed to the dropdown template. dropdownData: `InputSignal`<`unknown`> = ...¶
elementRef: `ElementRef`<`HTMLElement`> = ...¶
headerAnchorComponentRef?: `ComponentRef`<`SiHeaderAnchorComponent`>¶
id: `string` = ...¶
injector: `DestroyableInjector` = ...¶
Whether the dropdown is opened inline (mobile) instead of in an overlay (desktop). Inline dropdowns are simple disclosure groups, while overlay dropdowns are dialogs. inline: `Signal`<`boolean`> = ...¶
level: `number` = ...¶
navbar: (`HeaderWithDropdowns` \| `null`) = ...¶
Emits whenever a dropdown is opened or closed. openChange: `OutputEmitterRef`<`boolean`> = ...¶
Child triggers will set themselves here if they are open. openSubmenu?: `SiHeaderDropdownTriggerDirective`¶
overlay: `Overlay` = ...¶
overlayRef?: `OverlayRef`¶
parent: (`SiHeaderDropdownTriggerDirective` \| `null`) = ...¶
portal?: `TemplatePortal`<`unknown`>¶
viewContainerRef: `ViewContainerRef` = ...¶
viewRef?: `EmbeddedViewRef`<`unknown`>¶
idCounter: `number` = `0`¶

Accessors
Whether the dropdown is currently open. get isOpen: `boolean`¶
get isOverlay: `boolean`¶

Methods

attachDropdownInline: () => void¶

attachDropdownOverlay: () => void¶

click: () => void¶

close

(options: { all: boolean }) => void¶

Closes the dropdown.

Parameters
options?: { all: `boolean` }¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
ngOnChanges: () => void from OnChanges.ngOnChanges¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit¶

Opens the dropdown.
open: () => void¶

Except where otherwise noted, content on this site is licensed under MIT License.