cloud-ide-element 1.1.5 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, ContentChildren, signal, DestroyRef, computed, effect, input, HostListener, Directive, ElementRef, viewChild } from '@angular/core';
|
|
4
|
+
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';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
7
7
|
import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
|
|
@@ -5385,24 +5385,23 @@ class CideEleBreadcrumbComponent {
|
|
|
5385
5385
|
// Service for auto-binding when inputs are not provided
|
|
5386
5386
|
// No service injection
|
|
5387
5387
|
cleanupEffect;
|
|
5388
|
-
|
|
5389
|
-
//
|
|
5390
|
-
|
|
5391
|
-
// Mirror external input items into local state
|
|
5392
|
-
const stopInputs = effect(() => {
|
|
5388
|
+
constructor() {
|
|
5389
|
+
// Mirror external input items into local state within injection context
|
|
5390
|
+
const ref = effect(() => {
|
|
5393
5391
|
const inItems = this.items();
|
|
5394
5392
|
if (inItems && inItems.length > 0) {
|
|
5395
5393
|
this.localItems.set([...inItems]);
|
|
5396
5394
|
this.processItems();
|
|
5397
5395
|
}
|
|
5398
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
5399
|
-
this.cleanupEffect =
|
|
5396
|
+
}, ...(ngDevMode ? [{ debugName: "ref" }] : []));
|
|
5397
|
+
this.cleanupEffect = { destroy: () => ref.destroy() };
|
|
5398
|
+
}
|
|
5399
|
+
ngOnInit() {
|
|
5400
|
+
// Initial calculation
|
|
5400
5401
|
this.processItems();
|
|
5401
5402
|
}
|
|
5402
5403
|
ngOnDestroy() {
|
|
5403
|
-
|
|
5404
|
-
this.cleanupEffect();
|
|
5405
|
-
}
|
|
5404
|
+
this.cleanupEffect?.destroy();
|
|
5406
5405
|
}
|
|
5407
5406
|
onDocumentClick(event) {
|
|
5408
5407
|
const target = event.target;
|
|
@@ -5585,12 +5584,12 @@ class CideEleBreadcrumbComponent {
|
|
|
5585
5584
|
this.localLoading.set(value);
|
|
5586
5585
|
}
|
|
5587
5586
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5588
|
-
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"] }] });
|
|
5587
|
+
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-p-1 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 });
|
|
5589
5588
|
}
|
|
5590
5589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
|
|
5591
5590
|
type: Component,
|
|
5592
|
-
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"] }]
|
|
5593
|
-
}], propDecorators: { itemClick: [{
|
|
5591
|
+
args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n \n <!-- Loading State -->\n @if (effectiveLoading()) {\n <div class=\"breadcrumb-loading\">\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n <span>Loading...</span>\n </div>\n }\n\n <!-- Main Breadcrumb Content -->\n @if (!effectiveLoading()) {\n <nav class=\"tw-flex tw-items-center tw-p-1 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"] }]
|
|
5592
|
+
}], ctorParameters: () => [], propDecorators: { itemClick: [{
|
|
5594
5593
|
type: Output
|
|
5595
5594
|
}], dropdownOptionClick: [{
|
|
5596
5595
|
type: Output
|