cloud-ide-element 1.1.185 → 1.1.187

package/fesm2022/cloud-ide-element.mjs

@@ -6443,11 +6443,11 @@ class CideEleBreadcrumbComponent {
         this.localLoading.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n  \n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n    <div class=\"breadcrumb-loading\">\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n      <span>Loading...</span>\n    </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1 tw-w-full\" 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 tw-w-full\">\n        \n        <!-- Home Icon (if enabled) -->\n        @if (config().showHomeIcon) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\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;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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0 tw-pr-1\">\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 tw-w-full\" 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 tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n  \n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n    <div class=\"breadcrumb-loading\">\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n      <span>Loading...</span>\n    </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1 tw-w-full\" 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 tw-w-full\">\n        \n        <!-- Home Icon (if enabled) -->\n        @if (config().showHomeIcon) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\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;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"] }]
+            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 tw-pr-1\">\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 tw-w-full\" 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 tw-w-full\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-xs\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-xs\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding: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"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], showHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHomeIcon", required: false }] }], homeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeIcon", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], showDropdownOnOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdownOnOverflow", required: false }] }], dropdownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOptions", required: false }] }], clickableItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableItems", required: false }] }], showTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltips", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingInput", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextId", required: false }] }], pageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCode", required: false }] }], itemClick: [{
                 type: Output
             }], dropdownOptionClick: [{
@@ -7921,7 +7921,7 @@ class CideEleButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleButtonComponent, deps: [{ token: CideElementsService }, { token: i2$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n  class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.7rem;padding:.0625rem .25rem;min-height:1.25rem;line-height:1.1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.125rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.125rem!important}:host.xs .tw-icon-container i{font-size:.8125rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.125rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.125rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n  class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.65rem;padding:0 .25rem;min-height:1.125rem;line-height:1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.075rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.075rem!important}:host.xs .tw-icon-container i{font-size:.75rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.075rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.075rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleButtonComponent, decorators: [{
             type: Component,
@@ -7956,7 +7956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.data-testid]': 'testId',
                         '[attr.title]': 'tooltip',
                         '[class]': 'customClass'
-                    }, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n  class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.7rem;padding:.0625rem .25rem;min-height:1.25rem;line-height:1.1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.125rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.125rem!important}:host.xs .tw-icon-container i{font-size:.8125rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.125rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.125rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"] }]
+                    }, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n  class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n  <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n    [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n  </cide-ele-spinner>\r\n  }\r\n\r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n  <span>{{ label }}</span>\r\n  } @else {\r\n  <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n  }\r\n\r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n  <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n    <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n  </span>\r\n  }\r\n\r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n  <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n  }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.65rem;padding:0 .25rem;min-height:1.125rem;line-height:1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.075rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.075rem!important}:host.xs .tw-icon-container i{font-size:.75rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.075rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.075rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: CideElementsService }, { type: i2$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], variant: [{