cloud-ide-element 1.1.3 → 1.1.6

package/fesm2022/cloud-ide-element.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, ContentChildren, signal, DestroyRef, computed, effect, InjectionToken, Optional, Inject, input, HostListener, Directive, ElementRef, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, ContentChildren, signal, DestroyRef, computed, effect, input, HostListener, ChangeDetectionStrategy, Directive, 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';
@@ -946,6 +946,7 @@ class CideInputComponent {
     }
     async getControlData() {
         const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id });
+        console.log(cide_element_data, "cide_element_data");
         if (cide_element_data) {
             this.label = cide_element_data?.sype_label;
             this.labelPlacement = (cide_element_data?.sype_label_placement || 'floating');
@@ -5342,241 +5343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
-// Optional app-level provider to supply a resolver without calling into the service
-const PAGE_PATH_RESOLVER = new InjectionToken('PAGE_PATH_RESOLVER');
-class BreadcrumbNavigationService {
-    // Default context id (used by shell routes)
-    activeContextId = signal('default', ...(ngDevMode ? [{ debugName: "activeContextId" }] : []));
-    // Map of contextId -> breadcrumb items
-    contextIdToItems = new Map();
-    // Signal to store current breadcrumb items for active context
-    currentBreadcrumbItems = computed(() => {
-        const ctx = this.activeContextId();
-        return this.getContextSignal(ctx)();
-    }, ...(ngDevMode ? [{ debugName: "currentBreadcrumbItems" }] : []));
-    // Signal to store loading state
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    // Registry removed; breadcrumb is resolved via API or direct inputs
-    // Optional external resolver to fetch breadcrumb path by page code from API/menu tables
-    pagePathResolver = null;
-    constructor(resolver) {
-        // Initialize with default breadcrumb
-        this.ensureContext('default');
-        this.setDefaultBreadcrumb('default');
-        // Accept resolver from DI if provided
-        if (resolver) {
-            this.pagePathResolver = resolver;
-        }
-        else {
-            // Try to resolve via token if available
-            try {
-                const tokenResolver = inject(PAGE_PATH_RESOLVER, { optional: true });
-                if (tokenResolver)
-                    this.pagePathResolver = tokenResolver;
-            }
-            catch { }
-        }
-    }
-    // Removed default registry: breadcrumb is driven by API resolver or explicit items
-    /**
-     * Generate breadcrumb items for a given page ID
-     * @param pageId - The page identifier
-     * @param additionalItems - Optional additional breadcrumb items to append
-     * @returns Promise<BreadcrumbNavigationItem[]> - Generated breadcrumb items
-     */
-    async generateBreadcrumb(pageId, additionalItems = [], contextId = this.activeContextId()) {
-        this.isLoading.set(true);
-        try {
-            const breadcrumbItems = [
-                // Root item
-                { id: 'root', label: 'Projects', icon: 'home', type: 'root', path: '/' },
-                // Current page item (fallback when only pageId is available)
-                { id: pageId, label: this.formatPageLabel(pageId), type: 'page' },
-                // Additional items
-                ...additionalItems
-            ];
-            this.setContextItems(contextId, breadcrumbItems);
-            return breadcrumbItems;
-        }
-        catch (error) {
-            console.error('Error generating breadcrumb:', error);
-            return this.getDefaultBreadcrumb();
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    /**
-     * Generate breadcrumb with parent entity information
-     * @param pageId - The page identifier
-     * @param parentEntityInfo - Parent entity information
-     * @returns Promise<BreadcrumbNavigationItem[]> - Generated breadcrumb items
-     */
-    async generateBreadcrumbWithParent(pageId, parentEntityInfo, contextId = this.activeContextId()) {
-        const additionalItems = [
-            {
-                id: parentEntityInfo.id,
-                label: parentEntityInfo.name,
-                icon: parentEntityInfo.type === 'entity' ? 'account_tree' : 'folder',
-                type: 'page'
-            }
-        ];
-        return this.generateBreadcrumb(pageId, additionalItems, contextId);
-    }
-    /**
-     * Set or switch the active breadcrumb context (e.g., when focusing a tab/popup)
-     */
-    setActiveContext(contextId) {
-        this.ensureContext(contextId);
-        this.activeContextId.set(contextId);
-    }
-    /**
-     * Provide an external resolver that can translate a pageCode to full breadcrumb path
-     */
-    registerPagePathResolver(resolver) {
-        this.pagePathResolver = resolver;
-    }
-    /**
-     * Resolve and set breadcrumb by page code using external API/menu resolver
-     */
-    async resolveAndSetByPageCode(pageCode, contextId = this.activeContextId()) {
-        if (!this.pagePathResolver) {
-            console.warn('BreadcrumbNavigationService: No pagePathResolver registered');
-            return this.getDefaultBreadcrumb();
-        }
-        this.isLoading.set(true);
-        try {
-            const resolved = await this.pagePathResolver(pageCode);
-            const items = [
-                { id: 'root', label: 'Projects', icon: 'home', type: 'root', path: '/' },
-                ...resolved.map(r => ({ id: r.id, label: r.label, icon: r.icon, type: 'page', path: r.path }))
-            ];
-            this.setContextItems(contextId, items);
-            return items;
-        }
-        catch (e) {
-            console.error('Failed to resolve breadcrumb by pageCode', e);
-            return this.getDefaultBreadcrumb();
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    /**
-     * Register a new page in the registry
-     * @param pageInfo - Page information to register
-     */
-    registerPage(pageInfo) { }
-    /**
-     * Register multiple pages at once
-     * @param pages - Array of page information to register
-     */
-    registerPages(pages) { }
-    /**
-     * Get current breadcrumb items
-     * @returns BreadcrumbNavigationItem[] - Current breadcrumb items
-     */
-    getCurrentBreadcrumb() {
-        return this.currentBreadcrumbItems();
-    }
-    /**
-     * Returns a signal of the current breadcrumb items for binding in UI
-     */
-    getCurrentBreadcrumbSignal() {
-        return this.currentBreadcrumbItems;
-    }
-    /**
-     * Get loading state
-     * @returns boolean - Loading state
-     */
-    isLoadingBreadcrumb() {
-        return this.isLoading();
-    }
-    /**
-     * Clear current breadcrumb
-     */
-    clearBreadcrumb(contextId = this.activeContextId()) {
-        this.setContextItems(contextId, []);
-    }
-    /**
-     * Set default breadcrumb
-     */
-    setDefaultBreadcrumb(contextId) {
-        this.setContextItems(contextId, [
-            { id: 'root', label: 'Projects', icon: 'home', type: 'root', path: '/' },
-            { id: 'ui-kit', label: 'Universal UI Kit (Web)', icon: 'web', type: 'module' },
-            { id: 'shape', label: 'Shape', icon: 'shape', type: 'page' }
-        ]);
-    }
-    /**
-     * Get default breadcrumb
-     * @returns BreadcrumbNavigationItem[] - Default breadcrumb items
-     */
-    getDefaultBreadcrumb() {
-        return [
-            { id: 'root', label: 'Projects', icon: 'home', type: 'root', path: '/' },
-            { id: 'ui-kit', label: 'Universal UI Kit (Web)', icon: 'web', type: 'module' },
-            { id: 'unknown', label: 'Unknown Page', icon: 'help', type: 'page' }
-        ];
-    }
-    /**
-     * Format page label from page ID
-     * @param pageId - Page identifier
-     * @returns string - Formatted page label
-     */
-    formatPageLabel(pageId) {
-        return pageId
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Get all registered pages
-     * @returns BreadcrumbPageInfo[] - All registered pages
-     */
-    getAllRegisteredPages() { return []; }
-    /**
-     * Get pages by module
-     * @param moduleName - Module name to filter by
-     * @returns BreadcrumbPageInfo[] - Pages in the specified module
-     */
-    getPagesByModule(moduleName) { return []; }
-    /**
-     * Get pages by menu
-     * @param menuName - Menu name to filter by
-     * @returns BreadcrumbPageInfo[] - Pages in the specified menu
-     */
-    getPagesByMenu(menuName) { return []; }
-    // ---------- internal helpers ----------
-    ensureContext(contextId) {
-        if (!this.contextIdToItems.has(contextId)) {
-            this.contextIdToItems.set(contextId, signal([]));
-        }
-    }
-    getContextSignal(contextId) {
-        this.ensureContext(contextId);
-        // non-null since ensured
-        return this.contextIdToItems.get(contextId);
-    }
-    setContextItems(contextId, items) {
-        this.ensureContext(contextId);
-        this.contextIdToItems.get(contextId).set(items);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BreadcrumbNavigationService, deps: [{ token: PAGE_PATH_RESOLVER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BreadcrumbNavigationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BreadcrumbNavigationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [PAGE_PATH_RESOLVER]
-                }] }] });
-
 class CideEleBreadcrumbComponent {
     // Input signals
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -5618,52 +5384,25 @@ class CideEleBreadcrumbComponent {
     config = computed(() => this.getConfigForStyle(this.style()), ...(ngDevMode ? [{ debugName: "config" }] : []));
     effectiveLoading = computed(() => this.loadingInput() || this.localLoading(), ...(ngDevMode ? [{ debugName: "effectiveLoading" }] : []));
     // Service for auto-binding when inputs are not provided
-    breadcrumbService = inject(BreadcrumbNavigationService, { optional: true });
-    pagePathResolver = inject(PAGE_PATH_RESOLVER, { optional: true });
+    // No service injection
     cleanupEffect;
-    ngOnInit() {
-        // If no items provided and service is available, auto-bind to service signal
-        const pc = this.pageCode();
-        if (pc && this.pagePathResolver && this.breadcrumbService) {
-            // Resolve by page code into the active or provided context
-            const ctx = this.contextId();
-            if (ctx)
-                this.breadcrumbService.setActiveContext(ctx);
-            this.breadcrumbService.registerPagePathResolver(this.pagePathResolver);
-            void this.breadcrumbService.resolveAndSetByPageCode(pc, ctx);
-        }
-        // Mirror external input items into local state
-        const stopInputs = effect(() => {
+    constructor() {
+        // Mirror external input items into local state within injection context
+        const ref = effect(() => {
             const inItems = this.items();
             if (inItems && inItems.length > 0) {
                 this.localItems.set([...inItems]);
                 this.processItems();
             }
-        }, ...(ngDevMode ? [{ debugName: "stopInputs" }] : []));
-        this.cleanupEffect = stopInputs;
-        if ((this.items().length === 0) && this.breadcrumbService) {
-            // When a contextId is provided, switch service active context
-            const ctx = this.contextId();
-            if (ctx) {
-                this.breadcrumbService.setActiveContext(ctx);
-            }
-            const destroy = effect(() => {
-                const svcItems = this.breadcrumbService.getCurrentBreadcrumbSignal()();
-                const isLoading = this.breadcrumbService.isLoadingBreadcrumb();
-                this.localItems.set(svcItems.map(i => ({ id: i.id, label: i.label, icon: i.icon, url: i.path })));
-                this.localLoading.set(isLoading);
-                this.processItems();
-            }, ...(ngDevMode ? [{ debugName: "destroy" }] : []));
-            this.cleanupEffect = destroy;
-        }
-        else {
-            this.processItems();
-        }
+        }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
+        this.cleanupEffect = { destroy: () => ref.destroy() };
+    }
+    ngOnInit() {
+        // Initial calculation
+        this.processItems();
     }
     ngOnDestroy() {
-        if (this.cleanupEffect) {
-            this.cleanupEffect();
-        }
+        this.cleanupEffect?.destroy();
     }
     onDocumentClick(event) {
         const target = event.target;
@@ -5846,12 +5585,12 @@ class CideEleBreadcrumbComponent {
         this.localLoading.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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-min-w-0 tw-flex-1\" role=\"navigation\" 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\">\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()\"\n              (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()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [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\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      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\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            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\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              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>\n", 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:2px 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:3px 0}}.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:4px;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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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-min-w-0 tw-flex-1\" role=\"navigation\" 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\">\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()\"\n              (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()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [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\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      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\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            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\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              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>\n", 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:2px 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:3px 0}}.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:4px;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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], 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-min-w-0 tw-flex-1\" role=\"navigation\" 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\">\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()\"\n              (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()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [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\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      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\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            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\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              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>\n", 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:2px 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:3px 0}}.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:4px;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"] }]
-        }], propDecorators: { itemClick: [{
+            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-min-w-0 tw-flex-1\" role=\"navigation\" 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\">\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()\"\n              (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()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [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\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      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\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            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\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              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>\n", 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:2px 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:3px 0}}.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:4px;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"] }]
+        }], ctorParameters: () => [], propDecorators: { itemClick: [{
                 type: Output
             }], dropdownOptionClick: [{
                 type: Output
@@ -7160,6 +6899,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class ConfirmationService {
+    // Modern signal-based state management
+    confirmationQueue = signal([], ...(ngDevMode ? [{ debugName: "confirmationQueue" }] : []));
+    currentRequest = signal(null, ...(ngDevMode ? [{ debugName: "currentRequest" }] : []));
+    // Modern computed signals with proper typing
+    hasActiveConfirmation = computed(() => this.currentRequest() !== null, ...(ngDevMode ? [{ debugName: "hasActiveConfirmation" }] : []));
+    queueLength = computed(() => this.confirmationQueue().length, ...(ngDevMode ? [{ debugName: "queueLength" }] : []));
+    constructor() {
+        // Modern service initialization
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    /**
+     * Ask for confirmation with a simple yes/no dialog
+     */
+    ask(options) {
+        console.log('🔔 ConfirmationService.ask called with options:', options);
+        return new Promise((resolve, reject) => {
+            const request = {
+                id: this.generateId(),
+                title: options.title,
+                message: options.message,
+                type: options.type || 'warning',
+                icon: options.icon || this.getDefaultIcon(options.type || 'warning'),
+                confirmText: options.confirmText || 'Confirm',
+                cancelText: options.cancelText || 'Cancel',
+                resolve: (value) => resolve(value),
+                reject
+            };
+            console.log('🔽 Ask for confirmation with a simple yes/no dialog', request);
+            this.addToQueue(request);
+        });
+    }
+    /**
+     * Ask for confirmation with custom template and return custom data
+     */
+    askWithTemplate(options) {
+        return new Promise((resolve, reject) => {
+            const request = {
+                id: this.generateId(),
+                title: options.title,
+                message: options.message,
+                type: options.type || 'info',
+                icon: options.icon || this.getDefaultIcon(options.type || 'info'),
+                confirmText: options.confirmText || 'Confirm',
+                cancelText: options.cancelText || 'Cancel',
+                customTemplate: options.customTemplate,
+                customData: options.customData,
+                resolve: (value) => resolve(value),
+                reject
+            };
+            // Cast to unknown for queue compatibility
+            this.addToQueue(request);
+        });
+    }
+    /**
+     * Quick confirmation for dangerous actions
+     */
+    confirmDelete(itemName) {
+        return this.ask({
+            title: 'Confirm Delete',
+            message: itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : 'Are you sure you want to delete this item? This action cannot be undone.',
+            type: 'danger',
+            icon: 'delete_forever',
+            confirmText: 'Delete',
+            cancelText: 'Cancel'
+        });
+    }
+    /**
+     * Quick confirmation for permanent actions
+     */
+    confirmPermanentAction(action, itemName) {
+        return this.ask({
+            title: `Confirm ${action}`,
+            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"? This action cannot be undone.` : `Are you sure you want to ${action.toLowerCase()}? This action cannot be undone.`,
+            type: 'danger',
+            icon: 'warning',
+            confirmText: action,
+            cancelText: 'Cancel'
+        });
+    }
+    /**
+     * Quick confirmation for safe actions
+     */
+    confirmSafeAction(action, itemName) {
+        return this.ask({
+            title: `Confirm ${action}`,
+            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"?` : `Are you sure you want to ${action.toLowerCase()}?`,
+            type: 'info',
+            icon: 'info',
+            confirmText: action,
+            cancelText: 'Cancel'
+        });
+    }
+    // Modern private methods with proper typing
+    addToQueue(request) {
+        this.confirmationQueue.update(queue => [...queue, request]);
+        console.log('🔔 Added request to queue:', request);
+        this.processQueue();
+    }
+    processQueue() {
+        console.log('🔔 Processing queue. Current request:', this.currentRequest(), 'Queue length:', this.confirmationQueue().length);
+        if (this.currentRequest() || this.confirmationQueue().length === 0) {
+            return;
+        }
+        const nextRequest = this.confirmationQueue()[0];
+        console.log('🔔 Setting current request:', nextRequest);
+        this.currentRequest.set(nextRequest);
+    }
+    // Modern public methods with proper typing
+    confirmCurrentRequest(data) {
+        const request = this.currentRequest();
+        if (!request)
+            return;
+        // Always resolve with true for confirmation, unless custom data is explicitly provided
+        const resolvedValue = data !== undefined ? data : true;
+        console.log('🔔 Confirming request with value:', resolvedValue);
+        request.resolve(resolvedValue);
+        this.removeCurrentRequest();
+    }
+    cancelCurrentRequest() {
+        const request = this.currentRequest();
+        if (!request)
+            return;
+        request.reject(new Error('User cancelled'));
+        this.removeCurrentRequest();
+    }
+    removeCurrentRequest() {
+        this.confirmationQueue.update(queue => queue.slice(1));
+        this.currentRequest.set(null);
+        // Process next request if any
+        setTimeout(() => this.processQueue(), 100);
+    }
+    generateId() {
+        return `confirmation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    // Modern private utility method with proper typing
+    getDefaultIcon(type) {
+        const iconMap = {
+            danger: 'error',
+            warning: 'warning',
+            info: 'info',
+            success: 'check_circle'
+        };
+        return iconMap[type];
+    }
+    // Modern public getters with proper typing
+    getCurrentRequest() {
+        return this.currentRequest;
+    }
+    getHasActiveConfirmation() {
+        return this.hasActiveConfirmation;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Directive to display images from file manager by ID
  * Usage: <img cideEleFileImage [fileId]="yourFileId" [altText]="'Image'" class="your-css-classes" />
@@ -7460,170 +7363,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }] } });
 
-class ConfirmationService {
-    // Modern signal-based state management
-    confirmationQueue = signal([], ...(ngDevMode ? [{ debugName: "confirmationQueue" }] : []));
-    currentRequest = signal(null, ...(ngDevMode ? [{ debugName: "currentRequest" }] : []));
-    // Modern computed signals with proper typing
-    hasActiveConfirmation = computed(() => this.currentRequest() !== null, ...(ngDevMode ? [{ debugName: "hasActiveConfirmation" }] : []));
-    queueLength = computed(() => this.confirmationQueue().length, ...(ngDevMode ? [{ debugName: "queueLength" }] : []));
-    constructor() {
-        // Modern service initialization
-    }
-    ngOnDestroy() {
-        // Cleanup if needed
-    }
-    /**
-     * Ask for confirmation with a simple yes/no dialog
-     */
-    ask(options) {
-        console.log('🔔 ConfirmationService.ask called with options:', options);
-        return new Promise((resolve, reject) => {
-            const request = {
-                id: this.generateId(),
-                title: options.title,
-                message: options.message,
-                type: options.type || 'warning',
-                icon: options.icon || this.getDefaultIcon(options.type || 'warning'),
-                confirmText: options.confirmText || 'Confirm',
-                cancelText: options.cancelText || 'Cancel',
-                resolve: (value) => resolve(value),
-                reject
-            };
-            console.log('🔽 Ask for confirmation with a simple yes/no dialog', request);
-            this.addToQueue(request);
-        });
-    }
-    /**
-     * Ask for confirmation with custom template and return custom data
-     */
-    askWithTemplate(options) {
-        return new Promise((resolve, reject) => {
-            const request = {
-                id: this.generateId(),
-                title: options.title,
-                message: options.message,
-                type: options.type || 'info',
-                icon: options.icon || this.getDefaultIcon(options.type || 'info'),
-                confirmText: options.confirmText || 'Confirm',
-                cancelText: options.cancelText || 'Cancel',
-                customTemplate: options.customTemplate,
-                customData: options.customData,
-                resolve: (value) => resolve(value),
-                reject
-            };
-            // Cast to unknown for queue compatibility
-            this.addToQueue(request);
-        });
-    }
-    /**
-     * Quick confirmation for dangerous actions
-     */
-    confirmDelete(itemName) {
-        return this.ask({
-            title: 'Confirm Delete',
-            message: itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : 'Are you sure you want to delete this item? This action cannot be undone.',
-            type: 'danger',
-            icon: 'delete_forever',
-            confirmText: 'Delete',
-            cancelText: 'Cancel'
-        });
-    }
-    /**
-     * Quick confirmation for permanent actions
-     */
-    confirmPermanentAction(action, itemName) {
-        return this.ask({
-            title: `Confirm ${action}`,
-            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"? This action cannot be undone.` : `Are you sure you want to ${action.toLowerCase()}? This action cannot be undone.`,
-            type: 'danger',
-            icon: 'warning',
-            confirmText: action,
-            cancelText: 'Cancel'
-        });
-    }
-    /**
-     * Quick confirmation for safe actions
-     */
-    confirmSafeAction(action, itemName) {
-        return this.ask({
-            title: `Confirm ${action}`,
-            message: itemName ? `Are you sure you want to ${action.toLowerCase()} "${itemName}"?` : `Are you sure you want to ${action.toLowerCase()}?`,
-            type: 'info',
-            icon: 'info',
-            confirmText: action,
-            cancelText: 'Cancel'
-        });
-    }
-    // Modern private methods with proper typing
-    addToQueue(request) {
-        this.confirmationQueue.update(queue => [...queue, request]);
-        console.log('🔔 Added request to queue:', request);
-        this.processQueue();
-    }
-    processQueue() {
-        console.log('🔔 Processing queue. Current request:', this.currentRequest(), 'Queue length:', this.confirmationQueue().length);
-        if (this.currentRequest() || this.confirmationQueue().length === 0) {
-            return;
-        }
-        const nextRequest = this.confirmationQueue()[0];
-        console.log('🔔 Setting current request:', nextRequest);
-        this.currentRequest.set(nextRequest);
-    }
-    // Modern public methods with proper typing
-    confirmCurrentRequest(data) {
-        const request = this.currentRequest();
-        if (!request)
-            return;
-        // Always resolve with true for confirmation, unless custom data is explicitly provided
-        const resolvedValue = data !== undefined ? data : true;
-        console.log('🔔 Confirming request with value:', resolvedValue);
-        request.resolve(resolvedValue);
-        this.removeCurrentRequest();
-    }
-    cancelCurrentRequest() {
-        const request = this.currentRequest();
-        if (!request)
-            return;
-        request.reject(new Error('User cancelled'));
-        this.removeCurrentRequest();
-    }
-    removeCurrentRequest() {
-        this.confirmationQueue.update(queue => queue.slice(1));
-        this.currentRequest.set(null);
-        // Process next request if any
-        setTimeout(() => this.processQueue(), 100);
-    }
-    generateId() {
-        return `confirmation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    // Modern private utility method with proper typing
-    getDefaultIcon(type) {
-        const iconMap = {
-            danger: 'error',
-            warning: 'warning',
-            info: 'info',
-            success: 'check_circle'
-        };
-        return iconMap[type];
-    }
-    // Modern public getters with proper typing
-    getCurrentRequest() {
-        return this.currentRequest;
-    }
-    getHasActiveConfirmation() {
-        return this.hasActiveConfirmation;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ConfirmationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class CideEleConfirmationModalComponent {
     // Modern Angular 20+ dependency injection
     confirmationService = inject(ConfirmationService);
@@ -11687,5 +11426,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbNavigationService, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideTextareaComponent, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, PAGE_PATH_RESOLVER, TooltipDirective };
+export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, PortalService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map