codexly-ui 0.15.1 → 0.15.3

package/fesm2022/codexly-ui.mjs

@@ -16583,8 +16583,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  *  using column/row units, supports drag-to-reorder (via Angular CDK's CdkDropList/CdkDrag — no
  *  new dependency, @angular/cdk is already pulled in by ClxProfileComponent/ClxWidgetCardComponent's
  *  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). */
+ *  to (layoutChange) and save the resulting ClxGridItem[] (e.g. to rp_dashboard_layouts.layout).
+ *
+ *  Responsive: `columns` is the desktop column count; the grid itself halves it under 1024px and
+ *  collapses to a single column under 640px (both breakpoints measured off its own host width via
+ *  ResizeObserver, not the viewport — correct inside a narrow sidebar-pushed layout too). Below
+ *  640px, pointer-drag reorder/resize is replaced by an up/down reorder button pair per item —
+ *  CdkDrag's pointer events are unreliable with real fingers on a dense grid, and a 1-column layout
+ *  has nothing to resize width-wise anyway. */
 class ClxDashboardGridComponent {
+    _themeSvc = inject(ClxThemeService);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     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 */ []));
@@ -16593,8 +16602,48 @@ class ClxDashboardGridComponent {
     layoutChange = output();
     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 */ []));
+    _container = viewChild('container', ...(ngDevMode ? [{ debugName: "_container" }] : /* istanbul ignore next */ []));
+    _hostWidth = signal(1280, ...(ngDevMode ? [{ debugName: "_hostWidth" }] : /* istanbul ignore next */ []));
+    _resizeObserver;
+    /** Below 640px: single column, no drag/resize (reorder buttons instead). 640-1024px: half the
+     *  desktop column count (min 2). 1024px+: the full `columns()` count. */
+    _isCompact = computed(() => this._hostWidth() < 640, ...(ngDevMode ? [{ debugName: "_isCompact" }] : /* istanbul ignore next */ []));
+    _effectiveColumns = computed(() => {
+        const w = this._hostWidth();
+        if (w < 640)
+            return 1;
+        if (w < 1024)
+            return Math.max(2, Math.floor(this.columns() / 2));
+        return this.columns();
+    }, ...(ngDevMode ? [{ debugName: "_effectiveColumns" }] : /* istanbul ignore next */ []));
+    _gridCols = computed(() => `repeat(${this._effectiveColumns()}, 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;
+    constructor() {
+        effect((onCleanup) => {
+            const el = this._container()?.nativeElement;
+            if (!this._isBrowser || !el)
+                return;
+            this._hostWidth.set(el.clientWidth);
+            this._resizeObserver = new ResizeObserver(entries => {
+                const width = entries[0]?.contentRect.width;
+                if (width)
+                    this._hostWidth.set(width);
+            });
+            this._resizeObserver.observe(el);
+            onCleanup(() => this._resizeObserver?.disconnect());
+        });
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+    }
     _onDrop(event) {
         const next = [...this.items()];
         moveItemInArray(next, event.previousIndex, event.currentIndex);
@@ -16604,6 +16653,16 @@ class ClxDashboardGridComponent {
         // Reordering is handled by cdkDropListDropped above; this hook exists for future free-form
         // (x/y pixel) positioning if a consumer needs it — not required for a reorderable column grid.
     }
+    /** Compact-mode reorder (touch-friendly alternative to CdkDrag) — swap item at `index` with its
+     *  neighbor `delta` positions away (-1 = up/earlier, 1 = down/later). */
+    _moveBy(index, delta) {
+        const next = [...this.items()];
+        const target = index + delta;
+        if (target < 0 || target >= next.length)
+            return;
+        [next[index], next[target]] = [next[target], next[index]];
+        this.layoutChange.emit(next);
+    }
     _startResize(event, item) {
         event.preventDefault();
         event.stopPropagation();
@@ -16635,88 +16694,120 @@ class ClxDashboardGridComponent {
         window.addEventListener('pointerup', onUp);
     }
     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>
-      }
+    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 }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #container [class]="_containerClass()">
+      <div
+        cdkDropList
+        [cdkDropListDisabled]="!editable() || _isCompact()"
+        (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; let i = $index) {
+          <div
+            cdkDrag
+            [cdkDragDisabled]="!editable() || _isCompact()"
+            [cdkDragData]="item"
+            (cdkDragMoved)="_onDragMoved($event)"
+            class="relative min-w-0"
+            [class.cursor-grab]="editable() && !_isCompact()"
+            [style.grid-column]="_isCompact() ? 'span 1' : 'span ' + item.w"
+            [style.grid-row]="_isCompact() ? 'span 1' : 'span ' + item.h">
+
+            <ng-container
+              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+              [ngTemplateOutletContext]="{ $implicit: item }">
+            </ng-container>
+
+            @if (editable() && !_isCompact()) {
+              <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>
+            }
+
+            @if (editable() && _isCompact()) {
+              <div class="absolute top-2 right-2 z-10 flex flex-col rounded-lg overflow-hidden border border-clx-border bg-clx-surface shadow-sm">
+                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
+                  [disabled]="i === 0" (click)="_moveBy(i, -1)" aria-label="Mover arriba">
+                  <span clx-icon name="keyboard_arrow_up" size="sm"></span>
+                </button>
+                <div class="h-px bg-clx-border-soft"></div>
+                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
+                  [disabled]="i === items().length - 1" (click)="_moveBy(i, 1)" aria-label="Mover abajo">
+                  <span clx-icon name="keyboard_arrow_down" size="sm"></span>
+                </button>
+              </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 });
+  `, 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"] }, { 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: ClxDashboardGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-dashboard-grid',
                     standalone: true,
-                    imports: [NgTemplateOutlet, DragDropModule],
+                    imports: [NgTemplateOutlet, DragDropModule, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     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 #container [class]="_containerClass()">
+      <div
+        cdkDropList
+        [cdkDropListDisabled]="!editable() || _isCompact()"
+        (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; let i = $index) {
+          <div
+            cdkDrag
+            [cdkDragDisabled]="!editable() || _isCompact()"
+            [cdkDragData]="item"
+            (cdkDragMoved)="_onDragMoved($event)"
+            class="relative min-w-0"
+            [class.cursor-grab]="editable() && !_isCompact()"
+            [style.grid-column]="_isCompact() ? 'span 1' : 'span ' + item.w"
+            [style.grid-row]="_isCompact() ? 'span 1' : 'span ' + item.h">
+
+            <ng-container
+              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+              [ngTemplateOutletContext]="{ $implicit: item }">
+            </ng-container>
+
+            @if (editable() && !_isCompact()) {
+              <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>
+            }
+
+            @if (editable() && _isCompact()) {
+              <div class="absolute top-2 right-2 z-10 flex flex-col rounded-lg overflow-hidden border border-clx-border bg-clx-surface shadow-sm">
+                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
+                  [disabled]="i === 0" (click)="_moveBy(i, -1)" aria-label="Mover arriba">
+                  <span clx-icon name="keyboard_arrow_up" size="sm"></span>
+                </button>
+                <div class="h-px bg-clx-border-soft"></div>
+                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
+                  [disabled]="i === items().length - 1" (click)="_moveBy(i, 1)" aria-label="Mover abajo">
+                  <span clx-icon name="keyboard_arrow_down" size="sm"></span>
+                </button>
+              </div>
+            }
+          </div>
+        }
+      </div>
     </div>
   `,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], itemResize: [{ type: i0.Output, args: ["itemResize"] }], _itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxGridItemDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], itemResize: [{ type: i0.Output, args: ["itemResize"] }], _itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxGridItemDirective), { isSignal: true }] }], _container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 const PRODUCT_TAG_LABEL = {
     'new': 'Nuevo',