codexly-ui 0.3.0 → 0.4.0

package/package.json

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

package/types/codexly-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, ElementRef, AfterViewInit, OnDestroy, AfterContentInit, OnInit, QueryList, TemplateRef, Provider, OnChanges, SimpleChanges } from '@angular/core';
+import { Signal, InjectionToken, OnDestroy, ElementRef, AfterViewInit, AfterContentInit, OnInit, QueryList, TemplateRef, Provider, OnChanges, SimpleChanges } from '@angular/core';
 import * as codexly_ui from 'codexly-ui';
 import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
@@ -1084,8 +1084,31 @@ declare class ClxSliderComponent implements ControlValueAccessor {
 
 type ClxUploadSize = 'sm' | 'md' | 'lg';
 type ClxUploadError = 'fileType' | 'fileSize';
+/** An already-persisted file (e.g. previously uploaded to the backend). Rendered alongside
+ *  newly-selected local files in the same preview list. Removing one only emits
+ *  `existingFileRemove` — the component never calls the backend itself. */
+interface ClxExistingFile {
+    id: string;
+    url: string;
+    name?: string;
+    /** Set when the caller wants per-file status overlays (e.g. processing/failed thumbnails). */
+    status?: 'DONE' | 'PENDING' | 'PROCESSING' | 'FAILED';
+}
 
-declare class ClxUploadComponent implements ControlValueAccessor {
+interface ClxUploadPreviewItem {
+    kind: 'existing' | 'new';
+    key: string;
+    name: string;
+    size?: number;
+    isImage: boolean;
+    thumbUrl: string | null;
+    fileIcon: string;
+    fileColor: string;
+    status?: ClxExistingFile['status'];
+    existing?: ClxExistingFile;
+    file?: File;
+}
+declare class ClxUploadComponent implements ControlValueAccessor, OnDestroy {
     private readonly _themeSvc;
     readonly multiple: _angular_core.InputSignal<boolean>;
     readonly accept: _angular_core.InputSignal<string>;
@@ -1096,14 +1119,21 @@ declare class ClxUploadComponent implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<ClxUploadSize | undefined>;
     protected readonly _size: _angular_core.Signal<ClxUploadSize>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Already-persisted files (e.g. previously uploaded to the backend). Rendered in the same
+     *  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[]>;
     readonly onUploadError: _angular_core.OutputEmitterRef<{
         file: File;
         error: ClxUploadError;
     }>;
     readonly onUploadSuccess: _angular_core.OutputEmitterRef<File[]>;
+    readonly existingFileRemove: _angular_core.OutputEmitterRef<string>;
     readonly _files: _angular_core.WritableSignal<File[]>;
     readonly _isDragging: _angular_core.WritableSignal<boolean>;
     readonly _errorKey: _angular_core.WritableSignal<ClxUploadError | null>;
+    /** File → object URL cache, so we don't re-create (and leak) a new URL on every re-render. */
+    private readonly _objectUrls;
     private readonly _ngControl;
     private readonly _cvaDisabled;
     private _cvaConnected;
@@ -1119,8 +1149,9 @@ declare class ClxUploadComponent implements ControlValueAccessor {
         hint: string;
     }>;
     protected readonly _isError: _angular_core.Signal<boolean>;
-    protected readonly _fileItemClass: _angular_core.Signal<string>;
-    protected readonly _fileIconClass: _angular_core.Signal<string>;
+    protected readonly _thumbClass: _angular_core.Signal<string>;
+    protected readonly _fileCardClass: _angular_core.Signal<string>;
+    protected readonly _previewItems: _angular_core.Signal<ClxUploadPreviewItem[]>;
     protected readonly _zoneClass: _angular_core.Signal<string>;
     protected readonly _iconClass: _angular_core.Signal<string>;
     protected readonly _linkClass: _angular_core.Signal<string>;
@@ -1136,13 +1167,16 @@ declare class ClxUploadComponent implements ControlValueAccessor {
     protected _onDragOver(event: DragEvent): void;
     protected _onDragLeave(): void;
     protected _onDrop(event: DragEvent): void;
-    protected _removeFile(file: File): void;
+    protected _removeItem(item: ClxUploadPreviewItem): void;
+    private _getObjectUrl;
+    private _releaseObjectUrl;
+    ngOnDestroy(): void;
     private _addFiles;
     private _isAccepted;
     private _emit;
     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; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; }, 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; }; }, { "onUploadError": "onUploadError"; "onUploadSuccess": "onUploadSuccess"; "existingFileRemove": "existingFileRemove"; }, never, ["[clx-label]"], true, never>;
 }
 
 type ClxColorPickerSize = 'sm' | 'md' | 'lg';
@@ -3064,4 +3098,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, 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, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, SparkPoint };