import * as i0 from '@angular/core';
import { output, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';

const zBreadcrumbVariants = cva(['text-muted-foreground flex min-w-0 flex-wrap items-center gap-1.5 break-words'], {
    variants: {
        zSize: {
            sm: 'text-xs',
            default: 'text-sm',
            lg: 'text-base',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});
const zBreadcrumbItemVariants = cva(['inline-flex min-w-0 items-center gap-2 transition-colors duration-150'], {
    variants: {
        zSize: {
            sm: 'gap-1',
            default: 'gap-2',
            lg: 'gap-2',
        },
        isActive: {
            true: 'text-foreground font-normal',
            false: 'text-muted-foreground hover:text-foreground cursor-pointer',
        },
        isDisabled: {
            true: 'text-muted-foreground/50 cursor-not-allowed pointer-events-none',
            false: '',
        },
    },
    compoundVariants: [
        {
            isActive: true,
            isDisabled: true,
            class: 'text-muted-foreground/50',
        },
    ],
    defaultVariants: {
        zSize: 'default',
        isActive: false,
        isDisabled: false,
    },
});
const zBreadcrumbHomeVariants = cva(['text-muted-foreground hover:text-foreground inline-flex items-center gap-2 transition-colors duration-150'], {
    variants: {
        zSize: {
            sm: 'gap-1',
            default: 'gap-2',
            lg: 'gap-2',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});
const zBreadcrumbSeparatorVariants = cva(['text-muted-foreground/60 flex shrink-0 items-center'], {
    variants: {
        zSize: {
            sm: '[&_z-icon]:size-3',
            default: '[&_z-icon]:size-3.5',
            lg: '[&_z-icon]:size-4',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});

class ZBreadcrumbComponent {
    zItemClick = output();
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zItems = input([], ...(ngDevMode ? [{ debugName: "zItems" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zSeparator = input('lucideChevronRight', ...(ngDevMode ? [{ debugName: "zSeparator" }] : []));
    zSeparatorSize = input('14', ...(ngDevMode ? [{ debugName: "zSeparatorSize" }] : []));
    zHomeIcon = input(undefined, ...(ngDevMode ? [{ debugName: "zHomeIcon" }] : []));
    zShowHome = input(false, { ...(ngDevMode ? { debugName: "zShowHome" } : {}), transform: zTransform });
    listClasses = computed(() => zMergeClasses(zBreadcrumbVariants({ zSize: this.zSize() }), this.class()), ...(ngDevMode ? [{ debugName: "listClasses" }] : []));
    homeClasses = computed(() => zBreadcrumbHomeVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "homeClasses" }] : []));
    separatorClasses = computed(() => zBreadcrumbSeparatorVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : []));
    separatorIsIcon = computed(() => {
        const separator = this.zSeparator();
        return separator.startsWith('lucide') || separator.startsWith('sax');
    }, ...(ngDevMode ? [{ debugName: "separatorIsIcon" }] : []));
    displayItems = computed(() => this.zItems().map((item, index, items) => {
        const isLast = index === items.length - 1;
        return {
            ...item,
            isLast,
            className: zBreadcrumbItemVariants({
                zSize: this.zSize(),
                isActive: isLast,
                isDisabled: item.disabled ?? false,
            }),
        };
    }), ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
    onItemClick(item, isLast) {
        if (isLast || item.disabled) {
            return;
        }
        this.zItemClick.emit(item);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZBreadcrumbComponent, isStandalone: true, selector: "z-breadcrumb", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zSeparator: { classPropertyName: "zSeparator", publicName: "zSeparator", isSignal: true, isRequired: false, transformFunction: null }, zSeparatorSize: { classPropertyName: "zSeparatorSize", publicName: "zSeparatorSize", isSignal: true, isRequired: false, transformFunction: null }, zHomeIcon: { classPropertyName: "zHomeIcon", publicName: "zHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, zShowHome: { classPropertyName: "zShowHome", publicName: "zShowHome", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zItemClick: "zItemClick" }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n  <ol data-slot=\"breadcrumb-list\" [class]=\"listClasses()\">\n    @if (zShowHome() && zHomeIcon()) {\n      <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n        <span\n          data-slot=\"breadcrumb-link\"\n          [class]=\"homeClasses()\"\n          (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n          <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n        </span>\n      </li>\n\n      @if (zItems().length > 0) {\n        <li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" [class]=\"separatorClasses()\">\n          @if (separatorIsIcon()) {\n            <z-icon [zType]=\"$any(zSeparator())\" [zSize]=\"zSeparatorSize()\" />\n          } @else {\n            <span>{{ zSeparator() }}</span>\n          }\n        </li>\n      }\n    }\n\n    @for (item of displayItems(); track item.label) {\n      <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n        @if (item.path && !item.isLast && !item.disabled) {\n          <a\n            data-slot=\"breadcrumb-link\"\n            [routerLink]=\"item.path\"\n            [class]=\"item.className\"\n            (click)=\"onItemClick(item, item.isLast)\">\n            @if (item.icon) {\n              <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n            }\n            <span class=\"truncate\">{{ item.label | translate }}</span>\n          </a>\n        } @else {\n          <span\n            [attr.data-slot]=\"item.isLast ? 'breadcrumb-page' : 'breadcrumb-link'\"\n            [attr.aria-current]=\"item.isLast ? 'page' : null\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [class]=\"item.className\"\n            (click)=\"onItemClick(item, item.isLast)\">\n            @if (item.icon) {\n              <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n            }\n            <span class=\"truncate\">{{ item.label | translate }}</span>\n          </span>\n        }\n      </li>\n\n      @if (!item.isLast) {\n        <li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" [class]=\"separatorClasses()\">\n          @if (separatorIsIcon()) {\n            <z-icon [zType]=\"$any(zSeparator())\" [zSize]=\"zSeparatorSize()\" />\n          } @else {\n            <span>{{ zSeparator() }}</span>\n          }\n        </li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZBreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-breadcrumb', imports: [ZIconComponent, RouterLink, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'block min-w-0',
                    }, template: "<nav aria-label=\"Breadcrumb\">\n  <ol data-slot=\"breadcrumb-list\" [class]=\"listClasses()\">\n    @if (zShowHome() && zHomeIcon()) {\n      <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n        <span\n          data-slot=\"breadcrumb-link\"\n          [class]=\"homeClasses()\"\n          (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n          <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n        </span>\n      </li>\n\n      @if (zItems().length > 0) {\n        <li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" [class]=\"separatorClasses()\">\n          @if (separatorIsIcon()) {\n            <z-icon [zType]=\"$any(zSeparator())\" [zSize]=\"zSeparatorSize()\" />\n          } @else {\n            <span>{{ zSeparator() }}</span>\n          }\n        </li>\n      }\n    }\n\n    @for (item of displayItems(); track item.label) {\n      <li data-slot=\"breadcrumb-item\" class=\"inline-flex items-center gap-1.5\">\n        @if (item.path && !item.isLast && !item.disabled) {\n          <a\n            data-slot=\"breadcrumb-link\"\n            [routerLink]=\"item.path\"\n            [class]=\"item.className\"\n            (click)=\"onItemClick(item, item.isLast)\">\n            @if (item.icon) {\n              <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n            }\n            <span class=\"truncate\">{{ item.label | translate }}</span>\n          </a>\n        } @else {\n          <span\n            [attr.data-slot]=\"item.isLast ? 'breadcrumb-page' : 'breadcrumb-link'\"\n            [attr.aria-current]=\"item.isLast ? 'page' : null\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [class]=\"item.className\"\n            (click)=\"onItemClick(item, item.isLast)\">\n            @if (item.icon) {\n              <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n            }\n            <span class=\"truncate\">{{ item.label | translate }}</span>\n          </span>\n        }\n      </li>\n\n      @if (!item.isLast) {\n        <li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" [class]=\"separatorClasses()\">\n          @if (separatorIsIcon()) {\n            <z-icon [zType]=\"$any(zSeparator())\" [zSize]=\"zSeparatorSize()\" />\n          } @else {\n            <span>{{ zSeparator() }}</span>\n          }\n        </li>\n      }\n    }\n  </ol>\n</nav>\n" }]
        }], propDecorators: { zItemClick: [{ type: i0.Output, args: ["zItemClick"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItems", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSeparator", required: false }] }], zSeparatorSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSeparatorSize", required: false }] }], zHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHomeIcon", required: false }] }], zShowHome: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHome", required: false }] }] } });

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

export { ZBreadcrumbComponent, zBreadcrumbVariants };
//# sourceMappingURL=shival99-z-ui-components-z-breadcrumb.mjs.map
