import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { ExpandButtonPlacement } from '../../../../types/src/tree-item';
import { CSSResultGroup, PropertyValueMap, PropertyValues, TemplateResult } from 'lit';
import { default as Sortable } from 'sortablejs';
import { default as CxCheckbox } from '../checkbox/checkbox';
import { default as CxIcon } from '../icon/icon';
import { default as CxSpinner } from '../spinner/spinner';

/**
 * @summary The <cx-tree-item> component is used to serve as a hierarchical node that lives inside a [tree](?s=atoms&id=/tree).
 *
 * @event cx-expand - Emitted when the tree item expands.
 * @event cx-after-expand - Emitted after the tree item expands and all animations are complete.
 * @event cx-collapse - Emitted when the tree item collapses.
 * @event cx-after-collapse - Emitted after the tree item collapses and all animations are complete.
 * @event cx-lazy-change - Emitted when the tree item's lazy state changes.
 * @event cx-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
 *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
 *  state and update the tree.
 *
 * @slot (default) - The default slot.
 * @slot expand-icon - The icon to show when the tree item is expanded.
 * @slot collapse-icon - The icon to show when the tree item is collapsed.
 *
 * @csspart base - The component's base wrapper.
 * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
 * @csspart item--disabled - Applied when the tree item is disabled.
 * @csspart item--expanded - Applied when the tree item is expanded.
 * @csspart item--indeterminate - Applied when the selection is indeterminate.
 * @csspart item--selected - Applied when the tree item is selected.
 * @csspart indentation - The tree item's indentation container.
 * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
 * @csspart label - The tree item's label.
 * @csspart children - The container that wraps the tree item's nested children.
 * @csspart checkbox - The checkbox that shows when using multiselect.
 * @csspart checkbox__base - The checkbox's exported `base` part.
 * @csspart checkbox__control - The checkbox's exported `control` part.
 * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
 * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
 * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
 * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
 * @csspart checkbox__label - The checkbox's exported `label` part.
 *
 * @cssproperty [--selected-color=var(--cx-color-primary)] - The color of the selected tree item.
 * @cssproperty [--selected-background-color=var(--cx-color-primary-50)] - The background color of the selected tree item.
 * @cssproperty [--hover-background-color=var(--cx-menu-item-background-color-hover)] - The background color of the hovered tree item.
 * @cssproperty [--active-background-color=var(--cx-color-neutral-200)] - The background color of the active tree item.
 * @cssproperty [--item-padding=var(--cx-spacing-x-small) var(--cx-spacing-small)] - The padding of the tree item.
 */
export default class CxTreeItem extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-checkbox': typeof CxCheckbox;
        'cx-icon': typeof CxIcon;
        'cx-spinner': typeof CxSpinner;
    };
    static isTreeItem(node: Node): node is CxTreeItem;
    private readonly localize;
    defaultSlot: HTMLSlotElement;
    childrenSlot: HTMLSlotElement;
    itemElement: HTMLDivElement;
    childrenContainer: HTMLDivElement;
    expandButtonSlot: HTMLSlotElement;
    /**
     * Expands the tree item.
     */
    expanded: boolean;
    /**
     * Draws the tree item in a selected state.
     */
    selected: boolean;
    /**
     * Disables the tree item.
     */
    disabled: boolean;
    /**
     * Makes the tree item readonly.
     */
    readonly: boolean;
    /**
     * Enables lazy loading behavior.
     */
    lazy: boolean;
    /** When set, the underlying menu item will be rendered as an `<a>` with this `href`. */
    href: string;
    /** Tells the browser where to open the link. Only used when `href` is set. */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /**
     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
     * setting the attribute to an empty string or a value of your choice, respectively.
     */
    rel: string;
    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
    download?: string;
    /**
     * Handled by Cortex: Tree item's ID.
     */
    itemId: string;
    /**
     * Whether to allow the tree to be sorted by dragging and dropping items.
     */
    sortable: boolean;
    /**
     * Whether to disable the drag and drop functionality.
     */
    noDrag: boolean;
    /**
     * Whether to disable the selection functionality.
     */
    noSelect: boolean;
    /**
     * Whether to disable dragging an item inside this tree item.
     */
    noDragInside: boolean;
    /**
     * The group name for the sortable items.
     * This allows multiple sortable lists to be grouped together, so items can be dragged between them.
     */
    sortableGroup: string | undefined;
    /**
     * Expand button placement
     */
    expandButtonPlacement: ExpandButtonPlacement;
    /**
     * Whether to not forward the expand button placement to the children.
     */
    noForwardExpandButtonPlacement: boolean;
    /**
     * Indicates whether the tree checkboxes should be synced with the selected state of the tree items.
     * For example, when select all children, the parent checkbox will be checked. When parent checkbox is checked, all children will be checked.
     * If set to `true`, the children and parent checked state will be independent of each other.
     * This is only applicable when `selection` is set to `multiple`.
     */
    disabledSyncCheckboxes: boolean;
    /**
     * Indicates whether the tree checkboxes should show always indeterminate state when any of the children are checked.
     * If set to 'true', the parent checkbox will be indeterminate when some or all of its children are checked.
     * This is only applicable when the selection is set to 'multiple'.
     * This is used to mimic the behavior of a partial selection in Orange Logic platform.
     */
    partialSyncCheckboxes: boolean;
    /**
     * Indicates whether the tree item was previously selected.
     * Use only when the selection is set to 'multiple' and the partialSyncCheckboxes is set to 'true'.
     * This is used to determine whether the tree item should still be indeterminate when all children are unchecked.
     */
    previouslySelected: boolean;
    /**
     * Indicates whether the tree item is focusable.
     * If set to 'false', the tree item will not be focusable and will not receive focus when the user clicks on it.
     */
    focusable: boolean;
    indeterminate: boolean;
    isLeaf: boolean;
    loading: boolean;
    selectable: boolean;
    private sortableInstance;
    get showExpandButton(): boolean;
    constructor();
    runFirstUpdated(): void;
    private animateCollapse;
    private isNestedItem;
    /**
     * Wait for this item to be fully updated before processing the slot change.
     * Since children items may not be fully updated yet.
     */
    private handleChildrenSlotChange;
    protected willUpdate(changedProperties: PropertyValueMap<CxTreeItem> | Map<PropertyKey, unknown>): void;
    private animateExpand;
    handleLoadingChange(): void;
    handleDisabledChange(): void;
    handleSelectedChange(): void;
    handleExpandedChange(): void;
    handleExpandAnimation(): void;
    handleLazyChange(): Promise<void>;
    /** Gets all the nested tree items in this node. */
    getChildrenItems({ includeDisabled, }?: {
        includeDisabled?: boolean;
    }): CxTreeItem[];
    private renderExpandButton;
    handleSortableUpdate(evt: Sortable.SortableEvent): void;
    handleSortableStart(): void;
    handleSortableEnd(): void;
    onDragStart: (evt: DragEvent) => void;
    private destroySortable;
    private initSortable;
    protected updated(changedProperties: PropertyValues): void;
    renderBase(inner: TemplateResult): TemplateResult<1>;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-tree-item': CxTreeItem;
    }
}
