import { __decorate } from "tslib";
import { attr, observable } from '@ni/fast-element';
import { DesignSystem, Breadcrumb as FoundationBreadcrumb } from '@ni/fast-foundation';
import { breadcrumbTemplate as template } from './template';
import { styles } from './styles';
/**
 * A nimble-styled breadcrumb
 */
export class Breadcrumb extends FoundationBreadcrumb {
    constructor() {
        super();
        /**
         * @internal
         */
        this.showScrollButtons = false;
        this.listResizeObserver = new ResizeObserver(entries => {
            let listVisibleWidth = entries[0]?.contentRect.width;
            if (listVisibleWidth !== undefined) {
                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
                listVisibleWidth = Math.ceil(listVisibleWidth);
                if (this.showScrollButtons) {
                    listVisibleWidth += buttonWidth * 2;
                }
                this.showScrollButtons = listVisibleWidth < this.list.scrollWidth;
            }
        });
    }
    /**
     * @internal
     */
    onScrollLeftClick() {
        this.list.scrollBy({
            left: -this.list.clientWidth,
            behavior: 'smooth'
        });
    }
    /**
     * @internal
     */
    onScrollRightClick() {
        this.list.scrollBy({
            left: this.list.clientWidth,
            behavior: 'smooth'
        });
    }
    /**
     * @internal
     */
    connectedCallback() {
        super.connectedCallback();
        this.listResizeObserver.observe(this.list);
    }
    /**
     * @internal
     */
    disconnectedCallback() {
        super.disconnectedCallback();
        this.listResizeObserver.disconnect();
    }
}
__decorate([
    attr
], Breadcrumb.prototype, "appearance", void 0);
__decorate([
    observable
], Breadcrumb.prototype, "showScrollButtons", void 0);
const nimbleBreadcrumb = Breadcrumb.compose({
    baseName: 'breadcrumb',
    baseClass: FoundationBreadcrumb,
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
export const breadcrumbTag = 'nimble-breadcrumb';
//# sourceMappingURL=index.js.map