import { __decorate } from "tslib";
import { DesignSystem, ListboxOption as FoundationListboxOption } from '@ni/fast-foundation';
import { observable, attr } from '@ni/fast-element';
import { styles } from './styles';
import { template } from './template';
import { slotTextContent } from '../utilities/models/slot-text-content';
/**
 * A nimble-styled HTML listbox option
 */
export class ListOption extends FoundationListboxOption {
    constructor() {
        super(...arguments);
        /**
         * The hidden state of the element.
         *
         * @public
         * @defaultValue - false
         * @remarks
         * HTML Attribute: hidden
         */
        this.hidden = false;
        /**
         * @internal
         * This attribute is required to allow use-cases that offer dynamic filtering
         * (like the Select) to visually hide options that are filtered out, but still
         * allow users to use the native 'hidden' attribute without it being affected
         * by the filtering process.
         */
        this.visuallyHidden = false;
        /**
         * @internal
         * This attribute is used to control the visual selected state of an option. This
         * is handled independently of the public 'selected' attribute, as 'selected' is
         * representative of the current value of the container control. However, while
         * a dropdown is open users can navigate through the options (requiring visual
         * updates) without changing the value of the container control.
         */
        this.activeOption = false;
        /** @internal */
        this.hasOverflow = false;
    }
    /** @internal */
    get elementTextContent() {
        return slotTextContent(this.contentSlot);
    }
    connectedCallback() {
        super.connectedCallback();
        const owner = this.getListOptionOwner();
        owner?.registerOption(this);
    }
    getListOptionOwner() {
        let parent = this.parentElement;
        while (parent) {
            if (this.isListOptionOwner(parent)) {
                return parent;
            }
            parent = parent.parentElement;
        }
        return undefined;
    }
    isListOptionOwner(parent) {
        if (!parent) {
            return false;
        }
        return typeof parent.registerOption === 'function';
    }
}
__decorate([
    attr({ mode: 'boolean' })
], ListOption.prototype, "hidden", void 0);
__decorate([
    attr({ attribute: 'visually-hidden', mode: 'boolean' })
], ListOption.prototype, "visuallyHidden", void 0);
__decorate([
    attr({ attribute: 'active-option', mode: 'boolean' })
], ListOption.prototype, "activeOption", void 0);
__decorate([
    observable
], ListOption.prototype, "hasOverflow", void 0);
const nimbleListOption = ListOption.compose({
    baseName: 'list-option',
    baseClass: FoundationListboxOption,
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
export const listOptionTag = 'nimble-list-option';
//# sourceMappingURL=index.js.map