codexly-ui 0.15.1 → 0.15.2

package/fesm2022/codexly-ui.mjs

@@ -16585,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 */ []));
@@ -16594,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()];
@@ -16636,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 });
 }
@@ -16681,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>
   `,
                 }]