import { NgTemplateOutlet } from '@angular/common';
import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, DestroyRef, Directive, ElementRef, forwardRef, inject, InjectionToken, Input, QueryList, TemplateRef, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterLink } from '@angular/router';
import { KbqButton, KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
import { KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
import { KbqDropdownModule } from '@koobiq/components/dropdown';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqOverflowItem, KbqOverflowItemsModule, KbqOverflowItemsResult } from '@koobiq/components/overflow-items';
import { KbqTitleModule } from '@koobiq/components/title';
import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
import * as i0 from "@angular/core";
import * as i1 from "@radix-ng/primitives/roving-focus";
import * as i2 from "@koobiq/components/icon";
import * as i3 from "@koobiq/components/button";
import * as i4 from "@koobiq/components/dropdown";
import * as i5 from "@koobiq/components/title";
import * as i6 from "@koobiq/components/overflow-items";
const KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION = {
    max: 4,
    size: 'normal',
    firstItemNegativeMargin: true,
    wrapMode: 'auto'
};
/** Breadcrumbs options global configuration provider. */
export const KBQ_BREADCRUMBS_CONFIGURATION = new InjectionToken('KBQ_BREADCRUMBS_CONFIGURATION', { factory: () => KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION });
/** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
export const kbqBreadcrumbsConfigurationProvider = (configuration) => ({
    provide: KBQ_BREADCRUMBS_CONFIGURATION,
    useValue: { ...KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION, ...configuration }
});
export class KbqBreadcrumbsSeparator {
    constructor() {
        this.templateRef = inject(TemplateRef);
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[kbqBreadcrumbsSeparator]',
                    standalone: true,
                    host: {
                        class: 'kbq-breadcrumbs-separator'
                    }
                }]
        }] });
/**
 * Directive to style and configure buttons used as breadcrumb items.
 * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
 * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
 */
export class KbqBreadcrumbButton {
    constructor() {
        this.button = inject(KbqButton, { optional: true, self: true });
    }
    ngOnInit() {
        if (this.button) {
            this.button.color = KbqComponentColors.Contrast;
            this.button.kbqStyle = KbqButtonStyles.Transparent;
        }
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbq-button][kbqBreadcrumb]',
                    host: { class: 'kbq-breadcrumb-item' },
                    hostDirectives: [
                        {
                            directive: RdxRovingFocusItemDirective,
                            inputs: ['focusable']
                        }
                    ]
                }]
        }] });
/**
 * Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
 *
 */
export class KbqBreadcrumbView {
    constructor() {
        this.templateRef = inject(TemplateRef);
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbqBreadcrumbView]'
                }]
        }] });
/**
 * Component represents an individual breadcrumb item with optional support for router navigation and styling.
 */
export class KbqBreadcrumbItem {
    constructor() {
        /**
         * Indicates whether the breadcrumb item is the current/active item.
         * Defaults to `false`.
         */
        this.current = false;
        /**
         * An optional `RouterLink` instance for navigating to a specific route.
         * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
         */
        this.routerLink = inject(RouterLink, { optional: true, host: true });
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: "text", disabled: ["disabled", "disabled", booleanAttribute], current: ["current", "current", booleanAttribute] }, host: { properties: { "attr.tabIndex": "null" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef }], ngImport: i0, template: `
        <ng-content />
    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'kbq-breadcrumb-item',
                    template: `
        <ng-content />
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: {
                        '[attr.tabIndex]': 'null'
                    }
                }]
        }], propDecorators: { text: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], current: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], customTemplateRef: [{
                type: ContentChild,
                args: [KbqBreadcrumbView, { read: TemplateRef }]
            }] } });
