cloud-ide-element 1.1.131 → 1.1.133
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.
|
@@ -6303,11 +6303,11 @@ class CideEleBreadcrumbComponent {
|
|
|
6303
6303
|
this.localLoading.set(value);
|
|
6304
6304
|
}
|
|
6305
6305
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n \r\n <!-- Loading State -->\r\n @if (effectiveLoading()) {\r\n <div class=\"breadcrumb-loading\">\r\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n <span>Loading...</span>\r\n </div>\r\n }\r\n\r\n <!-- Main Breadcrumb Content -->\r\n @if (!effectiveLoading()) {\r\n <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\r\n \r\n <!-- Home Icon (if enabled) -->\r\n @if (config().showHomeIcon) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n (click)=\"onHomeClick()\"\r\n [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n {{ config().homeIcon }}\r\n </cide-ele-icon>\r\n </li>\r\n \r\n <!-- Separator after home -->\r\n @if (visibleItemsSignal().length > 0) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Visible Items -->\r\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n [class.tw-text-gray-400]=\"isLast\"\r\n (click)=\"onItemClick(item)\"\r\n [title]=\"getTooltipText(item)\"\r\n [attr.aria-current]=\"isLast ? 'page' : null\">\r\n \r\n <!-- Item Icon (if provided) -->\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n {{ item.icon }}\r\n </cide-ele-icon>\r\n }\r\n \r\n <!-- Item Label -->\r\n <span class=\"tw-font-medium tw-text-xs\">\r\n {{ item.label }}\r\n </span>\r\n \r\n <!-- Item Type Badge (for hierarchical style) -->\r\n @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n {{ item.type }}\r\n </span>\r\n }\r\n </li>\r\n\r\n <!-- Separator (except for last item) -->\r\n @if (!isLast || isOverflowingSignal()) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Overflow Dropdown -->\r\n @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n <li class=\"breadcrumb-item overflow-item\">\r\n <div class=\"breadcrumb-dropdown-container\">\r\n <button type=\"button\" \r\n class=\"overflow-button\"\r\n (click)=\"onDropdownToggle()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"showDropdownSignal()\"\r\n aria-haspopup=\"true\"\r\n [title]=\"showTooltips() ? 'More items' : ''\">\r\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n {{ hiddenItemsSignal().length }}+ more\r\n </span>\r\n </button>\r\n \r\n <!-- Dropdown Menu -->\r\n @if (showDropdownSignal()) {\r\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n <div class=\"dropdown-header\">\r\n <span>Hidden Items</span>\r\n </div>\r\n \r\n <!-- Hidden Items -->\r\n @for (item of hiddenItemsSignal(); track item.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-item\"\r\n (click)=\"onItemClick(item)\"\r\n [disabled]=\"item.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n </button>\r\n }\r\n \r\n <!-- Custom Dropdown Options -->\r\n @if (dropdownOptions().length > 0) {\r\n <div class=\"dropdown-divider\"></div>\r\n @for (option of dropdownOptions(); track option.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-option\"\r\n (click)=\"onDropdownOptionClick(option)\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (option.icon) {\r\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ol>\r\n </nav>\r\n }\r\n\r\n</div>\r\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 });
|
|
6306
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n \r\n <!-- Loading State -->\r\n @if (effectiveLoading()) {\r\n <div class=\"breadcrumb-loading\">\r\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n <span>Loading...</span>\r\n </div>\r\n }\r\n\r\n <!-- Main Breadcrumb Content -->\r\n @if (!effectiveLoading()) {\r\n <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1 tw-w-full\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap tw-w-full\">\r\n \r\n <!-- Home Icon (if enabled) -->\r\n @if (config().showHomeIcon) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n (click)=\"onHomeClick()\"\r\n [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n {{ config().homeIcon }}\r\n </cide-ele-icon>\r\n </li>\r\n \r\n <!-- Separator after home -->\r\n @if (visibleItemsSignal().length > 0) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Visible Items -->\r\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n [class.tw-text-gray-400]=\"isLast\"\r\n (click)=\"onItemClick(item)\"\r\n [title]=\"getTooltipText(item)\"\r\n [attr.aria-current]=\"isLast ? 'page' : null\">\r\n \r\n <!-- Item Icon (if provided) -->\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n {{ item.icon }}\r\n </cide-ele-icon>\r\n }\r\n \r\n <!-- Item Label -->\r\n <span class=\"tw-font-medium tw-text-xs\">\r\n {{ item.label }}\r\n </span>\r\n \r\n <!-- Item Type Badge (for hierarchical style) -->\r\n @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n {{ item.type }}\r\n </span>\r\n }\r\n </li>\r\n\r\n <!-- Separator (except for last item) -->\r\n @if (!isLast || isOverflowingSignal()) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Overflow Dropdown -->\r\n @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n <li class=\"breadcrumb-item overflow-item\">\r\n <div class=\"breadcrumb-dropdown-container\">\r\n <button type=\"button\" \r\n class=\"overflow-button\"\r\n (click)=\"onDropdownToggle()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"showDropdownSignal()\"\r\n aria-haspopup=\"true\"\r\n [title]=\"showTooltips() ? 'More items' : ''\">\r\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n {{ hiddenItemsSignal().length }}+ more\r\n </span>\r\n </button>\r\n \r\n <!-- Dropdown Menu -->\r\n @if (showDropdownSignal()) {\r\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n <div class=\"dropdown-header\">\r\n <span>Hidden Items</span>\r\n </div>\r\n \r\n <!-- Hidden Items -->\r\n @for (item of hiddenItemsSignal(); track item.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-item\"\r\n (click)=\"onItemClick(item)\"\r\n [disabled]=\"item.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n </button>\r\n }\r\n \r\n <!-- Custom Dropdown Options -->\r\n @if (dropdownOptions().length > 0) {\r\n <div class=\"dropdown-divider\"></div>\r\n @for (option of dropdownOptions(); track option.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-option\"\r\n (click)=\"onDropdownOptionClick(option)\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (option.icon) {\r\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ol>\r\n </nav>\r\n }\r\n\r\n</div>\r\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;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap: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 });
|
|
6307
6307
|
}
|
|
6308
6308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
|
|
6309
6309
|
type: Component,
|
|
6310
|
-
args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n \r\n <!-- Loading State -->\r\n @if (effectiveLoading()) {\r\n <div class=\"breadcrumb-loading\">\r\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n <span>Loading...</span>\r\n </div>\r\n }\r\n\r\n <!-- Main Breadcrumb Content -->\r\n @if (!effectiveLoading()) {\r\n <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\r\n \r\n <!-- Home Icon (if enabled) -->\r\n @if (config().showHomeIcon) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n (click)=\"onHomeClick()\"\r\n [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n {{ config().homeIcon }}\r\n </cide-ele-icon>\r\n </li>\r\n \r\n <!-- Separator after home -->\r\n @if (visibleItemsSignal().length > 0) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Visible Items -->\r\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n [class.tw-text-gray-400]=\"isLast\"\r\n (click)=\"onItemClick(item)\"\r\n [title]=\"getTooltipText(item)\"\r\n [attr.aria-current]=\"isLast ? 'page' : null\">\r\n \r\n <!-- Item Icon (if provided) -->\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n {{ item.icon }}\r\n </cide-ele-icon>\r\n }\r\n \r\n <!-- Item Label -->\r\n <span class=\"tw-font-medium tw-text-xs\">\r\n {{ item.label }}\r\n </span>\r\n \r\n <!-- Item Type Badge (for hierarchical style) -->\r\n @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n {{ item.type }}\r\n </span>\r\n }\r\n </li>\r\n\r\n <!-- Separator (except for last item) -->\r\n @if (!isLast || isOverflowingSignal()) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Overflow Dropdown -->\r\n @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n <li class=\"breadcrumb-item overflow-item\">\r\n <div class=\"breadcrumb-dropdown-container\">\r\n <button type=\"button\" \r\n class=\"overflow-button\"\r\n (click)=\"onDropdownToggle()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"showDropdownSignal()\"\r\n aria-haspopup=\"true\"\r\n [title]=\"showTooltips() ? 'More items' : ''\">\r\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n {{ hiddenItemsSignal().length }}+ more\r\n </span>\r\n </button>\r\n \r\n <!-- Dropdown Menu -->\r\n @if (showDropdownSignal()) {\r\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n <div class=\"dropdown-header\">\r\n <span>Hidden Items</span>\r\n </div>\r\n \r\n <!-- Hidden Items -->\r\n @for (item of hiddenItemsSignal(); track item.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-item\"\r\n (click)=\"onItemClick(item)\"\r\n [disabled]=\"item.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n </button>\r\n }\r\n \r\n <!-- Custom Dropdown Options -->\r\n @if (dropdownOptions().length > 0) {\r\n <div class=\"dropdown-divider\"></div>\r\n @for (option of dropdownOptions(); track option.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-option\"\r\n (click)=\"onDropdownOptionClick(option)\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (option.icon) {\r\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ol>\r\n </nav>\r\n }\r\n\r\n</div>\r\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"] }]
|
|
6310
|
+
args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n \r\n <!-- Loading State -->\r\n @if (effectiveLoading()) {\r\n <div class=\"breadcrumb-loading\">\r\n <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n <span>Loading...</span>\r\n </div>\r\n }\r\n\r\n <!-- Main Breadcrumb Content -->\r\n @if (!effectiveLoading()) {\r\n <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1 tw-w-full\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap tw-w-full\">\r\n \r\n <!-- Home Icon (if enabled) -->\r\n @if (config().showHomeIcon) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n (click)=\"onHomeClick()\"\r\n [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n {{ config().homeIcon }}\r\n </cide-ele-icon>\r\n </li>\r\n \r\n <!-- Separator after home -->\r\n @if (visibleItemsSignal().length > 0) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Visible Items -->\r\n @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n [class.tw-text-gray-400]=\"isLast\"\r\n (click)=\"onItemClick(item)\"\r\n [title]=\"getTooltipText(item)\"\r\n [attr.aria-current]=\"isLast ? 'page' : null\">\r\n \r\n <!-- Item Icon (if provided) -->\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n {{ item.icon }}\r\n </cide-ele-icon>\r\n }\r\n \r\n <!-- Item Label -->\r\n <span class=\"tw-font-medium tw-text-xs\">\r\n {{ item.label }}\r\n </span>\r\n \r\n <!-- Item Type Badge (for hierarchical style) -->\r\n @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n {{ item.type }}\r\n </span>\r\n }\r\n </li>\r\n\r\n <!-- Separator (except for last item) -->\r\n @if (!isLast || isOverflowingSignal()) {\r\n <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n @if (separator().type === 'custom' && separator().text) {\r\n <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n } @else {\r\n <cide-ele-icon class=\"tw-text-xs\">\r\n {{ getSeparatorIcon() }}\r\n </cide-ele-icon>\r\n }\r\n </li>\r\n }\r\n }\r\n\r\n <!-- Overflow Dropdown -->\r\n @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n <li class=\"breadcrumb-item overflow-item\">\r\n <div class=\"breadcrumb-dropdown-container\">\r\n <button type=\"button\" \r\n class=\"overflow-button\"\r\n (click)=\"onDropdownToggle()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-expanded]=\"showDropdownSignal()\"\r\n aria-haspopup=\"true\"\r\n [title]=\"showTooltips() ? 'More items' : ''\">\r\n <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n {{ hiddenItemsSignal().length }}+ more\r\n </span>\r\n </button>\r\n \r\n <!-- Dropdown Menu -->\r\n @if (showDropdownSignal()) {\r\n <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n <div class=\"dropdown-header\">\r\n <span>Hidden Items</span>\r\n </div>\r\n \r\n <!-- Hidden Items -->\r\n @for (item of hiddenItemsSignal(); track item.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-item\"\r\n (click)=\"onItemClick(item)\"\r\n [disabled]=\"item.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (item.icon) {\r\n <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n </button>\r\n }\r\n \r\n <!-- Custom Dropdown Options -->\r\n @if (dropdownOptions().length > 0) {\r\n <div class=\"dropdown-divider\"></div>\r\n @for (option of dropdownOptions(); track option.id) {\r\n <button type=\"button\" \r\n class=\"dropdown-option\"\r\n (click)=\"onDropdownOptionClick(option)\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n role=\"menuitem\">\r\n @if (option.icon) {\r\n <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n }\r\n <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </li>\r\n }\r\n </ol>\r\n </nav>\r\n }\r\n\r\n</div>\r\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;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap: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"] }]
|
|
6311
6311
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], showHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHomeIcon", required: false }] }], homeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeIcon", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], showDropdownOnOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdownOnOverflow", required: false }] }], dropdownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOptions", required: false }] }], clickableItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableItems", required: false }] }], showTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltips", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingInput", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextId", required: false }] }], pageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCode", required: false }] }], itemClick: [{
|
|
6312
6312
|
type: Output
|
|
6313
6313
|
}], dropdownOptionClick: [{
|
|
@@ -14667,13 +14667,11 @@ class CideEleJsonEditorComponent {
|
|
|
14667
14667
|
label;
|
|
14668
14668
|
helperText;
|
|
14669
14669
|
required = false;
|
|
14670
|
-
|
|
14671
|
-
|
|
14672
|
-
}
|
|
14673
|
-
|
|
14674
|
-
|
|
14675
|
-
}
|
|
14676
|
-
_disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : []));
|
|
14670
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14671
|
+
// Internal writable signal for ControlValueAccessor setDisabledState
|
|
14672
|
+
_disabledInternal = signal(false, ...(ngDevMode ? [{ debugName: "_disabledInternal" }] : []));
|
|
14673
|
+
// Computed signal that combines input and internal state (if either is true, component is disabled)
|
|
14674
|
+
disabledInput = computed(() => this._disabledInternal() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledInput" }] : []));
|
|
14677
14675
|
showCharacterCount = false;
|
|
14678
14676
|
config = {};
|
|
14679
14677
|
configSignal = signal({}, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
|
|
@@ -14700,7 +14698,7 @@ class CideEleJsonEditorComponent {
|
|
|
14700
14698
|
}, ...(ngDevMode ? [{ debugName: "lineNumbers" }] : []));
|
|
14701
14699
|
containerClass = computed(() => {
|
|
14702
14700
|
const classes = ['tw-w-full'];
|
|
14703
|
-
if (this.
|
|
14701
|
+
if (this.disabledInput()) {
|
|
14704
14702
|
classes.push('tw-opacity-50');
|
|
14705
14703
|
}
|
|
14706
14704
|
return classes.join(' ');
|
|
@@ -14919,12 +14917,12 @@ class CideEleJsonEditorComponent {
|
|
|
14919
14917
|
this.onTouched = fn;
|
|
14920
14918
|
}
|
|
14921
14919
|
setDisabledState(isDisabled) {
|
|
14922
|
-
this.
|
|
14920
|
+
this._disabledInternal.set(isDisabled);
|
|
14923
14921
|
}
|
|
14924
14922
|
onChange = () => { };
|
|
14925
14923
|
onTouched = () => { };
|
|
14926
14924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14927
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleJsonEditorComponent, isStandalone: true, selector: "cide-ele-json-editor", inputs: { label: "label", helperText: "helperText", required: "required", disabled: "disabled", showCharacterCount: "showCharacterCount", config: "config" }, outputs: { valueChange: "valueChange", objectChange: "objectChange", errorsChange: "errorsChange", validChange: "validChange" }, providers: [
|
|
14925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleJsonEditorComponent, isStandalone: true, selector: "cide-ele-json-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", objectChange: "objectChange", errorsChange: "errorsChange", validChange: "validChange" }, providers: [
|
|
14928
14926
|
{
|
|
14929
14927
|
provide: NG_VALUE_ACCESSOR,
|
|
14930
14928
|
useExisting: forwardRef(() => CideEleJsonEditorComponent),
|
|
@@ -14953,8 +14951,8 @@ class CideEleJsonEditorComponent {
|
|
|
14953
14951
|
[class.tw-focus-within:tw-border-blue-500]="!hasErrors()"
|
|
14954
14952
|
[class.tw-focus-within:tw-ring-1]="!hasErrors()"
|
|
14955
14953
|
[class.tw-focus-within:tw-ring-blue-500]="!hasErrors()"
|
|
14956
|
-
[class.tw-opacity-50]="
|
|
14957
|
-
[class.tw-cursor-not-allowed]="
|
|
14954
|
+
[class.tw-opacity-50]="disabledInput()"
|
|
14955
|
+
[class.tw-cursor-not-allowed]="disabledInput()">
|
|
14958
14956
|
|
|
14959
14957
|
<!-- Line Numbers -->
|
|
14960
14958
|
@if (configSignal().showLineNumbers) {
|
|
@@ -14984,8 +14982,8 @@ class CideEleJsonEditorComponent {
|
|
|
14984
14982
|
(input)="onInput($event)"
|
|
14985
14983
|
(blur)="onBlur()"
|
|
14986
14984
|
[placeholder]="configSignal().placeholder || 'Enter JSON configuration...'"
|
|
14987
|
-
[readonly]="configSignal().readOnly ||
|
|
14988
|
-
[disabled]="
|
|
14985
|
+
[readonly]="configSignal().readOnly || disabledInput()"
|
|
14986
|
+
[disabled]="disabledInput()"
|
|
14989
14987
|
class="tw-w-full tw-p-3 tw-text-sm tw-font-mono tw-leading-relaxed tw-resize-none tw-outline-none tw-bg-transparent"
|
|
14990
14988
|
[class.tw-pl-12]="configSignal().showLineNumbers"
|
|
14991
14989
|
[class.tw-text-gray-900]="configSignal().theme === 'light'"
|
|
@@ -14998,7 +14996,7 @@ class CideEleJsonEditorComponent {
|
|
|
14998
14996
|
</textarea>
|
|
14999
14997
|
|
|
15000
14998
|
<!-- Format Button -->
|
|
15001
|
-
@if (!configSignal().readOnly && !
|
|
14999
|
+
@if (!configSignal().readOnly && !disabledInput()) {
|
|
15002
15000
|
<button
|
|
15003
15001
|
type="button"
|
|
15004
15002
|
(click)="formatJson()"
|
|
@@ -15068,8 +15066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15068
15066
|
[class.tw-focus-within:tw-border-blue-500]="!hasErrors()"
|
|
15069
15067
|
[class.tw-focus-within:tw-ring-1]="!hasErrors()"
|
|
15070
15068
|
[class.tw-focus-within:tw-ring-blue-500]="!hasErrors()"
|
|
15071
|
-
[class.tw-opacity-50]="
|
|
15072
|
-
[class.tw-cursor-not-allowed]="
|
|
15069
|
+
[class.tw-opacity-50]="disabledInput()"
|
|
15070
|
+
[class.tw-cursor-not-allowed]="disabledInput()">
|
|
15073
15071
|
|
|
15074
15072
|
<!-- Line Numbers -->
|
|
15075
15073
|
@if (configSignal().showLineNumbers) {
|
|
@@ -15099,8 +15097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15099
15097
|
(input)="onInput($event)"
|
|
15100
15098
|
(blur)="onBlur()"
|
|
15101
15099
|
[placeholder]="configSignal().placeholder || 'Enter JSON configuration...'"
|
|
15102
|
-
[readonly]="configSignal().readOnly ||
|
|
15103
|
-
[disabled]="
|
|
15100
|
+
[readonly]="configSignal().readOnly || disabledInput()"
|
|
15101
|
+
[disabled]="disabledInput()"
|
|
15104
15102
|
class="tw-w-full tw-p-3 tw-text-sm tw-font-mono tw-leading-relaxed tw-resize-none tw-outline-none tw-bg-transparent"
|
|
15105
15103
|
[class.tw-pl-12]="configSignal().showLineNumbers"
|
|
15106
15104
|
[class.tw-text-gray-900]="configSignal().theme === 'light'"
|
|
@@ -15113,7 +15111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15113
15111
|
</textarea>
|
|
15114
15112
|
|
|
15115
15113
|
<!-- Format Button -->
|
|
15116
|
-
@if (!configSignal().readOnly && !
|
|
15114
|
+
@if (!configSignal().readOnly && !disabledInput()) {
|
|
15117
15115
|
<button
|
|
15118
15116
|
type="button"
|
|
15119
15117
|
(click)="formatJson()"
|
|
@@ -15169,9 +15167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15169
15167
|
type: Input
|
|
15170
15168
|
}], required: [{
|
|
15171
15169
|
type: Input
|
|
15172
|
-
}], disabled: [{
|
|
15173
|
-
type: Input
|
|
15174
|
-
}], showCharacterCount: [{
|
|
15170
|
+
}], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCharacterCount: [{
|
|
15175
15171
|
type: Input
|
|
15176
15172
|
}], config: [{
|
|
15177
15173
|
type: Input
|