primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
227 lines (224 loc) • 6.62 kB
TypeScript
import { TemplateRef } from '@angular/core';
import { TreeNode, PassThrough, PassThroughOption } from 'primeng/api';
import { CheckboxPassThrough } from 'primeng/types/checkbox';
/**
* Represents a node in the OrganizationChart with additional properties.
* @extends TreeNode
* @group Interface
*/
interface OrgChartNode<T = any> extends TreeNode<T> {
/**
* An array of child nodes.
*/
children?: OrgChartNode<T>[];
/**
* Whether the node can be collapsed/expanded.
*/
collapsible?: boolean;
/**
* Whether the node should be selected by default.
* @deprecated since v22, use selectionKeys input.
* @defaultValue false
*/
selectedByDefault?: boolean;
/**
* Whether the node should be collapsed by default.
* @deprecated since v22, use collapsedKeys input.
* @defaultValue false
*/
collapsedByDefault?: boolean;
}
/**
* Defines the selection mode.
*/
type OrganizationChartSelectionMode = 'single' | 'multiple' | 'checkbox';
/**
* Selection state of a node in `checkbox` selection mode.
* @group Types
*/
interface OrganizationChartCheckboxValue {
/**
* Whether the node and all of its descendants are selected.
*/
checked: boolean;
/**
* Whether only some of the node's descendants are selected.
*/
partialChecked: boolean;
}
/**
* A map keyed by `OrgChartNode.key` used to track selection or collapsed state.
*
* For `single` and `multiple` selection and for collapsed state, a node is considered
* selected/collapsed when its key maps to `true`. In `checkbox` selection mode the value is
* an {@link OrganizationChartCheckboxValue} carrying the `checked` and `partialChecked` flags.
* @group Types
*/
type OrganizationChartNodeKeys = {
[key: string]: boolean | OrganizationChartCheckboxValue;
};
/**
* Custom pass-through(pt) options.
* @template I Type of instance.
*
* @see {@link OrganizationChart.pt}
* @group Interface
*/
interface OrganizationChartPassThroughOptions<I = unknown> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: PassThroughOption<HTMLDivElement, I>;
/**
* Used to pass attributes to the subtree's DOM element.
*/
subtree?: PassThroughOption<HTMLUListElement, I>;
/**
* Used to pass attributes to the tree's DOM element.
*/
tree?: PassThroughOption<HTMLLIElement, I>;
/**
* Used to pass attributes to the node's DOM element.
*/
node?: PassThroughOption<HTMLDivElement, I>;
/**
* Used to pass attributes to the node content's DOM element.
*/
nodeContent?: PassThroughOption<HTMLDivElement, I>;
/**
* Used to pass attributes to the node label's DOM element.
*/
label?: PassThroughOption<HTMLSpanElement, I>;
/**
* Used to pass attributes to the Checkbox component in `checkbox` selection mode.
*/
pcCheckbox?: CheckboxPassThrough;
/**
* Used to pass attributes to the collapse button's DOM element.
*/
collapseButton?: PassThroughOption<HTMLButtonElement, I>;
/**
* Used to pass attributes to the collapse button icon's DOM element.
*/
collapseButtonIcon?: PassThroughOption<HTMLSpanElement, I>;
}
/**
* Defines valid pass-through options in OrganizationChart.
* @see {@link OrganizationChartPassThroughOptions}
*
* @template I Type of instance.
*/
type OrganizationChartPassThrough<I = unknown> = PassThrough<I, OrganizationChartPassThroughOptions<I>>;
/**
* Custom node select event.
* @see {@link OrganizationChart.onNodeSelect}
* @group Events
*/
interface OrganizationChartNodeSelectEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Node instance.
*/
node: OrgChartNode;
}
/**
* Custom node unselect event.
* @see {@link OrganizationChart.onNodeUnSelect}
* @extends {OrganizationChartNodeSelectEvent}
* @group Events
*/
interface OrganizationChartNodeUnSelectEvent extends OrganizationChartNodeSelectEvent {
}
/**
* Custom node expand event.
* @see {@link OrganizationChart.onNodeExpand}
* @extends {OrganizationChartNodeSelectEvent}
* @group Events
*/
interface OrganizationChartNodeExpandEvent extends OrganizationChartNodeSelectEvent {
}
/**
* Custom node collapse event.
* @see {@link OrganizationChart.onNodeCollapse}
* @extends {OrganizationChartNodeSelectEvent}
* @group Events
*/
interface OrganizationChartNodeCollapseEvent extends OrganizationChartNodeSelectEvent {
}
/**
* Defines valid templates in OrganizationChart.
* @group Templates
*/
interface OrganizationChartTemplates {
/**
* Custom node template.
* @param {Object} context - node data.
*/
node(context: {
/**
* Node instance.
*/
$implicit: OrgChartNode;
}): TemplateRef<{
$implicit: OrgChartNode;
}>;
/**
* Custom toggler icon template.
* @param {Object} context - item data.
*/
togglericon(context: {
/**
* Expanded state of the node.
*/
$implicit: boolean;
}): TemplateRef<{
$implicit: boolean;
}>;
/**
* Custom checkbox icon template for `checkbox` selection mode.
* @param {Object} context - checkbox icon data.
*/
checkboxicon(context: {
/**
* Whether the node is fully checked.
*/
$implicit: boolean;
/**
* Whether the node is partially checked.
*/
partialChecked: boolean;
}): TemplateRef<{
$implicit: boolean;
partialChecked: boolean;
}>;
/**
* Custom collapse button template.
* @param {Object} context - collapse button data.
*/
collapsebutton(context: {
/**
* Node instance.
*/
$implicit: OrgChartNode;
/**
* Whether the node is expanded.
*/
expanded: boolean;
/**
* Whether the node is collapsed.
*/
collapsed: boolean;
/**
* Number of child nodes.
*/
childCount: number;
/**
* Function to toggle the node.
*/
toggle: (event: Event, node: OrgChartNode) => void;
}): TemplateRef<any>;
}
export type { OrgChartNode, OrganizationChartCheckboxValue, OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, OrganizationChartNodeKeys, OrganizationChartNodeSelectEvent, OrganizationChartNodeUnSelectEvent, OrganizationChartPassThrough, OrganizationChartPassThroughOptions, OrganizationChartSelectionMode, OrganizationChartTemplates };