codexly-ui 0.11.1 → 0.11.3

package/fesm2022/codexly-ui.mjs

@@ -11271,6 +11271,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], confirmButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], confirmClick: [{ type: i0.Output, args: ["confirmClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] } });
 
+class ClxPageEmptyComponent {
+    _themeSvc = inject(ClxThemeService);
+    icon = input('inbox', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Named "heading", not "title" — the latter shadows the native HTML title attribute (tooltip
+     *  on hover) when bound without brackets, e.g. `title="..."` instead of `[title]="..."`. */
+    heading = input('Sin resultados', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    ctaLabel = input('', ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
+    ctaIcon = input('add', ...(ngDevMode ? [{ debugName: "ctaIcon" }] : /* istanbul ignore next */ []));
+    ctaColor = input(undefined, ...(ngDevMode ? [{ debugName: "ctaColor" }] : /* istanbul ignore next */ []));
+    _ctaColor = computed(() => this.ctaColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_ctaColor" }] : /* istanbul ignore next */ []));
+    cta = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageEmptyComponent, isStandalone: true, selector: "clx-page-empty", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaIcon: { classPropertyName: "ctaIcon", publicName: "ctaIcon", isSignal: true, isRequired: false, transformFunction: null }, ctaColor: { classPropertyName: "ctaColor", publicName: "ctaColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cta: "cta" }, host: { classAttribute: "flex flex-col items-center justify-center w-full px-6 text-center text-sm" }, ngImport: i0, template: `
+    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
+      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
+    </div>
+
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ heading() }}</h1>
+
+    @if (description()) {
+      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
+    }
+
+    @if (ctaLabel()) {
+      <button
+        clx-button
+        type="button"
+        [color]="_ctaColor()"
+        variant="solid"
+        [icon]="ctaIcon()"
+        (click)="cta.emit()">
+        {{ ctaLabel() }}
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-page-empty',
+                    standalone: true,
+                    imports: [ClxButtonComponent, ClxIconComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex flex-col items-center justify-center w-full px-6 text-center text-sm' },
+                    template: `
+    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
+      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
+    </div>
+
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ heading() }}</h1>
+
+    @if (description()) {
+      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
+    }
+
+    @if (ctaLabel()) {
+      <button
+        clx-button
+        type="button"
+        [color]="_ctaColor()"
+        variant="solid"
+        [icon]="ctaIcon()"
+        (click)="cta.emit()">
+        {{ ctaLabel() }}
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaIcon", required: false }] }], ctaColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaColor", required: false }] }], cta: [{ type: i0.Output, args: ["cta"] }] } });
+
 // ── Size map — same density-token shape as LIST_SIZE_MAP ──────────────────────
 const NOTIFICATION_SIZE_MAP = {
     sm: { row: 'py-2', iconWrap: 'w-7 h-7', iconSize: 'xs', title: 'text-xs', detail: 'text-[11px]', time: 'text-[10px]' },
@@ -11440,10 +11512,8 @@ class ClxNotificationComponent {
                 Marcar todo leído
               </button>
             }
-            <button type="button" class="w-6 h-6 flex items-center justify-center rounded-md text-clx-text-muted hover:bg-clx-surface-2"
-              aria-label="Cerrar" (click)="_close()">
-              <span clx-icon name="close" size="xs"></span>
-            </button>
+            <button clx-button type="button" variant="ghost" color="slate" shape="circle" size="xs"
+              icon="close" [iconOnly]="true" aria-label="Cerrar" (click)="_close()"></button>
           </div>
         </div>
 
@@ -11494,33 +11564,29 @@ class ClxNotificationComponent {
               }
             }
           } @else {
-            <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
-              <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
-              <p class="text-sm font-medium text-clx-text-label">
-                {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
-              </p>
-            </div>
+            <clx-page-empty icon="notifications_off" class="py-10"
+              [heading]="_filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones'" />
           }
         </div>
 
         @if (_readCount() > 0) {
-          <div class="flex justify-end px-4 py-2.5 border-t border-clx-border-soft">
-            <button type="button" class="text-xs font-semibold text-clx-text-subtle hover:text-red-500"
-              (click)="deleteAllRead.emit()">
+          <div class="flex justify-end px-3 py-2.5 border-t border-clx-border-soft">
+            <button clx-button type="button" variant="ghost" color="red" size="xs"
+              icon="delete_sweep" (click)="deleteAllRead.emit()">
               Eliminar leídas
             </button>
           </div>
         }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-notification',
                     standalone: true,
-                    imports: [OverlayModule, ClxIconComponent, ClxBadgeComponent, ClxTabsComponent],
+                    imports: [OverlayModule, ClxIconComponent, ClxBadgeComponent, ClxButtonComponent, ClxPageEmptyComponent, ClxTabsComponent],
                     template: `
     <!-- Trigger -->
     <button
@@ -11560,10 +11626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 Marcar todo leído
               </button>
             }
-            <button type="button" class="w-6 h-6 flex items-center justify-center rounded-md text-clx-text-muted hover:bg-clx-surface-2"
-              aria-label="Cerrar" (click)="_close()">
-              <span clx-icon name="close" size="xs"></span>
-            </button>
+            <button clx-button type="button" variant="ghost" color="slate" shape="circle" size="xs"
+              icon="close" [iconOnly]="true" aria-label="Cerrar" (click)="_close()"></button>
           </div>
         </div>
 
@@ -11614,19 +11678,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               }
             }
           } @else {
-            <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
-              <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
-              <p class="text-sm font-medium text-clx-text-label">
-                {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
-              </p>
-            </div>
+            <clx-page-empty icon="notifications_off" class="py-10"
+              [heading]="_filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones'" />
           }
         </div>
 
         @if (_readCount() > 0) {
-          <div class="flex justify-end px-4 py-2.5 border-t border-clx-border-soft">
-            <button type="button" class="text-xs font-semibold text-clx-text-subtle hover:text-red-500"
-              (click)="deleteAllRead.emit()">
+          <div class="flex justify-end px-3 py-2.5 border-t border-clx-border-soft">
+            <button clx-button type="button" variant="ghost" color="red" size="xs"
+              icon="delete_sweep" (click)="deleteAllRead.emit()">
               Eliminar leídas
             </button>
           </div>
@@ -14030,78 +14090,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: ['clxColumn']
             }], headerCell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxHeaderCellDirective), { isSignal: true }] }], cell: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCellDirective), { isSignal: true }] }] } });
 
