SiListDetailsComponent documentation¶

selector

si-list-details

Input Properties¶

Name	Type	Default	Description
detailsActive ¶	`boolean`	`false`	Whether the details are currently active or not, mostly relevant in the responsive scenario when the viewport only shows either the list or the detail.
disableResizing ¶	`boolean`	`false`	Whether the list and detail parts should be resizable by a splitter or not. This is only supported in the 'large' scenario (when `hasLargeSize` is `true` ). Default value is `false` .
expandBreakpoint ¶	`number`	`BOOTSTRAP_BREAKPOINTS.mdMinimum`	A numeric value defining the minimum width in px, which the component needs to be displayed in its large layout. Whenever smaller than this threshold, the small layout will be used. Default is value is BOOTSTRAP_BREAKPOINTS.mdMinimum.
listWidth ¶	`number`	`300`	The list pane size, updated when the split is resized or restored. With resizing enabled, the value uses listWidthUnit : pixels for `px` , or a percentage-based fractional weight for `fr` . With resizing disabled, the value is always interpreted as a percentage. Percentage values must be in the inclusive range 0-100; values outside this range fall back to a 32/68 list/details split.
listWidthUnit ¶	`SplitUnit`	`'px'`	Unit used for the list split part when resizing is enabled.
minDetailsSize ¶	`number`	`300`	Sets the minimal width of the detail component in pixel.
minListSize ¶	`number`	`300`	Sets the minimal width of the list component in pixel.
stateId ¶	`string`		An optional stateId to uniquely identify a component instance. Required for persistence of ui state.

Output Properties¶

Name	Type	Description
detailsActiveChange ¶	`boolean`	Whether the details are currently active or not, mostly relevant in the responsive scenario when the viewport only shows either the list or the detail.
listWidthChange ¶	`number`	The list pane size, updated when the split is resized or restored. With resizing enabled, the value uses listWidthUnit : pixels for `px` , or a percentage-based fractional weight for `fr` . With resizing disabled, the value is always interpreted as a percentage. Percentage values must be in the inclusive range 0-100; values outside this range fall back to a 32/68 list/details split.

Attributes and Methods¶

Name	Type	Default	Description
(readonly) hasLargeSize ¶	`Signal`<`boolean`>	...

Types Documentation¶

SplitUnit (`"px"` \| `"fr"`)¶ Type alias

ElementDimensions

¶

Interface

Properties
height: `number`¶
width: `number`¶

Action

¶

Interface

Properties
click: (evt: `Event`) => `void`¶
iconClass: `string`¶
tooltip: `string`¶

CollapseTo (`"to-start"` \| `"to-end"`)¶ Type alias

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

PartState

¶

Interface

Properties
expanded?: `boolean`¶
size?: `number`¶

SplitOrientation (`"horizontal"` \| `"vertical"`)¶ Type alias

SiSplitPartComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
Action buttons displayed in the split part header. actions: `InputSignal`<`Action`[]> = `[]`¶
actualSize: `Signal`<`number`> = ...¶
after: `WritableSignal`<(`SiSplitPartComponent` \| `undefined`)> = ...¶
before: `WritableSignal`<(`SiSplitPartComponent` \| `undefined`)> = ...¶
Emits when the part is collapsed or expanded. collapseChanged: `OutputEmitterRef`<`boolean`> = ...¶
Internal, mutable collapse direction. Initialized from the collapsible input but can be overwritten while cascading collapse state to sibling parts. collapseDirectionState: `WritableSignal`<(`CollapseTo` \| `undefined`)> = ...¶
collapsedSize: `Signal`<`number`> = ...¶
Internal, mutable collapsed state. Initialized from the expanded input but can be overwritten while toggling, cascading to sibling parts or restoring the persisted ui state. collapsedState: `WritableSignal`<`boolean`> = ...¶
Sets the icon class that is used in the buttons of split parts to collapse and uncollapse the parts. collapseIconClass: `InputSignal`<(`string` \| `undefined`)> = ...¶
Aria label for collapse button. Needed for a11y collapseLabel: `InputSignal`<`TranslatableString`> = $localize`:@@SI_SPLIT.COLLAPSE_LABEL:Collapse`¶
This toggles the behavior when collapsing this split part. If enabled, all split parts between this one and the end of the split in the respective direction will be collapsed if this part is collapsed. If disabled, only this split part will be collapsed. collapseOthers: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Collapse only to the given min size. collapseToMinSize: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Defines whether and in which direction the split part can collapse. When unset, the collapse button is hidden. collapsible: `InputSignal`<(`CollapseTo` \| `undefined`)> = `undefined`¶
elementRef: `ElementRef`<`HTMLElement`> = ...¶
Sets the initial expanded or collapsed state of the split part. expanded: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
expandedSize: `WritableSignal`<(`number` \| `undefined`)> = ...¶
fractionalSize: `WritableSignal`<(`number` \| `undefined`)> = ...¶
headerContext: { $implicit: `SiSplitPartComponent` } = ...¶
Custom template for the split part header. The template receives the component instance as implicit context. headerTemplate: `InputSignal`<(`TemplateRef`<{ $implicit: `SiSplitPartComponent` }> \| `undefined`)> = ...¶
Sets the title of the split part header. heading: `InputSignal`<(`TranslatableString` \| `undefined`)> = ...¶
icons: `Record`<`"elementDoubleRight"`, `string`> = ...¶
index: `number` = `0`¶
Minimum size in px. minSize: `InputSignalWithTransform`<`number`, `unknown`> = `0`¶
nextExpandedAfter: `Signal`<`SiSplitPartComponent`> = ...¶
When a split part is collapsed, the content gets hidden but it will still remain within the DOM. If you want to remove and destroy the component in collapsed mode and recreate it on un-collapse, set this property to true. removeContentOnCollapse: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
saveUIState: () => `void`¶
Defines if the header of the split part is visible. Default is true. showHeader: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
Expanded size. size: `InputSignalWithTransform`<`number`, (`string` \| `number`)> = ...¶
Emits the part's expanded state and size after it is toggled. stateChange: `OutputEmitterRef`<`PartState`> = ...¶
An optional stateId to uniquely identify a component instance. Required for persistence of ui state. stateId: `InputSignal`<(`string` \| `undefined`)> = ...¶
Unit for the configured size . unit: `InputSignal`<`SplitUnit`> = ...¶

Accessors
Get collapsed state. Returns True if the split part is collapsed, false is expanded. get collapsed: `boolean`¶

Methods

refreshCollapsedToEnd: () => void¶

refreshCollapseToStart: () => void¶

refreshSizePx

(orientation: SplitOrientation) => void¶

Parameters
orientation: `SplitOrientation`¶

Toggles the collapsed or expanded state.
toggleCollapse: () => void¶

ResizeObserverService

¶

Class

▶

A service wrapping ResizeObserver . This is a service for those reasons: - only one ResizeObserver should be used for performance reason. - For Angular change detection to work, explicit ngZone calls are necessary - Observable stream

Constructor
() => `{}`¶

Properties
listeners: `Map`<`Element`, `Listener`> = ...¶
resizeObserver?: `ResizeObserver`¶
timerQueue: `Map`<`number`, `QueueEntry`[]> = ...¶
zone: `NgZone` = ...¶

Methods

emitSize

(element: Element, entry: ResizeSubscriber, force: boolean = false) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶
force: `boolean` = `false`¶

handleElement

(element: Element) => void¶

Parameters
element: `Element`¶

handleResizeSubscriber

(element: Element, entry: ResizeSubscriber) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶

observe

(element: Element, throttle: number, emitInitial: boolean, emitImmediate: boolean) => Observable<ElementDimensions>¶

Observe the size of an element. Returns an observable with the changes.

Parameters
The element to observe element: `Element`¶
Throttle time in ms. Will emit this time after the resize throttle: `number`¶
Emit the initial size after subscribe? emitInitial?: `boolean`¶
Emit an event immediately after the size changes. Useful e.g. for visibility checks. emitImmediate?: `boolean`¶

processQueue

(queue: QueueEntry[]) => void¶

Parameters
queue: `QueueEntry`[]¶

schedule

(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void¶

Parameters
timeout: `number`¶
element: `Element`¶
subscriber: `ResizeSubscriber`¶
unblock: `boolean`¶
force: `boolean` = `false`¶

subscriberAdded

(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶
emitInitial?: `boolean`¶

subscriberRemoved

(entry: Listener, subscriber: ResizeSubscriber) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶

unschedule

(entry: ResizeSubscriber) => void¶

Parameters
entry: `ResizeSubscriber`¶

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