@koobiq/components 16.0.0-beta.1

package/tree/data-source/flat-data-source.d.ts

@@ -0,0 +1,80 @@
+import { CollectionViewer, DataSource, SelectionChange } from '@angular/cdk/collections';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { FlatTreeControl } from '../control/flat-tree-control';
+import { TreeControl } from '../control/tree-control';
+/**
+ * Tree flattener to convert a normal type of node to node with children & level information.
+ * Transform nested nodes of type `T` to flattened nodes of type `F`.
+ *
+ * For example, the input data of type `T` is nested, and contains its children data:
+ *   SomeNode: {
+ *     key: 'Fruits',
+ *     children: [
+ *       NodeOne: {
+ *         key: 'Apple',
+ *       },
+ *       NodeTwo: {
+ *        key: 'Pear',
+ *      }
+ *    ]
+ *  }
+ *  After flattener flatten the tree, the structure will become
+ *  SomeNode: {
+ *    key: 'Fruits',
+ *    expandable: true,
+ *    level: 1
+ *  },
+ *  NodeOne: {
+ *    key: 'Apple',
+ *    expandable: false,
+ *    level: 2
+ *  },
+ *  NodeTwo: {
+ *   key: 'Pear',
+ *   expandable: false,
+ *   level: 2
+ * }
+ * and the output flattened type is `F` with additional information.
+ */
+export declare class KbqTreeFlattener<T, F> {
+    transformFunction: (node: T, level: number, parent: F | null) => F;
+    getLevel: (node: F) => number;
+    isExpandable: (node: F) => boolean;
+    getChildren: (node: T) => Observable<T[]> | T[] | undefined | null;
+    constructor(transformFunction: (node: T, level: number, parent: F | null) => F, getLevel: (node: F) => number, isExpandable: (node: F) => boolean, getChildren: (node: T) => Observable<T[]> | T[] | undefined | null);
+    flattenNode(node: T, level: number, resultNodes: F[], parent: F | null): F[];
+    flattenChildren(children: T[], level: number, resultNodes: F[], parent: F | null): void;
+    /**
+     * Flatten a list of node type T to flattened version of node F.
+     * Please note that type T may be nested, and the length of `structuredData` may be different
+     * from that of returned list `F[]`.
+     */
+    flattenNodes(structuredData: T[]): F[];
+    /**
+     * Expand flattened node with current expansion status.
+     * The returned list may have different length.
+     */
+    expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F>): F[];
+}
+/**
+ * Data source for flat tree.
+ * The data source need to handle expansion/collapsion of the tree node and change the data feed
+ * to `KbqTree`.
+ * The nested tree nodes of type `T` are flattened through `MсTreeFlattener`, and converted
+ * to type `F` for `KbqTree` to consume.
+ */
+export declare class KbqTreeFlatDataSource<T, F> extends DataSource<F> {
+    private treeControl;
+    private treeFlattener;
+    flattenedData: BehaviorSubject<F[]>;
+    expandedData: BehaviorSubject<F[]>;
+    filteredData: BehaviorSubject<F[]>;
+    get data(): T[];
+    set data(value: T[]);
+    private _data;
+    constructor(treeControl: FlatTreeControl<F>, treeFlattener: KbqTreeFlattener<T, F>, initialData?: T[]);
+    connect(collectionViewer: CollectionViewer): Observable<F[]>;
+    filterHandler(): F[];
+    expansionHandler(_change: SelectionChange<F>): F[];
+    disconnect(): void;
+}

package/tree/data-source/nested-data-source.d.ts