export class KbqBreadcrumbs {
    /** @docs-private */
    get itemsExcludingEdges() {
        return this.items.toArray().slice(1, -1);
    }
    /**
     * Calculates the total width of visible items based on the `max` value and overflow items.
     * @returns {number | null} The computed max width for overflow items or null if conditions are not met.
     * @docs-private
     */
    get maxWidth() {
        if (!this.overflowItems ||
            !this.overflowItems.length ||
            this.max === null ||
            this.max >= this.items.length ||
            this.max < this.minVisibleItems) {
            return null;
        }
        let visibleItemsWidth = this.getItemWidth(this.result);
        // Reorders overflow items to prioritize the first and last elements
        const sortedItems = [
            ...this.overflowItems.toArray().slice(1, -1),
            this.overflowItems.first,
            this.overflowItems.last
        ];
        for (let i = 0; i < this.max - 1; i++) {
            visibleItemsWidth += this.getItemWidth(sortedItems[sortedItems.length - i - 1]);
        }
        return visibleItemsWidth;
    }
    constructor() {
        this.configuration = inject(KBQ_BREADCRUMBS_CONFIGURATION);
        /**
         * Determines if a negative margin should be applied to the first breadcrumb item.
         *
         * @see KbqBreadcrumbsConfiguration
         */
        this.firstItemNegativeMargin = this.configuration.firstItemNegativeMargin;
        /**
         * Size of the breadcrumbs. Affects font size.
         * Default value is taken from the global configuration.
         */
        this.size = this.configuration.size;
        /**
         * Maximum number of visible breadcrumb items.
         * Remaining items are collapsed into a dropdown if the total exceeds this value.
         * Default value is taken from the global configuration.
         */
        this.max = this.configuration.max;
        /**
         * Indicates whether the breadcrumbs are disabled.
         * When disabled, user interactions are blocked.
         */
        this.disabled = false;
        /**
         * Wrapping behavior of the breadcrumb items.
         */
        this.wrapMode = this.configuration.wrapMode;
        /**
         * Ensures at least minimum number of breadcrumb items are shown.
         */
        this.minVisibleItems = 2;
        this.KbqComponentColors = KbqComponentColors;
        this.KbqButtonStyles = KbqButtonStyles;
        this.PopUpPlacements = PopUpPlacements;
        this.cdr = inject(ChangeDetectorRef);
        this.destroyRef = inject(DestroyRef);
        inject(RdxRovingFocusGroupDirective, { self: true }).orientation = 'horizontal';
    }
    ngAfterContentInit() {
        this.items.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.cdr.markForCheck());
    }
    getItemWidth(item) {
        return item ? item.nativeElement.offsetWidth : 0;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { firstItemNegativeMargin: ["firstItemNegativeMargin", "firstItemNegativeMargin", booleanAttribute], size: "size", max: "max", disabled: ["disabled", "disabled", booleanAttribute], wrapMode: "wrapMode" }, host: { properties: { "class.kbq-breadcrumbs_compact": "size === \"compact\"", "class.kbq-breadcrumbs_normal": "size === \"normal\"", "class.kbq-breadcrumbs_big": "size === \"big\"", "class.kbq-breadcrumbs_wrap": "wrapMode === \"wrap\"", "class.kbq-breadcrumbs_first-item-negative-margin": "firstItemNegativeMargin", "attr.aria-label": "'breadcrumb'" }, classAttribute: "kbq-breadcrumbs" }, queries: [{ propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef }, { propertyName: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem) }], viewQueries: [{ propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, read: ElementRef }, { propertyName: "overflowItems", predicate: KbqOverflowItem, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0, template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item; let last = $last) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: last }\" />\n            @if (!last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item; let index = $index) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i4.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i4.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i4.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: KbqBreadcrumbButton, selector: "[kbq-button][kbqBreadcrumb]" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i5.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqOverflowItemsModule }, { kind: "directive", type: i6.KbqOverflowItems, selector: "[kbqOverflowItems]", inputs: ["reverseOverflowOrder", "debounceTime", "additionalResizeObserverTargets", "orientation"], outputs: ["changes"], exportAs: ["kbqOverflowItems"] }, { kind: "directive", type: i6.KbqOverflowItem, selector: "[kbqOverflowItem]", inputs: ["kbqOverflowItem", "order", "alwaysVisible"], exportAs: ["kbqOverflowItem"] }, { kind: "directive", type: i6.KbqOverflowItemsResult, selector: "[kbqOverflowItemsResult]", exportAs: ["kbqOverflowItemsResult"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'kbq-breadcrumbs,[kbq-breadcrumbs]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        NgTemplateOutlet,
                        RouterLink,
                        KbqIconModule,
                        KbqButtonModule,
                        KbqDropdownModule,
                        KbqBreadcrumbButton,
                        KbqTitleModule,
                        KbqOverflowItemsModule
                    ], host: {
                        class: 'kbq-breadcrumbs',
                        '[class.kbq-breadcrumbs_compact]': 'size === "compact"',
                        '[class.kbq-breadcrumbs_normal]': 'size === "normal"',
                        '[class.kbq-breadcrumbs_big]': 'size === "big"',
                        '[class.kbq-breadcrumbs_wrap]': 'wrapMode === "wrap"',
                        '[class.kbq-breadcrumbs_first-item-negative-margin]': 'firstItemNegativeMargin',
                        '[attr.aria-label]': "'breadcrumb'"
                    }, hostDirectives: [RdxRovingFocusGroupDirective], template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item; let last = $last) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: last }\" />\n            @if (!last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item; let index = $index) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"] }]
        }], ctorParameters: () => [], propDecorators: { firstItemNegativeMargin: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], size: [{
                type: Input
            }], max: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], wrapMode: [{
                type: Input
            }], separator: [{
                type: ContentChild,
                args: [KbqBreadcrumbsSeparator, { read: TemplateRef }]
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => KbqBreadcrumbItem)]
            }], result: [{
                type: ViewChild,
                args: [KbqOverflowItemsResult, { read: ElementRef }]
            }], overflowItems: [{
                type: ViewChildren,
                args: [KbqOverflowItem, { read: ElementRef }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 