import * as i0 from '@angular/core';
import { input, output, signal, Component } from '@angular/core';
import * as i1 from '@angular/router';
import { RouterModule } from '@angular/router';
import { Icon } from '@masterteam/icons';

class Breadcrumb {
    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
    styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
    onItemClick = output();
    rtl = signal(document.documentElement.dir === 'rtl', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Breadcrumb, isStandalone: true, selector: "mt-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "styleClass()" } }, ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"flex items-center space-x-2\">\r\n    @for (\r\n      item of items();\r\n      track item.label;\r\n      let isFirst = $first;\r\n      let isLast = $last\r\n    ) {\r\n      @if (!isFirst) {\r\n        <li>\r\n          <span class=\"text-gray-400 flex\">\r\n            <mt-icon\r\n              [icon]=\"this.rtl() ? 'arrow.chevron-left' : 'arrow.chevron-right'\"\r\n            ></mt-icon>\r\n          </span>\r\n        </li>\r\n      }\r\n      <li>\r\n        @if (item.routerLink) {\r\n          <a\r\n            [routerLink]=\"item.routerLink\"\r\n            class=\"text-gray-500 hover:text-gray-700 flex items-center gap-1 text-[.95rem]\"\r\n            (click)=\"onItemClick.emit(item)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-icon [icon]=\"item.icon\"></mt-icon>\r\n            }\r\n            @if (item.label) {\r\n              <span>{{ item.label }}</span>\r\n            }\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"\r\n                {{\r\n              isLast\r\n                ? 'bg-primary-50 text-primary-400 cursor-default flex items-center gap-1 rounded-md px-2 py-1 text-[.95rem]'\r\n                : 'text-gray-500 hover:text-gray-700 flex items-center gap-1 text-[.95rem]'\r\n            }}\"\r\n            (click)=\"onItemClick.emit(item)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-icon [icon]=\"item.icon\"></mt-icon>\r\n            }\r\n            @if (item.label) {\r\n              <span>{{ item.label }}</span>\r\n            }\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Breadcrumb, decorators: [{
            type: Component,
            args: [{ selector: 'mt-breadcrumb', standalone: true, imports: [RouterModule, Icon], host: {
                        '[class]': 'styleClass()',
                    }, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"flex items-center space-x-2\">\r\n    @for (\r\n      item of items();\r\n      track item.label;\r\n      let isFirst = $first;\r\n      let isLast = $last\r\n    ) {\r\n      @if (!isFirst) {\r\n        <li>\r\n          <span class=\"text-gray-400 flex\">\r\n            <mt-icon\r\n              [icon]=\"this.rtl() ? 'arrow.chevron-left' : 'arrow.chevron-right'\"\r\n            ></mt-icon>\r\n          </span>\r\n        </li>\r\n      }\r\n      <li>\r\n        @if (item.routerLink) {\r\n          <a\r\n            [routerLink]=\"item.routerLink\"\r\n            class=\"text-gray-500 hover:text-gray-700 flex items-center gap-1 text-[.95rem]\"\r\n            (click)=\"onItemClick.emit(item)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-icon [icon]=\"item.icon\"></mt-icon>\r\n            }\r\n            @if (item.label) {\r\n              <span>{{ item.label }}</span>\r\n            }\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"\r\n                {{\r\n              isLast\r\n                ? 'bg-primary-50 text-primary-400 cursor-default flex items-center gap-1 rounded-md px-2 py-1 text-[.95rem]'\r\n                : 'text-gray-500 hover:text-gray-700 flex items-center gap-1 text-[.95rem]'\r\n            }}\"\r\n            (click)=\"onItemClick.emit(item)\"\r\n          >\r\n            @if (item.icon) {\r\n              <mt-icon [icon]=\"item.icon\"></mt-icon>\r\n            }\r\n            @if (item.label) {\r\n              <span>{{ item.label }}</span>\r\n            }\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n" }]
        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });

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

export { Breadcrumb };
//# sourceMappingURL=masterteam-components-breadcrumb.mjs.map
