cloud-ide-element 1.1.237 → 1.1.239

package/fesm2022/cloud-ide-element.mjs

@@ -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-xs tw-text-gray-700 tw-py-0\">\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.5 tw-min-w-0 tw-flex-1 tw-w-full\" 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-1 tw-flex-wrap tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 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-xs\">\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.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"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-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\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.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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:1px 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:1px 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}.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-xs tw-text-gray-700 tw-py-0\">\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 md:tw-p-0.5 tw-min-w-0 tw-flex-1 tw-w-full\" 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.5 md:tw-gap-1 tw-flex-wrap tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0.5 md:tw-gap-1 tw-px-0.5 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-xs\">\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\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"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-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\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\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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:1px 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:1px 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{font-size:10px;line-height:1.1;padding:0}.breadcrumb-list{gap:1px}.breadcrumb-item{gap:1px;padding:0 1px}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon{font-size:10px}.breadcrumb-item.home-item .home-icon{font-size:11px}}.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-xs tw-text-gray-700 tw-py-0\">\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.5 tw-min-w-0 tw-flex-1 tw-w-full\" 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-1 tw-flex-wrap tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 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-xs\">\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.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"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-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\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.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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:1px 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:1px 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}.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-xs tw-text-gray-700 tw-py-0\">\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 md:tw-p-0.5 tw-min-w-0 tw-flex-1 tw-w-full\" 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.5 md:tw-gap-1 tw-flex-wrap tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0.5 md:tw-gap-1 tw-px-0.5 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-xs\">\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\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"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-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\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\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\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:1px 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:1px 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{font-size:10px;line-height:1.1;padding:0}.breadcrumb-list{gap:1px}.breadcrumb-item{gap:1px;padding:0 1px}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon{font-size:10px}.breadcrumb-item.home-item .home-icon{font-size:11px}}.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: [{
@@ -9552,6 +9552,7 @@ class ConfirmationService {
                 inputPlaceholder: options.inputPlaceholder || '',
                 inputRequired: options.inputRequired || false,
                 inputValue: options.inputValue || '',
+                isHtml: options.isHtml || false,
                 resolve: (value) => resolve(value),
                 reject
             };
@@ -10120,7 +10121,8 @@ class CideEleConfirmationModalComponent {
 
       <!-- Modal Body -->
       <div class="modal-body">
-        <p class="modal-message">{{ currentRequest()?.message }}</p>
+        <p *ngIf="!currentRequest()?.isHtml" class="modal-message">{{ currentRequest()?.message }}</p>
+        <p *ngIf="currentRequest()?.isHtml" class="modal-message" [innerHTML]="currentRequest()?.message"></p>
         
         <!-- Prompt Input -->
         <div *ngIf="currentRequest()?.showInput" class="prompt-input-container">
@@ -10194,7 +10196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
       <!-- Modal Body -->
       <div class="modal-body">
-        <p class="modal-message">{{ currentRequest()?.message }}</p>
+        <p *ngIf="!currentRequest()?.isHtml" class="modal-message">{{ currentRequest()?.message }}</p>
+        <p *ngIf="currentRequest()?.isHtml" class="modal-message" [innerHTML]="currentRequest()?.message"></p>
         
         <!-- Prompt Input -->
         <div *ngIf="currentRequest()?.showInput" class="prompt-input-container">