-class ClxPageEmptyComponent {
-    _themeSvc = inject(ClxThemeService);
-    icon = input('inbox', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Named "heading", not "title" — the latter shadows the native HTML title attribute (tooltip
-     *  on hover) when bound without brackets, e.g. `title="..."` instead of `[title]="..."`. */
-    heading = input('Sin resultados', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    ctaLabel = input('', ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
-    ctaIcon = input('add', ...(ngDevMode ? [{ debugName: "ctaIcon" }] : /* istanbul ignore next */ []));
-    ctaColor = input(undefined, ...(ngDevMode ? [{ debugName: "ctaColor" }] : /* istanbul ignore next */ []));
-    _ctaColor = computed(() => this.ctaColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_ctaColor" }] : /* istanbul ignore next */ []));
-    cta = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageEmptyComponent, isStandalone: true, selector: "clx-page-empty", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaIcon: { classPropertyName: "ctaIcon", publicName: "ctaIcon", isSignal: true, isRequired: false, transformFunction: null }, ctaColor: { classPropertyName: "ctaColor", publicName: "ctaColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cta: "cta" }, host: { classAttribute: "flex flex-col items-center justify-center w-full px-6 text-center text-sm" }, ngImport: i0, template: `
-    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
-      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
-    </div>
-
-    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ heading() }}</h1>
-
-    @if (description()) {
-      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
-    }
-
-    @if (ctaLabel()) {
-      <button
-        clx-button
-        type="button"
-        [color]="_ctaColor()"
-        variant="solid"
-        [icon]="ctaIcon()"
-        (click)="cta.emit()">
-        {{ ctaLabel() }}
-      </button>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageEmptyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-page-empty',
-                    standalone: true,
-                    imports: [ClxButtonComponent, ClxIconComponent],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col items-center justify-center w-full px-6 text-center text-sm' },
-                    template: `
-    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
-      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
-    </div>
-
-    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ heading() }}</h1>
-
-    @if (description()) {
-      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
-    }
-
-    @if (ctaLabel()) {
-      <button
-        clx-button
-        type="button"
-        [color]="_ctaColor()"
-        variant="solid"
-        [icon]="ctaIcon()"
-        (click)="cta.emit()">
-        {{ ctaLabel() }}
-      </button>
-    }
-  `,
-                }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaIcon", required: false }] }], ctaColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaColor", required: false }] }], cta: [{ type: i0.Output, args: ["cta"] }] } });
-
 class ClxTableComponent {
     _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────