codexly-ui 0.10.107 → 0.10.109

package/fesm2022/codexly-ui.mjs

@@ -611,6 +611,7 @@ class ClxThemeService {
         return {
             headerColor: t?.headerColor ?? this._config().primaryColor,
             headerTextColor: t?.headerTextColor ?? t?.headerColor ?? this._config().primaryColor,
+            borderColor: t?.borderColor ?? this._config().primaryColor,
             shadow: t?.shadow ?? 'none',
             bordered: t?.bordered ?? true,
         };
@@ -633,6 +634,12 @@ class ClxThemeService {
             ? this._config().primaryButtonTextColor
             : this._config().secondaryButtonTextColor;
     }
+    /** Resolved border color for ClxCardComponent (outlined/elevated variants) — falls back to
+     *  primaryColor when unset. Per-instance `[color]` input on clx-card still takes precedence. */
+    cardBorderColor = computed(() => this._config().cardBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardBorderColor" }] : /* istanbul ignore next */ []));
+    /** Resolved divider/border color for ClxListComponent — falls back to primaryColor when unset.
+     *  Per-instance `[color]` input on clx-list still takes precedence. */
+    listBorderColor = computed(() => this._config().listBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "listBorderColor" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -777,6 +784,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+// ── Context ───────────────────────────────────────────────────────────────────
+/** Provided by clx-table-actions so nested clx-button instances default to the theme's
+ *  secondaryColor instead of primaryColor when they don't pass their own [color] — any button
+ *  that DOES pass [color] explicitly still overrides this, same as CLX_CARD_DISABLED_CONTEXT. */
+const CLX_TABLE_ACTIONS_CONTEXT = new InjectionToken('CLX_TABLE_ACTIONS_CONTEXT');
 const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
 const BUTTON_SIZE_MAP = {
     xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
@@ -947,7 +959,8 @@ class ClxButtonComponent {
     textColor = input(undefined, ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     shape = input(undefined, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _tableActionsColor = inject(CLX_TABLE_ACTIONS_CONTEXT, { optional: true });
+    _color = computed(() => this.color() ?? this._tableActionsColor?.() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _shape = computed(() => this.shape() ?? this._themeSvc.config().defaultShape, ...(ngDevMode ? [{ debugName: "_shape" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -999,8 +1012,12 @@ class ClxButtonComponent {
         if (!textOverride)
             return cls;
         // Strip any text-* class the variant branch above already added, then apply the override —
-        // avoids two text-* classes of equal CSS specificity racing on source order.
-        return cls.replace(/(?:^|\s)text-\S+/g, '').trim() + ` ${resolveColor(textOverride).text}`;
+        // avoids two text-* classes of equal CSS specificity racing on source order. Uses the literal
+        // text-{color}-{shade} class (not resolveColor().text, which ignores the chosen color and
+        // auto-picks white/dark-800 for contrast against a background — the override IS the user's
+        // explicit color choice, not a background to contrast against).
+        const { color: oc, shade: os } = parseColorInput(textOverride);
+        return cls.replace(/(?:^|\s)text-\S+/g, '').trim() + ` text-${oc}-${os}`;
     }, ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
     /** Auto-applies primaryButtonTextColor/secondaryButtonTextColor from the theme when this
      *  button's own resolved color IS the theme's primaryColor/secondaryColor and no explicit
@@ -1504,7 +1521,7 @@ class ClxCardComponent {
     headerTitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
     /** Optional secondary line under headerTitle. */
     headerSubtitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.cardBorderColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _titleClass = computed(() => `text-sm font-[${this._themeSvc.cardTitleStyle().weight}] text-clx-text-label leading-tight truncate`, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _headerActionsSlot = contentChild(ClxCardHeaderActionsDirective, ...(ngDevMode ? [{ debugName: "_headerActionsSlot" }] : /* istanbul ignore next */ []));
@@ -1821,7 +1838,7 @@ const LIST_SIZE_MAP = {
 class ClxListComponent {
     _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.listBorderColor(), ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     variant = input('flat', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     numbered = input(false, ...(ngDevMode ? [{ debugName: "numbered" }] : /* istanbul ignore next */ []));
@@ -10884,10 +10901,10 @@ class ClxProfileComponent {
         const t = resolveColor(this._color());
         return `focus-visible:${t.ringBase}`;
     }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
-    _headerBgClass = computed(() => {
+    _avatarRingClass = computed(() => {
         const t = resolveColor(this._color());
-        return `${t.bgSubtle}`;
-    }, ...(ngDevMode ? [{ debugName: "_headerBgClass" }] : /* istanbul ignore next */ []));
+        return `border-2 ${t.borderLight}`;
+    }, ...(ngDevMode ? [{ debugName: "_avatarRingClass" }] : /* istanbul ignore next */ []));
     // ── Methods ──────────────────────────────────────────────────────────────────
     _toggle() { this._isOpen.update(v => !v); }
     _close() { this._isOpen.set(false); }
@@ -10931,60 +10948,55 @@ class ClxProfileComponent {
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="w-64 bg-clx-surface rounded-2xl shadow-xl border border-clx-border overflow-hidden mt-2">
+      <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
 
-        <!-- Header: avatar + name + role -->
-        <div class="px-4 py-4 flex items-center gap-3" [class]="_headerBgClass()">
-          <clx-avatar
-            [initials]="_initials()"
-            [src]="avatarSrc()"
-            [color]="_color()"
-            size="md" />
+        <!-- Header: avatar ring + name + role badge, subtle surface (not a solid color block) -->
+        <div class="px-4 pt-5 pb-4 flex items-center gap-3 bg-clx-surface-2">
+          <div class="rounded-full p-0.5" [class]="_avatarRingClass()">
+            <clx-avatar
+              [initials]="_initials()"
+              [src]="avatarSrc()"
+              [color]="_color()"
+              size="md" />
+          </div>
           <div class="flex-1 min-w-0">
             <p class="text-sm font-semibold text-clx-text-label truncate">{{ fullName() }}</p>
             <p class="text-xs text-clx-text-muted truncate">{{ username() }}</p>
             @if (role()) {
-              <span clx-badge [color]="_color()" variant="light" size="sm" class="mt-1">{{ role() }}</span>
+              <span clx-badge [color]="_color()" variant="light" size="xs" class="mt-1.5">{{ role() }}</span>
             }
           </div>
         </div>
 
-        <!-- Divider -->
-        <div class="border-t border-clx-border-soft"></div>
-
         <!-- Menu items -->
         @if (menuItems().length) {
-          <div class="p-1.5">
+          <div class="py-1.5">
             @for (item of menuItems(); track item.action) {
-              <button clx-button type="button" variant="ghost" [color]="_color()" [block]="true" [icon]="item.icon"
-                class="justify-start rounded-xl!"
-                (click)="_onAction(item.action)">
-                {{ item.label }}
-              </button>
+              <clx-menu-item [label]="item.label" [icon]="item.icon"
+                (itemClick)="_onAction(item.action)" />
             }
           </div>
-          <div class="border-t border-clx-border-soft mx-3"></div>
         }
 
-        <!-- Sign out -->
-        <div class="p-1.5">
-          <button clx-button type="button" variant="ghost" color="red" [block]="true" icon="logout"
-            class="justify-start rounded-xl!"
-            (click)="_onSignOut()">
-            {{ signOutLabel() }}
-          </button>
+        <!-- Divider -->
+        <div class="border-t border-clx-border-soft"></div>
+
+        <!-- Sign out — always red regardless of theme (destructive action convention) -->
+        <div class="py-1.5">
+          <clx-menu-item [label]="signOutLabel()" icon="logout" [style]="{ color: 'red' }"
+            (itemClick)="_onSignOut()" />
         </div>
 
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxAvatarComponent, selector: "clx-avatar", inputs: ["src", "initials", "iconName", "color", "size", "shape", "alt"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxAvatarComponent, selector: "clx-avatar", inputs: ["src", "initials", "iconName", "color", "size", "shape", "alt"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxMenuItemComponent, selector: "clx-menu-item", inputs: ["label", "icon", "active", "style", "nested", "collapsed", "routerLink", "routerLinkActiveOptions"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProfileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-profile',
                     standalone: true,
-                    imports: [OverlayModule, ClxAvatarComponent, ClxButtonComponent, ClxBadgeComponent],
+                    imports: [OverlayModule, ClxAvatarComponent, ClxBadgeComponent, ClxMenuItemComponent],
                     template: `
     <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
     <button
@@ -11012,48 +11024,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="w-64 bg-clx-surface rounded-2xl shadow-xl border border-clx-border overflow-hidden mt-2">
+      <div class="w-72 bg-clx-surface rounded-2xl shadow-xl border border-clx-border-soft overflow-hidden mt-2">
 
-        <!-- Header: avatar + name + role -->
-        <div class="px-4 py-4 flex items-center gap-3" [class]="_headerBgClass()">
-          <clx-avatar
-            [initials]="_initials()"
-            [src]="avatarSrc()"
-            [color]="_color()"
-            size="md" />
+        <!-- Header: avatar ring + name + role badge, subtle surface (not a solid color block) -->
+        <div class="px-4 pt-5 pb-4 flex items-center gap-3 bg-clx-surface-2">
+          <div class="rounded-full p-0.5" [class]="_avatarRingClass()">
+            <clx-avatar
+              [initials]="_initials()"
+              [src]="avatarSrc()"
+              [color]="_color()"
+              size="md" />
+          </div>
           <div class="flex-1 min-w-0">
             <p class="text-sm font-semibold text-clx-text-label truncate">{{ fullName() }}</p>
             <p class="text-xs text-clx-text-muted truncate">{{ username() }}</p>
             @if (role()) {
-              <span clx-badge [color]="_color()" variant="light" size="sm" class="mt-1">{{ role() }}</span>
+              <span clx-badge [color]="_color()" variant="light" size="xs" class="mt-1.5">{{ role() }}</span>
             }
           </div>
         </div>
 
-        <!-- Divider -->
-        <div class="border-t border-clx-border-soft"></div>
-
         <!-- Menu items -->
         @if (menuItems().length) {
-          <div class="p-1.5">
+          <div class="py-1.5">
             @for (item of menuItems(); track item.action) {
-              <button clx-button type="button" variant="ghost" [color]="_color()" [block]="true" [icon]="item.icon"
-                class="justify-start rounded-xl!"
-                (click)="_onAction(item.action)">
-                {{ item.label }}
-              </button>
+              <clx-menu-item [label]="item.label" [icon]="item.icon"
+                (itemClick)="_onAction(item.action)" />
             }
           </div>
-          <div class="border-t border-clx-border-soft mx-3"></div>
         }
 
-        <!-- Sign out -->
-        <div class="p-1.5">
-          <button clx-button type="button" variant="ghost" color="red" [block]="true" icon="logout"
-            class="justify-start rounded-xl!"
-            (click)="_onSignOut()">
-            {{ signOutLabel() }}
-          </button>
+        <!-- Divider -->
+        <div class="border-t border-clx-border-soft"></div>
+
+        <!-- Sign out — always red regardless of theme (destructive action convention) -->
+        <div class="py-1.5">
+          <clx-menu-item [label]="signOutLabel()" icon="logout" [style]="{ color: 'red' }"
+            (itemClick)="_onSignOut()" />
         </div>
 
       </div>
@@ -13706,6 +13713,7 @@ class ClxTableComponent {
      *  theme configured in Editar tema → Tablas) when unset. */
     headerColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerColor" }] : /* istanbul ignore next */ []));
     headerTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerTextColor" }] : /* istanbul ignore next */ []));
+    borderColor = input(undefined, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     bordered = input(undefined, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     _tableStyle = computed(() => {
@@ -13713,6 +13721,7 @@ class ClxTableComponent {
         return {
             headerColor: this.headerColor() ?? theme.headerColor,
             headerTextColor: this.headerTextColor() ?? theme.headerTextColor,
+            borderColor: this.borderColor() ?? theme.borderColor,
             shadow: this.shadow() ?? theme.shadow,
             bordered: this.bordered() ?? theme.bordered,
         };
@@ -13742,7 +13751,7 @@ class ClxTableComponent {
     };
     _tableWrapperClass = computed(() => {
         const s = this._tableStyle();
-        const { color } = parseColorInput(s.headerColor);
+        const { color } = parseColorInput(s.borderColor);
         const border = s.bordered ? `border border-${color}-200` : '';
         const shadow = ClxTableComponent._SHADOW_CLASS[s.shadow];
         return `overflow-x-auto overflow-y-hidden rounded-lg ${border} ${shadow}`.trim();
@@ -13869,7 +13878,7 @@ class ClxTableComponent {
         this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
     <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
     @if (searchable() && !serverSide() && !loading() && _filteredData().length > 0) {
       <div class="mb-3 max-w-80 min-w-40">
@@ -14151,7 +14160,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], singleSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelect", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], _currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "_currentPage", required: false }] }, { type: i0.Output, args: ["_currentPageChange"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClxColumnDefDirective), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], singleSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelect", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], _currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "_currentPage", required: false }] }, { type: i0.Output, args: ["_currentPageChange"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClxColumnDefDirective), { isSignal: true }] }] } });
+
+/** Wraps the action buttons in a clx-table column (edit/delete/view/...) so every nested
+ *  clx-button defaults to the theme's secondaryColor instead of primaryColor, without each one
+ *  having to pass [color] by hand. Any button that DOES pass its own [color] (e.g. a one-off
+ *  danger action) still overrides this default — same override precedence as every other
+ *  per-instance color input in the library. */
+class ClxTableActionsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ClxTableActionsComponent, isStandalone: true, selector: "clx-table-actions", host: { classAttribute: "flex items-center gap-2" }, providers: [
+            { provide: CLX_TABLE_ACTIONS_CONTEXT, useFactory: () => {
+                    const themeSvc = inject(ClxThemeService);
+                    return computed(() => themeSvc.config().secondaryColor);
+                } },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-table-actions',
+                    standalone: true,
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex items-center gap-2' },
+                    providers: [
+                        { provide: CLX_TABLE_ACTIONS_CONTEXT, useFactory: () => {
+                                const themeSvc = inject(ClxThemeService);
+                                return computed(() => themeSvc.config().secondaryColor);
+                            } },
+                    ],
+                }]
+        }] });
 
 class ClxPageNotFoundComponent {
     title = input('Página no encontrada', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -17016,5 +17057,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map