codexly-ui 0.4.8 → 0.5.0

package/fesm2022/codexly-ui.mjs

@@ -4920,6 +4920,9 @@ function resolveFileTypeVisual(name, mimeType) {
     return FILE_TYPE_BY_EXTENSION[ext] ?? FILE_TYPE_DEFAULT;
 }
 
+const DEFAULT_PRIMARY_ACTION = () => ({
+    icon: 'close', color: 'red', tooltip: 'Eliminar',
+});
 class ClxUploadComponent {
     _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
@@ -4936,10 +4939,18 @@ class ClxUploadComponent {
      *  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). */
     existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    primaryAction = input(DEFAULT_PRIMARY_ACTION, ...(ngDevMode ? [{ debugName: "primaryAction" }] : /* istanbul ignore next */ []));
+    /** 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`. */
+    secondaryAction = input(null, ...(ngDevMode ? [{ debugName: "secondaryAction" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     onUploadError = output();
     onUploadSuccess = output();
     existingFileRemove = output();
+    secondaryActionClick = output();
     // ── Internal state ─────────────────────────────────────────────────────────
     _files = signal([], ...(ngDevMode ? [{ debugName: "_files" }] : /* istanbul ignore next */ []));
     _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
@@ -4962,7 +4973,7 @@ class ClxUploadComponent {
     _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => UPLOAD_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _isError = computed(() => this._errorKey() !== null, ...(ngDevMode ? [{ debugName: "_isError" }] : /* istanbul ignore next */ []));
-    _thumbClass = computed(() => `relative group flex flex-col ${resolveRadius(this._themeSvc.config().borderRadius)} overflow-hidden border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
+    _thumbClass = computed(() => `relative group flex flex-col ${resolveRadius(this._themeSvc.config().borderRadius)} border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
     _previewItems = computed(() => {
         const existing = this.existingFiles().map(f => ({
             kind: 'existing',
@@ -5104,6 +5115,18 @@ class ClxUploadComponent {
         if (files?.length)
             this._addFiles(files);
     }
+    _resolvePrimaryAction(item) {
+        return this.primaryAction()(item) ?? null;
+    }
+    _resolveSecondaryAction(item) {
+        const resolver = this.secondaryAction();
+        return resolver ? (resolver(item) ?? null) : null;
+    }
+    /** Built-in behavior for the default primary action (remove). Callers who override
+     *  `primaryAction` only for its visuals still get this same removal behavior. */
+    _onPrimaryAction(item) {
+        this._removeItem(item);
+    }
     _removeItem(item) {
         if (item.kind === 'existing') {
             this.existingFileRemove.emit(item.existing.id);
@@ -5217,7 +5240,7 @@ class ClxUploadComponent {
         return `${(bytes / 1_048_576).toFixed(1)} MB`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxUploadComponent, isStandalone: true, selector: "clx-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadError: "onUploadError", onUploadSuccess: "onUploadSuccess", existingFileRemove: "existingFileRemove" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxUploadComponent, isStandalone: true, selector: "clx-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadError: "onUploadError", onUploadSuccess: "onUploadSuccess", existingFileRemove: "existingFileRemove", secondaryActionClick: "secondaryActionClick" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Hidden file input -->
     <input
       #fileInput
@@ -5266,7 +5289,7 @@ class ClxUploadComponent {
       <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
         @for (item of _previewItems(); track item.key) {
           <div [class]="_thumbClass()">
-            <div class="relative aspect-square w-full overflow-hidden">
+            <div class="relative aspect-square w-full overflow-hidden rounded-[inherit]">
               @if (item.isImage) {
                 <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
               } @else {
@@ -5284,21 +5307,43 @@ class ClxUploadComponent {
                   <span clx-icon name="error" size="md" class="text-white"></span>
                 </div>
               }
+            </div>
 
+            @let primaryAction = _resolvePrimaryAction(item);
+            @if (primaryAction) {
               <button
                 clx-button
                 type="button"
                 variant="solid"
-                color="red"
+                [color]="primaryAction.color ?? 'red'"
                 shape="circle"
                 size="xxs"
-                icon="close"
+                [icon]="primaryAction.icon"
                 [iconOnly]="true"
-                class="absolute top-0.5 right-0.5 shadow-md"
+                [clxTooltip]="primaryAction.tooltip ?? ''"
+                class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 shadow-md z-10"
                 [disabled]="_disabled()"
-                (click)="_removeItem(item); $event.stopPropagation()">
+                (click)="_onPrimaryAction(item); $event.stopPropagation()">
               </button>
-            </div>
+            }
+
+            @let secondaryAction = _resolveSecondaryAction(item);
+            @if (secondaryAction) {
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                [color]="secondaryAction.color ?? 'slate'"
+                shape="circle"
+                size="xxs"
+                [icon]="secondaryAction.icon"
+                [iconOnly]="true"
+                [clxTooltip]="secondaryAction.tooltip ?? ''"
+                class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 shadow-md z-10"
+                [disabled]="_disabled()"
+                (click)="secondaryActionClick.emit(item); $event.stopPropagation()">
+              </button>
+            }
 
             <div class="px-1.5 py-1 w-full min-w-0">
               <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
@@ -5318,14 +5363,14 @@ class ClxUploadComponent {
         {{ _errorMessage() }}
       </p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxUploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-upload',
                     standalone: true,
-                    imports: [ClxIconComponent, ClxButtonComponent],
+                    imports: [ClxIconComponent, ClxButtonComponent, ClxTooltipDirective],
                     template: `
     <!-- Hidden file input -->
     <input
@@ -5375,7 +5420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
         @for (item of _previewItems(); track item.key) {
           <div [class]="_thumbClass()">
-            <div class="relative aspect-square w-full overflow-hidden">
+            <div class="relative aspect-square w-full overflow-hidden rounded-[inherit]">
               @if (item.isImage) {
                 <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
               } @else {
@@ -5393,21 +5438,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   <span clx-icon name="error" size="md" class="text-white"></span>
                 </div>
               }
+            </div>
 
+            @let primaryAction = _resolvePrimaryAction(item);
+            @if (primaryAction) {
               <button
                 clx-button
                 type="button"
                 variant="solid"
-                color="red"
+                [color]="primaryAction.color ?? 'red'"
                 shape="circle"
                 size="xxs"
-                icon="close"
+                [icon]="primaryAction.icon"
                 [iconOnly]="true"
-                class="absolute top-0.5 right-0.5 shadow-md"
+                [clxTooltip]="primaryAction.tooltip ?? ''"
+                class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 shadow-md z-10"
                 [disabled]="_disabled()"
-                (click)="_removeItem(item); $event.stopPropagation()">
+                (click)="_onPrimaryAction(item); $event.stopPropagation()">
               </button>
-            </div>
+            }
+
+            @let secondaryAction = _resolveSecondaryAction(item);
+            @if (secondaryAction) {
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                [color]="secondaryAction.color ?? 'slate'"
+                shape="circle"
+                size="xxs"
+                [icon]="secondaryAction.icon"
+                [iconOnly]="true"
+                [clxTooltip]="secondaryAction.tooltip ?? ''"
+                class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 shadow-md z-10"
+                [disabled]="_disabled()"
+                (click)="secondaryActionClick.emit(item); $event.stopPropagation()">
+              </button>
+            }
 
             <div class="px-1.5 py-1 w-full min-w-0">
               <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
@@ -5434,7 +5501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         class: 'block w-full',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], onUploadError: [{ type: i0.Output, args: ["onUploadError"] }], onUploadSuccess: [{ type: i0.Output, args: ["onUploadSuccess"] }], existingFileRemove: [{ type: i0.Output, args: ["existingFileRemove"] }], _fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }], secondaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryAction", required: false }] }], onUploadError: [{ type: i0.Output, args: ["onUploadError"] }], onUploadSuccess: [{ type: i0.Output, args: ["onUploadSuccess"] }], existingFileRemove: [{ type: i0.Output, args: ["existingFileRemove"] }], secondaryActionClick: [{ type: i0.Output, args: ["secondaryActionClick"] }], _fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 const COLOR_PICKER_SIZE_MAP = {
     sm: { minH: 'min-h-8', text: 'text-sm', label: 'text-xs font-medium', hint: 'text-xs', px: 'px-2.5', swatchSz: 'w-4 h-4', btnSize: 'xs' },