cloud-ide-element 1.1.1 → 1.1.2

package/fesm2022/cloud-ide-element.mjs

@@ -10932,6 +10932,613 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
     CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
 });
 
+class CideFormFieldErrorComponent {
+    control;
+    formGroup;
+    fieldName = '';
+    customMessages = {};
+    // Map to store field labels for efficient lookup
+    fieldLabelsMap = new Map();
+    // Inject the element service
+    elementService = inject(CideElementsService);
+    // Signal to hold form errors
+    formErrors = signal([], ...(ngDevMode ? [{ debugName: "formErrors" }] : []));
+    ngOnInit() {
+        if (this.isFormGroupMode()) {
+            this.loadFormErrors();
+            this.setupFormChangeListener();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['formGroup'] && this.isFormGroupMode()) {
+            this.loadFormErrors();
+            this.setupFormChangeListener();
+        }
+    }
+    setupFormChangeListener() {
+        if (this.formGroup) {
+            // Listen to form value changes to update errors
+            this.formGroup.valueChanges.subscribe(() => {
+                this.updateFormErrors();
+            });
+            // Listen to form status changes
+            this.formGroup.statusChanges.subscribe(() => {
+                this.updateFormErrors();
+            });
+        }
+    }
+    updateFormErrors() {
+        if (this.isFormGroupMode()) {
+            this.loadFormErrors();
+        }
+    }
+    loadFormErrors() {
+        this.getFormGroupErrors().then(errors => {
+            this.formErrors.set(errors);
+        });
+    }
+    isFormGroupMode() {
+        return !!this.formGroup && !this.control;
+    }
+    getFormGroupErrors() {
+        if (!this.formGroup)
+            return Promise.resolve([]);
+        return this.buildFieldLabelsMap().then(() => {
+            const errors = [];
+            console.log('🔍 Form Controls:', this.formGroup.controls);
+            console.log('🏷️ Field Labels Map:', this.fieldLabelsMap);
+            Object.keys(this.formGroup.controls).forEach(key => {
+                const control = this.formGroup.get(key);
+                console.log(`📝 Control ${key}:`, {
+                    invalid: control?.invalid,
+                    dirty: control?.dirty,
+                    touched: control?.touched,
+                    errors: control?.errors,
+                    value: control?.value
+                });
+                if (control && control.invalid) {
+                    const errorMessage = this.getControlErrorMessage(control, key);
+                    if (errorMessage) {
+                        errors.push(errorMessage);
+                    }
+                }
+            });
+            console.log('❌ Final Errors:', errors);
+            return errors;
+        });
+    }
+    buildFieldLabelsMap() {
+        if (this.fieldLabelsMap.size > 0)
+            return Promise.resolve(); // Already built
+        const promises = Object.keys(this.formGroup.controls).map(key => {
+            console.log('🔍 Element Data:', key);
+            return this.elementService?.getElementData({ sype_key: key }).then(elementData => {
+                if (elementData?.sype_label) {
+                    this.fieldLabelsMap.set(key, elementData.sype_label);
+                }
+            }).catch(error => {
+                console.log(`Could not get element data for field: ${key}`, error);
+            });
+        });
+        return Promise.all(promises).then(() => {
+            // All promises completed
+        });
+    }
+    getFormGroupErrorMessage() {
+        const errors = this.formErrors();
+        if (errors.length === 0)
+            return '';
+        if (errors.length === 1) {
+            return errors[0];
+        }
+        return `Please fix the following errors: ${errors.join(', ')}`;
+    }
+    getControlErrorMessage(control, fieldName) {
+        if (!control || !control.errors) {
+            return '';
+        }
+        const errors = control.errors;
+        // Get display name from map first, fallback to conversion
+        const displayName = this.fieldLabelsMap.get(fieldName) || this.convertToDisplayName(fieldName);
+        // Check for custom messages first
+        for (const errorType in errors) {
+            if (this.customMessages[errorType]) {
+                return this.customMessages[errorType];
+            }
+        }
+        // Default error messages
+        if (errors['required']) {
+            return `${displayName} is required`;
+        }
+        if (errors['email']) {
+            return `${displayName} must be a valid email address`;
+        }
+        if (errors['minlength']) {
+            return `${displayName} must be at least ${errors['minlength'].requiredLength} characters`;
+        }
+        if (errors['maxlength']) {
+            return `${displayName} must not exceed ${errors['maxlength'].requiredLength} characters`;
+        }
+        if (errors['pattern']) {
+            return `${displayName} format is invalid`;
+        }
+        // Fallback to first error
+        const firstError = Object.keys(errors)[0];
+        return `${displayName} is invalid`;
+    }
+    getErrorMessage() {
+        if (!this.control || !this.control.errors) {
+            return '';
+        }
+        const errors = this.control.errors;
+        // Check for custom messages first
+        for (const errorType in errors) {
+            if (this.customMessages[errorType]) {
+                return this.customMessages[errorType];
+            }
+        }
+        // Default error messages
+        if (errors['required']) {
+            return `${this.getFieldDisplayName()} is required`;
+        }
+        if (errors['email']) {
+            return `${this.getFieldDisplayName()} must be a valid email address`;
+        }
+        if (errors['minlength']) {
+            return `${this.getFieldDisplayName()} must be at least ${errors['minlength'].requiredLength} characters`;
+        }
+        if (errors['maxlength']) {
+            return `${this.getFieldDisplayName()} must not exceed ${errors['maxlength'].requiredLength} characters`;
+        }
+        if (errors['pattern']) {
+            return `${this.getFieldDisplayName()} format is invalid`;
+        }
+        // Fallback to first error
+        const firstError = Object.keys(errors)[0];
+        return `${this.getFieldDisplayName()} is invalid`;
+    }
+    getFieldDisplayName() {
+        if (this.fieldName) {
+            return this.fieldName;
+        }
+        // Convert field name to display name
+        if (this.control && this.control.parent) {
+            const fieldName = Object.keys(this.control.parent.controls).find(key => this.control.parent.get(key) === this.control);
+            if (fieldName) {
+                return this.convertToDisplayName(fieldName);
+            }
+        }
+        return 'This field';
+    }
+    convertToDisplayName(fieldName) {
+        // Convert snake_case to Title Case
+        return fieldName
+            .split('_')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideFormFieldErrorComponent, isStandalone: true, selector: "cide-form-field-error", inputs: { control: "control", formGroup: "formGroup", fieldName: "fieldName", customMessages: "customMessages" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (isFormGroupMode()) {
+      <!-- Form Group Error Display -->
+      @if (formErrors().length > 0) {
+        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
+          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
+          <span>{{ getFormGroupErrorMessage() }}</span>
+        </div>
+      }
+    } @else {
+      <!-- Individual Field Error Display -->
+      @if (control && control.invalid && (control.dirty || control.touched)) {
+        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
+          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
+          <span>{{ getErrorMessage() }}</span>
+        </div>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cide-form-field-error',
+                    standalone: true,
+                    template: `
+    @if (isFormGroupMode()) {
+      <!-- Form Group Error Display -->
+      @if (formErrors().length > 0) {
+        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
+          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
+          <span>{{ getFormGroupErrorMessage() }}</span>
+        </div>
+      }
+    } @else {
+      <!-- Individual Field Error Display -->
+      @if (control && control.invalid && (control.dirty || control.touched)) {
+        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
+          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
+          <span>{{ getErrorMessage() }}</span>
+        </div>
+      }
+    }
+  `,
+                    imports: [CideIconComponent]
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], fieldName: [{
+                type: Input
+            }], customMessages: [{
+                type: Input
+            }] } });
+
+class CideEleBreadcrumbComponent {
+    // Input properties
+    items = [];
+    style = 'modern';
+    separator = { type: 'chevron' };
+    showHomeIcon = true;
+    homeIcon = 'home';
+    maxItems = 5;
+    showDropdownOnOverflow = true;
+    dropdownOptions = [];
+    clickableItems = true;
+    showTooltips = true;
+    responsive = true;
+    compact = false;
+    animated = true;
+    loading = false;
+    disabled = false;
+    // Output events
+    itemClick = new EventEmitter();
+    dropdownOptionClick = new EventEmitter();
+    homeClick = new EventEmitter();
+    // Internal state
+    showDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showDropdown" }] : []));
+    isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
+    visibleItems = signal([], ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    hiddenItems = signal([], ...(ngDevMode ? [{ debugName: "hiddenItems" }] : []));
+    // Computed properties
+    showDropdownSignal = computed(() => this.showDropdown(), ...(ngDevMode ? [{ debugName: "showDropdownSignal" }] : []));
+    isOverflowingSignal = computed(() => this.isOverflowing(), ...(ngDevMode ? [{ debugName: "isOverflowingSignal" }] : []));
+    visibleItemsSignal = computed(() => this.visibleItems(), ...(ngDevMode ? [{ debugName: "visibleItemsSignal" }] : []));
+    hiddenItemsSignal = computed(() => this.hiddenItems(), ...(ngDevMode ? [{ debugName: "hiddenItemsSignal" }] : []));
+    // Configuration based on style
+    config = computed(() => this.getConfigForStyle(this.style), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    ngOnInit() {
+        this.processItems();
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!target.closest('.breadcrumb-dropdown-container')) {
+            this.showDropdown.set(false);
+        }
+    }
+    // Process items based on maxItems and overflow
+    processItems() {
+        if (this.items.length <= this.maxItems) {
+            this.visibleItems.set([...this.items]);
+            this.hiddenItems.set([]);
+            this.isOverflowing.set(false);
+        }
+        else {
+            const visibleCount = this.showDropdownOnOverflow ? this.maxItems - 1 : this.maxItems;
+            this.visibleItems.set(this.items.slice(0, visibleCount));
+            this.hiddenItems.set(this.items.slice(visibleCount));
+            this.isOverflowing.set(true);
+        }
+    }
+    // Get configuration based on style
+    getConfigForStyle(style) {
+        const configs = {
+            modern: {
+                style: 'modern',
+                separator: { type: 'chevron' },
+                showHomeIcon: true,
+                homeIcon: 'home',
+                maxItems: 5,
+                showDropdownOnOverflow: true,
+                dropdownOptions: [],
+                clickableItems: true,
+                showTooltips: true,
+                responsive: true,
+                compact: false,
+                animated: true
+            },
+            classic: {
+                style: 'classic',
+                separator: { type: 'slash' },
+                showHomeIcon: false,
+                homeIcon: 'home',
+                maxItems: 8,
+                showDropdownOnOverflow: false,
+                dropdownOptions: [],
+                clickableItems: true,
+                showTooltips: false,
+                responsive: false,
+                compact: true,
+                animated: false
+            },
+            minimal: {
+                style: 'minimal',
+                separator: { type: 'dot' },
+                showHomeIcon: false,
+                homeIcon: 'home',
+                maxItems: 3,
+                showDropdownOnOverflow: true,
+                dropdownOptions: [],
+                clickableItems: false,
+                showTooltips: true,
+                responsive: true,
+                compact: true,
+                animated: false
+            },
+            hierarchical: {
+                style: 'hierarchical',
+                separator: { type: 'chevron' },
+                showHomeIcon: true,
+                homeIcon: 'home',
+                maxItems: 4,
+                showDropdownOnOverflow: true,
+                dropdownOptions: [],
+                clickableItems: true,
+                showTooltips: false,
+                responsive: true,
+                compact: true,
+                animated: false
+            }
+        };
+        return configs[style];
+    }
+    // Event handlers
+    onItemClick(item) {
+        if (!item.disabled && this.clickableItems && !this.disabled) {
+            this.itemClick.emit(item);
+        }
+    }
+    onHomeClick() {
+        if (!this.disabled) {
+            this.homeClick.emit();
+        }
+    }
+    onDropdownToggle() {
+        if (!this.disabled) {
+            this.showDropdown.set(!this.showDropdown());
+        }
+    }
+    onDropdownOptionClick(option) {
+        if (!option.disabled && !this.disabled) {
+            this.dropdownOptionClick.emit(option);
+            this.showDropdown.set(false);
+        }
+    }
+    // Utility methods
+    getItemClasses(item, isLast = false) {
+        const classes = ['breadcrumb-item'];
+        if (this.config().compact)
+            classes.push('compact');
+        if (this.config().animated)
+            classes.push('animated');
+        if (item.disabled)
+            classes.push('disabled');
+        if (isLast)
+            classes.push('last');
+        if (this.clickableItems && !item.disabled)
+            classes.push('clickable');
+        return classes.join(' ');
+    }
+    getContainerClasses() {
+        const classes = ['breadcrumb-container'];
+        classes.push(`style-${this.style}`);
+        if (this.config().compact)
+            classes.push('compact');
+        if (this.config().responsive)
+            classes.push('responsive');
+        if (this.config().animated)
+            classes.push('animated');
+        if (this.loading)
+            classes.push('loading');
+        if (this.disabled)
+            classes.push('disabled');
+        return classes.join(' ');
+    }
+    getSeparatorIcon() {
+        const separatorMap = {
+            'chevron': 'chevron_right',
+            'slash': 'keyboard_arrow_right',
+            'arrow': 'arrow_forward',
+            'dot': 'fiber_manual_record'
+        };
+        return separatorMap[this.separator.type] || 'chevron_right';
+    }
+    getTooltipText(item) {
+        if (!this.showTooltips)
+            return '';
+        let tooltip = item.label;
+        if (item.type) {
+            tooltip += ` (${item.type})`;
+        }
+        if (item.url) {
+            tooltip += ` - ${item.url}`;
+        }
+        return tooltip;
+    }
+    // Public methods for external control
+    toggleDropdown() {
+        this.onDropdownToggle();
+    }
+    closeDropdown() {
+        this.showDropdown.set(false);
+    }
+    updateItems(newItems) {
+        this.items = newItems;
+        this.processItems();
+    }
+    addItem(item) {
+        this.items.push(item);
+        this.processItems();
+    }
+    removeItem(itemId) {
+        this.items = this.items.filter(item => item.id !== itemId);
+        this.processItems();
+    }
+    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: "items", style: "style", separator: "separator", showHomeIcon: "showHomeIcon", homeIcon: "homeIcon", maxItems: "maxItems", showDropdownOnOverflow: "showDropdownOnOverflow", dropdownOptions: "dropdownOptions", clickableItems: "clickableItems", showTooltips: "showTooltips", responsive: "responsive", compact: "compact", animated: "animated", loading: "loading", disabled: "disabled" }, 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 (loading) {\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 (!loading) {\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"] }] });
+}
+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 (loading) {\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 (!loading) {\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: { items: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], showHomeIcon: [{
+                type: Input
+            }], homeIcon: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], showDropdownOnOverflow: [{
+                type: Input
+            }], dropdownOptions: [{
+                type: Input
+            }], clickableItems: [{
+                type: Input
+            }], showTooltips: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], animated: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], dropdownOptionClick: [{
+                type: Output
+            }], homeClick: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// Breadcrumb Component Interfaces and Types
+// Predefined configurations for each style
+const BREADCRUMB_STYLES = {
+    modern: {
+        style: 'modern',
+        separator: { type: 'chevron' },
+        showHomeIcon: true,
+        homeIcon: 'home',
+        maxItems: 5,
+        showDropdownOnOverflow: true,
+        dropdownOptions: [],
+        clickableItems: true,
+        showTooltips: true,
+        responsive: true,
+        compact: false,
+        animated: true
+    },
+    classic: {
+        style: 'classic',
+        separator: { type: 'slash' },
+        showHomeIcon: false,
+        homeIcon: 'home',
+        maxItems: 8,
+        showDropdownOnOverflow: false,
+        dropdownOptions: [],
+        clickableItems: true,
+        showTooltips: false,
+        responsive: false,
+        compact: true,
+        animated: false
+    },
+    minimal: {
+        style: 'minimal',
+        separator: { type: 'dot' },
+        showHomeIcon: false,
+        homeIcon: 'home',
+        maxItems: 3,
+        showDropdownOnOverflow: true,
+        dropdownOptions: [],
+        clickableItems: false,
+        showTooltips: true,
+        responsive: true,
+        compact: true,
+        animated: false
+    },
+    hierarchical: {
+        style: 'hierarchical',
+        separator: { type: 'chevron' },
+        showHomeIcon: true,
+        homeIcon: 'home',
+        maxItems: 4,
+        showDropdownOnOverflow: true,
+        dropdownOptions: [],
+        clickableItems: true,
+        showTooltips: true,
+        responsive: true,
+        compact: false,
+        animated: true
+    }
+};
+// Utility functions
+class BreadcrumbUtils {
+    /**
+     * Create a breadcrumb item
+     */
+    static createItem(id, label, options = {}) {
+        return {
+            id,
+            label,
+            ...options
+        };
+    }
+    /**
+     * Create a dropdown option
+     */
+    static createDropdownOption(id, label, options = {}) {
+        return {
+            id,
+            label,
+            ...options
+        };
+    }
+    /**
+     * Create a separator
+     */
+    static createSeparator(type, options = {}) {
+        return {
+            type,
+            ...options
+        };
+    }
+    /**
+     * Get default configuration for a style
+     */
+    static getDefaultConfig(style) {
+        return { ...BREADCRUMB_STYLES[style] };
+    }
+    /**
+     * Merge configurations
+     */
+    static mergeConfig(base, override) {
+        return { ...base, ...override };
+    }
+}
+
 /*
  * Public API Surface of cloud-ide-element
  * Here we can add what need to be exported from library
@@ -10941,5 +11548,5 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
+export { BREADCRUMB_STYLES, BreadcrumbUtils, 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, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map