codexly-ui 0.12.34 → 0.12.36

package/package.json

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

package/types/codexly-ui.d.ts

@@ -1765,6 +1765,14 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Overrides the toolbar's Image button: when provided, clicking it calls this instead of
+     *  opening the generic "insert by URL" modal (ClxEditorImageModalComponent) — lets a host app
+     *  plug in its own picker (e.g. an ERP's product/variant image browser) without this library
+     *  needing to know about that app's catalog backend. Resolve to undefined/null to cancel. */
+    readonly imagePicker: _angular_core.InputSignal<(() => Promise<{
+        url: string;
+        alt?: string;
+    } | undefined | null>) | undefined>;
     private _bodyEl;
     private _sourceEl;
     private readonly _cdr;
@@ -1814,6 +1822,7 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     protected _exec(cmd: string, arg?: string): void;
     protected _execVal(cmd: string, event: Event): void;
     private _openLinkModal;
+    private _openImageModal;
     protected _saveRange(): void;
     private _restoreRange;
     protected _onPaste(event: ClipboardEvent): void;
@@ -1830,7 +1839,7 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     registerOnTouched(fn: () => void): void;
     setDisabledState(disabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorComponent, "clx-editor", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorComponent, "clx-editor", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusMessage": { "alias": "statusMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "imagePicker": { "alias": "imagePicker"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ClxEditorLinkModalComponent {
@@ -1848,6 +1857,24 @@ declare class ClxEditorLinkModalComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorLinkModalComponent, "clx-editor-link-modal", never, {}, {}, never, never, true, never>;
 }
 
+/** Generic "insert image by URL" fallback for clx-editor's image button — used only when the host
+ *  app doesn't provide its own imagePicker() (see ClxEditorComponent), since this library has no
+ *  way to reach an app-specific catalog/media backend itself. */
+declare class ClxEditorImageModalComponent {
+    private readonly _modalRef;
+    private readonly _themeSvc;
+    protected readonly _primaryColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    protected readonly _form: FormGroup<{
+        url: FormControl<string>;
+        alt: FormControl<string>;
+    }>;
+    protected readonly _urlInvalid: _angular_core.WritableSignal<boolean>;
+    protected _confirm(): void;
+    protected _cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxEditorImageModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxEditorImageModalComponent, "clx-editor-image-modal", never, {}, {}, never, never, true, never>;
+}
+
 declare class ClxStepComponent {
     readonly label: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string>;
@@ -2093,9 +2120,13 @@ interface ClxNotificationTheme {
     severityColors?: ClxNotificationSeverityColors;
     /** Unread-row accent (left rail + title dot) — falls back to primaryColor when unset. */
     unreadColor?: ClxColorInput;
-    /** clx-tabs (Todas/Sin leer/...) + "Marcar todo leído" link accent — falls back to
-     *  primaryColor when unset. Independent from the bell button's own color. */
+    /** clx-tabs (Todas/Sin leer/...) active tab text/icon color + "Marcar todo leído" link accent —
+     *  falls back to the theme's tabs.activeTextColor (then primaryColor) when unset. Independent
+     *  from the bell button's own color. */
     tabsColor?: ClxColorInput;
+    /** clx-tabs underline color, independent of tabsColor — falls back to the theme's
+     *  tabs.underlineColor (then primaryColor) when unset. */
+    tabsUnderlineColor?: ClxColorInput;
     /** Row density. Falls back to 'md'. */
     size?: ClxNotificationSize;
     /** Whether the panel wrapper shows its outer border at all — falls back to true. Same field
@@ -2555,9 +2586,14 @@ declare class ClxNotificationComponent {
     /** Unread-count badge color — falls back to the theme's notification.unreadColor (then
      *  primaryColor) when unset. */
     readonly badgeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    /** clx-tabs (Todas/Sin leer/...) + "Marcar todo leído" link accent — falls back to the theme's
-     *  notification.tabsColor (then primaryColor) when unset. */
+    /** clx-tabs (Todas/Sin leer/...) active tab text/icon color + "Marcar todo leído" link accent —
+     *  falls back to the theme's notification.tabsColor (which itself falls back to the general
+     *  "Pestañas" theme's tabs.activeTextColor, then primaryColor) when unset. */
     readonly tabsColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** clx-tabs underline color, independent of tabsColor — falls back to the theme's
+     *  notification.tabsUnderlineColor (which itself falls back to tabs.underlineColor, then
+     *  primaryColor) when unset. */
+    readonly tabsUnderlineColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     /** Whether the floating panel shows its outer border — falls back to the theme's
      *  notification.border (then true) when unset. */
     readonly border: _angular_core.InputSignal<boolean | undefined>;
@@ -2572,6 +2608,7 @@ declare class ClxNotificationComponent {
     protected readonly _buttonColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _badgeColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _tabsColor: _angular_core.Signal<ClxColorInput>;
+    protected readonly _tabsUnderlineColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _border: _angular_core.Signal<boolean>;
     protected readonly _borderColor: _angular_core.Signal<ClxColorInput>;
     private readonly _sso;
@@ -2600,7 +2637,7 @@ declare class ClxNotificationComponent {
     private _dayLabel;
     protected _timeOf(iso: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNotificationComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNotificationComponent, "clx-notification", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "categoryTab": { "alias": "categoryTab"; "required": false; "isSignal": true; }; "buttonColor": { "alias": "buttonColor"; "required": false; "isSignal": true; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "tabsColor": { "alias": "tabsColor"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "markRead": "markRead"; "markAllRead": "markAllRead"; "delete": "delete"; "deleteAllRead": "deleteAllRead"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNotificationComponent, "clx-notification", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "categoryTab": { "alias": "categoryTab"; "required": false; "isSignal": true; }; "buttonColor": { "alias": "buttonColor"; "required": false; "isSignal": true; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "tabsColor": { "alias": "tabsColor"; "required": false; "isSignal": true; }; "tabsUnderlineColor": { "alias": "tabsUnderlineColor"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "markRead": "markRead"; "markAllRead": "markAllRead"; "delete": "delete"; "deleteAllRead": "deleteAllRead"; }, never, never, true, never>;
 }
 
 declare class ClxAlertComponent implements OnInit, OnDestroy {
@@ -4064,6 +4101,7 @@ interface ClxResolvedNotificationStyle {
     severityColors: Required<ClxNotificationSeverityColors>;
     unreadColor: ClxColorInput;
     tabsColor: ClxColorInput;
+    tabsUnderlineColor: ClxColorInput;
     size: ClxNotificationSize;
     border: boolean;
     borderColor: ClxColorInput;
@@ -4267,5 +4305,5 @@ declare class ClxToastService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<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 { 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, ClxEditorImageModalComponent, 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, ClxResolvedTabsStyle, ClxResolvedTimelineTitleZoneStyle, ClxResolvedWizardStyle, 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, ClxWizardTheme, NativeOverlayRef, SparkPoint };