import * as _angular_cdk_portal from '@angular/cdk/portal'; import { ComponentType, ComponentPortal } from '@angular/cdk/portal'; import * as i0 from '@angular/core'; import { InjectionToken, Signal, TemplateRef, Injector, Type, EnvironmentProviders, WritableSignal, Provider, ViewContainerRef, ComponentRef, AbstractType, ElementRef, StaticProvider, PipeTransform } from '@angular/core'; import { MicrofrontendPlatformConfig } from '@scion/microfrontend-platform'; import * as _angular_router from '@angular/router'; import { UrlSegment, NavigationExtras, ActivatedRoute, CanMatchFn } from '@angular/router'; import { Observable, BehaviorSubject } from 'rxjs'; import * as _scion_workbench from '@scion/workbench'; /** * Set of log levels to control logging output. */ declare enum LogLevel { DEBUG = 0, INFO = 1, WARN = 2, ERROR = 3 } /** * Provides information about a message to be logged. */ interface LogEvent { /** * Severity of the message. */ level: LogLevel; /** * Name of the logger used to log the message. */ logger: string; /** * Supplies the message. */ messageSupplier: () => string; /** * Arguments as passed to the logger. */ args: any[]; } /** * Delivers log events to a destination, e.g., writing logs to the console. */ declare abstract class LogAppender { /** * Each message to be logged is passed to this method in the form of a {@link LogEvent} object. */ abstract onLogMessage(event: LogEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Logger name to be used to log a message. * * Pass an instance of this class as the first argument to the logger when logging a message. */ declare class LoggerName { private readonly _value; constructor(_value: string); toString(): string; } /** * Logger used by the workbench to log messages. * * Log messages are passed to registered log appenders in the form of log events for delivery to a destination. * * When configuring the workbench, you can register one or more log appenders and specify the minimum severity * level a message must have in order to be logged. At runtime, you can change the minimum required log level * by setting the `loglevel` query parameter. For example, to log messages with debug severity or higher, set * the query parameters as follows: `loglevel=debug`. * * By default, if not registering a log appender, the workbench registers a console log appender. The default * minimal required log level is set to {@link LogLevel#INFO}. * * @see {@link LogAppender} */ declare abstract class Logger { /** * Log level of the workbench logger. */ abstract readonly logLevel: LogLevel; /** * Logs a message with debug severity. * * For messages that are expensive to compose, you can provide a message supplier function. * The logger will call this function only if at least `DEBUG` log level is enabled. * * Optionally, you can pass the logger name as the first argument in the `args` list. The log message * will then be prefixed with that logger name. Logger names must be instances of {@link LoggerName}. */ abstract debug(message: string | (() => string), ...args: any[]): void; abstract debug(message: string | (() => string), loggerName: LoggerName, ...args: any[]): void; /** * Logs a message with info severity. * * For messages that are expensive to compose, you can provide a message supplier function. * The logger will call this function only if at least `INFO` log level is enabled. * * Optionally, you can pass the logger name as the first argument in the `args` list. The log message * will then be prefixed with that logger name. Logger names must be instances of {@link LoggerName}. */ abstract info(message: string | (() => string), ...args: any[]): void; abstract info(message: string | (() => string), loggerName: LoggerName, ...args: any[]): void; /** * Logs a message with warn severity. * * For messages that are expensive to compose, you can provide a message supplier function. * The logger will call this function only if at least `WARN` log level is enabled. * * Optionally, you can pass the logger name as the first argument in the `args` list. The log message * will then be prefixed with that logger name. Logger names must be instances of {@link LoggerName}. */ abstract warn(message: string | (() => string), ...args: any[]): void; abstract warn(message: string | (() => string), loggerName: LoggerName, ...args: any[]): void; /** * Logs a message with error severity. * * For messages that are expensive to compose, you can provide a message supplier function. * The logger will call this function only if at least `ERROR` log level is enabled. * * Optionally, you can pass the logger name as the first argument in the `args` list. The log message * will then be prefixed with that logger name. Logger names must be instances of {@link LoggerName}. */ abstract error(message: string | (() => string), ...args: any[]): void; abstract error(message: string | (() => string), loggerName: LoggerName, ...args: any[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Allows loading the configuration for the SCION Microfrontend Platform asynchronously, e.g., over the network or from a JSON file. */ declare abstract class MicrofrontendPlatformConfigLoader { /** * Loads the platform configuration asynchronously. */ abstract load(): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents the id prefix of parts. * * @see PartId */ declare const PART_ID_PREFIX = "part."; /** * Represents the id prefix of views. * * @see ViewId */ declare const VIEW_ID_PREFIX = "view."; /** * Represents the id prefix of activities. */ declare const ACTIVITY_ID_PREFIX = "activity."; /** * Represents the id prefix of popups. */ declare const POPUP_ID_PREFIX = "popup."; /** * Represents the id prefix of dialogs. */ declare const DIALOG_ID_PREFIX = "dialog."; /** * Represents the id prefix of message boxes. */ declare const MESSAGE_BOX_ID_PREFIX = "messagebox."; /** * Format of a part outlet name. */ type PartOutlet = `${typeof PART_ID_PREFIX}${string}`; /** * Format of a view outlet name. */ type ViewOutlet = `${typeof VIEW_ID_PREFIX}${number}`; /** * Format of a popup outlet name. */ type PopupOutlet = `${typeof POPUP_ID_PREFIX}${string}`; /** * Format of a dialog outlet name. */ type DialogOutlet = `${typeof DIALOG_ID_PREFIX}${string}`; /** * Format of a messagebox outlet name. */ type MessageBoxOutlet = `${typeof MESSAGE_BOX_ID_PREFIX}${string}`; /** * Union of workbench outlets. */ type WorkbenchOutlet = PartOutlet | ViewOutlet | PopupOutlet | DialogOutlet | MessageBoxOutlet; /** * Defines the context in which a viewtab is rendered. * * - `tab`: if rendered as view tab in the tabbar * - `list-item`: if rendered as list item in the view list menu * - `drag-image`: if rendered as drag image while dragging a view tab */ type ViewTabRenderingContext = 'tab' | 'list-item' | 'drag-image'; /** * DI token to inject the context in which the view tab is rendered. */ declare const VIEW_TAB_RENDERING_CONTEXT: InjectionToken; /** * A part is a visual workbench element to create the workbench layout. Parts can be docked to the side or * positioned relative to each other. A part can be a stack of views or display content. * * The part component can inject this handle to interact with the part. * * @see WorkbenchView */ declare abstract class WorkbenchPart { /** * Unique identity of this part. */ abstract readonly id: PartId; /** * Alternative identity of this part. * * A part can have an alternative id, a meaningful but not necessarily unique name. A part can * be identified either by its unique or alternative id. * * @see id */ abstract readonly alternativeId: string | undefined; /** * Title displayed in the part bar. * * Note that the title of the top-leftmost part of a docked part cannot be changed. */ abstract get title(): Signal; abstract set title(title: string | undefined); /** * Indicates whether this part is located in the workbench main area. */ abstract readonly isInMainArea: boolean; /** * Indicates whether this part is located in the workbench peripheral area. */ abstract readonly peripheral: Signal; /** * Indicates whether this part is the top-leftmost part. */ abstract readonly topLeft: Signal; /** * Indicates whether this part is the top-rightmost part. */ abstract readonly topRight: Signal; /** * Indicates whether this part is active or inactive. */ abstract readonly active: Signal; /** * Identifies the active view, or `null` if none. */ abstract readonly activeViewId: Signal; /** * Identifies views opened in this part. */ abstract readonly viewIds: Signal; /** * Actions associated with this part. */ abstract readonly actions: Signal; /** * Specifies CSS class(es) to add to the part, e.g., to locate the part in tests. */ abstract get cssClass(): Signal; abstract set cssClass(cssClass: string | string[]); /** * Provides navigation details of this part. * * A part can be navigated to display content when its view stack is empty. * A navigated part can still have views but won't display navigated content unless its view stack is empty. * * A part can be navigated using {@link WorkbenchLayout#navigatePart}. */ abstract readonly navigation: Signal; } /** * Format of a part identifier. * * Each part is assigned a unique identifier (e.g., `part.9fdf7ab4`, `part.c6485225`, etc.). * A part can also have an alternative id, a meaningful but not necessarily unique name. A part can * be identified either by its unique or alternative id. */ type PartId = PartOutlet; /** * Provides navigation details of a workbench part. */ interface WorkbenchPartNavigation { /** * Path of this part. */ path: UrlSegment[]; /** * Hint passed to the navigation. */ hint?: string; /** * Data passed to the navigation. */ data?: NavigationData; /** * State passed to the navigation. */ state?: NavigationState; } /** * The signature of a function to confirm closing a view., e.g., if dirty. * * The function can call `inject` to get dependencies. */ type CanCloseFn = () => Observable | Promise | boolean; /** * Reference to a `CanClose` guard registered on a view. */ interface CanCloseRef { /** * Removes the `CanClose` guard from the view. * * Has no effect if another guard was registered in the meantime. */ dispose(): void; } /** * Represents an action of a {@link WorkbenchPart}. * * Part actions are displayed in the part bar, enabling interaction with the part and its content. Actions can be aligned to the left or right. */ interface WorkbenchPartAction { /** * Specifies the content of the action. * * Use a {@link ComponentType} to render a component, or a {@link TemplateRef} to render a template. * * The component and template can inject the {@link WorkbenchPart}, either through dependency injection or default template-local variable (`let-part`). */ content: ComponentType | TemplateRef; /** * Optional data to pass to the component or template. * * If using a component, inputs are available as input properties. * * ```ts * @Component({...}) * class ActionComponent { * someInput = input.required(); * } * ``` * * If using a template, inputs are available for binding via local template let declarations. * * ```html * * ... * * ``` */ inputs?: { [name: string]: unknown; }; /** * Sets the injector for the instantiation of the component or template, giving control over the objects available for injection. * * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Controls where to place this action in the part bar. Defaults to `end`. */ align?: 'start' | 'end'; /** * Specifies CSS class(es) to add to the action, e.g., to locate the action in tests. */ cssClass?: string | string[]; } /** * Represents a menu item contained in the context menu of a {@link WorkbenchView}. * * Right-clicking on a view tab opens a context menu to interact with the view and its content. */ interface WorkbenchMenuItem { /** * Specifies the content of the menu item. * * Use a {@link ComponentType} to render a component, or a {@link TemplateRef} to render a template. * * The component and template can inject the {@link WorkbenchView}, either through dependency injection or default template-local variable (`let-view`). */ content: ComponentType | TemplateRef; /** * Optional data to pass to the component or template. * * If using a component, inputs are available as input properties. * * ```ts * @Component({...}) * class MenuItemComponent { * someInput = input.required(); * } * ``` * * If using a template, inputs are available for binding via local template let declarations. * * ```html * * ... * * ``` */ inputs?: { [name: string]: unknown; }; /** * Sets the injector for the instantiation of the component or template, giving control over the objects available for injection. * * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Function invoked when the menu item is clicked. * * The function can call `inject` to get any required dependencies. */ onAction: () => void; /** * Binds keyboard accelerator(s) to the menu item, e.g., ['ctrl', 'alt', 1]. * * Supported modifiers are 'ctrl', 'shift', 'alt' and 'meta'. */ accelerator?: string[]; /** * Enables grouping of menu items. */ group?: string; /** * Controls if the menu item is disabled. Defaults to `false`. */ disabled?: boolean; /** * Specifies CSS class(es) to add to the menu item, e.g., to locate the menu item in tests. */ cssClass?: string | string[]; } /** * Signature of a function to contribute an action to a {@link WorkbenchPart}. * * The function: * - Can return a component or template, or an object literal for more control. * - Is called per part. Returning the action adds it to the part, returning `null` skips it. * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's `untracked` function to execute code outside this reactive context. */ type WorkbenchPartActionFn = (part: WorkbenchPart) => WorkbenchPartAction | ComponentType | TemplateRef | null; /** * Signature of a function to contribute a menu item to the context menu of a {@link WorkbenchView}. * * The function: * - Is called per view. Returning the menu item adds it to the context menu of the view, returning `null` skips it. * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's `untracked` function to execute code outside this reactive context. */ type WorkbenchViewMenuItemFn = (view: WorkbenchView) => WorkbenchMenuItem | null; /** * Information about a workbench theme. * * @deprecated since version 19.0.0-beta.3. Read the theme from `WorkbenchService.settings.theme` signal, and the color scheme from 'getComputedStyle(inject(DOCUMENT).documentElement).colorScheme'. API will be removed in version 21. */ interface WorkbenchTheme { /** * The name of the theme. */ name: string; /** * The color scheme of the theme. */ colorScheme: 'light' | 'dark'; } /** * Signature of a function to provide texts to the SCION Workbench. * * Texts starting with the percent symbol (`%`) are passed to the text provider for translation, with the percent symbol omitted. * Otherwise, the text is returned as is. * * A text provider can be registered via configuration passed to the {@link provideWorkbench} function. * * The function: * - Can call `inject` to get any required dependencies. * - Can call `toSignal` to convert an Observable to a Signal. * * @param key - Key for which to provide the text. * @param params - Parameters associated with the translation key. * @return The text associated with the provided key, or `undefined` if not found. */ type WorkbenchTextProviderFn = (key: string, params: { [name: string]: string; }) => Signal | string | undefined; /** * Represents either a text or a key for translation. * * A translation key starts with the percent symbol (`%`) and can include parameters in matrix notation. * Key and parameters are passed to {@link WorkbenchConfig.textProvider} for translation. * * Examples: * - `text`: no translatable text * - `%key`: translation key * - `%key;param=value`: translation key with a single param * - `%key;param1=value1;param2=value2`: translation key with multiple parameters */ type Translatable = string | `%${string}`; /** * A view is a visual workbench element for displaying content stacked or side-by-side in the workbench layout. * * Users can drag views from one part to another, even across windows, or place them side-by-side, horizontally and vertically. * * The view component can inject this handle to interact with the view. * * @see WorkbenchRouter */ declare abstract class WorkbenchView { /** * Unique identity of this view. * * @see alternativeId */ abstract readonly id: ViewId; /** * Alternative identity of this view. * * A view can have an alternative id, a meaningful but not necessarily unique name. A view can * be identified either by its unique or alternative id. * * @see id */ abstract readonly alternativeId: string | undefined; /** * Provides navigation details of this view. * * A view can be navigated using {@link WorkbenchRouter#navigate} or {@link WorkbenchLayout#navigateView}. */ abstract readonly navigation: Signal; /** * Hint passed to the navigation. * * @deprecated since version 19.0.0-beta.2. Use {@link navigation.hint} instead. API will be removed in version 21. */ abstract readonly navigationHint: Signal; /** * Data passed to the navigation. * * @deprecated since version 19.0.0-beta.2. Use {@link navigation.data} instead. API will be removed in version 21. */ abstract readonly navigationData: Signal; /** * State passed to the navigation. * * @deprecated since version 19.0.0-beta.2. Use {@link navigation.state} instead. API will be removed in version 21. */ abstract readonly navigationState: Signal; /** * Part which contains this view. * * Note: the part of a view can change, e.g., when the view is moved to another part. */ abstract readonly part: Signal; /** * Title displayed in the view tab. */ abstract get title(): Signal; abstract set title(title: Translatable | null); /** * Subtitle displayed in the view tab. */ abstract get heading(): Signal; abstract set heading(heading: Translatable | null); /** * Specifies CSS class(es) to add to the view, e.g., to locate the view in tests. */ abstract get cssClass(): Signal; abstract set cssClass(cssClass: string | string[]); /** * Indicates whether the view has unsaved changes. * If marked as dirty, a visual indicator is displayed in the view tab. */ abstract get dirty(): Signal; abstract set dirty(dirty: boolean); /** * Controls whether the view can be closed. Defaults to `true`. */ abstract get closable(): Signal; abstract set closable(closable: boolean); /** * Indicates whether this view is active or inactive. */ abstract readonly active: Signal; /** * The position of this view in the tabbar. */ abstract readonly position: Signal; /** * `True` when this view is the first view in the tabbar. */ abstract readonly first: Signal; /** * `True` when this view is the last view in the tabbar. */ abstract readonly last: Signal; /** * Indicates whether the tab of this view is scrolled into the tabbar. */ abstract readonly scrolledIntoView: Signal; /** * Menu items associated with this view. */ abstract readonly menuItems: Signal; /** * Indicates whether this view is destroyed. */ abstract readonly destroyed: boolean; /** * URL associated with this view. * * @deprecated since version 19.0.0-beta.2. Use {@link navigation.path} instead. API will be removed in version 21. */ abstract readonly urlSegments: Signal; /** * Activates this view. * * Note: This instruction runs asynchronously via URL routing. */ abstract activate(): Promise; /** * Destroys this view (or sibling views) and the associated routed component. * * Note: This instruction runs asynchronously via URL routing. * * @param target * Allows to control which view(s) to close: * * - self: closes this view * - all-views: closes all views of this part * - other-views: closes the other views of this part * - views-to-the-right: closes the views to the right of this view * - views-to-the-left: closes the views to the left of this view * */ abstract close(target?: 'self' | 'all-views' | 'other-views' | 'views-to-the-right' | 'views-to-the-left'): Promise; /** * Moves this view to a new browser window. */ abstract move(target: 'new-window'): void; /** * Moves this view to a different or new part in the specified region. * * Specifying a target workbench identifier allows the view to be moved to a workbench in a different browser window. * The target workbench ID is available via {@link WORKBENCH_ID} DI token in the target application. */ abstract move(partId: string, options?: { region?: 'north' | 'south' | 'west' | 'east'; workbenchId?: string; }): void; /** * Registers a guard to confirm closing the view, replacing any previous guard. * * The callback can call `inject` to get dependencies. * * Example: * ```ts * import {inject} from '@angular/core'; * import {WorkbenchMessageBoxService, WorkbenchView} from '@scion/workbench'; * * inject(WorkbenchView).canClose(async () => { * if (!inject(WorkbenchView).dirty()) { * return true; * } * const action = await inject(WorkbenchMessageBoxService).open('Do you want to save changes?', { * actions: { * yes: 'Yes', * no: 'No', * cancel: 'Cancel' * } * }); * * switch (action) { * case 'yes': * // Store changes ... * return true; * case 'no': * return true; * default: * return false; * } * }); * ``` * * @param canClose - Callback to confirm closing the view. * @returns Reference to the `CanClose` guard, which can be used to unregister the guard. */ abstract canClose(canClose: CanCloseFn): CanCloseRef; } /** * Format of a view identifier. * * Each view is assigned a unique identifier (e.g., `view.1`, `view.2`, etc.). * A view can also have an alternative id, a meaningful but not necessarily unique name. A view can * be identified either by its unique or alternative id. */ type ViewId = ViewOutlet; /** * Provides navigation details of a workbench view. */ interface WorkbenchViewNavigation { /** * Path of this view. */ path: UrlSegment[]; /** * Hint passed to the navigation. */ hint?: string; /** * Data passed to the navigation. */ data?: NavigationData; /** * State passed to the navigation. */ state?: NavigationState; } /** * Options to control the navigation. */ interface WorkbenchNavigationExtras extends NavigationExtras { /** * Controls where to open the view. Defaults to `auto`. * * One of: * - 'auto': Navigates existing views that match the path, or opens a new view otherwise. Matrix params do not affect view resolution. * - 'blank': Opens a new view and navigates it. * - : Navigates the specified view. If already opened, replaces it, or opens a new view otherwise. */ target?: ViewId | string | 'blank' | 'auto'; /** * Controls in which part to navigate views. * * If {@link target} is `blank`, opens the view in the specified part. * If {@link target} is `auto`, navigates matching views in the specified part, or opens a new view in that part otherwise. * * If the specified part is not in the layout, opens the view in the active part, with the active part of the main area, if any, taking precedence. */ partId?: PartId | string; /** * Allows differentiation between routes with identical paths. * * Multiple views can navigate to the same path but still resolve to different routes, e.g., the empty-path route to maintain a clean URL. * Like the path, a hint affects view resolution. If set, the router will only navigate views with an equivalent hint, or if not set, views without a hint. * * Example route config matching routes based on the hint passed to the navigation: * ```ts * import {canMatchWorkbenchView} from '@scion/workbench'; * * const routes = [ * { * path: '', * component: View1Component, * canMatch: [canMatchWorkbenchView('hint-1')], // matches navigations with hint 'hint-1' * }, * { * path: '', * component: View2Component, * canMatch: [canMatchWorkbenchView('hint-2')], // matches navigations with hint 'hint-2' * }, * ]; * ``` * @see canMatchWorkbenchView */ hint?: string; /** * Instructs the router to activate the view. Defaults to `true`. */ activate?: boolean; /** * Specifies where to insert the view into the tab bar. Has no effect if navigating an existing view. Defaults to after the active view. */ position?: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'; /** * Associates data with the navigation. * * Unlike matrix parameters, navigation data is stored in the layout and not added to the URL, allowing data to be passed to an empty-path navigation. * * Data must be JSON serializable. Data can be read from {@link WorkbenchView.navigation.data}. */ data?: NavigationData; /** * Passes state to the navigation. * * State is not persistent, unlike {@link data}; however, state is added to the browser's session history to support back/forward browser navigation. * State can be read from {@link WorkbenchView.navigation.state} or from the browser's session history via `history.state`. */ state?: NavigationState; /** * Closes views that match the specified path and navigation hint. Matrix parameters do not affect view resolution. * The path supports the asterisk wildcard segment (`*`) to match views with any value in a segment. * To close a specific view, set a view target instead of a path. */ close?: boolean; /** * Specifies CSS class(es) to add to the view, e.g., to locate the view in tests. */ cssClass?: string | string[]; } /** * Represents an ordered list of path segments instructing the router which route to navigate to. * * A command can be a string or an object literal. A string represents a path segment, an object literal associates matrix parameters with the preceding segment. * Multiple segments can be combined into a single command, separated by a forward slash. * * The first path segment supports the usage of navigational symbols such as `/`, `./`, or `../`. * * Examples: * - Navigates to the path 'path/to/view', passing two parameters: * ['path', 'to', 'view', {param1: 'value1', param2: 'value2'}] * - Alternative syntax using a combined segment: * ['path/to/view', {param1: 'value1', param2: 'value2'}] */ type Commands = readonly unknown[]; /** * URL segments of workbench elements contained in the workbench layout. */ interface Outlets { [outlet: WorkbenchOutlet]: UrlSegment[]; } /** * State associated with a navigation. */ interface NavigationStates { [outlet: WorkbenchOutlet]: NavigationState; } /** * State passed to a navigation. * * State is not persistent, unlike {@link data}; however, state is added to the browser's session history to support back/forward browser navigation. */ interface NavigationState { [key: string]: unknown; } /** * Data associated with a navigation. Data must be JSON serializable. */ interface NavigationData { [key: string]: unknown; } /** * Signature of a function to modify the workbench layout. * * The router will invoke this function with the current workbench layout. The layout has methods for modifying it. * The layout is immutable; each modification creates a new instance. * * The function can call `inject` to get any required dependencies. * * ## Workbench Layout * The workbench layout is an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. * Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views. * * ## Example * The following example adds a part to the left of the main area, inserts a view and navigates it. * * ```ts * inject(WorkbenchRouter).navigate(layout => layout * .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) * .addView('navigator', {partId: 'left'}) * .navigateView('navigator', ['path/to/view']) * .activateView('navigator') * ); * ``` * * @param layout - Reference to the current workbench layout for modification. * @return Modified layout, or `null` to cancel the navigation. */ type NavigateFn = (layout: WorkbenchLayout) => Promise | WorkbenchLayout | null; /** * Format of an activity identifier. * * Each activity is assigned a unique identifier (e.g., `activity.9fdf7ab4`, `activity.c6485225`, etc.). * * @docs-private Not public API, intended for internal use only. */ type ActivityId = `${typeof ACTIVITY_ID_PREFIX}${string}`; /** * Defines the arrangement of docked parts (also referred to as activities) in the workbench. * * Docked parts can be minimized to create more space for the main content. * * A part can be docked to the left, right, or bottom side of the workbench. * Each side has two docking areas: `left-top` and `left-bottom`, `right-top` and `right-bottom`, and `bottom-left` and `bottom-right`. * Parts added to the same area are stacked, with only one part active per stack. If there is an active part in both stacks of a side, * the two parts are split vertically or horizontally, depending on the side. * * A docked part may be navigated to display content, have views, or define a layout with multiple parts aligned relative to each other. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ interface MActivityLayout { toolbars: { leftTop: MActivityStack; leftBottom: MActivityStack; rightTop: MActivityStack; rightBottom: MActivityStack; bottomLeft: MActivityStack; bottomRight: MActivityStack; }; panels: { left: { width: number; ratio: number; }; right: { width: number; ratio: number; }; bottom: { height: number; ratio: number; }; }; } /** * Stack of activities in a docking area. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ interface MActivityStack { /** * List of activities in the stack. */ activities: MActivity[]; /** * Reference to the currently active activity in the stack. */ activeActivityId?: ActivityId; /** * Reference to the activity that was active prior to minimization, used to restore the active activity when exiting minimization mode. */ minimizedActivityId?: ActivityId; } /** * Represents an activity docked to a side of the workbench. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ interface MActivity { /** @see DockedPartExtras#ɵactivityId */ id: ActivityId; /** * Refers to the docked part specified when creating the activity. * * Characteristics of the reference part: * - Structural part, remaining even if its last view is removed. * - Provides the title of the activity, independent of visibility and position in the layout. * - Explicitly removing this part removes the activity. */ referencePartId: PartId; /** @see DockedPartExtras#icon */ icon: string; /** @see DockedPartExtras#label */ label: Translatable; /** @see DockedPartExtras#tooltip */ tooltip?: Translatable; /** @see DockedPartExtras#cssClass */ cssClass?: string | string[]; } /** * Factory for creating a {@link WorkbenchLayout}. */ declare abstract class WorkbenchLayoutFactory { /** * Creates a layout with given part. * * @param id - The id of the part. Use {@link MAIN_AREA} to add the main area. * @param extras - Controls how to add the part to the layout. * @param extras.activate - Controls whether to activate the part. If not set, defaults to `false`. * @return layout with the part added. */ abstract addPart(id: string | MAIN_AREA, extras?: PartExtras): WorkbenchLayout; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * The workbench layout is an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. * Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views. * * A typical workbench application has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to * support the user's workflow. * * Multiple layouts, called perspectives, can be created. Users can switch between perspectives. Perspectives share the same main area, if any. * * The layout has methods for modifying it. The layout is immutable; each modification creates a new instance. */ interface WorkbenchLayout { /** * Adds a part with the given id to this layout. Position and size are expressed relative to a reference part. * * A part can also be aligned relative to a docked part, enabling inline layouts within docked parts, such as splitting the docked parts into multiple sections. * * @param id - The id of the part to add. Use {@link MAIN_AREA} to add the main area. * @param relativeTo - Specifies the reference part to lay out the part. * @param extras - Controls how to add the part to the layout. * @return a copy of this layout with the part added. */ addPart(id: string | MAIN_AREA, relativeTo: ReferencePart, extras?: PartExtras): WorkbenchLayout; /** * Adds a part with the given id to this layout, docking it to the specified docking area. * * Docked parts can be minimized to create more space for the main content. Users cannot drag views into or out of docked parts. * * A part can be docked to the left, right, or bottom side of the workbench. * Each side has two docking areas: `left-top` and `left-bottom`, `right-top` and `right-bottom`, and `bottom-left` and `bottom-right`. * Parts added to the same area are stacked, with only one part active per stack. If there is an active part in both stacks of a side, * the two parts are split vertically or horizontally, depending on the side. * * A docked part may be navigated to display content, have views, or define a layout with multiple parts aligned relative to each other. * * @param id - The id of the part to add. * @param dockTo - Controls to which area to dock the part. * @param extras - Controls how to add the part to the layout. * @return a copy of this layout with the part added. */ addPart(id: string, dockTo: DockingArea, extras: DockedPartExtras): WorkbenchLayout; /** * Navigates the specified part based on the provided array of commands and extras. * * Navigating a part displays content when its view stack is empty. A navigated part can still have views but won't display * navigated content unless its view stack is empty. Views cannot be dragged into parts displaying navigated content, except * for the main area part. * * A command can be a string or an object literal. A string represents a path segment, an object literal associates matrix parameters with the preceding segment. * Multiple segments can be combined into a single command, separated by a forward slash. * * By default, navigation is absolute. Set `relativeTo` in extras for relative navigation. * * Usage: * ``` * layout.navigatePart(partId, ['path', 'to', 'part', {param 'value'}]); * layout.navigatePart(partId, ['path/to/part', {param: 'value'}]); * ``` * * @param id - Identifies the part for navigation. * @param commands - Instructs the router which route to navigate to. * @param extras - Controls navigation: * @param extras.hint - Allows differentiation between routes with identical paths. * Multiple parts can navigate to the same path but still resolve to different routes, e.g., the empty-path route to maintain a clean URL. * * Example: * ```ts * import {canMatchWorkbenchPart} from '@scion/workbench'; * * const routes = [ * { * path: '', * component: Part1Component, * canMatch: [canMatchWorkbenchPart('hint-1')], // matches navigations with hint 'hint-1' * }, * { * path: '', * component: Part2Component, * canMatch: [canMatchWorkbenchPart('hint-2')], // matches navigations with hint 'hint-1' * }, * ]; * ``` * @param extras.relativeTo - Specifies the route for relative navigation, supporting navigational symbols such as '/', './', or '../' in the commands. * @param extras.data - Associates data with the navigation. * Unlike matrix parameters, navigation data is stored in the layout and not added to the URL, allowing data to be passed to an empty-path navigation. * Data must be JSON serializable. Data can be read from {@link WorkbenchPart.navigation.data}. * @param extras.state - Passes state to the navigation. * State is not persistent, unlike {@link data}; however, state is added to the browser's session history to support back/forward browser navigation. * State can be read from {@link WorkbenchPart.navigation.state} or from the browser's session history via `history.state`. * @param extras.cssClass - Specifies CSS class(es) to add to the part, e.g., to locate the part in tests. * @return a copy of this layout with the part navigated. */ navigatePart(id: string, commands: Commands, extras?: { hint?: string; relativeTo?: ActivatedRoute; data?: NavigationData; state?: NavigationState; cssClass?: string | string[]; }): WorkbenchLayout; /** * Adds a view to the specified part. * * @param id - The id of the view to add. * @param extras - Controls how to add the view to the layout. * @param extras.partId - References the part to which to add the view. * @param extras.position - Specifies the position where to insert the view. The position is zero-based. Defaults to `end`. * @param extras.activateView - Controls whether to activate the view. Defaults to `false`. * @param extras.activatePart - Controls whether to activate the part that contains the view. Defaults to `false`. * @param extras.cssClass - Specifies CSS class(es) to add to the view, e.g., to locate the view in tests. * @return a copy of this layout with the view added. */ addView(id: string, extras: { partId: string; position?: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'; activateView?: boolean; activatePart?: boolean; cssClass?: string | string[]; }): WorkbenchLayout; /** * Navigates the specified view based on the provided array of commands and extras. * * A command can be a string or an object literal. A string represents a path segment, an object literal associates matrix parameters with the preceding segment. * Multiple segments can be combined into a single command, separated by a forward slash. * * By default, navigation is absolute. Set `relativeTo` in extras for relative navigation. * * Usage: * ``` * layout.navigateView(viewId, ['path', 'to', 'view', {param 'value'}]); * layout.navigateView(viewId, ['path/to/view', {param: 'value'}]); * ``` * * @param id - Identifies the view for navigation. * @param commands - Instructs the router which route to navigate to. * @param extras - Controls navigation: * @param extras.hint - Allows differentiation between routes with identical paths. * Multiple views can navigate to the same path but still resolve to different routes, e.g., the empty-path route to maintain a clean URL. * Like the path, a hint affects view resolution. If set, the router will only navigate views with an equivalent hint, or if not set, views without a hint. * * Example route config matching routes based on the hint passed to the navigation: * ```ts * import {canMatchWorkbenchView} from '@scion/workbench'; * * const routes = [ * { * path: '', * component: View1Component, * canMatch: [canMatchWorkbenchView('hint-1')], // matches navigations with hint 'hint-1' * }, * { * path: '', * component: View2Component, * canMatch: [canMatchWorkbenchView('hint-2')], // matches navigations with hint 'hint-2' * }, * ]; * ``` * @param extras.relativeTo - Specifies the route for relative navigation, supporting navigational symbols such as '/', './', or '../' in the commands. * @param extras.data - Associates data with the navigation. * Unlike matrix parameters, navigation data is stored in the layout and not added to the URL, allowing data to be passed to an empty-path navigation. * Data must be JSON serializable. Data can be read from {@link WorkbenchView.navigation.data}. * @param extras.state - Passes state to the navigation. * State is not persistent, unlike {@link data}; however, state is added to the browser's session history to support back/forward browser navigation. * State can be read from {@link WorkbenchView.navigation.state} or from the browser's session history via `history.state`. * @param extras.cssClass - Specifies CSS class(es) to add to the view, e.g., to locate the view in tests. * @return a copy of this layout with the view navigated. */ navigateView(id: string, commands: Commands, extras?: { hint?: string; relativeTo?: ActivatedRoute; data?: NavigationData; state?: NavigationState; cssClass?: string | string[]; }): WorkbenchLayout; /** * Removes given view from the layout. * * - If the view is active, the last used view is activated. * - If the view is the last view in the part, the part is removed unless it is the last part in its grid or a structural part. * * @param id - Specifies the id of the view to remove. * @return a copy of this layout with the view removed. */ removeView(id: string): WorkbenchLayout; /** * Removes given part from the layout. * * If the part is active, the last used part is activated. * * @param id - The id of the part to remove. * @return a copy of this layout with the part removed. */ removePart(id: string): WorkbenchLayout; /** * Moves a view to a different part or moves it within a part. * * @param id - The id of the view to be moved. * @param targetPartId - The id of the part to which to move the view. * @param options - Controls moving of the view. * @param options.position - Specifies the position where to move the view in the target part. The position is zero-based. Defaults to `end` when moving the view to a different part. * @param options.activateView - Controls if to activate the view. Defaults to `false`. * @param options.activatePart - Controls if to activate the target part. Defaults to `false`. * @return a copy of this layout with the view moved. */ moveView(id: string, targetPartId: string, options?: { position?: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'; activateView?: boolean; activatePart?: boolean; }): WorkbenchLayout; /** * Activates the given view. * * @param id - The id of the view which to activate. * @param options - Controls view activation. * @param options.activatePart - Controls whether to activate the part that contains the view. Defaults to `false`. * @return a copy of this layout with the view activated. */ activateView(id: string, options?: { activatePart?: boolean; }): WorkbenchLayout; /** * Activates the given part. * * @param id - The id of the part which to activate. * @return a copy of this layout with the part activated. */ activatePart(id: string): WorkbenchLayout; /** * Applies a modification function to this layout, enabling conditional changes while maintaining method chaining. * * @param modifyFn - A function that takes the current layout and returns a modified layout. * @return The modified layout returned by the modify function. */ modify(modifyFn: (layout: WorkbenchLayout) => WorkbenchLayout): WorkbenchLayout; } /** * Describes how to lay out a part relative to another part. */ interface ReferencePart { /** * Specifies the part which to use as the reference part to lay out the part. * If not set, the part will be aligned relative to the root of the workbench layout. */ relativeTo?: string; /** * Specifies the side of the reference part where to add the part. */ align: 'left' | 'right' | 'top' | 'bottom'; /** * Specifies the proportional size of the part relative to the reference part. * The ratio is the closed interval [0,1]. If not set, defaults to `0.5`. */ ratio?: number; } /** * Controls the appearance and behavior of a part. */ interface PartExtras { /** * Title displayed in the part bar. */ title?: Translatable; /** * Specifies CSS class(es) to add to the part, e.g., to locate the part in tests. */ cssClass?: string | string[]; /** * Controls whether to activate the part. Defaults to `false`. */ activate?: boolean; } /** * Controls the appearance and behavior of a docked part. * * A docked part is a part that is docked to the left, right, or bottom side of the workbench. * Docked parts can be minimized to create more space for the main content. Users cannot drag * views into or out of docked parts. */ interface DockedPartExtras { /** * Icon (key) of the toggle button in the sidebar, used to open or close the docked part. * * The actual icon is resolved through an {@link WorkbenchIconProviderFn} registered in {@link WorkbenchConfig.iconProvider}. * * If no icon provider is configured, the icon defaults to a Material Icon font ligature. The default icon provider requires * the application to include the Material icon font, for example in `styles.scss`, as follows: * * ```scss * @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded'); * ``` * * The application can then reference icons from the Material Icons Font: https://fonts.google.com/icons */ icon: string; /** * Label of the toggle button in the sidebar. */ label: Translatable; /** * Tooltip displayed when hovering over the toggle button in the sidebar. */ tooltip?: Translatable; /** * Title displayed in the part bar. * * If not provided, defaults to {@link DockedPartExtras.label}. Set to `false` to not display a title. */ title?: Translatable | false; /** * CSS class(es) to add to the docked part and its toggle button, e.g., to locate the part in tests. */ cssClass?: string | string[]; /** * Internal identifier for the docked part. * * @docs-private Not public API, intended for internal use only. */ ɵactivityId?: ActivityId; } /** * A part can be docked to the left, right, or bottom side of the workbench. * * Each side has two docking areas: `left-top` and `left-bottom`, `right-top` and `right-bottom`, and `bottom-left` and `bottom-right`. * Parts added to the same area are stacked, with only one part active per stack. If there is an active part in both stacks of a side, * the two parts are split vertically or horizontally, depending on the side. */ interface DockingArea { /** * Controls where to dock a part. * - `left-top`: Dock to the top on the left side. * - `left-bottom`: Dock to the bottom on the left side. * - `right-top`: Dock to the top on the right side. * - `right-bottom`: Dock to the bottom on the right side. * - `bottom-left`: Dock to the left on the bottom side. * - `bottom-right`: Dock to the right on the bottom side. */ dockTo: 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right'; } /** * Identifies the main area part in the workbench layout. * * Refer to this part to align parts relative to the main area. * * The main area is a special part that can be added to the layout. The main area is where the workbench opens new views by default. * It is shared between perspectives and its layout is not reset when resetting perspectives. */ declare const MAIN_AREA: MAIN_AREA; /** * Represents the type of the {@link MAIN_AREA} constant. */ type MAIN_AREA = 'part.main-area'; /** * Signature of a function to provide a workbench layout. * * The workbench will invoke this function with a factory object to create the layout. The layout is immutable; each modification creates a new instance. * * The function can call `inject` to get any required dependencies. * * ## Workbench Layout * The workbench layout is an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. * Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views. * * The layout typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support * the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. * Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. * ## Steps to create the layout * Start by adding parts to the layout. Parts can be docked to a specific area (`left-top`, `left-bottom`, `right-top`, `right-bottom`, `bottom-left`, `bottom-right`) * or aligned relative to each other. Views can be added to any part except the main area part. To display content, navigate parts and views to registered routes. * * To maintain a clean URL, navigate parts and views in the layout to empty-path routes and use a navigation hint for differentiation. * - Use the `canMatchWorkbenchPart` guard to match a route only for parts navigated with a particular hint. * - Use the `canMatchWorkbenchView` guard to match a route only for views navigated with a particular hint. * * ## Example * The following example defines a layout with a main area and four parts docked to the side: * * ```plain * +------+-----------+------+ * | | | | * | | | | * | left | main area | right| * | | | | * | | | | * +------+-----------+------+ * | bottom | * +-------------------------+ * ``` * * ```ts * import {bootstrapApplication} from '@angular/platform-browser'; * import {MAIN_AREA, provideWorkbench, WorkbenchLayoutFactory} from '@scion/workbench'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench({ * layout: (factory: WorkbenchLayoutFactory) => factory * // Add parts to dock areas on the side. * .addPart(MAIN_AREA) * .addPart('navigator', {dockTo: 'left-top'}, {label: 'Navigator', icon: 'folder'}) * .addPart('find', {dockTo: 'bottom-left'}, {label: 'Find', icon: 'search'}) * .addPart('inventory', {dockTo: 'right-top'}, {label: 'Inventory', icon: 'inventory'}) * .addPart('notifications', {dockTo: 'right-bottom'}, {label: 'Notifications', icon: 'notifications'}) * * // Add views to parts. * .addView('find1', {partId: 'find'}) * .addView('find2', {partId: 'find'}) * .addView('find3', {partId: 'find'}) * * // Navigate the main area to display a welcome page. * .navigatePart(MAIN_AREA, [], {hint: 'welcome'}) * * // Navigate parts to display content. * .navigatePart('navigator', [], {hint: 'navigator'}) * .navigatePart('inventory', ['path/to/inventory']) * .navigatePart('notifications', [], {hint: 'notifications'}) * * // Navigate views to display content. * .navigateView('find1', ['path/to/find']) * .navigateView('find2', ['path/to/find']) * .navigateView('find3', ['path/to/find']) * * // Activate parts to open docked parts. * .activatePart('navigator') * .activatePart('find') * .activatePart('inventory'), * }), * ], * }); * ``` * * The layout requires the following routes. * * ```ts * import {bootstrapApplication} from '@angular/platform-browser'; * import {provideRouter} from '@angular/router'; * import {canMatchWorkbenchView, canMatchWorkbenchPart} from '@scion/workbench'; * * bootstrapApplication(AppComponent, { * providers: [ * provideRouter([ * // Route for the "MAIN_AREA Part" * {path: '', canMatch: [canMatchWorkbenchPart('welcome')], loadComponent: () => import('./welcome/welcome.component')}, * // Route for the "Navigator Part" * {path: '', canMatch: [canMatchWorkbenchPart('navigator')], loadComponent: () => import('./navigator/navigator.component')}, * // Route for the "Find View" * {path: 'path/to/find', loadComponent: () => import('./find/find.component')}, * // Route for the "Inventory Part" * {path: 'path/to/inventory', loadComponent: () => import('./inventory/inventory.component')}, * // Route for the "Notifications Part" * {path: '', canMatch: [canMatchWorkbenchPart('notifications')], loadComponent: () => import('./notifications/notifications.component')}, * ]), * ], * }); * ``` */ type WorkbenchLayoutFn = (factory: WorkbenchLayoutFactory) => Promise | WorkbenchLayout; /** * Represents a workbench perspective. * * A perspective is a named layout. Multiple perspectives can be created. Users can switch between perspectives. * Perspectives share the same main area, if any. */ interface WorkbenchPerspective { /** * Unique identifier of this perspective. */ readonly id: string; /** * Arbitrary data associated with this perspective. */ readonly data: { [key: string]: unknown; }; /** * Indicates whether this perspective is active. */ readonly active: Signal; /** * Indicates whether this perspective is transient, with its layout only memoized, not persisted. */ readonly transient: boolean; } /** * Defines the workbench layouts of the application * * A perspective is a named layout. Multiple perspectives can be created. Users can switch between perspectives. * Perspectives share the same main area, if any. */ interface WorkbenchPerspectives { /** * Specifies perspectives to register in the workbench. */ perspectives?: WorkbenchPerspectiveDefinition[]; /** * Specifies which perspective to activate. Defaults to the first registered perspective. * * The workbench remembers the active perspective and only evaluates this property when starting the workbench * for the first time, after clearing storage, or if the active perspective no longer exists. * * Can be either the identity of a perspective or a function to resolve the perspective. */ initialPerspective?: string | WorkbenchPerspectiveSelectionFn; } /** * Describes a perspective to register in the workbench. */ interface WorkbenchPerspectiveDefinition { /** * Specifies the unique identity of the perspective. */ id: string; /** * Function to create the layout of the perspective. The function can call `inject` to get any required dependencies. * * A perspective defines an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. * Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views. * * A perspective typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support * the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. * Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. * * See {@link WorkbenchLayoutFn} for more information and an example. */ layout: WorkbenchLayoutFn; /** * Associates arbitrary data with the perspective, e.g., a label, icon or tooltip. */ data?: { [key: string]: unknown; }; /** * Decides if the perspective can be activated. The function can call `inject` to get any required dependencies. */ canActivate?: () => Promise | boolean; /** * Defines the perspective as transient, with its layout only memoized, not persisted. */ transient?: true; } /** * Signature of a function that can be provided in {@link WorkbenchPerspectives#initialPerspective} to select the perspective for the initial workbench layout. * * The function is passed a list of registered perspectives. The function can call `inject` to get any required dependencies. */ type WorkbenchPerspectiveSelectionFn = (perspectives: WorkbenchPerspective[]) => Promise | string | undefined; /** * Provides persistent storage to the SCION Workbench. */ declare abstract class WorkbenchStorage { /** * Method invoked to load a value from persisted storage. */ abstract load(key: string): Promise | string | null; /** * Method invoked to write a value to persisted storage. * * This method may be called during page unload. If sending data to a web server, * use `navigator.sendBeacon()` instead of `window.fetch()` to reliably transmit data. */ abstract store(key: string, value: string): Promise | void; } /** * Signature of a function to provide icons to the SCION Workbench. * * An icon provider is a function that returns the component for an icon. The component renders the icon. * * Alternatively, the icon provider can return a descriptor, allowing for additional configuration such as inputs. * Inputs are available as input properties in the component. The component can use the inputs to render the icon. * * Icon keys used by the SCION Workbench start with the `workbench.` prefix. To not replace built-in workbench icons, * the icon provider can return `undefined` for icons starting with the `workbench.` prefix. * * An icon provider can be registered via configuration passed to the {@link provideWorkbench} function. * * The function can call `inject` to get any required dependencies. * * @param icon - The key of the icon for which to provide the icon component. * @return ComponentType or {@link WorkbenchIconDescriptor} to render the icon, or `undefined` if not found. */ type WorkbenchIconProviderFn = (icon: string) => ComponentType | WorkbenchIconDescriptor | undefined; /** * Controls rendering of a workbench icon. */ interface WorkbenchIconDescriptor { /** * Specifies the component to render the icon. */ component: ComponentType; /** * Optional data to pass to the component. Inputs are available as input properties in the component. * * ```ts * @Component({...}) * class SomeIconComponent { * icon = input.required(); * } * ``` */ inputs?: { [name: string]: unknown; }; /** * Sets the injector for the instantiation of the component, giving control over the objects available for injection. * * **Example:** * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; } /** * Configuration of the SCION Workbench. */ declare abstract class WorkbenchConfig { /** * Defines the layout(s) of the application. Defaults to a single layout with only a main area. * * An application can have multiple layouts, called perspectives. A perspective defines an arrangement of parts and views. * Parts can be docked to the side or positioned relative to each other. Views are stacked in parts and can be dragged to other parts. * Content can be displayed in both parts and views. * * A perspective typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support * the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. * Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. * * See {@link WorkbenchLayoutFn} for more information and an example. */ abstract layout?: WorkbenchLayoutFn | WorkbenchPerspectives; /** * Provides texts to the SCION Workbench. * * A text provider is a function that returns the text for a translation key. * * Texts starting with the percent symbol (`%`) are passed to the text provider for translation, with the percent symbol omitted. * Otherwise, the text is returned as is. * * The SCION Workbench uses the following translation keys for built-in texts: * - workbench.clear.tooltip * - workbench.close.action * - workbench.close_all_tabs.action * - workbench.close_other_tabs.action * - workbench.close_tab.action * - workbench.close_tab.tooltip * - workbench.close_tabs_to_the_left.action * - workbench.close_tabs_to_the_right.action * - workbench.close.tooltip * - workbench.dev_mode_only_hint.tooltip * - workbench.minimize.tooltip * - workbench.move_tab_down.action * - workbench.move_tab_to_new_window.action * - workbench.move_tab_to_the_left.action * - workbench.move_tab_to_the_right.action * - workbench.move_tab_up.action * - workbench.null_content.message * - workbench.null_view_developer_hint.message * - workbench.ok.action * - workbench.page_not_found.message * - workbench.page_not_found.title * - workbench.page_not_found_developer_hint.message * - workbench.page_not_found_part.message * - workbench.page_not_found_view.message * - workbench.reset_perspective.action * - workbench.show_open_tabs.tooltip * * The function: * - Can call `inject` to get any required dependencies. * - Can call `toSignal` to convert an Observable to a Signal. * * @see WorkbenchTextProviderFn */ abstract textProvider?: WorkbenchTextProviderFn; /** * Provides icons to the SCION Workbench. * * An icon provider is a function that returns a component for an icon. The component renders the icon. * * Defaults to a Material icon provider, interpreting the icon as a Material icon ligature. * * The default icon provider requires the application to include the Material icon font, for example in `styles.scss`, as follows: * ```scss * @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded'); * ``` * * The SCION Workbench uses the following icons: * - `workbench.clear`: Clear button in input fields * - `workbench.close`: Close button in views, dialogs and notifications * - `workbench.dirty`: Visual indicator for view with unsaved content * - `workbench.menu_down`: Menu button of drop down menus * - `workbench.minimize`: Minimize button in docked parts * - `workbench.pin`: Visual indicator for a pinned view * - `workbench.search`: Visual indicator in search or filter fields * * To not replace built-in workbench icons, the icon provider can return `undefined` for icons starting with the `workbench.` prefix. * * The function can call `inject` to get any required dependencies. * * @see WorkbenchIconProviderFn */ abstract iconProvider?: WorkbenchIconProviderFn; /** * Specifies the component to display in `` while the workbench is starting. * * Defaults to a splash showing a loading indicator (ellipsis throbber). * * Note: No splash screen is displayed if starting the workbench in an app initializer. */ abstract splashComponent?: ComponentType; /** * Specifies the component to display a view tab, enabling custom design or functionality. * * The component can inject {@link WorkbenchView} and {@link VIEW_TAB_RENDERING_CONTEXT} to get a reference to the view and the rendering context. */ abstract viewTabComponent?: ComponentType; /** * Defines the component to display when no route matches the requested path. * * This can happen when navigating to a non-existent route or after loading the application, if the routes have changed since the user's last session. * * The component can inject {@link WorkbenchView} to get a reference to the view, e.g., to obtain the requested URL. */ abstract pageNotFoundComponent?: ComponentType; /** * Controls which built-in menu items to display in the view context menu. * * Set to `false` to exclude all built-in menu items. */ abstract viewMenuItems?: ViewMenuItemsConfig | false; /** * Configures startup of the SCION Workbench. * * The SCION Workbench starts automatically when the `` component is added to the DOM. Alternatively, * the workbench can be started manually using {@link WorkbenchLauncher.launch}, such as in an app initializer or a route guard. * * The application can hook into the startup process of the SCION Workbench by providing one or more initializers to {@link provideWorkbenchInitializer}. * Initializers execute at defined points during startup, enabling the application's controlled initialization. The workbench is fully started once * all initializers have completed. * * The application can inject {@link WorkbenchStartup} to check if the workbench has completed startup. */ abstract startup?: { /** * Controls when to start the SCION Workbench. Defaults to `LAZY`. * * - **LAZY** * Starts the workbench when the `` component is added to the DOM or manually via {@link WorkbenchLauncher#launch}, * e.g., from a route guard or app initializer. * * - **APP_INITIALIZER** * Starts the workbench during application bootstrapping, blocking Angular's app startup until the workbench is ready. * No splash is displayed. * * @deprecated since version 19.0.0-beta.3. To start the workbench in an app initializer, use Angular's `provideAppInitializer()` function: `provideAppInitializer(() => inject(WorkbenchLauncher).launch())`. Otherwise, no migration is necessary. No replacement. API will be removed in version 21. */ launcher?: 'LAZY' | 'APP_INITIALIZER'; /** * Specifies the component to display in `` while the workbench is starting. * * Note: No splash screen is displayed when using the app initializer strategy. * * @deprecated since version 19.0.0-beta.3. Property has been moved. Configure the splash in `WorkbenchConfig.splashComponent`. Property will be removed in version 21. */ splash?: ComponentType; }; /** * Configures microfrontend support in the workbench, allowing the integration of microfrontends as workbench views or * workbench popups. * * The workbench uses the "SCION Microfrontend Platform" for providing microfrontend support. To learn more about the * "SCION Microfrontend Platform", refer to https://github.com/SchweizerischeBundesbahnen/scion-microfrontend-platform. * * The workbench allows any web page to be embedded as a workbench view or workbench popup. The web app has to provide * a manifest in which it describes its views and popups. To integrate a third-party application where customization is not * possible, the host application can provide a manifest for that application. If embedded content needs to interact with * the workbench, the web app can use the library `@scion/workbench-client`, a pure TypeScript library based on the * web stack-agnostic `@scion/microfrontend-platform` library. * * The workbench integrates microfrontends through so-called intents, a mechanism known from Android development, enabling * controlled collaboration across application boundaries. "SCION Microfrontend Platform DevTools" can help to inspect * integrated applications and dependencies. The DevTools are available in the form of a microfrontend that can be embedded * like any other microfrontend. Refer to the documentation for detailed instructions on how to integrate * "SCION Microfrontend Platform DevTools". * * Typically, the host app provides API to integrated micro apps via the intent mechanism. Consider registering intent handlers * under the DI token {@link MICROFRONTEND_PLATFORM_POST_STARTUP}. */ abstract microfrontendPlatform?: MicrofrontendPlatformConfig | Type; /** * Provides persistent storage to the SCION Workbench. * * If not set, the workbench uses the browser's local storage as persistent storage. */ abstract storage?: Type; /** * Configures the behavior of workbench dialogs. */ abstract dialog?: { /** * Configures the area to block for application-modal dialogs. If not set, defaults to `workbench`. * * - **workbench:** blocks the {@link WorkbenchComponent|workbench element}, still allowing interaction with elements outside the workbench element. * * - **viewport** blocks the browser viewport, preventing interaction with the application until application-modal dialogs are closed. */ modalityScope?: 'workbench' | 'viewport'; }; /** * Configures logging for the workbench. */ abstract logging?: { /** * Sets the minimum severity level a log message must have in order to be logged. By default, if not specified, it is set to {@link LogLevel#INFO}. * * At runtime, you can change the minimum required log level by setting the `loglevel` query parameter. */ logLevel?: LogLevel; /** * Registers log appenders to output log messages. Multiple appenders are allowed. By default, if not specified, log messages are written to the console. */ logAppenders?: Type[]; }; } /** * Configuration of built-in menu items in the view's context menu. * * Each property represents a menu item, allowing customization of visibility, accelerators, and more. * * Texts can be changed or localized using a {@link WorkbenchTextProviderFn text provider} passed to {@link provideWorkbench} via the workbench config object. */ interface ViewMenuItemsConfig { /** * Configures the menu item for closing a view tab. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.close_tab.action` */ close?: MenuItemConfig | false; /** * Configures the menu item for closing other view tabs. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.close_other_tabs.action` */ closeOthers?: MenuItemConfig | false; /** * Configures the menu item for closing all view tabs. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.close_all_tabs.action` */ closeAll?: MenuItemConfig | false; /** * Configures the menu item for closing view tabs to the right. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.close_tabs_to_the_right.action` */ closeToTheRight?: MenuItemConfig | false; /** * Configures the menu item for closing view tabs to the left. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.close_tabs_to_the_left.action` */ closeToTheLeft?: MenuItemConfig | false; /** * Configures the menu item for moving a view up. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.move_tab_up.action` */ moveUp?: MenuItemConfig | false; /** * Configures the menu item for moving a view to the right. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.move_tab_to_the_right.action` */ moveRight?: MenuItemConfig | false; /** * Configures the menu item for moving a view down. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbenchworkbench.move_tab_down.action` */ moveDown?: MenuItemConfig | false; /** * Configures the menu item for moving a view to the left. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.move_tab_to_the_left.action` */ moveLeft?: MenuItemConfig | false; /** * Configures the menu item for moving a view to a new window. * * Set to `false` to exclude it. * * The menu item text can be changed or localized using a {@link WorkbenchTextProviderFn}. * Translation key: `workbench.move_tab_to_new_window.action` */ moveToNewWindow?: MenuItemConfig | false; } /** * Configures a built-in menu item. */ interface MenuItemConfig { /** * @deprecated since version 19.0.0-beta.2. Set to `false` in {@link ViewMenuItemsConfig} to exclude the menu item. API will be removed in version 21. */ visible?: boolean; /** * Specifies the text of this menu item. * * Can be a string or a function that returns a string or a {@link Signal}. * * The function can call `inject` to get any required dependencies, or use `toSignal` to convert an observable to a signal. * * @deprecated since version 19.0.0-beta.3. Register a text provider to change or localize menu item texts. Register the text provider via workbench configuration passed to the `provideWorkbench` function. API will be removed in version 21. */ text?: string | (() => string | Signal); accelerator?: string[]; group?: string; cssClass?: string | string[]; } /** * Enables and configures the SCION Workbench, returning a set of dependency-injection providers to be registered in Angular. * * ### About * SCION Workbench enables the creation of Angular web applications that require a flexible layout to display content side-by-side * or stacked, all personalizable by the user via drag & drop. This type of layout is ideal for applications with non-linear workflows, * enabling users to work on content in parallel. * * An application can have multiple layouts, called perspectives. A perspective defines an arrangement of parts and views. * Parts can be docked to the side or positioned relative to each other. Views are stacked in parts and can be dragged to other parts. * Content can be displayed in both parts and views. * * Users can personalize the layout of a perspective and switch between perspectives. The workbench remembers the last layout of each perspective, * restoring it the next time it is activated. * * A perspective typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support * the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. Users can split * the main area (or any other part) by dragging views side-by-side, vertically and horizontally, even across windows. * * Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. Having a main area and * multiple perspectives is optional. * * ### Usage * ```ts * import {MAIN_AREA, provideWorkbench, WorkbenchLayoutFactory} from '@scion/workbench'; * import {provideRouter} from '@angular/router'; * import {provideAnimations} from '@angular/platform-browser/animations'; * import {bootstrapApplication} from '@angular/platform-browser'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench({ * layout: (factory: WorkbenchLayoutFactory) => factory * .addPart(MAIN_AREA) * .addPart('todos', {dockTo: 'left-top'}, {label: 'Todos', icon: 'checklist'}) * .navigatePart(MAIN_AREA, ['overview']) * .navigatePart('todos', ['todos']) * .activatePart('todos'), * }), * provideRouter([ * {path: 'overview', loadComponent: () => import('./overview/overview.component')}, * {path: 'todos', loadComponent: () => import('./todos/todos.component')}, * ]), * provideAnimations(), * ], * }); * ``` * * ### Startup * The SCION Workbench starts automatically when the `` component is added to the DOM. Alternatively, the workbench can be * started manually using the {@link WorkbenchLauncher}, such as in an app initializer or a route guard. * * Example of starting the workbench in an app initializer: * * ```ts * import {provideWorkbench, WorkbenchLauncher} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {inject, provideAppInitializer} from '@angular/core'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * provideAppInitializer(() => inject(WorkbenchLauncher).launch()) * ] * }); * ``` * * Starting the workbench in an app initializer will block Angular's app startup until the workbench is ready. * * ### Startup Hooks * The application can hook into the startup process of the SCION Workbench by providing one or more initializers to the `provideWorkbenchInitializer()` function. * Initializers execute at defined points during startup, enabling the application's controlled initialization. * * ```ts * import {provideWorkbench, provideWorkbenchInitializer} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {inject} from '@angular/core'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * provideWorkbenchInitializer(() => inject(SomeService).init()), * ], * }); * ``` */ declare function provideWorkbench(config?: WorkbenchConfig): EnvironmentProviders; /** * Represents an object that can be disposed of to free up resources. */ interface Disposable { /** * Disposes of the object, releasing any allocated resources. */ dispose(): void; } /** * The central class of the SCION Workbench. * * SCION Workbench enables the creation of Angular web applications that require a flexible layout to display content side-by-side * or stacked, all personalizable by the user via drag & drop. This type of layout is ideal for applications with non-linear workflows, * enabling users to work on content in parallel. * * An application can have multiple layouts, called perspectives. A perspective defines an arrangement of parts and views. * Parts can be docked to the side or positioned relative to each other. Views are stacked in parts and can be dragged to other parts. * Content can be displayed in both parts and views. * * Users can personalize the layout of a perspective and switch between perspectives. The workbench remembers the last layout of each perspective, * restoring it the next time it is activated. * * A perspective typically has a main area part and other parts docked to the side, providing navigation and context-sensitive assistance to support * the user's workflow. Initially empty or displaying a welcome page, the main area is where the workbench opens new views by default. Users can split * the main area (or any other part) by dragging views side-by-side, vertically and horizontally, even across windows. * * Unlike any other part, the main area is shared between perspectives, and its layout is not reset when resetting perspectives. Having a main area and * multiple perspectives is optional. */ declare abstract class WorkbenchService { /** * Provides the layout of the workbench. * * The layout is an immutable object. Modifications have no side effects. The layout can be modified using {@link WorkbenchRouter.navigate}. */ abstract readonly layout: Signal; /** * Provides the handles of the perspectives registered in the workbench. * * Each handle represents a perspective registered in the workbench. The handle has methods to interact with the perspective. * Perspectives are registered via {@link WorkbenchConfig} passed to {@link provideWorkbench} or via {@link WorkbenchService}. */ abstract readonly perspectives: Signal; /** * Provides the active perspective, or `undefined` if none is active (e.g., during workbench startup). */ abstract readonly activePerspective: Signal; /** * Returns the handle of the specified perspective, or `null` if not found. */ abstract getPerspective(perspectiveId: string): WorkbenchPerspective | null; /** * Registers the given perspective. * * The perspective can be activated via {@link WorkbenchService#switchPerspective}. */ abstract registerPerspective(perspective: WorkbenchPerspectiveDefinition): Promise; /** * Switches to the specified perspective. * * Switching perspective does not change the layout of the main area, if any. */ abstract switchPerspective(id: string): Promise; /** * Resets the currently active perspective to its initial layout. Resetting the perspective does not change the layout of the main area, if any. */ abstract resetPerspective(): Promise; /** * Provides the handles of the parts in the current workbench layout. * * Each handle represents a part in the layout. The handle has methods to interact with the part. Parts are added to the layout via {@link WorkbenchRouter}. */ abstract readonly parts: Signal; /** * Returns the handle of the specified part, or `null` if not found. * * A handle represents a part in the layout. The handle has methods to interact with the part. A part is added to the layout via {@link WorkbenchRouter}. */ abstract getPart(partId: PartId): WorkbenchPart | null; /** * Provides the handles of the views in the current workbench layout. * * Each handle represents a view in the layout. The handle has methods to interact with the view. Views are opened via {@link WorkbenchRouter}. */ abstract readonly views: Signal; /** * Returns the handle of the specified view, or `null` if not found. * * A handle represents a view in the layout. The handle has methods to interact with the view. A view is opened via {@link WorkbenchRouter}. */ abstract getView(viewId: ViewId): WorkbenchView | null; /** * Closes the specified workbench views. * * Note: This instruction runs asynchronously via URL routing. */ abstract closeViews(...viewIds: ViewId[]): Promise; /** * Registers a factory function to contribute an action to a {@link WorkbenchPart}. * * Part actions are displayed in the part bar, enabling interaction with the part and its content. Actions can be aligned to the left or right. * * The function: * - Can return a component or template, or an object literal for an object literal for more control. * - Is called per part. Returning the action adds it to the part, returning `null` skips it. * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's untracked function to execute code outside this reactive context. * * Alternatively to registering a function, actions can be provided declaratively in HTML templates using the {@link WorkbenchPartActionDirective}. * * ```html * * ... * * ``` * * @param fn - function to contribute an action. * @return handle to unregister the action. */ abstract registerPartAction(fn: WorkbenchPartActionFn): Disposable; /** * Registers a factory function to contribute a menu item to the context menu of a {@link WorkbenchView}. * * Right-clicking on a view tab opens a context menu to interact with the view and its content. * * The function: * - Is called per view. Returning the menu item adds it to the context menu of the view, returning `null` skips it. * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's `untracked` function to execute code outside this reactive context. * * Alternatively to registering a function, menu items can be provided declaratively in HTML templates using the {@link WorkbenchViewMenuItemDirective}. * * ```html * * ... * * ``` * * @param fn - function to contribute a menu item. * @return handle to unregister the menu item. */ abstract registerViewMenuItem(fn: WorkbenchViewMenuItemFn): Disposable; /** * Switches the theme of the workbench. * * Themes can be registered when loading the `@scion/workbench` SCSS module in the application's `styles.scss` file. * By default, SCION provides a light and a dark theme, `scion-light` and `scion-dark`. * * See the documentation of `@scion/workbench` SCSS module for more information. * * @param theme - The name of the theme to switch to. * * @deprecated since version 19.0.0-beta.3. Switch theme using `WorkbenchService.settings.theme` signal. API will be removed in version 21. */ abstract switchTheme(theme: string): Promise; /** * Defines settings to adapt the workbench to personal preferences and working styles. * * Settings are stored in {@link WorkbenchConfig.storage} (defaults to local storage). */ abstract readonly settings: { /** * Specifies the workbench theme. * * Defaults to the `sci-theme` attribute set on the HTML root element, or to the user's OS color scheme preference if not set. * * Built-in themes: `scion-light` and `scion-dark`. */ theme: WritableSignal; /** * Controls the alignment of the bottom docked panel. * * Defaults to the `--sci-workbench-layout-panel-align` design token, or `justify` if not set. */ panelAlignment: WritableSignal<'left' | 'right' | 'center' | 'justify'>; /** * Controls animation of docked panels. * * Defaults to the `--sci-workbench-layout-panel-animate` design token, or `true` if not set. */ panelAnimation: WritableSignal; }; /** * Provides the current workbench theme, if any. * * @deprecated since version 19.0.0-beta.3. Read the theme from `WorkbenchService.settings.theme` signal, and the color scheme from 'getComputedStyle(inject(DOCUMENT).documentElement).colorScheme'. API will be removed in version 21. */ abstract readonly theme: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * DI token to get a unique id of the workbench. * * The id is different each time the app is reloaded. Different workbench windows have different ids. */ declare const WORKBENCH_ID: InjectionToken; /** * Provides the status of the SCION Workbench startup. */ declare abstract class WorkbenchStartup { /** * Indicates whether the workbench has completed startup. * * After startup, the workbench layout is available. */ abstract readonly done: Signal; /** * Resolves when the workbench has completed startup. * * After startup, the workbench layout is available. */ abstract readonly whenDone: Promise; /** * Indicates whether the workbench has completed startup. * * After startup, the workbench layout is available. * * @deprecated since version 19.0.0-beta.3. Use `WorkbenchStartup.done` instead. API will be removed in version 21. */ abstract readonly isStarted: Signal; /** * Resolves when the workbench completes startup. * * After startup, the workbench layout is available. * * @deprecated since version 19.0.0-beta.3. Use `WorkbenchStartup.whenDone` instead. API will be removed in version 21. */ abstract readonly whenStarted: Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents the arrangement of parts as grid. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ interface MPartGrid { root: MTreeNode | MPart; activePartId: PartId; } /** * {@link MPartGrid} with additional fields not serialized into the URL. */ interface ɵMPartGrid extends MPartGrid { /** * Indicates if this grid was migrated from an older version. */ migrated?: true; } /** * Represents a node in the grid. * * A node contains two children, which are either a {@link MPart} or a {@link MTreeNode}, respectively. * The ratio together with the direction describes how to arrange the two children. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ declare class MTreeNode { /** * Discriminator to unmarshall {@link MTreeNode} to its class type. */ readonly type = "MTreeNode"; id: string; child1: MTreeNode | MPart; child2: MTreeNode | MPart; ratio: number; direction: 'column' | 'row'; parent?: MTreeNode; constructor(treeNode: Omit); /** * Tests if the given object is a {@link MTreeNode}. */ static isMTreeNode(object: unknown): object is MTreeNode; } /** * Represents a part in the grid. * * A part can be a stack of views or display content. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ declare class MPart { /** * Discriminator to unmarshall {@link MPart} to its class type. */ readonly type = "MPart"; id: PartId; alternativeId?: string; title?: string; parent?: MTreeNode; views: MView[]; activeViewId?: ViewId; structural: boolean; cssClass?: string[]; navigation?: { id: string; hint?: string; data?: NavigationData; cssClass?: string[]; }; constructor(part: Omit); /** * Tests if the given object is a {@link MPart}. */ static isMPart(object: unknown): object is MPart; } /** * Represents a view contained in a {@link MPart}. * * The M-prefix indicates this object is a model object that is serialized and stored, requiring migration on breaking change. */ interface MView { id: ViewId; alternativeId?: string; cssClass?: string[]; markedForRemoval?: true; navigation?: { id: string; hint?: string; data?: NavigationData; cssClass?: string[]; }; } /** * Grids referenced in the workbench layout. */ interface WorkbenchGrids { /** * Reference to the "root" grid of the workbench layout. */ main: T; /** * Reference to the main area grid, a sub-grid embedded by the main area part contained in the main grid. */ mainArea?: T; /** * Grids associated with activities. * * An activity has at least one part, the reference part, specified when creating the activity (docked part). * Removing the reference part removes the activity. Most activities have a grid with only the reference part. */ [activityId: ActivityId]: T; } /** * Controls how to serialize the workbench layout. */ interface LayoutSerializationFlags { /** * Excludes the node id from the serialization. */ excludeTreeNodeId?: true; /** * Excludes views marked for removal from the serialization. */ excludeViewMarkedForRemoval?: true; /** * Excludes the view navigation id from the serialization. */ excludeViewNavigationId?: true; /** * Excludes the part navigation id from the serialization. */ excludePartNavigationId?: true; /** * Assigns each part a stable id based on its position in the grid. * * Stable identifiers may be required to compare two layouts for equality. */ assignStablePartIdentifier?: true; /** * Assigns each activity a stable id based on its position in the layout. * * Stable identifiers may be required to compare two layouts for equality. */ assignStableActivityIdentifier?: true; /** * Controls if to sort the fields of object literals by name. Defaults to `false`. * * Stable sort order may be required to compare two layouts for equality. */ sort?: true; } /** * Matches an array of URL segments against another array of URL segments. * * Flags: * - matchWildcardPath: Indicates if wildcard path matching is enabled. If enabled, the asterisk `*` path matches any path of the segment. * - matchMatrixParams: Controls whether to match matrix parameters. */ declare class UrlSegmentMatcher { private _pattern; private _flags; constructor(_pattern: UrlSegment[], _flags: { matchWildcardPath: boolean; matchMatrixParams: boolean; }); /** * Matches given array of URL segments. */ matches(segments: UrlSegment[]): boolean; } /** * Requires at least one key from T. */ type RequireOne = { [K in keyof T]: Required> & Partial>; }[keyof T]; /** * @inheritDoc * * IMPORTANT: Methods starting with an underscore indicate they are not working on a working copy, but modifying the layout instance. */ declare class ɵWorkbenchLayout implements WorkbenchLayout { private readonly _grids; private readonly _activityLayout; private readonly _outlets; private readonly _navigationStates; private readonly _partActivationInstantProvider; private readonly _viewActivationInstantProvider; private readonly _workbenchLayoutSerializer; private readonly _injector; /** Identifies the perspective of this layout, if any. */ readonly perspectiveId: string | undefined; /** * Creates a workbench layout based on given config. * * @see WorkbenchLayoutConstructConfig */ constructor(config?: WorkbenchLayoutConstructConfig); get activityLayout(): MActivityLayout; get grids(): WorkbenchGrids; /** * Tests if given activity is contained in this layout. */ hasActivity(id: ActivityId): boolean; /** * Indicates if this layout contains activities. */ hasActivities(): boolean; /** * Tests if given part is contained in the specified grid. */ hasPart(id: string, options?: { grid?: keyof WorkbenchGrids; }): boolean; /** * Tests if given view is contained in the specified grid. */ hasView(id: string, options?: { grid?: keyof WorkbenchGrids; }): boolean; /** * Finds the URL of outlets based on the specified filter. * * @param selector - Defines the search scope. * @return outlets matching the filter criteria. */ outlets(selector: RequireOne<{ mainGrid: true; mainAreaGrid: true; activityGrids: true; }>): Outlets; /** * Finds navigational state based on the specified filter. * * @param findBy - Defines the search scope. * @param findBy.grid - Searches outlets in the specified grid. * @return state matching the filter criteria. */ navigationStates(findBy?: { grid?: keyof WorkbenchGrids; }): NavigationStates; /** * Finds the navigational state of specified outlet. */ navigationState(findBy: { outlet: WorkbenchOutlet; }): NavigationState; /** * Finds the URL of specified outlet. */ urlSegments(findBy: { outlet: WorkbenchOutlet; }): UrlSegment[]; /** * Maximizes the main content by minimizing activities, or restores activities to the state prior to the last minimization otherwise. * * Has no effect for layouts without activities. * * @return a copy of this layout with the maximization changed. */ toggleMaximized(): ɵWorkbenchLayout; /** * Finds activities based on the specified filter. * * @param findBy - Defines the search scope. * @param findBy.id - Searches for activities with the specified id. * @param findBy.active - Searches for activities which are active. * @param findBy.partId - Searches for activities that contain the specified part. * @param findBy.viewId - Searches for activities that contain the specified view. * @param options - Controls the search. * @param options.throwIfEmpty - Controls to error if no activity is found. * @param options.throwIfMulti - Controls to error if multiple activities are found. * @return activities matching the filter criteria. */ activities(findBy: { id?: ActivityId; active?: boolean; partId?: PartId; viewId?: ViewId; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti: (() => Error) | true; }): readonly [MActivity]; activities(findBy: { id?: ActivityId; active?: boolean; partId?: PartId; viewId?: ViewId; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly [MActivity, ...MActivity[]]; activities(findBy?: { id?: ActivityId; active?: boolean; partId?: PartId; viewId?: ViewId; }, options?: { throwIfEmpty?: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly MActivity[]; /** * Finds an activity based on the specified filter. If not found, by default, throws an error unless setting the `orElseNull` option. * * @param findBy - Defines the search scope. * @param findBy.id - Searches for an activity with the specified id. * @param findBy.active - Searches for an activity which is active. * @param findBy.partId - Searches for an activity that contains the specified part. * @param findBy.viewId - Searches for an activity that contains the specified view. * @param options - Controls the search. * @param options.orElse - Controls to return `null` instead of throwing an error if no activity is found. * @return activity matching the filter criteria. */ activity(findBy: RequireOne<{ id: ActivityId; active: boolean; partId: PartId; viewId: ViewId; }>): MActivity; activity(findBy: RequireOne<{ id: ActivityId; active: boolean; partId: PartId; viewId: ViewId; }>, options: { orElse: null; }): MActivity | null; /** * Finds activity stacks based on the specified filter. * * @param findBy - Defines the search scope. * @param findBy.activityId - Searches for an activity stack that contains the specified activity. * @param findBy.dockTo - Searches for an activity stack in the specified docking area. * @param findBy.partId - Searches for an activity stack that contains the specified part. * @param options - Controls the search. * @param options.throwIfEmpty - Controls to error if no activity stack is found. * @param options.throwIfMulti - Controls to error if multiple activity stacks are found. * @return activity stacks matching the filter criteria. */ activityStacks(findBy: { activityId?: ActivityId; dockTo?: DockingArea; partId?: PartId; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti: (() => Error) | true; }): readonly [MActivityStack]; activityStacks(findBy: { activityId?: ActivityId; dockTo?: DockingArea; partId?: PartId; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly [MActivityStack, ...MActivityStack[]]; activityStacks(findBy?: { activityId?: ActivityId; dockTo?: DockingArea; partId?: PartId; }, options?: { throwIfEmpty?: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly MActivityStack[]; /** * Finds an activity stack based on the specified filter. If not found, by default, throws an error unless setting the `orElseNull` option. * * @param findBy - Defines the search scope. * @param findBy.activityId - Searches for an activity stack that contains the specified activity. * @param findBy.dockTo - Searches for an activity stack in the specified docking area. * @param findBy.partId - Searches for an activity stack that contains the specified part. * @param options - Controls the search. * @param options.orElse - Controls to return `null` instead of throwing an error if no activity stack is found. * @return activity stack matching the filter criteria. */ activityStack(findBy: RequireOne<{ activityId: ActivityId; dockTo: DockingArea; partId: PartId; }>): MActivityStack; activityStack(findBy: RequireOne<{ activityId: ActivityId; dockTo: DockingArea; partId: PartId; }>, options: { orElse: null; }): MActivityStack | null; /** * Toggles the visibility of specified activity. */ toggleActivity(id: ActivityId): ɵWorkbenchLayout; /** * Sets the size of the specified activity panel. */ setActivityPanelSize(panel: 'left' | 'right' | 'bottom', size: number): ɵWorkbenchLayout; /** * Sets the split ratio of two activities displayed in the specified panel. */ setActivityPanelSplitRatio(panel: 'left' | 'right' | 'bottom', ratio: number): ɵWorkbenchLayout; /** * Finds parts based on the specified filter. * * @param findBy - Defines the search scope. * @param findBy.id - Searches for parts with the specified id. * @param findBy.viewId - Searches for parts that contain the specified view. * @param findBy.peripheral - Searches for parts located in or out of the peripheral area. * @param findBy.grid - Searches for parts contained in the specified grid. * @param options - Controls the search. * @param options.throwIfEmpty - Controls to error if no part is found. * @param options.throwIfMulti - Controls to error if multiple parts are found. * @return parts matching the filter criteria. */ parts(findBy: { id?: string; viewId?: string; peripheral?: boolean; grid?: keyof WorkbenchGrids | Array; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti: (() => Error) | true; }): readonly [MPart]; parts(findBy: { id?: string; viewId?: string; peripheral?: boolean; grid?: keyof WorkbenchGrids | Array; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly [MPart, ...MPart[]]; parts(findBy?: { id?: string; viewId?: string; peripheral?: boolean; grid?: keyof WorkbenchGrids | Array; }, options?: { throwIfEmpty?: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly MPart[]; /** * Finds a part based on the specified filter. If not found, by default, throws an error unless setting the `orElseNull` option. * * @param findBy - Defines the search scope. * @param findBy.partId - Searches for a part with the specified id. * @param findBy.viewId - Searches for a part that contains the specified view. * @param findBy.grid - Searches for a part contained in the specified grid. * @param options - Controls the search. * @param options.orElse - Controls to return `null` instead of throwing an error if no part is found. * @return part matching the filter criteria. */ part(findBy: RequireOne<{ partId: PartId; viewId: string; }> & { grid?: keyof WorkbenchGrids; }): MPart; part(findBy: RequireOne<{ partId: PartId; viewId: string; }> & { grid?: keyof WorkbenchGrids; }, options: { orElse: null; }): MPart | null; /** * @inheritDoc * * @param id - @inheritDoc * @param relativeTo - @inheritDoc * @param extras - @inheritDoc * @param extras.activate - @inheritDoc * @param extras.structural - Specifies if this is a structural part. A structural part will not be removed when removing its last view. Defaults to `true`. */ addPart(id: string | MAIN_AREA, relativeTo: ReferenceElement, extras?: PartExtras & { structural?: boolean; }): ɵWorkbenchLayout; addPart(id: string, dockTo: DockingArea, extras: DockedPartExtras): ɵWorkbenchLayout; /** @inheritDoc */ removePart(id: string): ɵWorkbenchLayout; /** * Renames a part. * * @param id - Identifies the part to rename. * @param newPartId - The new identity of the part. * @return a copy of this layout with the part renamed. */ renamePart(id: PartId, newPartId: PartId): ɵWorkbenchLayout; /** @inheritDoc */ navigatePart(id: string, commands: Commands, extras?: { hint?: string; relativeTo?: ActivatedRoute | null; data?: NavigationData; state?: NavigationState; cssClass?: string | string[]; }): ɵWorkbenchLayout; /** * Returns the active part of the specified grid, or `null` if specified grid is not present. */ activePart(find: { grid: 'main'; }): Readonly; activePart(find: { grid: keyof WorkbenchGrids; }): Readonly | null; /** @inheritDoc */ activatePart(id: string): ɵWorkbenchLayout; /** * Finds a view based on the specified filter. If not found, by default, throws an error unless setting the `orElseNull` option. * * @param findBy - Defines the search scope. * @param findBy.viewId - Searches for a view with the specified id. * @param options - Controls the search. * @param options.orElse - Controls to return `null` instead of throwing an error if no view is found. * @return view matching the filter criteria. */ view(findBy: { viewId: ViewId; }): MView; view(findBy: { viewId: ViewId; }, options: { orElse: null; }): MView | null; /** * Finds views based on the specified filter. * * @param findBy - Defines the search scope. * @param findBy.id - Searches for views with the specified id. * @param findBy.partId - Searches for views contained in the specified part. * @param findBy.segments - Searches for views navigated to the specified URL. * @param findBy.navigationHint - Searches for views navigated with given hint. Passing `null` searches for views navigated without a hint. * @param findBy.markedForRemoval - Searches for views marked (or not marked) for removal. * @param findBy.grid - Searches for views contained in the specified grid. * @param options - Controls the search. * @param options.throwIfEmpty - Controls to error if no view is found. * @param options.throwIfMulti - Controls to error if multiple views are found. * @return views matching the filter criteria. */ views(findBy: { id?: string; partId?: string; peripheral?: boolean; segments?: UrlSegmentMatcher; navigationHint?: string | null; markedForRemoval?: boolean; grid?: keyof WorkbenchGrids | Array; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti: (() => Error) | true; }): readonly [MView]; views(findBy: { id?: string; partId?: string; peripheral?: boolean; segments?: UrlSegmentMatcher; navigationHint?: string | null; markedForRemoval?: boolean; grid?: keyof WorkbenchGrids | Array; }, options: { throwIfEmpty: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly [MView, ...MView[]]; views(findBy?: { id?: string; partId?: string; peripheral?: boolean; segments?: UrlSegmentMatcher; navigationHint?: string | null; markedForRemoval?: boolean; grid?: keyof WorkbenchGrids | Array; }, options?: { throwIfEmpty?: (() => Error) | true; throwIfMulti?: (() => Error) | true; }): readonly MView[]; /** @inheritDoc */ addView(id: string, extras: { partId: string; position?: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'; activateView?: boolean; activatePart?: boolean; cssClass?: string | string[]; }): ɵWorkbenchLayout; /** @inheritDoc */ navigateView(id: string, commands: Commands, extras?: { hint?: string; relativeTo?: ActivatedRoute | null; data?: NavigationData; state?: NavigationState; cssClass?: string | string[]; }): ɵWorkbenchLayout; /** * @inheritDoc * * @param id - @inheritDoc * @param options - Controls removal of the view. * @param options.force - Specifies whether to force remove the view, bypassing `CanClose` guard. */ removeView(id: string, options?: { force?: boolean; }): ɵWorkbenchLayout; /** @inheritDoc */ moveView(id: string, targetPartId: string, options?: { position?: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'; activateView?: boolean; activatePart?: boolean; }): ɵWorkbenchLayout; /** @inheritDoc */ activateView(id: string, options?: { activatePart?: boolean; }): ɵWorkbenchLayout; /** * Activates the preceding view if it exists, or the subsequent view otherwise. * * @param id - The id of the view to activate its adjacent view. * @param options - Controls view activation. * @param options.activatePart - Controls if to activate the part. Defaults to `false`. * @return a copy of this layout with the adjacent view activated. */ activateAdjacentView(id: string, options?: { activatePart?: boolean; }): ɵWorkbenchLayout; /** * Renames a view. * * @param id - Identifies the view to rename. * @param newViewId - The new identity of the view. * @return a copy of this layout with the view renamed. */ renameView(id: ViewId, newViewId: ViewId): ɵWorkbenchLayout; /** * Renames an activity. * * @param id - Identifies the activity to rename. * @param newActivityId - The new identity of the activity. * @return a copy of this layout with the part renamed. */ renameActivity(id: ActivityId, newActivityId: ActivityId): ɵWorkbenchLayout; /** @inheritDoc */ modify(modifyFn: (layout: ɵWorkbenchLayout) => ɵWorkbenchLayout): ɵWorkbenchLayout; /** * Sets the split ratio for the two children of a {@link MTreeNode}. * * @param nodeId - The id of the node to set the split ratio for. * @param ratio - The proportional size between the two children, expressed as closed interval [0,1]. * Example: To give 1/3 of the space to the first child, set the ratio to `0.3`. * @return a copy of this layout with the split ratio set. */ setTreeNodeSplitRatio(nodeId: string, ratio: number): ɵWorkbenchLayout; /** * Serializes this layout into a URL-safe base64 string. */ serialize(flags?: LayoutSerializationFlags): SerializedWorkbenchLayout; /** * Tests if the current layout is equal to another layout based on provided flags. */ equals(other: ɵWorkbenchLayout, flags?: LayoutSerializationFlags): boolean; /** * Computes the next available view id. */ computeNextViewId(): ViewId; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __addActivity; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __removeActivity; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __toggleActivity; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __assignStableActivityIdentifier; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __renameActivity; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __toggleMaximized; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __setActivityPanelSize; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __setActivityPanelSplitRatio; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __addPart; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __removePart; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __navigatePart; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __renamePart; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __assignStablePartIdentifier; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __addView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __navigateView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __moveView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __removeView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __activateView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __activateAdjacentView; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __setTreeNodeSplitRatio; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __activatePart; /** * Note: This method name begins with underscores, indicating that it does not operate on a working copy, but modifies this layout instead. */ private __renameView; /** * Finds a grid based on the specified filter. If not found, by default, throws an error unless setting the `orElseNull` option. * * @param findBy - Defines the search scope. * @param findBy.partId - Searches for a grid that contains the specified part. * @param findBy.viewId - Searches for a grid that contains the specified view. * @param findBy.nodeId - Searches for a grid that contains the specified node. * @param findBy.grid - Searches for specified grid. * @param options - Controls the search. * @param options.orElse - Controls to return `null` instead of throwing an error if no grid is found. * @return grid matching the filter criteria. */ grid(findBy: RequireOne<{ partId: PartId; viewId: ViewId; nodeId: string; grid: MPartGrid; }>): { gridName: keyof WorkbenchGrids; grid: MPartGrid; }; grid(findBy: RequireOne<{ partId: PartId; viewId: ViewId; nodeId: string; grid: MPartGrid; }>, options: { orElse: null; }): { gridName: keyof WorkbenchGrids; grid: MPartGrid; } | null; /** * Computes if the specified part is located in the peripheral area. */ isPeripheralPart(partId: PartId): boolean; /** * Traverses the tree to find an element that matches the given predicate. * * @param findBy - Defines the search scope. * @param findBy.id - Searches for an element with the specified id. * @return Element matching the filter criteria. */ private findTreeElement; /** * Traverses the tree to find elements that match the given predicate. * * @param predicateFn - Predicate function to match. * @param options - Defines search scope and options. * @param options.findFirst - If specified, stops traversing on first match. If not set, defaults to `false`. * @param options.grid - Searches for an element contained in the specified grid. * @return Elements matching the filter criteria. */ private findTreeElements; /** * Asserts each activity to have a grid. */ private assertActivities; /** * Creates a copy of this layout. */ private workingCopy; } /** * Describes how to lay out a part relative to another part or node. */ interface ReferenceElement extends ReferencePart { /** * Specifies the part or node which to use as the reference element to lay out the part. * If not set, the part will be aligned relative to the root of the workbench layout. */ relativeTo?: string; } /** * DI token to control the identity of the initial part in the main area. * * The initial part is automatically created by the workbench if the main area has no part, but it has no * special meaning to the workbench and can be removed by the user. If not set, a UUID is assigned. * * Overwrite this DI token in tests to control the identity of the initial part. * * ```ts * TestBed.overrideProvider(MAIN_AREA_INITIAL_PART_ID, {useValue: 'part.initial'}) * ``` * * @docs-private Not public API, intended for internal use only. */ declare const MAIN_AREA_INITIAL_PART_ID: InjectionToken<`part.${string}`>; /** * Serialized artifacts of the workbench layout. */ interface SerializedWorkbenchLayout { grids: WorkbenchGrids; activityLayout: string; outlets: (selector: RequireOne<{ mainGrid: true; mainAreaGrid: true; activityGrids: true; }>) => string; } /** * Configuration for constructing the workbench layout. * * Grids and the activity layout can be passed in serialized or deserialized form. * If they are not provided, default layouts will be created. * * The following rules apply: * - If the main grid is not provided, it defaults to a layout with a main area. * - If the grid for the main area is not provided, but the main grid has a main area part, * it defaults to a main area grid with an initial part. The DI token {@link MAIN_AREA_INITIAL_PART_ID} * can be used to assign the initial part its identity. */ interface WorkbenchLayoutConstructConfig { grids?: Partial>; activityLayout?: MActivityLayout | string; perspectiveId?: string; outlets?: Outlets | string; navigationStates?: NavigationStates; } /** * Like the Angular CDK 'ComponentPortal' but does not destroy the component on detach. * * IMPORTANT: In order for the component to have the "correct" injection context, construct it the time attaching it to the Angular component tree, * or by calling {@link createComponentFromInjectionContext}. The "correct" injection context is crucial, for example, if the portal is displayed * in a router outlet, so that child outlets can register with their logical parent outlet. The Angular router uses the logical outlet hierarchy to * resolve and activate child routes. * * @see WbComponentPortal */ declare class WbComponentPortal { private _componentType; private _options?; private _viewContainerRef; private _componentRef; private _logger; private _attached; constructor(_componentType: ComponentType, _options?: PortalOptions | undefined); /** * Constructs the portal's component using given injection context. */ private createComponent; /** * Constructs the portal's component using the given injection context. */ createComponentFromInjectionContext(injectionContext: Injector): void; /** * Attaches this portal to the given {@link ViewContainerRef} according to the following rules: * * - If the component is not yet constructed, constructs it based on the given view container's injection context. * - If already attached to the given view container, does nothing. * - If already attached to a different view container, detaches it first. */ attach(viewContainerRef: ViewContainerRef): void; /** * Detaches this portal from its view container without destroying it. Does nothing if not attached. * * The portal is removed from the DOM and its change detector detached from the Angular change detector tree, * so it will not be checked for changes until it is reattached. */ detach(): void; get isConstructed(): boolean; isAttachedTo(viewContainerRef: ViewContainerRef): boolean; get isDestroyed(): boolean; get componentRef(): ComponentRef; get attached(): Signal; private onDestroy; /** * Destroys the component instance and all the data structures associated with it. */ destroy(): void; } /** * Controls instantiation of the component. */ interface PortalOptions { /** * Providers registered with the injector for the instantiation of the component. */ providers?: Provider[]; } /** * Container for managing CSS classes set in different scopes. */ declare class ClassList { private readonly _layout; private readonly _navigation; private readonly _route; private readonly _application; /** * CSS classes as list. */ readonly asList: Signal; /** * CSS classes as {@link Map} grouped by scope. */ readonly asMap: Signal; constructor(); /** * Specifies CSS classes defined by the layout. */ set layout(cssClasses: string | string[] | null | undefined); /** * Returns CSS classes defined in the scope 'layout'. */ get layout(): Signal; /** * Specifies CSS classes associated with the navigation. */ set navigation(cssClasses: string | string[] | null | undefined); /** * Returns CSS classes defined in the scope 'navigation'. */ get navigation(): Signal; /** * Specifies CSS classes defined by the route. */ set route(cssClasses: string | string[] | null | undefined); /** * Returns CSS classes defined in the scope 'route'. */ get route(): Signal; /** * Specifies CSS classes set by the application. */ set application(cssClasses: string | string[] | null | undefined); /** * Returns classes defined in the scope 'application'. */ get application(): Signal; } /** * Represents scopes used in {@link ClassList}. * * `layout`: Use for CSS classes defined on the layout. * `navigation`: Use for CSS classes associated with the navigation. * `route`: Use for CSS classes defined on the route. * `application`: Use for CSS classes set by the application. */ type ClassListScopes = 'layout' | 'navigation' | 'route' | 'application'; /** * CSS classes grouped by scope. */ type ClassListMap = ReadonlyMap; declare class ɵWorkbenchPart implements WorkbenchPart { readonly id: PartId; private readonly _partEnvironmentInjector; private readonly _workbenchRouter; private readonly _rootOutletContexts; private readonly _layout; private readonly _viewRegistry; private readonly _activationInstantProvider; private readonly _partComponent; private readonly _title; private readonly _titleComputed; readonly alternativeId: string | undefined; readonly navigation: WritableSignal; readonly active: WritableSignal; readonly viewIds: WritableSignal<`view.${number}`[]>; readonly activeViewId: WritableSignal<`view.${number}` | null>; readonly gridName: WritableSignal; readonly peripheral: WritableSignal; readonly topLeft: WritableSignal; readonly topRight: WritableSignal; readonly activity: WritableSignal; readonly canMinimize: Signal; readonly actions: Signal; readonly classList: ClassList; private _isInMainArea; private _activationInstant; /** * Reference to the HTML element of {@link PartComponent} or {@link MainAreaPartComponent}. */ partComponent: WritableSignal; constructor(id: PartId, layout: ɵWorkbenchLayout, options: { component: ComponentType; }); /** * Constructs the portal using the given injection context. */ createPortalFromInjectionContext(injectionContext: Injector): ComponentPortal; /** * Method invoked when the workbench layout has changed. * * This method: * - is called on every layout change, enabling the update of part properties defined in the layout (navigation hint, navigation data, ...). * - is called on route activation (after destroyed the previous component (if any), but before constructing the new component). */ private onLayoutChange; private computeTitle; /** * Returns the component of this part. Returns `null` if not displaying navigated content. */ getComponent(): T | null; /** * Activates this part. * * Note: This instruction runs asynchronously via URL routing. */ activate(): Promise; get activationInstant(): number | undefined; /** @inheritDoc */ get isInMainArea(): boolean; /** * Reference to the handle's injector. The injector will be destroyed when removing the part. */ get injector(): Injector; /** @inheritDoc */ get title(): Signal; /** @inheritDoc */ set title(title: string | undefined); /** @inheritDoc */ set cssClass(cssClass: string | string[]); /** @inheritDoc */ get cssClass(): Signal; /** * Computes actions matching this part. */ private computePartActions; /** * Updates the activation instant when this part is activated. */ private touchOnActivate; /** * Sets up automatic synchronization of {@link WorkbenchPart} on every layout change. * * If the operation is cancelled (e.g., due to a navigation failure), it reverts the changes. */ private installModelUpdater; destroy(): void; } /** * Represents a pseudo-type for the actual {@link PartComponent} which must not be referenced in order to avoid import cycles. */ type PartComponent = unknown; /** * Represents a pseudo-type for the actual {@link MainAreaPartComponent} which must not be referenced in order to avoid import cycles. */ type MainAreaPartComponent = unknown; /** * Handle to interact with a dialog opened via {@link WorkbenchDialogService}. * * The dialog component can inject this handle to interact with the dialog, such as setting the title or closing the dialog. * * Dialog inputs are available as input properties in the dialog component. */ declare abstract class WorkbenchDialog { /** * Sets the title of the dialog. */ abstract get title(): Signal; abstract set title(title: Translatable | undefined); /** * Specifies the preferred dialog size. */ abstract readonly size: WorkbenchDialogSize; /** * Controls if to apply a padding to the content of the dialog. Defaults to `true`. * * This setting does not affect the padding of the dialog header and footer. * * The default padding can be changed via the CSS variable `--sci-workbench-dialog-padding`. */ abstract get padding(): Signal; abstract set padding(padding: boolean); /** * Specifies if to display a close button in the dialog header. Defaults to `true`. */ abstract get closable(): Signal; abstract set closable(closable: boolean); /** * Specifies if the user can resize the dialog. Defaults to `true`. */ abstract get resizable(): Signal; abstract set resizable(resizable: boolean); /** * Specifies CSS class(es) to add to the dialog, e.g., to locate the dialog in tests. */ abstract get cssClass(): Signal; abstract set cssClass(cssClass: string | string[]); /** * Closes the dialog. Optionally, pass a result or an error to the dialog opener. */ abstract close(result?: R | Error): void; } /** * Represents the preferred dialog size. */ interface WorkbenchDialogSize { /** * Specifies the minimum height of the dialog. */ get minHeight(): Signal; set minHeight(minHeight: string | undefined); /** * Specifies the height of the dialog, displaying a vertical scrollbar if its content overflows. * If not specified, the dialog adapts its height to its context height, respecting any `minHeight' or `maxHeight' constraint. */ get height(): Signal; set height(height: string | undefined); /** * Specifies the maximum height of the dialog. */ get maxHeight(): Signal; set maxHeight(maxHeight: string | undefined); /** * Specifies the minimum width of the dialog. */ get minWidth(): Signal; set minWidth(minWidth: string | undefined); /** * Specifies the width of the dialog, displaying a horizontal scrollbar if its content overflows. * If not specified, the dialog adapts its width to its context width, respecting any `minWidth' or `maxWidth' constraint. */ get width(): Signal; set width(width: string | undefined); /** * Specifies the maximum width of the dialog. */ get maxWidth(): Signal; set maxWidth(maxWidth: string | undefined); } /** * Controls how to open a dialog. */ interface WorkbenchDialogOptions { /** * Optional data to pass to the dialog component. Inputs are available as input properties in the dialog component. * * **Example:** * ```ts * public someInput = input.required(); * ``` */ inputs?: { [name: string]: unknown; }; /** * Controls which area of the application to block by the dialog. * * - **Application-modal:** * Use to block the workbench, or the browser's viewport if configured in {@link WorkbenchConfig.dialog.modalityScope}. * * - **View-modal:** * Use to block only the contextual view of the dialog, allowing the user to interact with other views. * This is the default if opening the dialog in the context of a view. */ modality?: 'application' | 'view'; /** * Sets the injector for the instantiation of the dialog component, giving control over the objects available * for injection into the dialog component. If not specified, uses the application's root injector, or the view's * injector if opened in the context of a view. * * **Example:** * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Specifies CSS class(es) to add to the dialog, e.g., to locate the dialog in tests. */ cssClass?: string | string[]; /** * Controls whether to animate the opening of the dialog. Defaults to `false`. */ animate?: boolean; /** * Specifies the context in which to open the dialog. */ context?: { /** * Controls which view to block when opening a dialog view-modal. * * By default, if opening the dialog in the context of a view, that view is used as the contextual view. */ viewId?: ViewId; }; } /** * Use this directive to contribute an action to the dialog footer (only applicable if not using a custom dialog footer). * * Actions are displayed in the order as modeled in the template and can be placed either on the left or right. * * The host element of this modeling directive must be a . The action shares the lifecycle of the host element. * * **Example:** * ```html * * * * ``` */ declare class WorkbenchDialogActionDirective { /** * Specifies where to place this action in the dialog footer. Defaults to `end`. */ readonly align: i0.InputSignal<"start" | "end">; readonly template: TemplateRef; private _action; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Use this directive to replace the default dialog footer that renders actions contributed via the {@link WorkbenchDialogActionDirective} directive. * * The host element of this modeling directive must be a . The footer shares the lifecycle of the host element. * * **Example:** * ```html * * * * ``` */ declare class WorkbenchDialogFooterDirective { /** * Specifies if to display a visual separator between the dialog content and this footer. * Defaults to `true`. */ readonly divider: i0.InputSignalWithTransform; readonly template: TemplateRef; private _footer; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Use this directive to replace the default dialog header that displays the title and a close button. * * The host element of this modeling directive must be a . The header shares the lifecycle of the host element. * * **Example:** * ```html * * * * ``` */ declare class WorkbenchDialogHeaderDirective { /** * Specifies if to display a visual separator between this header and the dialog content. * Defaults to `true`. */ readonly divider: i0.InputSignalWithTransform; readonly template: TemplateRef; private _header; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents an object that is blocking another object, preventing user interaction with the other object. */ interface Blocking { /** * Identifies the object that is blocking another object. */ readonly id: string; /** * Instructs the blocking object to gain focus. */ focus(): void; /** * Instructs the blocking object to signal the user to continue interacting with this object. */ blink(): void; } /** * Represents an object that can be blocked by another object, such as a dialog, preventing user interaction with the object. */ interface Blockable { /** * Emits the object blocking this object, or `null` if not blocked. */ blockedBy$: Observable; } /** @inheritDoc */ declare class ɵWorkbenchDialog implements WorkbenchDialog, Blockable, Blocking { id: string; component: ComponentType; private _options; private readonly _dialogEnvironmentInjector; private readonly _overlayRef; private readonly _portal; private readonly _workbenchDialogRegistry; private readonly _workbenchConfig; private readonly _destroyRef; private readonly _blink$; private readonly _attached; private readonly _title; private readonly _closable; private readonly _resizable; private readonly _padding; private readonly _cssClass; /** * Result (or error) to be passed to the dialog opener. */ private _result; private _componentRef; /** * Indicates whether this dialog is blocked by other dialog(s) that overlay this dialog. */ readonly blockedBy$: BehaviorSubject<ɵWorkbenchDialog | null>; readonly size: WorkbenchDialogSize; readonly blinking$: BehaviorSubject; readonly context: { view: ɵWorkbenchView | null; }; header: WorkbenchDialogHeaderDirective | undefined; footer: WorkbenchDialogFooterDirective | undefined; actions: WorkbenchDialogActionDirective[]; constructor(id: string, component: ComponentType, _options: WorkbenchDialogOptions); open(): Promise; /** @inheritDoc */ close(result?: R | Error): void; /** * Inputs passed to the dialog. */ get inputs(): { [name: string]: unknown; } | undefined; /** * Indicates if to animate the dialog. */ get animate(): boolean; /** @inheritDoc */ focus(): void; registerHeader(header: WorkbenchDialogHeaderDirective): Disposable; registerFooter(footer: WorkbenchDialogFooterDirective): Disposable; registerAction(action: WorkbenchDialogActionDirective): Disposable; /** @inheritDoc */ get title(): Signal; /** @inheritDoc */ set title(title: Translatable | undefined); /** @inheritDoc */ get closable(): Signal; /** @inheritDoc */ set closable(closable: boolean); /** @inheritDoc */ get resizable(): Signal; /** @inheritDoc */ set resizable(resizable: boolean); /** @inheritDoc */ get padding(): Signal; /** @inheritDoc */ set padding(padding: boolean); /** @inheritDoc */ get cssClass(): Signal; /** @inheritDoc */ set cssClass(cssClass: string | string[]); /** * Returns the position of the dialog in the dialog stack. */ getPositionInDialogStack(): number; /** @inheritDoc */ blink(): void; /** * Reference to the handle's injector. The injector will be destroyed when closing the dialog. */ get injector(): Injector; private createPortal; /** * Creates a dedicated overlay per dialog to place it on top of previously created overlays, such as dialogs, popups, dropdowns, etc. */ private createOverlay; /** * Restores focus when re-attaching this dialog. */ private restoreFocusOnAttach; /** * Restores focus when unblocking this dialog. */ private restoreFocusOnUnblock; /** * Monitors attachment of the host element. */ private monitorHostElementAttached; /** * Aligns this dialog with the boundaries of the host element. */ private stickToHostElement; /** * Blocks this dialog if not the topmost dialog in its context. */ private blockWhenNotOnTop; private blinkOnRequest; /** * Destroys this dialog and associated resources. */ destroy(): void; } declare class ɵWorkbenchView implements WorkbenchView, Blockable { readonly id: ViewId; private readonly _viewEnvironmentInjector; private readonly _workbenchId; private readonly _workbenchService; private readonly _layout; private readonly _workbenchRouter; private readonly _rootOutletContexts; private readonly _partRegistry; private readonly _viewDragService; private readonly _activationInstantProvider; private readonly _workbenchDialogRegistry; private readonly _logger; private readonly _adapters; private readonly _title; private readonly _heading; private readonly _dirty; private readonly _closable; private readonly _blockedBy; private readonly _scrolledIntoView; private _activationInstant; alternativeId: string | undefined; readonly navigation: i0.WritableSignal; readonly navigationHint: Signal; readonly navigationData: Signal<_scion_workbench.NavigationData>; readonly navigationState: Signal<_scion_workbench.NavigationState>; readonly urlSegments: Signal<_angular_router.UrlSegment[]>; readonly position: Signal; readonly first: Signal; readonly last: Signal; readonly part: i0.WritableSignal<ɵWorkbenchPart>; readonly active: i0.WritableSignal; readonly menuItems: Signal; readonly blockedBy$: Observable<ɵWorkbenchDialog | null>; readonly portal: WbComponentPortal; readonly classList: ClassList; readonly isClosable: Signal; /** * Guard to confirm closing the view, if any. * * @see canClose */ canCloseGuard: (() => Promise) | undefined; constructor(id: ViewId, layout: ɵWorkbenchLayout, options: { component: ComponentType; }); private createPortal; /** * Method invoked when the workbench layout has changed. * * This method: * - is called on every layout change, enabling the update of view properties defined in the layout (navigation hint, navigation data, part, ...). * - is called on route activation (after destroyed the previous component (if any), but before constructing the new component). */ private onLayoutChange; /** * Returns the component of this view. Returns `null` if not navigated the view, or before it was activated for the first time. */ getComponent(): T | null; /** @inheritDoc */ get title(): Signal; /** @inheritDoc */ set title(title: Translatable | null); /** @inheritDoc */ get heading(): Signal; /** @inheritDoc */ set heading(heading: Translatable | null); /** @inheritDoc */ get dirty(): Signal; /** @inheritDoc */ set dirty(dirty: boolean); /** @inheritDoc */ get scrolledIntoView(): Signal; set scrolledIntoView(scrolledIntoView: boolean); /** @inheritDoc */ set cssClass(cssClass: string | string[]); /** @inheritDoc */ get cssClass(): Signal; /** @inheritDoc */ set closable(closable: boolean); /** @inheritDoc */ get closable(): Signal; /** @inheritDoc */ activate(options?: { skipLocationChange?: boolean; }): Promise; get activationInstant(): number | undefined; /** @inheritDoc */ close(target?: 'self' | 'all-views' | 'other-views' | 'views-to-the-right' | 'views-to-the-left'): Promise; /** @inheritDoc */ move(target: 'new-window'): void; move(partId: string, options?: { region?: 'north' | 'south' | 'west' | 'east'; workbenchId?: string; }): void; /** @inheritDoc */ canClose(canClose: CanCloseFn): CanCloseRef; /** * Reference to the handle's injector. The injector will be destroyed when closing the view. */ get injector(): Injector; /** * Registers an adapter for this view, replacing any previously registered adapter of the same type. * * Adapters enable loosely coupled extension of an object, allowing one object to be adapted to another. */ registerAdapter(adapterType: AbstractType | Type, object: T): void; /** * Unregisters the given adapter. Has no effect if not registered. */ unregisterAdapter(adapterType: AbstractType | Type): void; /** * Adapts this object to the specified type. Returns `null` if no such object can be found. */ adapt(adapterType: AbstractType | Type): T | null; /** @inheritDoc */ get destroyed(): boolean; /** * Updates the activation instant when this view is activated. */ private touchOnActivate; /** * Computes menu items matching this view. */ private computeMenuItems; /** * Sets up automatic synchronization of {@link WorkbenchView} on every layout change. * * If the operation is cancelled (e.g., due to a navigation failure), it reverts the changes. */ private installModelUpdater; destroy(): void; } /** * Represents a pseudo-type for the actual {@link ViewComponent} which must not be referenced in order to avoid import cycles. */ type ViewComponent = any; /** * @inheritDoc */ declare class ɵWorkbenchPerspective implements WorkbenchPerspective { private readonly _perspectiveEnvironmentInjector; private readonly _workbenchLayoutFactory; private readonly _workbenchLayoutService; private readonly _workbenchLayoutMerger; private readonly _workbenchlayoutStorageService; private readonly _workbenchRouter; private readonly _initialLayoutFn; private readonly _perspectiveViewConflictResolver; private readonly _activePerspective; readonly id: string; readonly transient: boolean; readonly data: { [key: string]: any; }; readonly active: Signal; private _initialLayout; private _layout; constructor(definition: WorkbenchPerspectiveDefinition); /** * Activates this perspective. */ activate(): Promise; /** * Resets this perspective to its initial layout. */ reset(): Promise; /** * Reference to the handle's injector. The injector will be destroyed when unregistering the perspective. */ get injector(): Injector; /** * Creates the perspective layout using the main area of the current layout. * * When switching perspective, id clashes between views contained in the perspective and the main area are possible. * The activation detects and resolves conflicts, changing the layout of this perspective if necessary. */ private createLayoutForActivation; /** * Creates the initial layout of this perspective as defined in the perspective definition. */ private createInitialLayout; /** * Activates the first view of each part if not specified. */ private ensureActiveView; /** * Sets up automatic persistence of the perspective layout on every layout change. */ private installLayoutPersister; /** * Loads the layout of this perspective from storage, applying necessary migrations if the layout is outdated. * Returns `undefined` if not stored or could not be deserialized. */ private loadLayout; /** * Stores the layout of this perspective. * * If an anonymous perspective, only memoizes the layout, but does not write it to storage. */ private storeLayout; destroy(): void; } declare class ɵWorkbenchService implements WorkbenchService { private readonly _workbenchRouter; private readonly _perspectiveRegistry; private readonly _partRegistry; private readonly _partActionRegistry; private readonly _viewMenuItemRegistry; private readonly _viewRegistry; private readonly _perspectiveService; readonly layout: Signal<ɵWorkbenchLayout>; readonly perspectives: Signal<ɵWorkbenchPerspective[]>; readonly parts: Signal<ɵWorkbenchPart[]>; readonly views: Signal<ɵWorkbenchView[]>; readonly activePerspective: Signal<ɵWorkbenchPerspective | undefined>; readonly theme: Signal; readonly settings: { theme: i0.WritableSignal; panelAlignment: i0.WritableSignal<"justify">; panelAnimation: i0.WritableSignal; }; /** @inheritDoc */ getPerspective(perspectiveId: string): ɵWorkbenchPerspective | null; /** @inheritDoc */ getPart(partId: PartId): ɵWorkbenchPart | null; /** @inheritDoc */ getView(viewId: ViewId): ɵWorkbenchView | null; /** @inheritDoc */ registerPerspective(perspective: WorkbenchPerspectiveDefinition): Promise; /** @inheritDoc */ switchPerspective(id: string): Promise; /** @inheritDoc */ resetPerspective(): Promise; /** @inheritDoc */ closeViews(...viewIds: ViewId[]): Promise; /** @inheritDoc */ registerPartAction(fn: WorkbenchPartActionFn): Disposable; /** @inheritDoc */ registerViewMenuItem(fn: WorkbenchViewMenuItemFn): Disposable; /** @inheritDoc */ switchTheme(theme: string): Promise; private computeLegacyThemeObject; static ɵfac: i0.ɵɵFactoryDeclaration<ɵWorkbenchService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ɵWorkbenchService>; } /** * Main entry point component of the SCION Workbench. */ declare class WorkbenchComponent { private _workbenchLauncher; private _logger; private readonly _workbenchRouter; private _iframeOverlayHost; private _viewDropZoneOverlayHost; /** Splash to display during workbench startup. */ protected splash: _angular_cdk_portal.ComponentType; protected workbenchStartup: WorkbenchStartup; protected workbenchService: ɵWorkbenchService; constructor(); /** * Toggles layout maximization by pressing Ctrl+Shift+F12. */ private installMaximizeShortcutListener; /** * Starts the SCION Workbench. Has no effect if already started, e.g., in an app initializer or route guard. */ private startWorkbench; /** * Disables change detection during navigation to avoid partial DOM updates of the workbench layout * if the navigation is asynchronous (e.g., because of lazy loading, async guards, or resolvers). */ private disableChangeDetectionDuringNavigation; /** * Initializes tokens to inject references to workbench elements. */ private provideWorkbenchElementReferences; /** * Throws if loading the workbench recursively. */ private throwOnCircularLoad; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Directive to add a desktop to the workbench. * * The desktop is displayed when no view is open and the layout does not contain a navigated part. * * A desktop can provide instructions for working with the application, display a welcome page, or provide links to open views. * * Usage: * Add this directive to an `` child of the `` component. The template content is used as desktop content. * * ```html * * * Welcome * * * ``` * * > Using `@if` allows displaying the desktop based on a condition, e.g. the active perspective. * * For layouts with a main area, it is recommended to navigate the main area part instead: * ```ts * import {MAIN_AREA, provideWorkbench} from '@scion/workbench'; * * provideWorkbench({ * layout: factory => factory * .addPart(MAIN_AREA) * .navigatePart(MAIN_AREA, ['path/to/desktop']) * }); * ``` */ declare class WorkbenchDesktopDirective { constructor(); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive to add a menu item to the context menu of a view. * * Right-clicking on a view tab opens a context menu to interact with the view and its content. * * Usage: * Add this directive to an ``. The template content is used as the menu item content. The menu item shares the lifecycle of its embedding context. * * ```html * * ... * * ``` * * The {@link WorkbenchView} is available as the default template variable (`let-view`). * * ```html * * ... * * ``` * * Menu items are context-sensitive: * - Declaring the menu item in a view's template displays it only in the context menu of that view. * - Declaring the menu item outside a view context, such as within ``, displays it in the context menu of every view. * * A predicate can be used to match a specific context, such as a particular view or condition. * * ```html * * ... * * ``` * * Alternatively, menu items can be added using a factory function and registered via {@link WorkbenchService.registerViewMenuItem}. */ declare class WorkbenchViewMenuItemDirective { /** * Binds keyboard accelerator(s) to the menu item, e.g., ['ctrl', 'alt', 1]. * * Supported modifiers are 'ctrl', 'shift', 'alt' and 'meta'. */ readonly accelerator: i0.InputSignal; /** * Enables grouping of menu items. */ readonly group: i0.InputSignal; /** * Controls if the menu item is disabled. Defaults to `false`. */ readonly disabled: i0.InputSignal; /** * Predicate to match a specific context, such as a particular view or condition. Defaults to any context. * * The function: * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's `untracked` function to execute code outside this reactive context. */ readonly canMatch: i0.InputSignal<((view: WorkbenchView) => boolean) | undefined>; /** * Specifies CSS class(es) to add to the menu item, e.g., to locate the menu item in tests. */ readonly cssClass: i0.InputSignal; /** * Emits when the menu item is clicked. */ readonly action: i0.OutputEmitterRef; constructor(); private registerMenuItem; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive to add an action to a part. * * Part actions are displayed in the part bar, enabling interaction with the part and its content. Actions can be aligned to the left or right. * * Usage: * Add this directive to an ``. The template content is used as the action content. The action shares the lifecycle of its embedding context. * * ```html * * ... * * ``` * * The {@link WorkbenchPart} is available as the default template variable (`let-part`). * * ```html * * ... * * ``` * * Part actions are context-sensitive: * - Declaring the action in a part's template displays it only in that part. * - Declaring the action in a view's template displays it only when that view is active. * - Declaring the action outside a part and view context, such as within ``, displays it in every part. * * A predicate can be used to match a specific context, such as a particular part or condition. * * ```html * * ... * * ``` * * Alternatively, actions can be added using a factory function and registered via {@link WorkbenchService.registerPartAction}. */ declare class WorkbenchPartActionDirective { /** * Specifies where to place this action in the part bar. Defaults to `end`. */ readonly align: i0.InputSignal<"start" | "end" | undefined>; /** * Predicate to match a specific context, such as a particular part or condition. Defaults to any context. * * The function: * - Can call `inject` to get any required dependencies. * - Runs in a reactive context and is called again when tracked signals change. * Use Angular's `untracked` function to execute code outside this reactive context. */ readonly canMatch: i0.InputSignal<((part: WorkbenchPart) => boolean) | undefined>; /** * Specifies CSS class(es) to add to the action, e.g., to locate the action in tests. */ readonly cssClass: i0.InputSignal; constructor(); private registerPartAction; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Enables navigation of workbench views and modification of the workbench layout. * * A view is a visual workbench element for displaying content side-by-side or stacked. A view can be navigated to any route. * * A view can inject `ActivatedRoute` to get parameters passed to the navigation and read data associated with the route. */ declare abstract class WorkbenchRouter { /** * Navigates views based on the provided array of commands and extras. This method is similar to Angular's `Router.navigate(...)`, but with a view as the navigation target. * * A command can be a string or an object literal. A string represents a path segment, an object literal associates matrix parameters with the preceding segment. * Multiple segments can be combined into a single command, separated by a forward slash. * * By default, navigates existing views that match the path, or opens a new view otherwise. Matrix params do not affect view resolution. * This behavior can be changed by setting an explicit navigation target in navigation extras. * * By default, navigation is absolute. Set `relativeTo` in extras for relative navigation. * * The router supports for closing views matching the routing commands by setting `close` in navigation extras. * * ### Usage * ``` * inject(WorkbenchRouter).navigate(['team', 33, 'user', 11]); * inject(WorkbenchRouter).navigate(['team/11/user', userName, {details: true}]); // multiple static segments can be merged into one * inject(WorkbenchRouter).navigate(['teams', {selection: 33'}]); // matrix parameter `selection` with the value `33`. * ``` * * @see WorkbenchRouterLinkDirective */ abstract navigate(commands: Commands, extras?: WorkbenchNavigationExtras): Promise; /** * Performs changes to the current workbench layout. * * The router will invoke this function with the current workbench layout. The layout has methods for modifying it. * The layout is immutable; each modification creates a new instance. * * The function can call `inject` to get any required dependencies. * * ## Workbench Layout * The workbench layout is an arrangement of parts and views. Parts can be docked to the side or positioned relative to each other. * Views are stacked in parts and can be dragged to other parts. Content can be displayed in both parts and views. * * ## Example * The following example adds a part to the left of the main area, inserts a view and navigates it. * * ```ts * inject(WorkbenchRouter).navigate(layout => layout * .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) * .addView('navigator', {partId: 'left'}) * .navigateView('navigator', ['path/to/view']) * .activateView('navigator') * ); * ``` * * @param onNavigate - Specifies the callback to modify the layout. * @param extras - Controls how to perform the navigation. * @see NavigateFn */ abstract navigate(onNavigate: NavigateFn, extras?: Omit): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Like the Angular 'RouterLink' directive but with functionality to navigate a view. * * Use this directive to navigate the current view. If the user presses the CTRL key (Mac: ⌘, Windows: ⊞), this directive will open a new view. * * ```html * Link * ``` * * You can override the default behavior by setting an explicit navigation target in navigation extras. * * ```html * Link * ``` * * By default, navigation is relative to the currently activated route, if any. * * Prepend the path with a forward slash '/' to navigate absolutely, or set `relativeTo` property in navigational extras to `null`. * * ```html * Link * ``` */ declare class WorkbenchRouterLinkDirective { readonly commands: i0.InputSignalWithTransform; readonly extras: i0.InputSignalWithTransform, Omit | undefined>; private readonly _workbenchRouter; private readonly _router; private readonly _route; private readonly _view; protected readonly href: Signal; protected onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean; /** * Computes navigation extras based on the given extras and contextual route. */ private computeNavigationExtras; /** * Computes the link's href based on given array of commands and navigation extras. */ private computeHrefIfLink; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Keys for associating workbench-specific data with a route in {@link Route.data}. * * @see Route.data */ declare const WorkbenchRouteData: { /** * Property to set the title of a view in {@link Route.data}. * * Use a {@link Translatable} to localize the title. */ readonly title: "ɵworkbenchViewTitle"; /** * Property to set the heading of a view in {@link Route.data}. * * Use a {@link Translatable} to localize the heading. */ readonly heading: "ɵworkbenchViewHeading"; /** * Property to associate CSS class(es) with a workbench element in {@link Route.data}, e.g., to locate it in tests. */ readonly cssClass: "ɵworkbenchCssClass"; /** * @internal * * Property to obtain the outlet name of the route. This property is only set on the top-level route. * * Use if the route's injection context is not available, e.g., in a {@link UrlMatcher}. * Otherwise, the outlet can be injected using the {@link WORKBENCH_AUXILIARY_ROUTE_OUTLET} DI token, * even in child routes, e.g., in guards. */ readonly ɵoutlet: "ɵworkbenchOutlet"; }; /** * Configures a route to only match workbench views navigated with a specific hint. * * Use as a `canMatch` guard in {@link Route} config to differentiate between routes with identical paths. * For example, multiple views can navigate to the same path while resolving to different routes, such as the empty-path route to maintain a clean URL. * * Example for navigating a view to the 'SearchComponent': * ```ts * // Navigation * inject(WorkbenchRouter).navigate([], {hint: 'search'}); * ``` * * // Routes * ```ts * const routes: Routes = [ * {path: '', canMatch: [canMatchWorkbenchView('search')], component: SearchComponent}, * {path: '', canMatch: [canMatchWorkbenchView('outline')], component: OutlineComponent}, * ]; * ``` */ declare function canMatchWorkbenchView(navigationHint: string): CanMatchFn; /** * Configures a route to only or never match workbench views. * * @see canMatchWorkbenchOutlet */ declare function canMatchWorkbenchView(canMatch: boolean): CanMatchFn; /** * Configures a route to only match workbench parts navigated with a specific hint. * * Use as a `canMatch` guard in {@link Route} config to differentiate between routes with identical paths. * For example, multiple parts can navigate to the same path while resolving to different routes, such as the empty-path route to maintain a clean URL. * * Example for navigating a part to the 'SearchComponent': * ```ts * inject(WorkbenchRouter).navigate(layout => { * return layout.navigatePart('search', [], {hint: 'search'}); * }); * ``` * * // Routes * ```ts * const routes: Routes = [ * {path: '', canMatch: [canMatchWorkbenchPart('search')], component: SearchComponent}, * {path: '', canMatch: [canMatchWorkbenchPart('outline')], component: OutlineComponent}, * ]; * ``` */ declare function canMatchWorkbenchPart(navigationHint: string): CanMatchFn; /** * Configures a route to only or never match workbench parts. * * @see canMatchWorkbenchOutlet */ declare function canMatchWorkbenchPart(canMatch: boolean): CanMatchFn; /** * Configures a route to only or never match workbench outlets. * * A workbench outlet can be a part, view, dialog, popup, or messagebox. * * Usage: * - Use `canMatchWorkbenchOutlet(false)` guard on the application's default route (`""`) to prevent matching workbench outlets, such as parts and views, avoiding infinite loops. * - Use `canMatchWorkbenchOutlet(true)` guard on view and part routes to prevent matching the primary router outlet. * * Example: * * ```ts * import {Routes} from '@angular/router'; * import {canMatchWorkbenchOutlet, canMatchWorkbenchPart, canMatchWorkbenchView, WorkbenchComponent} from '@scion/workbench'; * * const routes: Routes = [ * { * path: '', * canActivate: [authorizedGuard()], * children: [ * // Default route * { * path: '', * canMatch: [canMatchWorkbenchOutlet(false)], * component: WorkbenchComponent, * }, * // Workbench view and part routes * { * path: '', * canMatch: [canMatchWorkbenchOutlet(true)], * children: [ * {path: 'path/to/page1', component: ...}, * {path: 'path/to/page2', component: ...}, * {path: '', canMatch: [canMatchWorkbenchPart('hint-1')], component: ...}, * {path: '', canMatch: [canMatchWorkbenchView('hint-2')], component: ...}, * ... * ], * }, * ], * }, * ]; * ``` * * @see canMatchWorkbenchPart * @see canMatchWorkbenchView */ declare function canMatchWorkbenchOutlet(matchWorkbenchOutlet: boolean): CanMatchFn; /** * Matches the route based on the active perspective. * * Can be used to activate a different route based on the active perspective. */ declare function canMatchWorkbenchPerspective(id: string): CanMatchFn; /** * Controls the appearance and behavior of a message box. */ interface WorkbenchMessageBoxOptions { /** * Specifies the title of the message box. */ title?: Translatable; /** * Defines buttons of the message box. Defaults to an 'OK' button (translation key: `workbench.ok.action`). * * Each property in the object literal represents a button, with the property value used as the button label. * Clicking a button closes the message box and returns the property key to the message box opener. * * A button with the key 'cancel' is also assigned the Escape keystroke. * * **Example:** * ```ts * { * yes: 'Yes', * no: 'No', * cancel: 'Cancel', * } * ``` */ actions?: { [key: string]: Translatable; }; /** * Specifies the severity of the message. Defaults to `info`. */ severity?: 'info' | 'warn' | 'error'; /** * Controls which area of the application to block by the message box. * * - **Application-modal:** * Use to block the workbench, or the browser's viewport if configured in {@link WorkbenchConfig.dialog.modalityScope}. * * - **View-modal:** * Use to block only the contextual view of the message box, allowing the user to interact with other views. * This is the default if opening the message box in the context of a view. */ modality?: 'application' | 'view'; /** * Specifies if the user can select text displayed in the message box. Defaults to `false`. */ contentSelectable?: boolean; /** * Specifies data available as input properties in the message component. * * This property only applies to a message box opened with a component, not a plain text message. * * ```ts * public someInput = input.required(); * ``` */ inputs?: { [name: string]: unknown; }; /** * Specifies the injector for the instantiation of the message component. * * This property only applies to a message box opened with a component, not a plain text message. * * A custom injector gives control over the objects available for injection into the message component. If not specified, uses the * application's root injector, or the view's injector if opened in the context of a view. * * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Specifies CSS class(es) to add to the message box, e.g., to locate the message box in tests. */ cssClass?: string | string[]; /** * Specifies the context in which to open the message box. */ context?: { /** * Allows controlling which view to block when opening a view-modal message box. * * By default, if opening the message box in the context of a view, that view is used as the contextual view. */ viewId?: ViewId; }; } /** * Provides a standardized dialog for presenting a message to the user, such as an info, warning or alert, * or for prompting the user for confirmation. The message can be plain text or a component, allowing for * structured content or input prompts. * * ## Modality * Displayed on top of other content, a message box blocks interaction with other parts of the application. * * A message box can be view-modal or application-modal. A view-modal message box blocks only a specific view, * allowing the user to interact with other views. An application-modal message box blocks the workbench, * or the browser's viewport if configured in {@link WorkbenchConfig.dialog.modalityScope}. * * ## Stacking * Multiple message boxes are stacked, and only the topmost message box in each modality stack can be interacted with. * * ## Styling * The following CSS variables can be set to customize the default look of a message box. * * - `--sci-workbench-messagebox-max-width` * - `--sci-workbench-messagebox-severity-indicator-size` * - `--sci-workbench-messagebox-padding` * - `--sci-workbench-messagebox-text-align` * - `--sci-workbench-messagebox-title-align` * - `--sci-workbench-messagebox-title-font-family` * - `--sci-workbench-messagebox-title-font-weight` * - `--sci-workbench-messagebox-title-font-size` */ declare abstract class WorkbenchMessageBoxService { /** * Displays the specified message in a message box. * * By default, the calling context determines the modality of the message box. If the message box is opened from a view, only this view is blocked. * To open the message box with a different modality, specify the modality in {@link WorkbenchMessageBoxOptions.modality}. * * **Example:** * * ```ts * const action = await inject(WorkbenchMessageBoxService).open('Do you want to save changes?', { * actions: { * yes: 'Yes', * no: 'No', * cancel: 'Cancel', * }, * }); * ``` * * @param message - Specifies the text to display. * @param options - Controls the appearance and behavior of the message box. * @return Promise that resolves to the key of the action button that the user clicked to close the message box. */ abstract open(message: Translatable, options?: WorkbenchMessageBoxOptions): Promise; /** * Displays the specified component in a message box. * * By default, the calling context determines the modality of the message box. If the message box is opened from a view, only this view is blocked. * To open the message box with a different modality, specify the modality in {@link WorkbenchMessageBoxOptions.modality}. * * Data can be passed to the component as inputs via {@link WorkbenchMessageBoxOptions.inputs} property or by providing a custom injector * via {@link WorkbenchMessageBoxOptions.injector} property. Inputs are available as input properties in the component. * * **Example:** * * ```ts * const action = await inject(WorkbenchMessageBoxService).open(SomeComponent, { * inputs: { * a: '...', * b: '...', * }, * actions: { * yes: 'Yes', * no: 'No', * cancel: 'Cancel', * }, * }); * ``` * * ```ts * @Component({...}) * export class SomeComponent { * * @Input({required: true}) * public a!: string; * * @Input() * public b?: string; * } * ``` * * @param component - Specifies the component to render as the message. * @param options - Controls the appearance and behavior of the message box. * @return Promise that resolves to the key of the action button that the user clicked to close the message box. */ abstract open(component: ComponentType, options?: WorkbenchMessageBoxOptions): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Enables the display of a component in a modal dialog. * * A dialog is a visual element for focused interaction with the user, such as prompting the user for input or confirming actions. * The user can move or resize a dialog. * * Displayed on top of other content, a dialog blocks interaction with other parts of the application. * * ## Modality * A dialog can be view-modal or application-modal. * * A view-modal dialog blocks only a specific view, allowing the user to interact with other views. An application-modal dialog blocks * the workbench, or the browser's viewport if configured in {@link WorkbenchConfig.dialog.modalityScope}. * * ## Dialog Stack * Multiple dialogs are stacked, and only the topmost dialog in each modality stack can be interacted with. * * ## Dialog Component * The dialog component can inject the {@link WorkbenchDialog} handle to interact with the dialog, such as setting the title or closing the dialog. * Inputs passed to the dialog are available as input properties in the dialog component. * * ## Dialog Header * By default, the dialog displays the title and a close button in the header. Alternatively, the dialog supports the use of a custom header. * To provide a custom header, add an Angular template to the HTML of the dialog component and decorate it with the `wbDialogHeader` directive. * * ```html * * * * ``` * * ## Dialog Footer * A dialog has a default footer that displays actions defined in the HTML of the dialog component. An action is an Angular template decorated with * the `wbDialogAction` directive. Multiple actions are supported, rendered in modeling order, and can be left- or right-aligned. * * ```html * * * * * * * * * * * * * * * ``` * * Alternatively, the dialog supports the use of a custom footer. To provide a custom footer, add an Angular template to the HTML of the dialog component and * decorate it with the `wbDialogFooter` directive. * * ```html * * * * ``` * * ## Styling * The following CSS variables can be set to customize the default look of a dialog. * * - `--sci-workbench-dialog-padding` * - `--sci-workbench-dialog-header-height` * - `--sci-workbench-dialog-header-background-color` * - `--sci-workbench-dialog-title-font-family` * - `--sci-workbench-dialog-title-font-weight` * - `--sci-workbench-dialog-title-font-size` * - `--sci-workbench-dialog-title-align` */ declare abstract class WorkbenchDialogService { /** * Opens a dialog with the specified component and options. * * By default, the calling context determines the modality of the dialog. If the dialog is opened from a view, only this view is blocked. * To open the dialog with a different modality, specify the modality in {@link WorkbenchDialogOptions.modality}. * * Data can be passed to the component as inputs via {@link WorkbenchDialogOptions.inputs} property or by providing a custom injector * via {@link WorkbenchDialogOptions.injector} property. Dialog inputs are available as input properties in the dialog component. * * @param component - Specifies the component to display in the dialog. * @param options - Controls how to open a dialog. * @returns Promise that resolves to the dialog result, if any, or that rejects if the dialog couldn't be opened or was closed with an error. */ abstract open(component: ComponentType, options?: WorkbenchDialogOptions): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents a handle that a notification component can inject to interact with the notification, for example, * to read input data or to configure the notification. * * A notification is a closable message that appears in the upper-right corner and disappears automatically after a few seconds. * It informs the user of a system event, e.g., that a task has been completed or an error has occurred. */ declare abstract class Notification { /** * Input data as passed by the notification opener, or `undefined` if not passed. */ readonly input: T | undefined; /** * Sets the title of the notification; can be a string literal or an Observable. */ abstract setTitle(title: Translatable | undefined | Observable): void; /** * Sets the severity of the notification. */ abstract setSeverity(severity: 'info' | 'warn' | 'error'): void; /** * Sets the timeout upon which to close the notification automatically. * Can be either a duration alias, or a number in seconds. */ abstract setDuration(duration: 'short' | 'medium' | 'long' | 'infinite' | number): void; /** * Specifies CSS class(es) to add to the notification, e.g., to locate the notification in tests. */ abstract setCssClass(cssClass: string | string[]): void; } /** * Configures the content and appearance of a notification presented to the user. * * A notification is a closable message that appears in the upper-right corner and disappears automatically after a few seconds. * It informs the user of a system event, e.g., that a task has been completed or an error has occurred. * * Multiple notifications are stacked vertically. Notifications can be grouped. For each group, only the last notification is * displayed at any given time. */ interface NotificationConfig { /** * Optional title of the notification; can be a string literal or an Observable. */ title?: Translatable | Observable; /** * Content of the notification, can be either a plain text message or a component. * * Consider using a component when displaying structured content. You can pass data to the component using the * {@link componentInput} property or by providing a custom injector in {@link componentConstructOptions.injector}. */ content: Translatable | ComponentType; /** * If using a component as the notification content, optionally instruct Angular how to construct the component. * In most cases, construct options need not to be set. */ componentConstructOptions?: { /** * Sets the injector for the instantiation of the notification component, giving you control over the objects available * for injection into the notification component. If not specified, uses the application's root injector. * * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Sets the component's attachment point in Angular's logical component tree (not the DOM tree used for rendering), effecting when * Angular checks the component for changes during a change detection cycle. If not set, inserts the component at the top level * in the component tree. */ viewContainerRef?: ViewContainerRef; }; /** * Optional data to pass to the notification component. In the component, you can inject the notification handle {@link Notification} to * read input data. Use only in combination with a custom notification component, has no effect otherwise. */ componentInput?: unknown; /** * Specifies the severity of the notification. Defaults to `info`. */ severity?: 'info' | 'warn' | 'error'; /** * Specifies the timeout after which to close the notification automatically. Defaults to `medium`. * Can be either a duration alias, or a number in seconds. */ duration?: 'short' | 'medium' | 'long' | 'infinite' | number; /** * Specifies the group which this notification belongs to. * If specified, the notification will replace any previously displayed notification of the same group. */ group?: string; /** * Use in combination with {@link group} to reduce the input to be passed to a notification. * * Note that the reducer function, if specified, is only invoked for notifications that belong to a group. * If no reducer is specified, the input of the notification is passed as is. * * Each time when to display a notification that belongs to a group and if there is already present a * notification of that group, the reduce function is called with the input of that present notification * and the input of the new notification, allowing for the aggregation of the input values. */ groupInputReduceFn?: (prevInput: any, currInput: any) => any; /** * Specifies CSS class(es) to add to the notification, e.g., to locate the notification in tests. */ cssClass?: string | string[]; } /** * Allows displaying a notification to the user. * * A notification is a closable message that appears in the upper-right corner and disappears automatically after a few seconds. * It informs the user of a system event, e.g., that a task has been completed or an error has occurred. * * Multiple notifications are stacked vertically. Notifications can be grouped. For each group, only the last notification is * displayed. * * To display structured content, consider passing a component to {@link NotificationConfig#content} instead of plain text. */ declare class NotificationService { private readonly _zone; private readonly _document; private readonly _notifications$; constructor(); /** * Presents the user with a notification that is displayed in the upper-right corner based on the given config. * * To display structured content, consider passing a component to {@link NotificationConfig#content}. * * ### Usage: * ```typescript * notificationService.notify({ * content: 'Task scheduled for execution.', * severity: 'info', * duration: 'short', * }); * ``` * * @param notification - Configures the content and appearance of the notification. */ notify(notification: Translatable | NotificationConfig): void; private addNotification; /** * Constructs the notification based on the given config and computes its insertion index. */ private constructNotification; private get notifications(); /** * Installs a keystroke listener to close the last notification when the user presses the escape keystroke. */ private installEscapeHandler; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents a point on the page or view, optionally with a dimension, where a workbench popup should be attached. */ type PopupOrigin = (Point | TopLeftPoint | TopRightPoint | BottomLeftPoint | BottomRightPoint) & { width?: number; height?: number; }; /** * Coordinate relative to the "x/y" corner of the view or page viewport. */ interface Point { x: number; y: number; } /** * Coordinate relative to the "top/left" corner of the view or page viewport. * * This is equivalent to passing a "x/y" coordinate as {@link Point}. */ interface TopLeftPoint { top: number; left: number; } /** * Coordinate relative to the "top/right" corner of the view or page viewport. */ interface TopRightPoint { top: number; right: number; } /** * Coordinate relative to the "bottom/left" corner of the view or page viewport. */ interface BottomLeftPoint { bottom: number; left: number; } /** * Coordinate relative to the "bottom/right" corner of the view or page viewport. */ interface BottomRightPoint { bottom: number; right: number; } /** * Configures the content to be displayed in a popup. * * A popup is a visual workbench component for displaying content above other content. It is positioned relative to an anchor, * which can be either a page coordinate (x/y) or an HTML element. When using an element as the popup anchor, the popup also * moves when the anchor element moves. */ declare abstract class PopupConfig { /** * Controls where to open the popup. * * Can be an HTML element or coordinates: * - Using an element: The popup opens and sticks to the element. * - Using coordinates: The popup opens and sticks relative to the view or page bounds. * * Supported coordinate pairs: * - x/y: Relative to the top/left corner of the view or page. * - top/left: Same as x/y. * - top/right: Relative to the top/right corner. * - bottom/left: Relative to the bottom/left corner. * - bottom/right: Relative to the bottom/right corner. * * Coordinates can be updated using an Observable. The popup displays when the Observable emits the first coordinate. */ abstract readonly anchor: ElementRef | Element | PopupOrigin | Observable; /** * Specifies the component to display in the popup. * * In the component, you can inject the popup handle {@link Popup} to interact with the popup, such as to close it * or obtain its input data. */ abstract readonly component: Type; /** * Instructs Angular how to construct the component. In most cases, construct options need not to be set. */ readonly componentConstructOptions?: { /** * Sets the injector for the instantiation of the popup component, giving you control over the objects available * for injection into the popup component. If not specified, uses the application's root injector, or the view's * injector if opened in the context of a view. * * ```ts * Injector.create({ * parent: ..., * providers: [ * {provide: , useValue: } * ], * }) * ``` */ injector?: Injector; /** * Specifies providers to be registered with the popup injector. Unlike providers that are registered via a separate {@link injector}, * passed providers are registered in the same injector as the popup handle itself, allowing for dependency injection of the popup handle. */ providers?: StaticProvider[]; /** * Sets the component's attachment point in Angular's logical component tree (not the DOM tree used for rendering), effecting when * Angular checks the component for changes during a change detection cycle. If not set, inserts the component at the top level * in the component tree. */ viewContainerRef?: ViewContainerRef; }; /** * Hint where to align the popup relative to the popup anchor, unless there is not enough space available in that area. By default, * if not specified, the popup opens north of the anchor. */ readonly align?: 'east' | 'west' | 'north' | 'south'; /** * Optional data to pass to the popup component. In the component, you can inject the popup handle {@link Popup} to read input data. */ readonly input?: any; /** * Controls when to close the popup. */ readonly closeStrategy?: CloseStrategy; /** * Specifies the preferred popup size. If not specified, the popup adjusts its size to the content size. */ readonly size?: PopupSize; /** * Specifies CSS class(es) to add to the popup, e.g., to locate the popup in tests. */ readonly cssClass?: string | string[]; /** * Specifies the context in which to open the popup. */ readonly context?: { /** * Specifies the view the popup belongs to. * * Binds the popup to the lifecycle of a view so that it displays only if the view is active and closes when the view is closed. * * By default, if opening the popup in the context of a view, that view is used as the popup's contextual view. * If you set the view id to `null`, the popup will open without referring to the contextual view. */ viewId?: ViewId | null; }; } /** * Specifies when to close the popup. */ interface CloseStrategy { /** * Controls if to close the popup on focus loss, returning the result set via {@link Popup#setResult} to the popup opener. * Defaults to `true`. */ onFocusLost?: boolean; /** * Controls if to close the popup when pressing escape. Defaults to `true`. * No return value will be passed to the popup opener. */ onEscape?: boolean; } /** * Represents the preferred popup size as specified by the popup opener. */ interface PopupSize { /** * Specifies the min-height of the popup. */ minHeight?: string; /** * Specifies the height of the popup. */ height?: string; /** * Specifies the max-height of the popup. */ maxHeight?: string; /** * Specifies the min-width of the popup. */ minWidth?: string; /** * Specifies the width of the popup. */ width?: string; /** * Specifies the max-width of the popup. */ maxWidth?: string; } /** * Represents a handle that a popup component can inject to interact with the popup, for example, * to read input data or the configured size, or to close the popup. */ declare abstract class Popup { /** * Input data as passed by the popup opener when opened the popup, or `undefined` if not passed. */ abstract readonly input: T | undefined; /** * Preferred popup size as specified by the popup opener, or `undefined` if not set. */ abstract readonly size: PopupSize | undefined; /** * CSS classes associated with the popup. */ abstract readonly cssClasses: string[]; /** * Sets a result that will be passed to the popup opener when the popup is closed on focus loss {@link CloseStrategy#onFocusLost}. */ abstract setResult(result?: R): void; /** * Closes the popup. Optionally, pass a result or an error to the popup opener. */ abstract close(result?: R | Error): void; } /** * Enables the display of a component in a popup. * * A popup is a visual workbench component for displaying content above other content. It is positioned relative to an anchor and * moves when the anchor moves. Unlike a dialog, the popup closes on focus loss. */ declare class PopupService { private readonly _environmentInjector; private readonly _overlay; private readonly _focusManager; private readonly _viewRegistry; private readonly _zone; private readonly _document; private readonly _view; /** * Opens a popup with the specified component and options. * * The anchor is used to position the popup based on its preferred alignment: * - Using an element: The popup opens and sticks to the element. * - Using coordinates: The popup opens and sticks relative to the view or page bounds. * * If the popup is opened within a view, it only displays if the view is active and closes when the view is closed. * * By default, the popup closes on focus loss or when pressing the escape key. * * Pass data to the popup via {@link PopupConfig#input}. The component can inject the popup handle {@link Popup} to * read input data or to close the popup. * * @param config - Controls popup behavior * @returns Promise that resolves to the popup result, if any, or that rejects if the popup couldn't be opened or was closed with an error. */ open(config: PopupConfig): Promise; /** * Creates the popup handle. */ private createPopup; /** * Closes the popup depending on the configured popup closing strategy. */ private installPopupCloser; /** * Hides the popup when its contextual view is detached, and displays it when it is reattached. Also restores the focus on re-activation. * The contextual view is detached if not active, or located in the peripheral area and the main area is maximized. */ private hidePopupOnViewDetach; /** * Creates a signal that tracks the position of the popup anchor. */ private trackPopupOrigin; /** * Resolves the contextual view to which the popup is bound. */ private resolveContextualView; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Keys for associating workbench-specific data with a perspective. */ declare const WorkbenchPerspectiveData: { /** * Property to get the capability providing the perspective. */ readonly capability: "ɵcapability"; }; /** * Registers a function that is executed during the startup of the SCION Workbench. * * Initializers help to run initialization tasks (synchronous or asynchronous) during startup of the SCION Workbench. * The workbench is fully started once all initializers have completed. * * Initializers can specify a phase for execution. Initializers in lower phases execute before initializers in higher phases. * Initializers in the same phase may execute in parallel. If no phase is specified, the initializer executes in the `Startup` phase. * * Available phases, in order of execution: * - {@link WorkbenchStartupPhase.PreStartup} * - {@link WorkbenchStartupPhase.Startup} * - {@link WorkbenchStartupPhase.PostStartup} * * The function can call `inject` to get any required dependencies. * * @param initializerFn - Specifies the function to execute. * @param options - Controls execution of the function. * @return A set of dependency-injection providers to be registered in Angular. */ declare function provideWorkbenchInitializer(initializerFn: WorkbenchInitializerFn, options?: WorkbenchInitializerOptions): EnvironmentProviders; /** * Controls the execution of an initializer function during the startup of the SCION Workbench. */ interface WorkbenchInitializerOptions { /** * Controls in which phase to execute the initializer. */ phase?: WorkbenchStartupPhase; } /** * Enumeration of phases for running a {@link WorkbenchInitializerFn} function during the startup of the SCION Workbench. * * Functions associated with the same phase may run in parallel. Defaults to {@link Startup} phase. */ declare enum WorkbenchStartupPhase { /** * Use to run an initializer before starting the workbench. */ PreStartup = 0, /** * Use to run an initializer function after initializers of the {@link PreStartup} phase. * * This is the default phase if not specifying a phase. */ Startup = 1, /** * Use to run an initializer function after initializers of the {@link Startup} phase. */ PostStartup = 2 } /** * The signature of a function executed during the startup of the SCION Workbench. * * Initializers help to run initialization tasks (synchronous or asynchronous) during startup of the SCION Workbench. * The workbench is fully started once all initializers have completed. * * Initializers are registered using the `provideWorkbenchInitializer()` function and can specify a phase for execution. * Initializers in lower phases execute before initializers in higher phases. Initializers in the same phase may * execute in parallel. If no phase is specified, the initializer executes in the `Startup` phase. * * Available phases, in order of execution: * - {@link WorkbenchStartupPhase.PreStartup} * - {@link WorkbenchStartupPhase.Startup} * - {@link WorkbenchStartupPhase.PostStartup} * * The function can call `inject` to get any required dependencies. * * ### Example: * * ```ts * import {provideWorkbench, provideWorkbenchInitializer} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {inject} from '@angular/core'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * provideWorkbenchInitializer(() => inject(SomeService).init()), * ], * }); * ``` * @see provideWorkbenchInitializer */ type WorkbenchInitializerFn = () => void | Promise; /** * The signature of a class to hook into the startup of the SCION Workbench. * * The SCION Workbench defines a set of DI tokens called at defined points during startup, enabling the application's controlled initialization. * * Available DI tokens, in order of execution: * - {@link WORKBENCH_PRE_STARTUP} * - {@link WORKBENCH_STARTUP} * - {@link WORKBENCH_POST_STARTUP} * * ### Example: * * ```ts * import {provideWorkbench, WORKBENCH_STARTUP, WorkbenchInitializer} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {Injectable} from '@angular/core'; * * @Injectable() * export class Initializer implements WorkbenchInitializer { * public async init(): Promise { * // initialize application * } * } * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * { * provide: WORKBENCH_STARTUP, * multi: true, * useClass: Initializer, * }, * ], * }); * ``` * @see WORKBENCH_PRE_STARTUP * @see WORKBENCH_STARTUP * @see WORKBENCH_POST_STARTUP * * @deprecated since version 19.0.0-beta.3. Register an initializer function instead. The function can call `inject` to get required dependencies. See `WorkbenchInitializerFn` for an example. API will be removed in version 21. */ interface WorkbenchInitializer { /** * This method is called during the startup of the SCION Workbench. * * The method can call `inject` to get required dependencies. * * @return A Promise blocking startup until it resolves. */ init(): Promise; } /** * DI token to register a {@link WorkbenchInitializerFn} as a multi-provider to hook into the startup process of the SCION Workbench. * * Initializers associated with this DI token are executed before starting the SCION Workbench. * * @see WorkbenchInitializerFn * @deprecated since version 19.0.0-beta.3. Register initializer using `provideWorkbenchInitializer` function. See `provideWorkbenchInitializer` for an example. API will be removed in version 21. */ declare const WORKBENCH_PRE_STARTUP: InjectionToken; /** * DI token to register a {@link WorkbenchInitializerFn} as a multi-provider to hook into the startup process of the SCION Workbench. * * Initializers associated with this DI token are executed after initializers of {@link WORKBENCH_PRE_STARTUP}. * * @see WorkbenchInitializerFn * @deprecated since version 19.0.0-beta.3. Register initializer using `provideWorkbenchInitializer` function. See `provideWorkbenchInitializer` for an example. API will be removed in version 21. */ declare const WORKBENCH_STARTUP: InjectionToken; /** * DI token to register a {@link WorkbenchInitializerFn} as a multi-provider to hook into the startup process of the SCION Workbench. * * Initializers associated with this DI token are executed after initializers of {@link WORKBENCH_STARTUP}. * * @see WorkbenchInitializerFn * @deprecated since version 19.0.0-beta.3. Register initializer using `provideWorkbenchInitializer` function. See `provideWorkbenchInitializer` for an example. API will be removed in version 21. */ declare const WORKBENCH_POST_STARTUP: InjectionToken; /** * Registers a function that is executed during the startup of the SCION Microfrontend Platform. * * Initializers help to run initialization tasks (synchronous or asynchronous) during startup of the SCION Microfrontend Platform. * * Initializers can specify a phase for execution. Initializers in lower phases execute before initializers in higher phases. * Initializers in the same phase may execute in parallel. If no phase is specified, the initializer executes in the `PostStartup` phase. * * Available phases, in order of execution: * - {@link MicrofrontendPlatformStartupPhase.PreStartup} * - {@link MicrofrontendPlatformStartupPhase.PostStartup} * * The function can call `inject` to get any required dependencies. * * Initializers are only called if microfrontend support is enabled. * * @param initializerFn - Specifies the function to execute. * @param options - Controls execution of the function. * @return A set of dependency-injection providers to be registered in Angular. */ declare function provideMicrofrontendPlatformInitializer(initializerFn: WorkbenchInitializerFn, options?: MicrofrontendPlatformInitializerOptions): EnvironmentProviders; /** * Controls the execution of an initializer function during the startup of the SCION Microfrontend Platform. */ interface MicrofrontendPlatformInitializerOptions { /** * Controls in which phase to execute the initializer. */ phase?: MicrofrontendPlatformStartupPhase; } /** * Enumeration of phases for running a {@link WorkbenchInitializerFn} function during the startup of the SCION Microfrontend Platform. * * Functions associated with the same phase may run in parallel. Defaults to {@link PostStartup} phase. */ declare enum MicrofrontendPlatformStartupPhase { /** * Use to run an initializer before starting the SCION Microfrontend Platform. * * Typically, you would configure the SCION Microfrontend Platform in this phase, for example, register interceptors or decorators. * At this point, you cannot interact with the microfrontend platform because it has not been started yet. * * This phase is only called if microfrontend support is enabled. */ PreStartup = 0, /** * Use to run an initializer after started the SCION Microfrontend Platform. * * Typically, you would install intent and message handlers in this phase. * At this point, the activators of the micro applications are not yet installed. * * This phase is only called if microfrontend support is enabled. */ PostStartup = 2 } /** * DI token to register a {@link WorkbenchInitializerFn} as a multi-provider to hook into the startup process of the SCION Microfrontend Platform. * * Initializers associated with this DI token are executed during {@link WORKBENCH_STARTUP} before starting the SCION Microfrontend Platform. * * Typically, you would configure the SCION Microfrontend Platform in this lifecycle hook, for example, register interceptors or decorators. * At this point, you cannot interact with the microfrontend platform because it has not been started yet. * * This lifecycle hook is only called if microfrontend support is enabled. * * @see WorkbenchInitializerFn * @deprecated since version 19.0.0-beta.3. Register initializer using `provideMicrofrontendPlatformInitializer` function. See `provideMicrofrontendPlatformInitializer` for an example. API will be removed in version 21. */ declare const MICROFRONTEND_PLATFORM_PRE_STARTUP: InjectionToken; /** * DI token to register a {@link WorkbenchInitializerFn} as a multi-provider to hook into the startup process of the SCION Microfrontend Platform. * * Initializers associated with this DI token are executed during {@link WORKBENCH_STARTUP} after started the SCION Microfrontend Platform. * * Typically, you would install intent and message handlers in this lifecycle hook. * At this point, the activators of the micro applications are not yet installed. * * This lifecycle hook is only called if microfrontend support is enabled. * * @see WorkbenchInitializerFn * @deprecated since version 19.0.0-beta.3. Register initializer using `provideMicrofrontendPlatformInitializer` function. See `provideMicrofrontendPlatformInitializer` for an example. API will be removed in version 21. */ declare const MICROFRONTEND_PLATFORM_POST_STARTUP: InjectionToken; /** * Patches '@scion/microfrontend-platform' typedef definition via module augmentation. */ declare module '@scion/microfrontend-platform' { /** * Adds workbench-specific configuration to {@link @scion/microfrontend-platform!MicrofrontendPlatformConfig}. */ interface MicrofrontendPlatformConfig { /** * Splash to display until microfrontend signals readiness. * * A microfrontend can instruct the workbench to display a splash until signaled ready. By default, the workbench displays a loading indicator. * * @see WorkbenchViewCapability.properties.showSplash * @see WorkbenchPopupCapability.properties.showSplash */ splash?: ComponentType; } } /** * Provides the main entry point to start the SCION Workbench. * * The SCION Workbench starts automatically when the `` component is added to the DOM. Alternatively, * the workbench can be started manually using the `WorkbenchLauncher`, such as in an app initializer or a route guard. * * **Example of starting the workbench in an app initializer:** * ```ts * import {provideWorkbench, WorkbenchLauncher} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {inject, provideAppInitializer} from '@angular/core'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * provideAppInitializer(() => inject(WorkbenchLauncher).launch()) * ] * }); * ``` * * The application can hook into the startup process of the SCION Workbench by providing one or more initializers to {@link provideWorkbenchInitializer}. * Initializers execute at defined points during startup, enabling the application's controlled initialization. The workbench is fully started once * all initializers have completed. * * **Example of registering an initializer:** * ```ts * import {provideWorkbench, provideWorkbenchInitializer} from '@scion/workbench'; * import {bootstrapApplication} from '@angular/platform-browser'; * import {inject} from '@angular/core'; * * bootstrapApplication(AppComponent, { * providers: [ * provideWorkbench(), * provideWorkbenchInitializer(() => inject(SomeService).init()), * ], * }); * ``` * * The application can inject {@link WorkbenchStartup} to check if the workbench has completed startup. * * @see WorkbenchConfig.startup * @see provideWorkbench * @see provideWorkbenchInitializer */ declare abstract class WorkbenchLauncher { /** * Starts the SCION Workbench. * * Calling this method has no effect if the workbench is already starting or has started. * * @return A Promise that resolves when the workbench has completed the startup or that rejects if the startup failed. */ abstract launch(): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Enables the translation of a given {@link Translatable}. * * A {@link Translatable} is a string that, if starting with the percent symbol (`%`), is passed to the text provider for translation, with the percent symbol omitted. * Otherwise, the text is returned as is. A translation key can include parameters in matrix notation. * * Examples: * - `text`: no translatable text * - `%key`: translation key * - `%key;param=value`: translation key with a single param * - `%key;param1=value1;param2=value2`: translation key with multiple parameters * * @experimental since 20.0.0-beta.3; API and behavior may change in any version without notice. */ declare class TextPipe implements PipeTransform { private _translatable; private _text; transform(translatable: Translatable): Signal; transform(translatable: Translatable | undefined): Signal; transform(translatable: Translatable | null): Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** * Provides the text for the given {@link Translatable} based on registered text providers. * * A {@link Translatable} is a string that, if starting with the percent symbol (`%`), is passed to the text provider for translation, with the percent symbol omitted. * Otherwise, the text is returned as is. A translation key can include parameters in matrix notation. * * Examples: * - `text`: no translatable text * - `%key`: translation key * - `%key;param=value`: translation key with a single param * - `%key;param1=value1;param2=value2`: translation key with multiple parameters * * The function: * - Must be called within an injection context, or an explicit {@link Injector} passed. * - Must be called in a non-reactive (non-tracking) context. * * @experimental since 20.0.0-beta.3; API and behavior may change in any version without notice. */ declare function text(translatable: Signal | Translatable, options?: { injector?: Injector; }): Signal; declare function text(translatable: Signal | Translatable | undefined, options?: { injector?: Injector; }): Signal; declare function text(translatable: Signal | Translatable | null, options?: { injector?: Injector; }): Signal; declare function text(translatable: Signal | Translatable | undefined | null, options?: { injector?: Injector; }): Signal; /** * Renders an icon based on registered icon providers. * * Multiple icon providers can be registered. Providers are called in registration order. * If a provider does not provide the icon, the next provider is called, and so on. * * @experimental since 20.0.0-beta.3; API and behavior may change in any version without notice. */ declare class IconComponent { /** * Specifies the icon to display. * * Refer to the installed icon providers for a list of supported icons. */ readonly icon: i0.InputSignal; private readonly _injector; private readonly _host; private readonly _renderer; private readonly _iconDescriptor; constructor(); /** * Renders the icon, using this element (`wb-icon`) as the host of the icon component. */ private renderIcon; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export { IconComponent, LogAppender, LogLevel, Logger, LoggerName, MAIN_AREA, MAIN_AREA_INITIAL_PART_ID, MICROFRONTEND_PLATFORM_POST_STARTUP, MICROFRONTEND_PLATFORM_PRE_STARTUP, MicrofrontendPlatformConfigLoader, MicrofrontendPlatformStartupPhase, Notification, NotificationService, Popup, PopupConfig, PopupService, TextPipe, VIEW_TAB_RENDERING_CONTEXT, WORKBENCH_ID, WORKBENCH_POST_STARTUP, WORKBENCH_PRE_STARTUP, WORKBENCH_STARTUP, WorkbenchComponent, WorkbenchConfig, WorkbenchDesktopDirective, WorkbenchDialog, WorkbenchDialogActionDirective, WorkbenchDialogFooterDirective, WorkbenchDialogHeaderDirective, WorkbenchDialogService, WorkbenchLauncher, WorkbenchLayoutFactory, WorkbenchMessageBoxService, WorkbenchPart, WorkbenchPartActionDirective, WorkbenchPerspectiveData, WorkbenchRouteData, WorkbenchRouter, WorkbenchRouterLinkDirective, WorkbenchService, WorkbenchStartup, WorkbenchStartupPhase, WorkbenchStorage, WorkbenchView, WorkbenchViewMenuItemDirective, canMatchWorkbenchOutlet, canMatchWorkbenchPart, canMatchWorkbenchPerspective, canMatchWorkbenchView, provideMicrofrontendPlatformInitializer, provideWorkbench, provideWorkbenchInitializer, text }; export type { ActivityId, BottomLeftPoint, BottomRightPoint, CanCloseFn, CanCloseRef, CloseStrategy, Commands, Disposable, DockedPartExtras, DockingArea, LogEvent, MenuItemConfig, MicrofrontendPlatformInitializerOptions, NavigateFn, NavigationData, NavigationState, NotificationConfig, PartExtras, PartId, Point, PopupOrigin, PopupSize, ReferencePart, TopLeftPoint, TopRightPoint, Translatable, ViewId, ViewMenuItemsConfig, ViewTabRenderingContext, WorkbenchDialogOptions, WorkbenchDialogSize, WorkbenchIconDescriptor, WorkbenchIconProviderFn, WorkbenchInitializer, WorkbenchInitializerFn, WorkbenchInitializerOptions, WorkbenchLayout, WorkbenchLayoutFn, WorkbenchMenuItem, WorkbenchMessageBoxOptions, WorkbenchNavigationExtras, WorkbenchPartAction, WorkbenchPartActionFn, WorkbenchPartNavigation, WorkbenchPerspective, WorkbenchPerspectiveDefinition, WorkbenchPerspectiveSelectionFn, WorkbenchPerspectives, WorkbenchTextProviderFn, WorkbenchTheme, WorkbenchViewMenuItemFn, WorkbenchViewNavigation };