import { MXBaseComponent, AXComponent, MXInteractiveComponent } from '@acorex/cdk/common';
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, contentChild, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, Input, NgModule } from '@angular/core';

/**
 * The Breadcrumbs component displays a navigation trail of links, helping users to track their location within an application's hierarchy.
 *
 * @category Components
 */
class AXBreadCrumbsComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.platformId = inject(PLATFORM_ID);
        /**
         * Content child template for custom divider between breadcrumb items.
         */
        this._divider = contentChild('divider', ...(ngDevMode ? [{ debugName: "_divider" }] : []));
        /**
         * View child template for the divider template.
         */
        this.dividerTemplate = viewChild('dividerTpl', ...(ngDevMode ? [{ debugName: "dividerTemplate" }] : []));
    }
    /**
     * Scrolls the breadcrumbs container to the rightmost position after view initialization.
     * This ensures that the most recent breadcrumb items are visible when there are many items.
     */
    ngAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
            this.getHostElement().scrollTo({
                left: this.getHostElement().scrollWidth,
                top: 0,
                behavior: 'instant',
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadCrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXBreadCrumbsComponent, isStandalone: true, selector: "ax-breadcrumbs", providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], queries: [{ propertyName: "_divider", first: true, predicate: ["divider"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dividerTemplate", first: true, predicate: ["dividerTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\n", styles: ["ax-breadcrumbs{--ax-comp-breadcrumbs-text-opacity: .75;--ax-comp-breadcrumbs-prefix-padding-x: .5rem;--ax-comp-breadcrumbs-divider-padding-x: .375rem}ax-breadcrumbs{--ax-comp-breadcrumbs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-breadcrumbs-text-active-color: var(--ax-sys-color-primary-surface)}ax-breadcrumbs{width:100%;overflow-x:auto;overflow-y:hidden;font-size:initial;align-items:center;display:inline-flex;scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;align-items:center;white-space:nowrap;font-size:.875rem;display:inline-flex;line-height:1.25rem;text-decoration-line:none;color:rgba(var(--ax-comp-breadcrumbs-text-color),var(--ax-comp-breadcrumbs-text-opacity))}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:rgba(var(--ax-comp-breadcrumbs-text-active-color))}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{opacity:.5;cursor:not-allowed}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding:0 var(--ax-comp-breadcrumbs-prefix-padding-x)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{font-size:.875rem;padding-inline:var(--ax-comp-breadcrumbs-divider-padding-x)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadCrumbsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\n", styles: ["ax-breadcrumbs{--ax-comp-breadcrumbs-text-opacity: .75;--ax-comp-breadcrumbs-prefix-padding-x: .5rem;--ax-comp-breadcrumbs-divider-padding-x: .375rem}ax-breadcrumbs{--ax-comp-breadcrumbs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-breadcrumbs-text-active-color: var(--ax-sys-color-primary-surface)}ax-breadcrumbs{width:100%;overflow-x:auto;overflow-y:hidden;font-size:initial;align-items:center;display:inline-flex;scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;font-weight:500;-webkit-user-select:none;user-select:none;align-items:center;white-space:nowrap;font-size:.875rem;display:inline-flex;line-height:1.25rem;text-decoration-line:none;color:rgba(var(--ax-comp-breadcrumbs-text-color),var(--ax-comp-breadcrumbs-text-opacity))}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:rgba(var(--ax-comp-breadcrumbs-text-active-color))}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{opacity:.5;cursor:not-allowed}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding:0 var(--ax-comp-breadcrumbs-prefix-padding-x)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{font-size:.875rem;padding-inline:var(--ax-comp-breadcrumbs-divider-padding-x)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}\n"] }]
        }], propDecorators: { _divider: [{ type: i0.ContentChild, args: ['divider', { isSignal: true }] }], dividerTemplate: [{ type: i0.ViewChild, args: ['dividerTpl', { isSignal: true }] }] } });

/**
 * Component representing an item in a breadcrumbs navigation.
 *
 * @category Components
 */
class AXBreadCrumbsItemComponent extends MXInteractiveComponent {
    constructor() {
        super(...arguments);
        /**
         * Reference to the parent breadcrumbs component.
         */
        this._parent = inject(AXBreadCrumbsComponent);
    }
    /**
     * Host binding for CSS classes based on component state.
     * Applies 'ax-state-active' when active is true and 'ax-state-disabled' when disabled is true.
     */
    get __hostClass() {
        return [`${this.active ? 'ax-state-active' : ''}`, `${this.disabled ? 'ax-state-disabled' : ''}`];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadCrumbsItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXBreadCrumbsItemComponent, isStandalone: true, selector: "ax-breadcrumbs-item", inputs: { disabled: "disabled", active: "active" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsItemComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-breadcrumb-divider\">\n  <ng-container [ngTemplateOutlet]=\"_parent.dividerTemplate()\"></ng-container>\n</div>\n\n<div class=\"ax-breadcrumb-item-content\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadCrumbsItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-breadcrumbs-item', inputs: ['disabled'], imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsItemComponent }], template: "<div class=\"ax-breadcrumb-divider\">\n  <ng-container [ngTemplateOutlet]=\"_parent.dividerTemplate()\"></ng-container>\n</div>\n\n<div class=\"ax-breadcrumb-item-content\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n" }]
        }], propDecorators: { active: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXBreadcrumbsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXBreadcrumbsModule, imports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent], exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadcrumbsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXBreadcrumbsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
                    exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule };
//# sourceMappingURL=acorex-components-breadcrumbs.mjs.map
