codexly-ui 0.4.9 → 0.5.0

package/package.json

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

package/types/codexly-ui.d.ts

@@ -1101,7 +1101,10 @@ interface ClxExistingFile {
     /** Set when the caller wants per-file status overlays (e.g. processing/failed thumbnails). */
     status?: 'DONE' | 'PENDING' | 'PROCESSING' | 'FAILED';
 }
-
+/** A single rendered preview item — mixes already-existing and newly-selected files under one
+ *  shape. Passed to `primaryAction`/`secondaryAction` resolvers and emitted by their click
+ *  outputs, so callers can act on whichever item was clicked without `clx-upload` needing to
+ *  know what that action means (e.g. opening a domain-specific settings modal). */
 interface ClxUploadPreviewItem {
     kind: 'existing' | 'new';
     key: string;
@@ -1115,6 +1118,16 @@ interface ClxUploadPreviewItem {
     existing?: ClxExistingFile;
     file?: File;
 }
+/** Visual description of a per-item action badge button (icon/color/tooltip). Returned by a
+ *  `primaryAction`/`secondaryAction` resolver function — return `null`/`undefined` to hide the
+ *  button for a specific item. */
+interface ClxUploadItemAction {
+    icon: string;
+    color?: ClxColorInput;
+    tooltip?: string;
+}
+type ClxUploadItemActionResolver = (item: ClxUploadPreviewItem) => ClxUploadItemAction | null | undefined;
+
 declare class ClxUploadComponent implements ControlValueAccessor, OnDestroy {
     private readonly _themeSvc;
     readonly multiple: _angular_core.InputSignal<boolean>;
@@ -1130,12 +1143,20 @@ declare class ClxUploadComponent implements ControlValueAccessor, OnDestroy {
      *  preview grid as newly-selected local files. The component never deletes these itself —
      *  removing one only emits `existingFileRemove`, letting the caller decide (e.g. call the API). */
     readonly existingFiles: _angular_core.InputSignal<ClxExistingFile[]>;
+    /** Resolves the badge button shown top-right on each thumbnail. Defaults to a red "Eliminar"
+     *  button wired to the built-in remove behavior. Return `null` for an item to hide it. */
+    readonly primaryAction: _angular_core.InputSignal<ClxUploadItemActionResolver>;
+    /** Resolves an optional second badge button (bottom-right on each thumbnail). Hidden by
+     *  default — the caller owns what clicking it means (e.g. opening a settings modal); this
+     *  component only reports which item was clicked via `secondaryActionClick`. */
+    readonly secondaryAction: _angular_core.InputSignal<ClxUploadItemActionResolver | null>;
     readonly onUploadError: _angular_core.OutputEmitterRef<{
         file: File;
         error: ClxUploadError;
     }>;
     readonly onUploadSuccess: _angular_core.OutputEmitterRef<File[]>;
     readonly existingFileRemove: _angular_core.OutputEmitterRef<string>;
+    readonly secondaryActionClick: _angular_core.OutputEmitterRef<ClxUploadPreviewItem>;
     readonly _files: _angular_core.WritableSignal<File[]>;
     readonly _isDragging: _angular_core.WritableSignal<boolean>;
     readonly _errorKey: _angular_core.WritableSignal<ClxUploadError | null>;
@@ -1173,6 +1194,11 @@ declare class ClxUploadComponent implements ControlValueAccessor, OnDestroy {
     protected _onDragOver(event: DragEvent): void;
     protected _onDragLeave(): void;
     protected _onDrop(event: DragEvent): void;
+    protected _resolvePrimaryAction(item: ClxUploadPreviewItem): ClxUploadItemAction | null;
+    protected _resolveSecondaryAction(item: ClxUploadPreviewItem): ClxUploadItemAction | null;
+    /** Built-in behavior for the default primary action (remove). Callers who override
+     *  `primaryAction` only for its visuals still get this same removal behavior. */
+    protected _onPrimaryAction(item: ClxUploadPreviewItem): void;
     protected _removeItem(item: ClxUploadPreviewItem): void;
     private _getObjectUrl;
     private _releaseObjectUrl;
@@ -1183,7 +1209,7 @@ declare class ClxUploadComponent implements ControlValueAccessor, OnDestroy {
     private _nameFromUrl;
     protected _formatSize(bytes: number): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxUploadComponent, "clx-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "existingFiles": { "alias": "existingFiles"; "required": false; "isSignal": true; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; "existingFileRemove": "existingFileRemove"; }, never, ["[clx-label]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxUploadComponent, "clx-upload", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "existingFiles": { "alias": "existingFiles"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; "existingFileRemove": "existingFileRemove"; "secondaryActionClick": "secondaryActionClick"; }, never, ["[clx-label]"], true, never>;
 }
 
 type ClxColorPickerSize = 'sm' | 'md' | 'lg';
@@ -3105,4 +3131,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, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, 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 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, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, 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, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, 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, SparkPoint };