@@ -0,0 +1,15 @@
+import { CollectionViewer, DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+/**
+ * Data source for nested tree.
+ *
+ * The data source for nested tree doesn't have to consider node flattener, or the way to expand
+ * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
+ */
+export declare class KbqTreeNestedDataSource<T> extends DataSource<T> {
+    get data(): T[];
+    set data(value: T[]);
+    private _data;
+    connect(collectionViewer: CollectionViewer): Observable<T[]>;
+    disconnect(): void;
+}

package/tree/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/tree/node.d.ts

@@ -0,0 +1,34 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Context provided to the tree node component. */
+export declare class KbqTreeNodeOutletContext<T> {
+    /** Data for the node. */
+    $implicit: T;
+    /** Depth of the node. */
+    level: number;
+    /** Index location of the node. */
+    index?: number;
+    /** Length of the number of total dataNodes. */
+    count?: number;
+    constructor(data: T);
+}
+/**
+ * Data node definition for the KbqTree.
+ * Captures the node's template and a when predicate that describes when this node should be used.
+ */
+export declare class KbqTreeNodeDef<T> {
+    template: TemplateRef<any>;
+    data: T;
+    /**
+     * Function that should return true if this node template should be used for the provided node
+     * data and index. If left undefined, this node will be considered the default node template to
+     * use when no other when functions return true for the data.
+     * For every node, there must be at least one when function that passes or an undefined to
+     * default.
+     */
+    when: (index: number, nodeData: T) => boolean;
+    /** @docs-private */
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeDef<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeDef<any>, "[mcTreeNodeDef]", never, { "when": { "alias": "mcTreeNodeDefWhen"; "required": false; }; "data": { "alias": "mcTreeNode"; "required": false; }; }, {}, never, never, false, never>;
+}

package/tree/outlet.d.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectorRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class KbqTreeNodeOutlet {
+    viewContainer: ViewContainerRef;
+    changeDetectorRef: ChangeDetectorRef;
+    constructor(viewContainer: ViewContainerRef, changeDetectorRef: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeOutlet, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeOutlet, "[mcTreeNodeOutlet]", never, {}, {}, never, never, false, never>;
+}

package/tree/padding.directive.d.ts

@@ -0,0 +1,47 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { KbqTreeBase, KbqTreeNode } from './tree-base';
+import { KbqTreeOption } from './tree-option.component';
+import * as i0 from "@angular/core";
+export declare class KbqTreeNodePadding<T> implements OnDestroy, AfterViewInit {
+    protected treeNode: KbqTreeNode<T>;
+    protected tree: KbqTreeBase<T>;
+    private renderer;
+    private element;
+    private option;
+    private dir;
+    get level(): number;
+    set level(value: number);
+    private _level;
+    get indent(): number | string;
+    set indent(indent: number | string);
+    private _indent;
+    get leftPadding(): number;
+    /** CSS units used for the indentation value. */
+    indentUnits: string;
+    baseLeftPadding: number;
+    withIcon: boolean;
+    iconWidth: number;
+    private destroyed;
+    constructor(treeNode: KbqTreeNode<T>, tree: KbqTreeBase<T>, renderer: Renderer2, element: ElementRef<HTMLElement>, option: KbqTreeOption, dir: Directionality);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    paddingIndent(): string | null;
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    private setLevelInput;
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    private setIndentInput;
+    private setPadding;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodePadding<any>, [null, null, null, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodePadding<any>, "[mcTreeNodePadding]", ["mcTreeNodePadding"], { "indent": { "alias": "mcTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, false, never>;
+}

package/tree/public-api.d.ts

@@ -0,0 +1,15 @@
+export * from './tree.module';
+export * from './tree-base';
+export * from './outlet';
+export * from './tree';
+export * from './node';
+export * from './padding.directive';
+export * from './toggle';
+export * from './tree-selection.component';
+export * from './tree-option.component';
+export * from './control/base-tree-control';
+export * from './control/tree-control';
+export * from './control/flat-tree-control';
+export * from './control/nested-tree-control';
+export * from './data-source/flat-data-source';
+export * from './data-source/nested-data-source';

package/tree/toggle.d.ts

@@ -0,0 +1,30 @@
+import { CanDisable, CanDisableCtor } from '@koobiq/components/core';
+import { KbqTreeBase, KbqTreeNode } from './tree-base';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTreeNodeToggleBase {
+}
+/** @docs-private */
+export declare const KbqTreeNodeToggleMixinBase: CanDisableCtor & typeof KbqTreeNodeToggleBase;
+/** @docs-private */
+export declare class KbqTreeNodeToggleBaseDirective<T> extends KbqTreeNodeToggleMixinBase implements CanDisable {
+    private tree;
+    private treeNode;
+    node: T;
+    get recursive(): boolean;
+    set recursive(value: any);
+    private _recursive;
+    get iconState(): boolean;
+    constructor(tree: KbqTreeBase<T>, treeNode: KbqTreeNode<T>);
+    toggle(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleBaseDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleBaseDirective<any>, never, never, { "node": { "alias": "node"; "required": false; }; "recursive": { "alias": "mcTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class KbqTreeNodeToggleComponent<T> extends KbqTreeNodeToggleBaseDirective<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["mcTreeNodeToggle"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class KbqTreeNodeToggleDirective<T> extends KbqTreeNodeToggleBaseDirective<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleDirective<any>, "[kbq-tree-node-toggle], [mcTreeNodeToggle]", ["mcTreeNodeToggle"], {}, {}, never, never, false, never>;
+}

package/tree/toggle.scss

@@ -0,0 +1,35 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tree-node-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    height: 100%;
+
+    padding-left: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+    padding-right: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+
+    cursor: pointer;
+
+    & .kbq-icon {
+        transform: rotate(-90deg);
+    }
+
+    &.kbq-expanded {
+        & .kbq-icon {
+            transform: rotate(0);
+        }
+    }
+
+    &[disabled] {
+        cursor: default;
+    }
+}

package/tree/tree-base.d.ts

@@ -0,0 +1,97 @@
+import { CollectionViewer, DataSource } from '@angular/cdk/collections';
+import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, ViewContainerRef, TrackByFunction } from '@angular/core';
+import { IFocusableOption } from '@koobiq/cdk/a11y';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { TreeControl } from './control/tree-control';
+import { KbqTreeNodeDef } from './node';
+import { KbqTreeNodeOutlet } from './outlet';
+import * as i0 from "@angular/core";
+export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+    protected differs: IterableDiffers;
+    protected changeDetectorRef: ChangeDetectorRef;
+    treeControl: TreeControl<T>;
+    /**
+     * Tracking function that will be used to check the differences in data changes. Used similarly
+     * to `ngFor` `trackBy` function. Optimize node operations by identifying a node based on its data
+     * relative to the function to know if a node should be added/removed/moved.
+     * Accepts a function that takes two parameters, `index` and `item`.
+     */
+    trackBy: TrackByFunction<T>;
+    nodeOutlet: KbqTreeNodeOutlet;
+    /** The tree node template for the tree */
+    nodeDefs: QueryList<KbqTreeNodeDef<T>>;
+    /**
+     * Stream containing the latest information on what rows are being displayed on screen.
+     * Can be used by the data source to as a heuristic of what data should be provided.
+     */
+    viewChange: BehaviorSubject<{
+        start: number;
+        end: number;
+    }>;
+    /** Differ used to find the changes in the data provided by the data source. */
+    protected dataDiffer: IterableDiffer<T>;
+    /** Subject that emits when the component has been destroyed. */
+    private onDestroy;
+    /** Stores the node definition that does not have a when predicate. */
+    private defaultNodeDef;
+    /** Data subscription */
+    private dataSubscription;
+    /** Level of nodes */
+    private levels;
+    /**
+     * Provides a stream containing the latest data array to render. Influenced by the tree's
+     * stream of view window (what dataNodes are currently on screen).
+     * Data source can be an observable of data array, or a dara array to render.
+     */
+    get dataSource(): DataSource<T> | Observable<T[]> | T[];
+    set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
+    private _dataSource;
+    constructor(differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterContentChecked(): void;
+    /** Check for changes made in the data and render each change (node added/removed/moved). */
+    renderNodeChanges(data: T[] | ReadonlyArray<T>, dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
+    /**
+     * Finds the matching node definition that should be used for this node data. If there is only
+     * one node definition, it is returned. Otherwise, find the node definition that has a when
+     * predicate that returns true with the data. If none return true, return the default node
+     * definition.
+     */
+    getNodeDef(data: T, i: number): KbqTreeNodeDef<T>;
+    /**
+     * Create the embedded view for the data node template and place it in the correct index location
+     * within the data node view container.
+     */
+    insertNode(nodeData: T, index: number, viewContainer?: ViewContainerRef, parentData?: T): void;
+    /** Set up a subscription for the data provided by the data source. */
+    private observeRenderChanges;
+    /**
+     * Switch to the provided data source by resetting the data and unsubscribing from the current
+     * render change subscription if one exists. If the data source is null, interpret this by
+     * clearing the node outlet. Otherwise start listening for new data.
+     */
+    private switchDataSource;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeBase<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeBase<any>, never, never, { "treeControl": { "alias": "treeControl"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, {}, ["nodeDefs"], never, false, never>;
+}
+export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
+    protected elementRef: ElementRef;
+    tree: KbqTreeBase<T>;
+    /**
+     * The most recently created `KbqTreeNode`. We save it in static variable so we can retrieve it
+     * in `KbqTree` and set the data to it.
+     */
+    static mostRecentTreeNode: KbqTreeNode<any> | null;
+    protected destroyed: Subject<void>;
+    get data(): T;
+    set data(value: T);
+    private _data;
+    get isExpanded(): boolean;
+    get level(): number;
+    constructor(elementRef: ElementRef, tree: KbqTreeBase<T>);
+    ngOnDestroy(): void;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNode<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNode<any>, "kbq-tree-node", ["mcTreeNode"], {}, {}, never, never, false, never>;
+}

package/tree/tree-errors.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Returns an error to be thrown when there is no usable data.
+ * @docs-private
+ */
+export declare function getTreeNoValidDataSourceError(): Error;
+/**
+ * Returns an error to be thrown when there are multiple nodes that are missing a when function.
+ * @docs-private
+ */
+export declare function getTreeMultipleDefaultNodeDefsError(): Error;
+/**
+ * Returns an error to be thrown when there are no matching node defs for a particular set of data.
+ * @docs-private
+ */
+export declare function getTreeMissingMatchingNodeDefError(): Error;
+/**
+ * Returns an error to be thrown when there are tree control.
+ * @docs-private
+ */
+export declare function getTreeControlMissingError(): Error;
+/**
+ * Returns an error to be thrown when tree control did not implement functions for flat/nested node.
+ * @docs-private
+ */
+export declare function getTreeControlFunctionsMissingError(): Error;

package/tree/tree-option.component.d.ts

@@ -0,0 +1,80 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, EventEmitter, ElementRef, InjectionToken, AfterContentInit, NgZone } from '@angular/core';
+import { KbqOptionActionComponent, KbqPseudoCheckbox, KbqPseudoCheckboxState, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import { KbqTreeNodeToggleBaseDirective } from './toggle';
+import { KbqTreeNode } from './tree-base';
+import * as i0 from "@angular/core";
+export interface KbqTreeOptionEvent {
+    option: KbqTreeOption;
+}
+/**
+ * Injection token used to provide the parent component to options.
+ */
+export declare const KBQ_TREE_OPTION_PARENT_COMPONENT: InjectionToken<any>;
+export declare class KbqTreeOptionChange {
+    source: KbqTreeOption;
+    isUserInput: boolean;
+    constructor(source: KbqTreeOption, isUserInput?: boolean);
+}
+export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterContentInit, KbqTitleTextRef {
+    private changeDetectorRef;
+    private ngZone;
+    tree: any;
+    readonly onFocus: Subject<KbqTreeOptionEvent>;
+    readonly onBlur: Subject<KbqTreeOptionEvent>;
+    preventBlur: boolean;
+    parentTextElement: ElementRef;
+    toggleWrapper: ElementRef;
+    toggleElementDirective: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
+    toggleElementComponent: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
+    pseudoCheckbox: KbqPseudoCheckbox;
+    actionButton: KbqOptionActionComponent;
+    tooltipTrigger: KbqTooltipTrigger;
+    dropdownTrigger: KbqDropdownTrigger;
+    checkboxThirdState: boolean;
+    get externalPseudoCheckbox(): boolean;
+    get value(): any;
+    set value(value: any);
+    private _value;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    get showCheckbox(): any;
+    set showCheckbox(value: any);
+    private _showCheckbox;
+    readonly onSelectionChange: EventEmitter<KbqTreeOptionChange>;
+    get selected(): boolean;
+    set selected(value: boolean);
+    private _selected;
+    get id(): string;
+    private _id;
+    get viewValue(): string;
+    hasFocus: boolean;
+    get isExpandable(): boolean;
+    get toggleElement(): KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
+    get isToggleInDefaultPlace(): boolean;
+    checkboxState: KbqPseudoCheckboxState;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tree: any);
+    ngAfterContentInit(): void;
+    descendantsAllSelected(): boolean;
+    descendantsPartiallySelected(): boolean;
+    updateParentsCheckboxState(node: any): void;
+    updateCheckboxState: () => void;
+    toggle(): void;
+    setSelected(selected: boolean): void;
+    focus(focusOrigin?: FocusOrigin): void;
+    blur(): void;
+    getHeight(): number;
+    select(setFocus?: boolean): void;
+    deselect(): void;
+    onKeydown($event: any): void;
+    selectViaInteraction($event?: KeyboardEvent): void;
+    emitSelectionChangeEvent(isUserInput?: boolean): void;
+    getHostElement(): HTMLElement;
+    markForCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeOption, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["mcTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [mcTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], false, never>;
+}

package/tree/tree-option.scss

@@ -0,0 +1,67 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tree-option {
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+
+    height: var(--kbq-tree-size-node-height, map.get($tokens, tree-size-node-height));
+
+    word-wrap: break-word;
+
+    border: 2px solid transparent;
+
+    & .kbq-option-text {
+        display: inline-block;
+        flex-grow: 1;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        margin-right: var(--kbq-tree-size-padding-right, map.get($tokens, tree-size-padding-right));
+    }
+
+    & > .kbq-icon, > .toggle-wrapper > .kbq-icon {
+        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+
+        cursor: pointer;
+    }
+
+    & > .kbq-progress-spinner {
+        margin-right: 8px;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    &:not([disabled]) {
+        cursor: pointer;
+    }
+
+    & > .kbq-pseudo-checkbox,
+    & > .kbq-checkbox {
+        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+    }
+
+    & .kbq-option-action {
+        display: none;
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]).kbq-focused,
+    &:not([disabled]).kbq-action-button-focused {
+        & .kbq-option-action {
+            display: flex;
+        }
+    }
+}