cloud-ide-element 1.1.245 → 1.1.248

package/fesm2022/cloud-ide-element.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, input, effect, ContentChildren, signal, DestroyRef, computed, HostListener, ChangeDetectionStrategy, Directive, PLATFORM_ID, ElementRef, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, input, effect, ContentChildren, signal, DestroyRef, computed, HostListener, ChangeDetectionStrategy, Directive, PLATFORM_ID, InjectionToken, ElementRef, viewChild } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
@@ -6459,11 +6459,11 @@ class CideEleBreadcrumbComponent {
         this.localLoading.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 max-sm:tw-w-[20px] tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"] }]
+            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 max-sm:tw-w-[20px] tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], showHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHomeIcon", required: false }] }], homeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeIcon", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], showDropdownOnOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdownOnOverflow", required: false }] }], dropdownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOptions", required: false }] }], clickableItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableItems", required: false }] }], showTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltips", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingInput", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextId", required: false }] }], pageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCode", required: false }] }], itemClick: [{
                 type: Output
             }], dropdownOptionClick: [{
@@ -9690,6 +9690,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Injection token for the "open AI assistant" action.
+ * Provide this in the app (e.g. navigate to AI chat or toggle AI drawer) so that
+ * the shortcut system and header can trigger it without importing the AI package.
+ */
+const OPEN_AI_ASSISTANT_ACTION = new InjectionToken('OPEN_AI_ASSISTANT_ACTION');
+/**
+ * Injection token for the AI drawer/launcher component.
+ * Provide the component Type (e.g. AiDrawerComponent) in the app so that layout
+ * can render it without importing the AI package (avoids circular dependencies).
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CIDE_AI_DRAWER_COMPONENT = new InjectionToken('CIDE_AI_DRAWER_COMPONENT');
+
 /**
  * Directive to display images from file manager by ID
  * Usage: <img cideEleFileImage [fileId]="yourFileId" [altText]="'Image'" class="your-css-classes" />
@@ -14608,6 +14622,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.15", n
 class FloatingContainerShortcutsService {
     keyboardShortcutService = inject(KeyboardShortcutService);
     containerService = inject(CideEleFloatingContainerService);
+    openAiAction = inject(OPEN_AI_ASSISTANT_ACTION, { optional: true });
     // Z-index layers for different container states
     Z_INDEX_LAYERS = {
         HIDDEN: 100, // Hidden containers (behind everything)
@@ -14737,6 +14752,19 @@ class FloatingContainerShortcutsService {
             action: () => this.openEntityRightsSharing(),
             preventDefault: true
         });
+        // Alt + A - Open AI Assistant (when OPEN_AI_ASSISTANT_ACTION is provided)
+        if (this.openAiAction) {
+            this.keyboardShortcutService.register({
+                id: 'cide-open-ai-assistant',
+                key: 'a',
+                altKey: true,
+                description: 'Open AI Assistant',
+                title: 'Open AI Assistant',
+                category: 'AI',
+                action: () => this.openAiAction(),
+                preventDefault: true
+            });
+        }
         console.log('✅ [FloatingContainerShortcuts] Default shortcuts registered');
     }
     /**
@@ -15710,5 +15738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
+export { CIDE_AI_DRAWER_COMPONENT, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, OPEN_AI_ASSISTANT_ACTION, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map