codexly-ui 0.4.9 → 0.5.1

package/fesm2022/codexly-ui.mjs

@@ -2321,6 +2321,11 @@ class ClxTooltipDirective {
         host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
         host.addEventListener('focus', () => this._scheduleShow(), { signal });
         host.addEventListener('blur', () => this._scheduleHide(), { signal });
+        // Touch devices fire 'mouseenter'/'focus' on tap but never a real
+        // 'mouseleave' — hide immediately once the tap completes instead of
+        // leaving the bubble stuck until the next unrelated touch.
+        host.addEventListener('touchend', () => this._hide(), { signal });
+        host.addEventListener('touchcancel', () => this._hide(), { signal });
         this._destroyRef.onDestroy(() => {
             this._destroyed = true;
             this._abort.abort();
@@ -4920,6 +4925,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 +4944,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 */ []));
@@ -5104,6 +5120,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 +5245,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
@@ -5286,19 +5314,41 @@ class ClxUploadComponent {
               }
             </div>
 
-            <button
-              clx-button
-              type="button"
-              variant="solid"
-              color="red"
-              shape="circle"
-              size="xxs"
-              icon="close"
-              [iconOnly]="true"
-              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()">
-            </button>
+            @let primaryAction = _resolvePrimaryAction(item);
+            @if (primaryAction) {
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                [color]="primaryAction.color ?? 'red'"
+                shape="circle"
+                size="xxs"
+                [icon]="primaryAction.icon"
+                [iconOnly]="true"
+                [clxTooltip]="primaryAction.tooltip ?? ''"
+                class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 shadow-md z-10"
+                [disabled]="_disabled()"
+                (click)="_onPrimaryAction(item); $event.stopPropagation()">
+              </button>
+            }
+
+            @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 +5368,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
@@ -5395,19 +5445,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               }
             </div>
 
-            <button
-              clx-button
-              type="button"
-              variant="solid"
-              color="red"
-              shape="circle"
-              size="xxs"
-              icon="close"
-              [iconOnly]="true"
-              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()">
-            </button>
+            @let primaryAction = _resolvePrimaryAction(item);
+            @if (primaryAction) {
+              <button
+                clx-button
+                type="button"
+                variant="solid"
+                [color]="primaryAction.color ?? 'red'"
+                shape="circle"
+                size="xxs"
+                [icon]="primaryAction.icon"
+                [iconOnly]="true"
+                [clxTooltip]="primaryAction.tooltip ?? ''"
+                class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 shadow-md z-10"
+                [disabled]="_disabled()"
+                (click)="_onPrimaryAction(item); $event.stopPropagation()">
+              </button>
+            }
+
+            @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 +5506,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' },