codexly-ui 0.11.8 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.11.8",
+  "version": "0.12.0",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -2026,6 +2026,13 @@ interface ClxTableTheme {
     /** Whether the table wrapper shows its outer border. Falls back to true. */
     bordered?: boolean;
 }
+interface ClxTabsTheme {
+    /** Active tab's text/icon/badge color — falls back to primaryColor when unset. */
+    activeTextColor?: ClxColorInput;
+    /** Active tab's bottom underline color — independent of activeTextColor, falls back to
+     *  primaryColor when unset. */
+    underlineColor?: ClxColorInput;
+}
 interface ClxPaginationTheme {
     /** Page-number buttons + the "items per page" select accent color — falls back to
      *  primaryColor when unset. */
@@ -2116,6 +2123,8 @@ interface ClxThemeConfig {
     formControls?: ClxFormControlsTheme;
     /** ClxTableComponent global style override — see ClxTableTheme for per-field fallbacks */
     table?: ClxTableTheme;
+    /** ClxTabsComponent global style override — see ClxTabsTheme for per-field fallbacks */
+    tabs?: ClxTabsTheme;
     /** ClxPaginationComponent global style override — see ClxPaginationTheme for per-field fallbacks */
     pagination?: ClxPaginationTheme;
     /** ClxNotificationComponent global style override — see ClxNotificationTheme for per-field fallbacks */
@@ -2632,14 +2641,20 @@ type ClxToastType = ClxColor;
 interface ClxToastAction {
     label: string;
     onClick: () => void;
-    /** Visual weight for this action button. Defaults to 'link' to match the single-action look. */
-    variant?: 'link' | 'solid' | 'outline' | 'ghost';
+    /** Visual weight for this action button. First action in the list defaults to 'primary', the rest to 'ghost'. */
+    variant?: 'primary' | 'ghost';
 }
 interface ClxToastOptions {
     type?: ClxToastType;
     message: string;
     title?: string;
     icon?: string;
+    /** Small uppercase label above the title (e.g. event source: "Inventario") — pairs with `timestamp`. */
+    category?: string;
+    /** Relative time shown next to `category` (e.g. "hace 2 min"). Ignored when `category` is unset. */
+    timestamp?: Date;
+    /** Small pill next to the title (e.g. "Crítico") for toasts that need extra visual weight. */
+    badgeLabel?: string;
     position?: ClxToastPosition;
     duration?: number;
     showProgress?: boolean;
@@ -2652,10 +2667,13 @@ interface ClxToastOptions {
     /** Multiple action buttons (e.g. Approve/Reject). Takes precedence over `action` when both are set. */
     actions?: ClxToastAction[];
 }
-interface ClxToastEntry extends Required<Omit<ClxToastOptions, 'title' | 'action' | 'actions' | 'icon'>> {
+interface ClxToastEntry extends Required<Omit<ClxToastOptions, 'title' | 'action' | 'actions' | 'icon' | 'category' | 'timestamp' | 'badgeLabel'>> {
     id: string;
     title?: string;
     icon?: string;
+    category?: string;
+    timestamp?: Date;
+    badgeLabel?: string;
     action?: ClxToastAction;
     actions?: ClxToastAction[];
     removing: boolean;
@@ -2674,11 +2692,14 @@ declare class ClxToastComponent implements OnInit, OnDestroy {
     private _elapsed;
     private _destroyed;
     protected readonly _icon: _angular_core.Signal<string>;
+    protected readonly _bgClass: _angular_core.Signal<string>;
     protected readonly _borderClass: _angular_core.Signal<string>;
+    protected readonly _iconBgClass: _angular_core.Signal<string>;
     protected readonly _colorClass: _angular_core.Signal<string>;
     protected readonly _progressColor: _angular_core.Signal<string>;
     protected readonly _buttonColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
     protected readonly _actions: _angular_core.Signal<ClxToastAction[]>;
+    protected readonly _relativeTime: _angular_core.Signal<string>;
     private get _card();
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -2713,14 +2734,24 @@ declare class ClxTabDirective {
 declare class ClxTabsComponent {
     private readonly _themeSvc;
     readonly tabs: _angular_core.InputSignal<ClxTabItem[]>;
+    /** Legacy single-color override — still the shared fallback for both activeTextColor and
+     *  underlineColor when neither of those is set, so existing callers keep working unchanged. */
     readonly clxColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Active tab's text/icon/badge color — falls back to clxColor, then the theme's
+     *  tabs.activeTextColor (then primaryColor), when unset. */
+    readonly activeTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Active tab's bottom underline color — independent of activeTextColor, falls back to
+     *  clxColor, then the theme's tabs.underlineColor (then primaryColor), when unset. */
+    readonly underlineColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly activeTab: _angular_core.ModelSignal<string>;
-    protected readonly _clxColor: _angular_core.Signal<ClxColorInput>;
+    private readonly _style;
+    protected readonly _activeTextColor: _angular_core.Signal<ClxColorInput>;
+    protected readonly _underlineColorResolved: _angular_core.Signal<ClxColorInput>;
     protected readonly _panels: _angular_core.Signal<readonly ClxTabDirective[]>;
     protected readonly _underlineClass: _angular_core.Signal<string>;
     protected _badgeClass(tabId: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTabsComponent, "clx-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_panels"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTabsComponent, "clx-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "activeTextColor": { "alias": "activeTextColor"; "required": false; "isSignal": true; }; "underlineColor": { "alias": "underlineColor"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_panels"], never, true, never>;
 }
 
 type ClxTreeSize = 'sm' | 'md' | 'lg';
@@ -3841,6 +3872,10 @@ interface ClxResolvedPaginationStyle {
     shadow: ClxTableShadow;
     bordered: boolean;
 }
+interface ClxResolvedTabsStyle {
+    activeTextColor: ClxColorInput;
+    underlineColor: ClxColorInput;
+}
 interface ClxResolvedNotificationStyle {
     severityColors: Required<ClxNotificationSeverityColors>;
     unreadColor: ClxColorInput;
@@ -3895,6 +3930,10 @@ declare class ClxThemeService {
     /** Resolved style for ClxPaginationComponent — falls back to primaryColor / no shadow /
      *  bordered. Per-instance `[color]` input still takes precedence over this theme-wide default. */
     readonly paginationStyle: _angular_core.Signal<ClxResolvedPaginationStyle>;
+    /** Resolved style for ClxTabsComponent — activeTextColor and underlineColor each fall back to
+     *  primaryColor independently when unset. Per-instance inputs on clx-tabs still take
+     *  precedence over this theme-wide default. */
+    readonly tabsStyle: _angular_core.Signal<ClxResolvedTabsStyle>;
     /** Resolved style for ClxNotificationComponent — severity colors fall back to built-in
      *  green/amber/sky/red, unreadColor to primaryColor, borderColor to listBorderColor then
      *  primaryColor, radius to the app-wide borderRadius. Per-instance inputs on clx-notification
@@ -4029,6 +4068,9 @@ declare class ClxToastService {
     error(message: string, opts?: Partial<ClxToastOptions>): void;
     warning(message: string, opts?: Partial<ClxToastOptions>): void;
     info(message: string, opts?: Partial<ClxToastOptions>): void;
+    /** Shows a toast built straight from a live ClxNotificationItem (e.g. on SSE arrival) — the same
+     *  object already driving the notification panel/bell, no manual field mapping at the call site. */
+    fromNotification(item: ClxNotificationItem, opts?: Partial<ClxToastOptions>): void;
     dismissAll(): void;
     private _getOrCreateContainer;
     private _uid;
@@ -4037,4 +4079,4 @@ declare class ClxToastService {
 }
 
 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, ClxNotificationComponent, 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 };
-export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxBrandSize, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardTitleZoneStyle, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxCollapseDivider, ClxCollapseSize, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerPosition, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxFontWeight, ClxFormControlsTheme, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListItemLabelZoneStyle, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNavZoneStyle, ClxNotificationItem, ClxNotificationSeverity, ClxNotificationSeverityColors, ClxNotificationSize, ClxNotificationTheme, ClxNumberSize, ClxNumberVariant, ClxOtpSize, ClxPageChangeEvent, ClxPageHeaderTextSize, ClxPageHeaderZoneStyle, ClxPageSizeChangeEvent, ClxPaginationSize, ClxPaginationTheme, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductQuickViewData, ClxProductQuickViewResult, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxResolvedCardTitleZoneStyle, ClxResolvedListItemLabelZoneStyle, ClxResolvedNavZoneStyle, ClxResolvedNotificationStyle, ClxResolvedPageHeaderZoneStyle, ClxResolvedPaginationStyle, ClxResolvedTableStyle, ClxResolvedTimelineTitleZoneStyle, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSocialPlatform, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableShadow, ClxTableSort, ClxTableSortEvent, ClxTableTheme, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimelineTitleZoneStyle, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, NativeOverlayRef, SparkPoint };
+export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxBrandSize, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardTitleZoneStyle, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxCollapseDivider, ClxCollapseSize, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerPosition, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxFontWeight, ClxFormControlsTheme, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListItemLabelZoneStyle, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNavZoneStyle, ClxNotificationItem, ClxNotificationSeverity, ClxNotificationSeverityColors, ClxNotificationSize, ClxNotificationTheme, ClxNumberSize, ClxNumberVariant, ClxOtpSize, ClxPageChangeEvent, ClxPageHeaderTextSize, ClxPageHeaderZoneStyle, ClxPageSizeChangeEvent, ClxPaginationSize, ClxPaginationTheme, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductQuickViewData, ClxProductQuickViewResult, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxResolvedCardTitleZoneStyle, ClxResolvedListItemLabelZoneStyle, ClxResolvedNavZoneStyle, ClxResolvedNotificationStyle, ClxResolvedPageHeaderZoneStyle, ClxResolvedPaginationStyle, ClxResolvedTableStyle, ClxResolvedTabsStyle, ClxResolvedTimelineTitleZoneStyle, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSocialPlatform, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableShadow, ClxTableSort, ClxTableSortEvent, ClxTableTheme, ClxTabsTheme, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimelineTitleZoneStyle, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, NativeOverlayRef, SparkPoint };