codexly-ui 0.15.0 → 0.15.2

package/fesm2022/codexly-ui.mjs

@@ -15975,6 +15975,13 @@ class ClxStatCardComponent {
         return CLX_COLOR_HEX[color] ?? CLX_COLOR_HEX.indigo;
     }, ...(ngDevMode ? [{ debugName: "_lineColor" }] : /* istanbul ignore next */ []));
     _gradId = computed(() => `spark-grad-${this.color()}`, ...(ngDevMode ? [{ debugName: "_gradId" }] : /* istanbul ignore next */ []));
+    /** A widget with no meaningful period-over-period comparison (e.g. a plain point-in-time count
+     *  like "pending commissions") passes trend: '' — hides the trend badge/row entirely instead of
+     *  rendering an empty pill with just an arrow icon and no text. */
+    _hasTrend = computed(() => {
+        const t = this.metric().trend;
+        return t !== '' && t !== null && t !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "_hasTrend" }] : /* istanbul ignore next */ []));
     _trendColor = computed(() => {
         const d = this.metric().trendDirection;
         return d === 'up' ? 'green' : d === 'down' ? 'red' : 'slate';
@@ -16052,14 +16059,16 @@ class ClxStatCardComponent {
         <span class="text-2xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
-        <span clx-badge
-              [color]="_trendColor()"
-              variant="light"
-              shape="pill"
-              class="self-start gap-1 mt-0.5">
-          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
-          {{ metric().trend }}
-        </span>
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="self-start gap-1 mt-0.5">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        }
       </div>
 
       <!-- Sparkline -->
@@ -16101,25 +16110,29 @@ class ClxStatCardComponent {
           }
         </div>
         <!-- Tendencia -->
-        <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
-          {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
-          <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
-          <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
-        </div>
+        @if (_hasTrend()) {
+          <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
+            {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
+            <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
+            <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
+          </div>
+        }
       </div>
     }
 
     @if (layout() === 'vertical') {
       <!-- Col izquierda: badge + valor + título -->
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
-        <span clx-badge
-              [color]="_trendColor()"
-              variant="light"
-              shape="pill"
-              class="self-start gap-1">
-          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
-          {{ metric().trend }}
-        </span>
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="self-start gap-1">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        }
         <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
       </div>
@@ -16155,14 +16168,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span class="text-2xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
-        <span clx-badge
-              [color]="_trendColor()"
-              variant="light"
-              shape="pill"
-              class="self-start gap-1 mt-0.5">
-          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
-          {{ metric().trend }}
-        </span>
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="self-start gap-1 mt-0.5">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        }
       </div>
 
       <!-- Sparkline -->
@@ -16204,25 +16219,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           }
         </div>
         <!-- Tendencia -->
-        <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
-          {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
-          <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
-          <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
-        </div>
+        @if (_hasTrend()) {
+          <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
+            {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
+            <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
+            <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
+          </div>
+        }
       </div>
     }
 
     @if (layout() === 'vertical') {
       <!-- Col izquierda: badge + valor + título -->
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
-        <span clx-badge
-              [color]="_trendColor()"
-              variant="light"
-              shape="pill"
-              class="self-start gap-1">
-          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
-          {{ metric().trend }}
-        </span>
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="self-start gap-1">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        }
         <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
       </div>
@@ -16566,6 +16585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  *  overlay usage) and resize-by-dragging a corner handle. Persistence is the caller's job: listen
  *  to (layoutChange) and save the resulting ClxGridItem[] (e.g. to rp_dashboard_layouts.layout). */
 class ClxDashboardGridComponent {
+    _themeSvc = inject(ClxThemeService);
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     rowHeight = input(92, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
@@ -16575,6 +16595,14 @@ class ClxDashboardGridComponent {
     itemResize = output();
     _itemTemplate = contentChild(ClxGridItemDirective, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
     _gridCols = computed(() => `repeat(${this.columns()}, minmax(0, 1fr))`, ...(ngDevMode ? [{ debugName: "_gridCols" }] : /* istanbul ignore next */ []));
+    /** Editing gets a visibly distinct "canvas" — dashed border + dotted background + surface-2 tint
+     *  — so the grid reads as an editable panel, not bare page background with cards floating on it. */
+    _containerClass = computed(() => {
+        const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
+        if (!this.editable())
+            return `${radius} p-1`;
+        return `${radius} p-4 border-2 border-dashed border-clx-border bg-clx-surface-2`;
+    }, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
     _resizing = null;
     _onDrop(event) {
         const next = [...this.items()];
@@ -16617,38 +16645,40 @@ class ClxDashboardGridComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDashboardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDashboardGridComponent, isStandalone: true, selector: "clx-dashboard-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", itemResize: "itemResize" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "_itemTemplate", first: true, predicate: ClxGridItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      cdkDropList
-      [cdkDropListDisabled]="!editable()"
-      (cdkDropListDropped)="_onDrop($event)"
-      class="grid w-full"
-      [style.grid-template-columns]="_gridCols()"
-      [style.grid-auto-rows.px]="rowHeight()"
-      [style.gap.px]="gap()">
-      @for (item of items(); track item.id) {
-        <div
-          cdkDrag
-          [cdkDragDisabled]="!editable()"
-          [cdkDragData]="item"
-          (cdkDragMoved)="_onDragMoved($event)"
-          class="relative min-w-0"
-          [class.cursor-grab]="editable()"
-          [style.grid-column]="'span ' + item.w"
-          [style.grid-row]="'span ' + item.h">
-
-          <ng-container
-            [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{ $implicit: item }">
-          </ng-container>
-
-          @if (editable()) {
-            <div
-              class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize"
-              (pointerdown)="_startResize($event, item)">
-            </div>
-          }
-        </div>
-      }
+    <div [class]="_containerClass()">
+      <div
+        cdkDropList
+        [cdkDropListDisabled]="!editable()"
+        (cdkDropListDropped)="_onDrop($event)"
+        class="grid w-full"
+        [style.grid-template-columns]="_gridCols()"
+        [style.grid-auto-rows.px]="rowHeight()"
+        [style.gap.px]="gap()">
+        @for (item of items(); track item.id) {
+          <div
+            cdkDrag
+            [cdkDragDisabled]="!editable()"
+            [cdkDragData]="item"
+            (cdkDragMoved)="_onDragMoved($event)"
+            class="relative min-w-0"
+            [class.cursor-grab]="editable()"
+            [style.grid-column]="'span ' + item.w"
+            [style.grid-row]="'span ' + item.h">
+
+            <ng-container
+              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+              [ngTemplateOutletContext]="{ $implicit: item }">
+            </ng-container>
+
+            @if (editable()) {
+              <div
+                class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize z-10"
+                (pointerdown)="_startResize($event, item)">
+              </div>
+            }
+          </div>
+        }
+      </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -16662,38 +16692,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block w-full' },
                     template: `
-    <div
-      cdkDropList
-      [cdkDropListDisabled]="!editable()"
-      (cdkDropListDropped)="_onDrop($event)"
-      class="grid w-full"
-      [style.grid-template-columns]="_gridCols()"
-      [style.grid-auto-rows.px]="rowHeight()"
-      [style.gap.px]="gap()">
-      @for (item of items(); track item.id) {
-        <div
-          cdkDrag
-          [cdkDragDisabled]="!editable()"
-          [cdkDragData]="item"
-          (cdkDragMoved)="_onDragMoved($event)"
-          class="relative min-w-0"
-          [class.cursor-grab]="editable()"
-          [style.grid-column]="'span ' + item.w"
-          [style.grid-row]="'span ' + item.h">
-
-          <ng-container
-            [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
-            [ngTemplateOutletContext]="{ $implicit: item }">
-          </ng-container>
-
-          @if (editable()) {
-            <div
-              class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize"
-              (pointerdown)="_startResize($event, item)">
-            </div>
-          }
-        </div>
-      }
+    <div [class]="_containerClass()">
+      <div
+        cdkDropList
+        [cdkDropListDisabled]="!editable()"
+        (cdkDropListDropped)="_onDrop($event)"
+        class="grid w-full"
+        [style.grid-template-columns]="_gridCols()"
+        [style.grid-auto-rows.px]="rowHeight()"
+        [style.gap.px]="gap()">
+        @for (item of items(); track item.id) {
+          <div
+            cdkDrag
+            [cdkDragDisabled]="!editable()"
+            [cdkDragData]="item"
+            (cdkDragMoved)="_onDragMoved($event)"
+            class="relative min-w-0"
+            [class.cursor-grab]="editable()"
+            [style.grid-column]="'span ' + item.w"
+            [style.grid-row]="'span ' + item.h">
+
+            <ng-container
+              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+              [ngTemplateOutletContext]="{ $implicit: item }">
+            </ng-container>
+
+            @if (editable()) {
+              <div
+                class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize z-10"
+                (pointerdown)="_startResize($event, item)">
+              </div>
+            }
+          </div>
+        }
+      </div>
     </div>
   `,
                 }]