import { __decorate } from "tslib";
import { attr, observable } from '@ni/fast-element';
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import { styles } from './styles';
import { template } from './template';
import { TableRowSelectionState } from '../../types';
/**
 * A styled cell that is used within the nimble-table-row.
 * @internal
 */
export class TableGroupRow extends FoundationElement {
    constructor() {
        super(...arguments);
        this.nestingLevel = 0;
        this.expanded = false;
        this.selectable = false;
        this.selectionState = TableRowSelectionState.notSelected;
        /**
         * @internal
         */
        this.animationClass = '';
        /**
         * @internal
         */
        this.allowHover = false;
        // Programmatically updating the selection state of a checkbox fires the 'change' event.
        // Therefore, selection change events that occur due to programmatically updating
        // the selection checkbox 'checked' value should be ingored.
        // https://github.com/ni/nimble/issues/2739
        this.ignoreSelectionChangeEvents = false;
        this.removeAnimatingClass = () => {
            this.animationClass = '';
            this.expandIcon.removeEventListener('transitionend', this.removeAnimatingClass);
        };
    }
    onGroupExpandToggle() {
        this.$emit('group-expand-toggle');
        // To avoid a visual glitch with improper expand/collapse icons performing an
        // animation, we apply a class to the appropriate group row such that we can have
        // a more targeted CSS animation. We use the 'transitionend' event to remove the
        // temporary class and register a function reference as the handler to avoid issues
        // that may result from the 'transitionend' event not firing, as it will never result
        // in multiple event listeners being registered.
        this.animationClass = 'animating';
        this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
    }
    /** @internal */
    onSelectionCheckboxChange(event) {
        if (this.ignoreSelectionChangeEvents) {
            return;
        }
        const checkbox = event.target;
        const checked = checkbox.checked;
        this.selectionState = checked
            ? TableRowSelectionState.selected
            : TableRowSelectionState.notSelected;
        const detail = {
            oldState: !checked,
            newState: checked
        };
        this.$emit('group-selection-toggle', detail);
    }
    /** @internal */
    getFocusableElements() {
        return {
            selectionCheckbox: this.selectable
                ? this.selectionCheckbox
                : undefined,
            cells: []
        };
    }
    selectionStateChanged() {
        this.setSelectionCheckboxState();
    }
    selectionCheckboxChanged() {
        this.setSelectionCheckboxState();
    }
    setSelectionCheckboxState() {
        if (this.selectionCheckbox) {
            this.ignoreSelectionChangeEvents = true;
            this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;
            this.selectionCheckbox.indeterminate = this.selectionState
                === TableRowSelectionState.partiallySelected;
            this.ignoreSelectionChangeEvents = false;
        }
    }
}
__decorate([
    observable
], TableGroupRow.prototype, "groupRowValue", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "nestingLevel", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "resolvedRowIndex", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "immediateChildCount", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "groupColumn", void 0);
__decorate([
    attr({ mode: 'boolean' })
], TableGroupRow.prototype, "expanded", void 0);
__decorate([
    attr({ mode: 'boolean' })
], TableGroupRow.prototype, "selectable", void 0);
__decorate([
    attr({ attribute: 'selection-state' })
], TableGroupRow.prototype, "selectionState", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "selectionCheckbox", void 0);
__decorate([
    observable
], TableGroupRow.prototype, "animationClass", void 0);
__decorate([
    attr({ attribute: 'allow-hover', mode: 'boolean' })
], TableGroupRow.prototype, "allowHover", void 0);
const nimbleTableGroupRow = TableGroupRow.compose({
    baseName: 'table-group-row',
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
export const tableGroupRowTag = 'nimble-table-group-row';
//# sourceMappingURL=index.js.map